Vue.jsでWebサービス開発 ⑫vue-social-sharingとvue-fontawesomeでシェアボタンを作る

目次

GitHub

今回の作業が終了した後のブランチはこちらです。

https://github.com/skliber/excursion-demo/tree/share

シェアボタンに必要なもの

シェアボタンを作るにはvue-social-sharingプラグインを使います。
アイコンにfontawesomeを使うためvue-fontawesomeも必要です。

vue-fontawesomeとvue-social-sharingの導入

まずは必要な2つをnpmで入れておきます。
fontawesomeは無料のブランドアイコンのみ使用します。以下のコマンドを全て実行しましょう。

  1. $ npm i --save @fortawesome/fontawesome-svg-core
  2. $ npm i --save @fortawesome/free-brands-svg-icons
  3. $ npm i --save @fortawesome/vue-fontawesome
  4. $ npm i --save vue-social-sharing

シェアボタンを作成

  1. src/main.jsに追記を行います。

    // import略
    // 以下4行を追記
    import { library } from '@fortawesome/fontawesome-svg-core'
    import { fab } from '@fortawesome/free-brands-svg-icons'
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
    import SocialSharing from 'vue-social-sharing'
    
    Vue.config.productionTip = false
    Vue.use(Element, { locale })
    // 以下3行を追記
    Vue.use(SocialSharing)
    library.add(fab)
    Vue.component('font-awesome-icon', FontAwesomeIcon)
    
    // 以下略
    
  2. src/App.vueを以下のように変更します。

  • template
    <template>
      <div id="app">
        <el-container>
          <el-header v-if="this.$route.path !== '/'">
            <ul class="main-nav">
              <li><img src="./assets/logo.png" id="nav-logo" @click="first"></li>
              <template v-if="this.$store.getters.userData.uid">
                <li class="hidden-sm-and-down" @click="moveArchive">保存一覧</li>
                <li class="hidden-sm-and-down" @click="doLogout">ログアウト</li>
                <el-menu :default-active="activeIndex" class="el-menu-demo hidden-md-and-up" mode="horizontal" @select="handleSelect">
                  <el-submenu index="1">
                    <template slot="title">Menu</template>
                    <el-menu-item index="1-1">保存一覧</el-menu-item>
                    <el-menu-item index="1-2">ログアウト</el-menu-item>
                  </el-submenu>
                </el-menu>
              </template>
            </ul>
          </el-header>
          <el-main id="main">
            <router-view/>
          </el-main>
          <el-footer>
            <Navigation />
            <social-sharing url="https://skliber.net/excursion/"
                              title="excursion | アイデアを発想するツール"
                              description="excursion | アイデアを発想するツール | 「アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない」 - ジェームス・W・ヤング"
                              quote="excursion | アイデアを発想するツール | 「アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない」 - ジェームス・W・ヤング"
                              hashtags=""
                              twitter-user=""
                              :networks="hatenaBookmark"
                              inline-template>
              <div class="social-links">
                <network network="twitter">
                  <font-awesome-icon :icon="['fab', 'twitter']" class="fa-3x" />
                </network>
                <network network="facebook">
                  <font-awesome-icon :icon="['fab', 'facebook']" class="fa-3x" />
                </network>
                <network network="googleplus">
                  <font-awesome-icon :icon="['fab', 'google-plus-square']" class="fa-3x" />
                </network>
                <network network="line">
                  <font-awesome-icon :icon="['fab', 'line']" class="fa-3x" />
                </network>
                <network network="hatena">
                  <img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" class="hatena-bookmark-button" />
                </network>
              </div>
            </social-sharing>
          </el-footer>
        </el-container>
      </div>
    </template>
    

    el-container & el-main &el-footer

    シェアボタンは下部に表示したいので、全体をel-containerに入れてel-mainとel-footerを作成しレイアウトを調整しました。

    social-sharing

    vue-social-sharingのコンポーネントです。属性ではシェアされたときの設定を行うことができます。内部に<network>を追加していくとシェア用のリンクが作れます。

    :networks=”hatenaBookmark”

    vue-social-sharingにははてなブックマークに対応していません。これはプラグインを拡張して自作のリンクを使うための記述です。

    network & font-awesome-icon

    <network>内にfontawesomのアイコンを表示することでシェアボタンとしています。:iconで設定する値が少し特殊に見えますが、fontawesome5の場合はこのように指定しないと表示されません。また、classでサイズを調整しています。

  • script data部分抜粋
    data () {
      return {
        isLogin: false,
        userData: {},
        activeIndex: '1',
        // 以下を追記
        hatenaBookmark: {
          'hatena': {
            'sharer': 'http://b.hatena.ne.jp/entry/s/skliber.net/excursion/',
            'type': 'popup'
          }
        }
      }
    },
    

    hatenaBookmark

    vue-social-sharing用の設定です。hatenaBookmarkはテンプレートの:networksで指定するためこれと一致させます。sharerでシェアリンクを指定し、typeでこのリンクをどのように開くか設定します。sharerはデプロイ予定のURLを自分でブックマークしてみて確認します。リンクはポップアップウィンドウで表示させています。

  • style 追記部分抜粋

    .hatena-bookmark-button {
      flex: left;
      cursor: pointer;
      width: 42px;
      height: 42px;
    }
    
    .social-links {
      margin-top: 20px;
    }
    
    .social-links svg {
        margin-right: 1rem;
        margin-bottom: 3px;
        cursor: pointer;
    }
    .fa-facebook, .fa-facebook-square {
        color: #3b5998
    }
    .fa-twitter, .fa-twitter-square {
        color: #00aced
    }
    .fa-google-plus, .fa-google-plus-square {
        color: #dd4b39
    }
    .fa-line {
        color: #1dcd00
    }
    

    .hatena-bookmark-button

    はてなブックマークのボタンはそのままだとfontawesomeのSVGアイコンとずれるので調整しています。

    .social-links

    ナビゲーションとの間を空けます。

    .social-links svg

    fontawesomeのアイコンの調整です。各アイコンのマージンを設定しはてブのボタンと横のラインを合わせます。

    .fa-facebook他

    各アイコンをそれぞれのブランドカラーに設定しています。

作業結果
src/App.vue GitHub

ログインボタンを調整

前項まででシェアボタンの作成できました。
fontawesomeを導入したのでログインボタンもついでに調整します。

  1. src/components/Home.vueを以下のように変更します。
  • template Googleログインボタン抜粋
    <el-col :span="24">
    <el-button @click="doGoogleLogin" class="social-login btn-google"><font-awesome-icon :icon="['fab', 'google-plus']" /><span class="word">Googleアカウントでログイン</span></el-button>
    </el-col>
    

font-awesome-icon

fontawesomeのアイコンを左に導入します。

  • style 追記変更部分抜粋
    .social-login .word {
    position: relative;
    bottom: 3px;
    font-size: 1rem;
    }
    .social-login svg {
    margin-right: 10px;
    font-size: 1.5rem;
    }
    .social-login:hover svg {
    color: white;
    }
    

.social-login .word

アイコンと横の位置を合わせるため、positionをrelativeにしてbottomを追加します。

.social-login svg

文字との間隔とサイズの調整です。

.social-login:hover svg

そのままではホバーした時にアイコンが背景と同じ色に変化してしまうので、白く変化するようにします。

作業結果
src/components/Home.vue GitHub

動作確認

お疲れ様でした。これでシェアボタンが作成できました。
$ npm run devを実行してhttp://localhost:8080/を開いてみましょう。
画面下部にシェアボタンが表示されているので、クリックしてそれぞれの動作を確認できればOKです。

参考

Vue.js - Fontawesome
fontawesome error “Could not find one or more icon”

next

シェアボタンを作成しました。
次回は利用規約やプライバシーポリシーを作り、細かい調整を行います。