はじめに 今回はNuxt.jsの勉強の一環として、適当なウェブページを作成したので、そのページをsurgeにデプロイした話についてまとめる。 完成ページ nuxt-example-page surgeとは 基本無料で使えるデプロイ先になります。(SSLの発行や多数のプロジェクトをア…

はじめに 今回は画像のスライド機能を作ってみた話についてまとめていく。 画像をスライドした 文字列のスライドを参考にした 色々調べてみたら文字列で実装している方がいたので、このコードを動かしてみることにしました。 JS Bin - Collaborative JavaScr…

はじめに 今回はボタンを押したら任意の場所までスクロールしてくれる機能をvue-scrolltoを用いて実装した話についてまとめていく。 環境設計 vue-scrolltoとは v-scroll-toディレクティブを拡張してくれるプラグインのことです。 公式ページ vue-scrollto -…

はじめに 今回はNuxt.jsの基礎勉強としてBootStrapをNuxt.jsに組み込んでみた話についてまとめる。 初期設定 create-nuxt-appコマンドでアプリを作成した時の質問にてBootStrapの使用について聞かれるのでBootStrapを選んで進める。 $ npx create-nuxt-app …

はじめに 今回はNuxt.jsの勉強としてESlintを用いたコードフォーマットチェックと自動調整を行なったことについてまとめる。 ESlintのインストール 開発ツール - NuxtJSの公式に沿ってESlintのみをインストールすることにした。 $ npm install --save-dev ba…

はじめに 今回は前回までに立てたVirualBoxのLAMP環境にてWordPressを立ち上げてみた件についてまとめていく。 wget コマンドをyumからインストール wget を用いてWordPressをインストールするので、wgetをインストールする。 $ yum install wget WordPress…

はじめに 今回はLAMP環境の構築練習として前回作ったVirtualBox内のローカル環境を利用したのでそれについてまとめていく。 LAMP環境とは 以下の環境で構築されているwebサービスの事 Linux Apache MySQL(MariaDB) PHP(Python. Perl) yumのupdate $ sudo yum…

はじめに 今回はLAMP環境を作成する練習としてVirtualBoxを用いてCentOS7を動かすための環境設定を行なった。 CentOS7のイメージをインストール CentOS7系のダウンロードページからイメージをダウンロードします。 VMを作成 以下の手順でVMを作成します。 VM…

はじめに 今回はMySQLを用いたデータの基本操作について学んだのでまとめていく。 MySQL操作について データベースを確認 mysqlにログイン後にshowコマンドで見ることができる。 mysql> show databases; データベースの作成と削除 createでデータベースを作…

はじめに 今回はMySQLを久々に使用した際にサーバー立ち上がらなかったのでトラブルシューティングした記録を記述していく。 .pidを作る 私もpidファイルがないとのことだったので以下の記事同様にtouchでpidファイルを作ったのですが動かなかった。 MySQL起…

はじめに 今回はgitのリモートリポジトリの扱いについてまとめてみました。 GitHubの運用 git push git pushを用いることでリモートリポジトリにローカルの内容をアップロードすることができる。 $ git remote add origin github-url $ git push origin bran…

はじめに gitを用いてソースをウェブに公開しつつ管理をしていて、commitの変更の仕方はどうしたら良いのかと困ったことがあったので、gitの扱い方を改めて勉強してみました。 git 今回は勉強用に以下のファイル構造のファイルを用意した . └── git-practice…

はじめに Nuxt.jsの基礎部分の勉強を一通り区切りがついたので今回も纏めてみました。 Vue.jsの基礎を学んでみて - KKZooの備忘録 参考にしたコンテンツやサイト 私が参考にしたサイトやコンテンツは基本的に以下の２つです。 Vue.jsの公式 Nuxt.jsの公式 Ud…

はじめに 今回は前回の記事の続きを記述していく。 page側でfirebaseにあるデータを取得して表示 idをキーに指定して、v-forを用いてtodosを展開することで表示することができる <ul> <li v-for="todo in todos" :key="todo.id"> <span v-if="todo.created"> (略) <span v-bind:class="{ done: todo.done }"> {{ todo.name }}, {{ todo.created.toDate() | dateFilter}} </span> (略) </span> </li></ul>…

はじめに 今回はグーグルが運営しているデータベースであるfirebaseとNuxt.jsのアプリケーションを連携させることを勉強した。 長くなると思うので記事を2つに分けて投稿します。 firebaseの環境設定 firebaseでプロジェクトを作成 firebaseでアカウント登録…

はじめに 今回はカウンターアプリを作ることでvuexの知識を整理をした。 github.com カウンターアプリの実装 storeの作成 モジュールモードを用いてストアを設計 stateにはデータの初期状態を記述 mutationsにデータの操作を記述 actionsにmutationの読み込…

はじめに 今回はvuexを用いたデータの扱いについて学習したので纏めておく。 前回同様に以下のリポジトリに扱ったソースコードを公開します。 github.com vuexとは vue.jsを用いたアプリケーションで扱うデータの状態管理を行うツールのことです。 Vuex とは…

はじめに 前回Nuxt.jsを勉強した際にはファイル構造や知識の追加だけだったので今回は実際に動かしてみたので行なったことについて纏めていく。 今回勉強した内容は以下のリポジトリにあげております。 github.com componentsとpageについて この二つがMVCの…

はじめに 前回の記事でAPIの変更を行なったRailsアプリがHerokuではerrorを出していたので、それについて問題解決をしてRailsアプリを動く状態にした。 daily-weather-app.herokuapp.com status=500 errorについて ローカルではしっかり動いたrailsアプリがH…

はじめに 今回はRailsで作った天気アプリで使っていたlivedoor さんの天気APIがサービス終了していたので、APIの取得先をopenweathermapさんに変更することにした。 github.com openweathermapの利用登録 openweathermapさんにてアカウント登録をする メール…

はじめに 今回はVue.jsのステップアップとしてNuxt.jsの勉強を行なったので、それについてまとめていこうと思う。 npmのinstall npmが入ってなかったのでnpmの環境設定をした。(詳しくは以下の記事に記載しました) - npxコマンドを使うためにNode.jsをインス…

はじめに 今回はNuxt.jsのプロジェクトを生成してくれるツールcreate-nuxt-appを使うために用いるnpxコマンドを実行できる環境を作ったのでまとめていこうと思う。 Homebrewでnodebrewをインストールした 私の場合、npxコマンドがなかったためnpxコマンドをH…

はじめに 今回は前回学んだ知識を利用してBootstrap4を用いてサイトレイアウトを作ってみた。 また、今回のコードはGitHubにてあげているのでフルでみたい場合はそちらをご覧ください。 今回のプレビューはこちらです。 ハンバーガーボタンの色を変更 ナビバ…

はじめに 以前Rails Tutorialを勉強していたときに写経で触ったことがあったBootstrap4について改めて勉強したのでまとめていこうと思う。 CDNによる読み込みとBootstrap4の試運転 CDNによる読み込み 公式ドキュメント-日本語版-にも記述されているが、 Boot…

はじめに 今回はVue.jsの基礎的な勉強を一通り区切りがついたので、そのまとめを記述していきます。 参考にしたサイトやコンテンツ 私が参考にしたサイトやコンテンツは基本的に以下の２つです。 Vue.jsの公式 Udemy/講師: 中村祐太さんのVue JS入門決定版 …

はじめに 今回はフォーム入力について勉強したので、その成果を記述していく。 See the Pen NWNWoxP by KKZoo (@kkzoo) on CodePen. テキストエリアの記法について テキストエリアは多量の文字を扱うときに使う。記法としてはマスタッシュ構文を用いるのでは…

はじめに 今回はVue.jsの勉強の最初の方で軽く触れた、コンポーネントについてもう少し踏み込んで勉強したのでその成果を記録する。 ソースコードの全体 See the Pen コンポーネント by KKZoo (@kkzoo) on CodePen. グローバルコンポーネントとローカルコン…

はじめに 今回はv-onを用いたイベントハンドラーの処理について勉強した。 See the Pen イベントハンドラ by KKZoo (@kkzoo) on CodePen. 修飾子について 修飾子を用いることで様々な制限やキー入力を行なった際の処理を追加することができる様になる。 once…

はじめに 今回はv-bindを用いたCSSの当て方について勉強した。 ソースコードのフルバージョン See the Pen qBZBaoP by KKZoo (@kkzoo) on CodePen. class記法について 今回はclass記法を用いて以下のcssを読み込んで行こうと思う。 .large{ font-size: 30px;…

はじめに 今回はcomputedとmethodsの違いについてとaxiosを用いたAPIの利用をQiitaのAPIを用いて勉強した。 算出プロパティ 全体像 See the Pen 算出プロパティ by KKZoo (@kkzoo) on CodePen. 算出プロパティの主な特徴 算出プロパティを用いることで複数回…