Bootstrap4のNavbarをモバイル対応

ポートフォリオサイトのはNavbarにモバイル対応をした時に
意外と手こずったので備忘録として残します。

Shuichi's portfolio

モバイル画面で画面が崩れる場合にItemをドロップダウン表示するボタンを追加しました。

.navbar-toggler-icon
　　アイコン表示
.data-target
　 ドロップダウン表示の対象
.data-toggle="collapse" 　　　
　画面崩れをtriggerに表示/非表示の切り替え

  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <router-link class="nav-item nav-link navbar-brand" to="/">portfolio</router-link>

　<!-- ボタン追加  -->
    <button class="navbar-toggler-icon navbar-toggler" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent"></button>

　<!-- Item -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <div class="navbar-nav">
        <router-link class="nav-item nav-link" to="/">Home</router-link>
        <router-link class="nav-item nav-link" to="/about">About</router-link>
        <router-link class="nav-item nav-link" to="/works">Works</router-link>
        <router-link class="nav-item nav-link" to="/contact">Contact</router-link>
      </div>
    </div>
  </nav>

モバイル画面表示

Google Formでお問い合わせページを作成

今日はポートフォリオサイトのうち未完成だったお問い合わせページを作成していました。

https://myportfolioproject-a67bf.firebaseapp.com/contact

これで一応ひととおり作成しなんとか形になりました。
ただしSEOの施策がまだまだなので随時対応するつもりです。

今後やりたいこと

1. ポートフォリオサイトのSEO施策
2. サイト制作にあたっての苦労したこと、ハマったところなどを紹介
3. 新しい作品を制作

ポートフォリオサイトをFirebaseで公開

Vue CLIを開発したポートフォリオサイトですが
問い合わせページを除き一通り作成しました。

これまで作成したページにつきましてFirebaseで公開しました。
Shuichi's portfolio

まだ問い合わせページができていないので
これから作成して更新します。

技術的な問題点がありましたら
ご指摘いただけると幸いです。

次回

問い合わせページを仕上げる

Vue CLI3のプロジェクトをFirebaseで公開するまでにやったこと

Vue CLIを開発したプロジェクトをFirebaseで公開するために以下のことを行いました。

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

手順は難しいものでなく
公式サイトで紹介されている手順通りにやれば大丈夫でした。

やったこと

Firebase のプロジェクトを作成する。

1. Firebaseの公式サイトにGoogleアカウントでログインする。
2. Firebaseのコンソールでプロジェクトを新規作成する。

https://console.firebase.google.com/

Firebase CLIをインストールする

npm install -g firebase-tools

Firebase CLIからFirebaseにログイン

firebase login
// chromeが立ち上がる

Vue.jsのプロジェクトディレクトリでfirebase initを実行

cd my-project
firebase init

firebase initで色々指定を求められましたがVue CLIの公式サイトを参考に以下を選択しました

• 最初のラジオボタンみたいな選択ではhostingを選択
• 公開ディレクトリをdistを指定（デフォルトはpublic)
• プロジェクトは作成したものを指定

firebase.jsonを編集

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Vueプロジェクトをビルド

npm run build

Firebaseのプロジェクトにデプロイ

firebase deploy --only hosting

コマンド実行結果に表示されるURLをアクセスしたら
ローカル環境と同じ画面を表示できました。

参考

VueCLIの公式サイト
cli.vuejs.org

vue init コマンド実行時の指定や
firebase.jsonの内容を参考にしました。

vue-router公式サイト
router.vuejs.org

vue routerがhistoryモードでのFirebaseの設定を確認

次回

残りの画面を仕上げる

Vue CLI3のプロジェクトにportfolioのページを作る

前回の続きです。

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

簡単ですが
ポートフォリオサイトをAboutページを作成してみました。

components/About.vue

<template>
  <div class="about">
    <h1 class="title">自己紹介</h1>
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <img src="../assets/about.jpg" width="300px" alt="">
        </div>
        <div class="col-sm-6">
          <dl>
            <dt>名前</dt>
            <dd>{{ name }}</dd>
            <dt>住まい</dt>
            <dd>{{ address }}</dd>
            <dt>スキル</dt>
            <dd>{{ skill }}</dd>
            <dt>SNS</dt>
            <dd>
              <ul>
                <li v-for='item in sns'>
                  {{ item.term}}: <a :href=item.href>{{ item.description }}</a>
                </li>
              </ul>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: 'Name',
      address: 'Address',
      skill: 'Skill',
      sns:  [
             {term: 'email', href: 'mailto:xxx@gmail.com', description: 'xxx'},
             {term: 'twitter', href: 'https://www.twitter.com/yyy', description: 'yyy'},
             {term: 'GitHub', href: 'https://www.github.com/zzz', description: 'zzz'}
            ]
    }
  }
}
</script>

イメージ

参考
以下を参考にしました

データバインディング
https://v1-jp.vuejs.org/guide/syntax.html
https://vue-loader-v14.vuejs.org/ja/start/spec.html

v-for
https://jp.vuejs.org/v2/guide/list.html

グリッドシステム
https://getbootstrap.com/docs/4.1/layout/grid/

次回

firebaseで公開してみる

Vue CLI3のプロジェクトにBootstrapのJumbotronのページを作る

前回の続きです。

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

現在ポートフォリオサイトを制作中です。

そのトップページを見栄え良く見せるために
BootstrapのJumbtronを使ってみました。

components/Home.vue

<template>
  <div class="jumbotron jumbotron-fluid bg-info">
    <div class="container">
      <h1 class="display-4">Welcome to My portfolio</h1>
      <p class="lead">This site is made with Vue.js, Bootstrap.</p>
    </div>
  </div>
</template>

イメージ

参考
Bootstrapの公式サイトを参考にしました。
getbootstrap.com

次回

どれかの画面を作成。

Vue CLI3のプロジェクトにBootstrapのNavbarを作成する

前回の続きです。

hiramatch.hatenablog.com

これからVue.jsをやってみたい人の
学習の手助けになれば幸いです。

現在ポートフォリオサイトを制作中です。
これらの画面上部に表示するナビゲーションバーを作成しました。
スタイルはBootstrapを利用しました。
左の文言にはトップのリンクを貼りました。

ナビゲーションバー

components/Navbar.vue(新規作成)

<template>
  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <router-link class="nav-item nav-link navbar-brand" to="/">portfolio</router-link>
    <div class="collapse navbar-collapse justify-content-end">
      <div class="navbar-nav">
        <router-link class="nav-item nav-link" to="/">Home</router-link>
        <router-link class="nav-item nav-link" to="/about">About</router-link>
        <router-link class="nav-item nav-link" to="/works">Works</router-link>
        <router-link class="nav-item nav-link" to="/contact">Contact</router-link>
      </div>
    </div>
  </nav>
</template>

App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <router-view/>
  </div>
</template>

<script>
  import Navbar from '@/components/Navbar.vue'

  export default {
    components: {
      Navbar
    }
  }
</script>

イメージ

参考
Bootstrapの公式を参考にしました。
getbootstrap.com

次回

どれかの画面を作成。