サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » vue » nuxt.jsとbulmaでハンバーガーメニュー
トレース:
vue:nuxt.jsとbulmaでハンバーガーメニュー


差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		前のリビジョン
vue:nuxt.jsとbulmaでハンバーガーメニュー [2018/12/02] – 作成 adash333vue:nuxt.jsとbulmaでハンバーガーメニュー [2019/01/01] (現在) – [出来上がったサイトとソースコード] adash333
行 5: 行 5:
 パソコンで見るときは、メニューが左右に並んでいて、スマホで見ると、メニューが折りたたまれて、ハンバーガーのような横線３つのボタンなどになる、アレが、「レスポンシブデザイン」の代表例と言えると思います。 パソコンで見るときは、メニューが左右に並んでいて、スマホで見ると、メニューが折りたたまれて、ハンバーガーのような横線３つのボタンなどになる、アレが、「レスポンシブデザイン」の代表例と言えると思います。
  
-今回は、[[https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d|外部リンク]]+今回は、[[https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d|Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(@isamusuzuki 2018年05月03日に更新)]]をほぼ写経するかたちで、 
 + 
 +<code> 
 +パソコンでサイトを見ると、ナビゲーションバー（画面の一番上）に、メニューが横並びに表示 
 +スマホででサイトを見ると、画面右上側にハンバーガーメニューを表示して、クリックするとメニューが縦に表示 
 +</code> 
 + 
 +されるようなサイトを作り、GitHub経由でNetlifyにデプロイ（アップロード）して、WEBサイトを公開します。 
  
-前回の写経元サイト：https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d  
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 17: 行 24:
 npm 6.4.1 npm 6.4.1
 @vue/cli 3.2.1 @vue/cli 3.2.1
-<code>+</code>
  
 ===== Nuxt.jsアプリ（Bulma）の作成 ===== ===== Nuxt.jsアプリ（Bulma）の作成 =====
 C:/vue/ フォルダに、Nuxt-Bulma-Hamburger2　アプリを作成する。 C:/vue/ フォルダに、Nuxt-Bulma-Hamburger2　アプリを作成する。
 +
 +C:/vue/ フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力
  
 <code> <code>
行 27: 行 36:
 //rendering modeはSingle Page Appを選択 //rendering modeはSingle Page Appを選択
 </code> </code>
-{{:z_blog:2018:pasted:20181202-170231.png}}+ 
 +{{:vue:pasted:20181202-233931.png}}
  
 <code> <code>
行 33: 行 43:
 npm install npm install
 npm run dev npm run dev
 +//下の方に出てくる、http://localhost:3000 を、Ctrlを押しながらクリック
 </code> </code>
  
 +{{:vue:pasted:20181202-234402.png}}
 +
 +===== Nuxt.jsアプリ作成後のファイル構造 =====
 +Nuxtアプリ新規作成後のファイル構造は、以下のようになっている。
 +
 +今回は、pages, components, layouts, storeの4つのフォルダの中身を編集していく。
 +
 +{{:vue:pasted:20181202-235341.png}}
 +
 +===== AboutページとContactページの作成 =====
 +pages/about.vue　（新規作成）
 +
 +{{:vue:pasted:20181203-000610.png}}
 +
 +pages/about.vue を新規作成すると、自動でルーティングが設定されて、localhost:3000/about に表示されます。
 +
 +class="hero is-primary is-bold などは、CSSフレームワーク「Bulma」の表記方法です。\\
 +参考：https://bulma.io/documentation/overview/colors/
 +
 +同様に、Contactページも作成する。
 +
 +pages/contact.vue　（新規作成） 
 +{{:vue:pasted:20181203-000803.png}}
 +
 +===== GitHubに登録 =====
 +https://github.com/にログインして、Nuxt-Bulma-Hamburger2という名前で、新規リポジトリを作成。
 +
 +{{:vue:pasted:20181203-001308.png}}
 +
 +上記の記載の一部にしたがって、VisualStudioCodeのコマンドプロンプトで、以下を入力します。<wrap hi>git remote add ...</wrap> のところは、それぞれのGitのアドレスを入力してください。
 +
 +（以前、シークレットキーを登録したり、ログインしたりした記憶があるが、やり方は忘れてしまいました。。。）
 +
 +<code>
 +git add .
 +git commit -m "make about and contact page"
 +//以下のgitのアドレスは、それぞれのものを入力してください
 +git remote add origin https://github.com/adash333/Nuxt-Bulma-Hamburger2.git
 +git push -u origin master
 +</code>
 +
 +{{:vue:pasted:20181203-001513.png}}
 +
 +ここまでのソースコード
 +
 +https://github.com/adash333/Nuxt-Bulma-Hamburger2/tree/72d7c91a751c80f60c2e3465ca9e3189f1f6c0d3
 +
 +===== ナビゲーションバーのComponentを作成 =====
 +Bulmaフレームワークを利用して、レスポンシブなナビゲーションバーを作成する。
 +
 +コンポーネントは、名前の通り、components/xxx.vueというような名前で、components/フォルダに作成する。
 +
 +components/Navbar.vue　（新規作成） 
 +{{:vue:pasted:20181203-002954.png}}
 +
 +参考：https://bulma.io/documentation/components/navbar/
 +
 +Navbarコンポーネントを、レイアウトファイルに取り付ける。
 +
 +具体的には、 layouts/default.vue を以下のように変更する。
 +
 +(変更前)
 +{{:vue:pasted:20181203-003048.png}}
 +
 +(変更後)
 +{{:vue:pasted:20181203-003800.png}}
 +
 +ブラウザの横幅を1023px以上に広げると以下のような感じになる。\\
 +（Navbar.vueのトップ　を　HOME　に変更した。）
 +
 +{{:vue:pasted:20181203-003930.png}}
 +
 +ブラウザの横幅（px, pixel）に応じて、ハンバーガーメニューが表示されたり、されなかったりするBulmaの仕様を利用しています。
 +
 +https://bulma.io/documentation/components/navbar/
 +{{:vue:pasted:20181203-004447.png}}
 +
 +Bulmaのtouch deviceとは、横幅が1023px以下とのことだそうです。
 +
 +もうちょっと横幅が小さくなってからハンバーガーメニュー出してほしいのですが、やり方は分かりませんでした。
 +
 +https://bulma.io/documentation/overview/responsiveness/
 +{{:vue:pasted:20181203-004335.png}}
 +
 +ここまでのソースコード（変更点）：
 +https://github.com/adash333/Nuxt-Bulma-Hamburger2/commit/87ad1cfd1126d09cb0d8a6590ada0fa9badc14a9
 +
 +===== ハンバーガーメニューをトグル（クリックするとメニューを表示）するようにする =====
 +
 +components/Navbar.vue
 +
 +<div class="navbar-burger">に、<wrap hi>@click="toggleMenu"</wrap>を追加して、クリックしたらメニューが出てくる（toggle）するようにtoggleMenu関数を定義。
 +
 +<div class="navbar-burger">と、<div class="navbar-menu">に、<wrap hi>:class="{'is-active': isMenuActive}"</wrap>を追加。
 +
 +これで、ブラウザの横幅が1023px以下のときにハンバーガーメニューが出て、それをクリックすると、メニューが表示されるようになる。
 +
 +{{:vue:pasted:20181203-004903.png}}
 +
 +{{:vue:pasted:20181203-005056.png}}
 +
 +しかし、この時点では、メニューの中のリンク先をクリックしても、トグルされたメニューが開いたままになってしまって閉じてくれない。
 +
 +そこで、Vuexという状態管理システムを用いて、リンク先をクリックすると、自動的にトグルが閉じるようにする。
 +
 +ここまでのソースコード（変更点）：https://github.com/adash333/Nuxt-Bulma-Hamburger2/commit/7faf1f2870f9e35a1ecd65025a38f9fe4efb2eb7
 +
 +===== Vuexストアを設定してトグルONとOFFをstoreに定義 =====
 +
 +Vuexシステムを利用するために、store/フォルダ下に、新たにindex.jsを作成し、以下のように記載する。
 +
 +store/index.js　（新規作成）
 +{{:vue:pasted:20181203-005621.png}}
 +
 +storeに、isMenuActive (True or False)の状態を定義しておいて、
 +
 +  -ハンバーガーメニューをクリックしたらON、OFF
 +  -リンクをクリックしてページ遷移したらOFF
 +となるようにしておきます。
 +
 +components/Navbar.vue
 +
 +<wrap hi><div class="navbar-burger"></wrap>を、以下のように変更
 +<code>
 +//変更前
 +@click="toggleMenu" :class="{'is-active': isMenuActive}"
 +//変更後
 +@click="$store.commit('toggleMenu')" :class="{'is-active': $store.state.isMenuActive}"
 +</code>
 +
 +<wrap hi><div class="navbar-menu"></wrap>を、以下のように変更
 +<code>
 +//変更前
 +:class="{'is-active': isMenuActive}"
 +//変更後
 +:class="{'is-active': $store.state.isMenuActive}"
 +</code>
 +
 +また、Navbar.vueの<script></script>の中身は全て削除する。
 +{{:vue:pasted:20181203-010612.png}}
 +
 +===== Vuexについて =====
 +状態管理システムVuexの構造についての絵を、以下に貼り付けておきます。
 +
 +https://vuex.vuejs.org/ja/
 +{{:vue:pasted:20181203-005913.png}}
 +
 +データの流れが、Vue Components => Actions => Mutations => State => Vue Components　というように一方向らしいです。。。
 +
 +大事なことは、<wrap hi>状態をStateに定義</wrap>しておき、MutationによってのみStateは変更される、ということらしいです。。。
 +
 +<nuxt-link>経由で特定のページに移動したときのNuxt.jsアプリの動作として、<wrap hi>fetch()メソッドを呼び出す。</wrap>というものがあるとのことなので、indexページ、aboutページ、contactページの<script>のところに、以下のコードを追加します。
 +
 +<code>
 +<script>
 +export default {
 +  fetch ({store}) {
 +    store.commit('resetMenu')
 +  }
 +}
 +</script>
 +</code>
 +
 +stateとかstoreとか言葉がたくさん出てきて間違えやすいので、タイプミスに注意です。
 +
 +pages/index.vue (変更後)
 +
 +一度、ターミナル画面でCtrl+Cでサーバを停止し、もう一度、npm run devを入力。
 +
 +{{:vue:pasted:20181203-010745.png}}
 +
 +ちゃんとうまくいった。
 +
 +pages/about.vue (変更後) 
 +{{:vue:pasted:20181203-010847.png}}
 +
 +pages/contact.vue (変更後) 
 +{{:vue:pasted:20181203-010935.png}}
 +
 +他のページへ移動しても、ちゃんとハンバーガーメニューは閉じてくれた。
 +
 +ここまでのソースコード（変更点）：https://github.com/adash333/Nuxt-Bulma-Hamburger2/commit/182c2f27a8980bb12657e5022f04b2cc0338e0ae
 +
 +===== NuxtサイトをNetlifyにデプロイ =====
 +公式サイトの通りに、NetlifyからGitHub経由でデプロイする。
 +
 +https://ja.nuxtjs.org/faq/netlify-deployment/
 +{{:vue:pasted:20181203-011209.png}}
 +
 +Netlifyでの画面は以下のようになる。
 +{{:vue:pasted:20181203-011533.png}}
 +
 +===== Nuxt.jsに関するリンク =====
 +https://luftgarden.work/tut-nuxt-dog-part1/
 + 2018年5月3日
 +Nuxt.js で簡単な画像一覧アプリを作成する – Part.1
 +
 +===== 出来上がったサイトとソースコード =====
 +
 +出来上がったサイト
 +
 +https://fervent-bardeen-1c8ad6.netlify.com/
 +
 +{{:vue:pasted:20181203-011504.png}}
 +
 +幅を狭くすると、以下のようにハンバーガーメニューが出て、クリックするとリンク先が表示される。
 +
 +{{:vue:pasted:20181203-012026.png}}
 +
 +ソースコード
 +
 +https://github.com/adash333/Nuxt-Bulma-Hamburger2
 +
 +===== Vuexについて理解するためのお勧めの本 =====
 +
 +Vuex、正直難しいです。昔、私はReduxは挫折しました。しかし、以下の本を最初から読んでいくと、なんとなく、Vuexが少しわかった気にはなれます。
 +
 +Vue.jsのコードを理解するためにも、以下の本は非常におすすめです。@vue/cli 3対応です。
  
-===== 前回の写経元サイト =====+<html> 
 +<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07J6FP6NQ&linkId=3eae8e6d0a6a2c6ef99ae93d78979e89"></iframe> 
 +</html> 
 +===== 写経元サイト =====
 https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d


vue/nuxt.jsとbulmaでハンバーガーメニュー.1543753178.txt.gz · 最終更新: 2018/12/02 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki