ブログ構築 9. Nuxt.jsブログカスタマイズ #01
2019年10月12日に更新

Twitterシェアボタン、フォローボタンの作り方【Nuxt.js Universalモード編】

この記事で作るもの

この記事ではNuxt.jsで構築したサイトに、Twitterのシェアボタンとフォローボタンを作っていきます。

完成イメージは以下の通りです。

1. Twitterシェアボタン完成イメージ

2019-09-05 07-57-43

クリックすると、↓新規ウィンドウで開きます。

2019-09-05 07-44-46

2. Twitterフォローボタンの完成イメージ

2019-09-05 08-03-41

クリックすると、↓新規ウィンドウで開きます。

2019-09-05 07-45-58

作ろうと思った経緯

Twitterデベロッパーツールからシェアボタンとフォローボタンが作れます。

単純なHTMLの場合は、ここで生成されるコードをコピペしたら良いのですが、Nuxt.jsの場合scriptタグがエラーを吐いて上手く機能しませんでした。

情報を探すと、Nuxt.jsで新規タブを開いてシェアする方法はありましたが、デベロッパーツールと同じ、新規ウィンドウからシェアする方法はありませんでした。

新規タブだとせっかく訪れたユーザーを逃すことがあるので、今回新規ウィンドウで作ることにしました。

Componentを作成する

まずは2つのComponentファイルを作成します。

componentsディレクトリにuiディレクトリを作成して、その中にshareBtns.vuefollowBtns.vueを作成しましょう。

Nuxtプロジェクトのルートディレクトリで、下記コマンドを実行して下さい。

$ mkdir components/ui && touch components/ui/shareBtns.vue && touch components/ui/followBtns.vue

このような構成になります。

app
 L components
   L ui                 // 作成
     L followBtns.vue 	// 作成
     L shareBtns.vue    // 作成

componentファイルを呼び出す

作成した2つのcomponentファイルを呼び出します。

ここでは呼び出し元ページを、ブログ記事を表示するpages/posts/_slug.vueとしていますが、ご自身の設置したいページから呼び出して下さい。

pages/posts/_slug.vue(呼び出し元)
<template>
  <!-- 追記 -->
  <client-only>
    <share-btns :page-title="currentPost.fields.title" />
    <follow-btns />
  </client-only>
  <!-- 追記終了 -->
</template>

<script>
import shareBtns from '~/components/ui/shareBtns'  	 // 追記
import followBtns from '~/components/ui/followBtns'  // 追記

export default {
  // 追記
  components: {
    shareBtns, followBtns
  },
  ...
}
</script>
  • <share-btns :pageTitle="currentPost.fields.title" />

    pageTitleには、記事のタイトルを渡しています。

(コラム)Universalモードでjavascriptのwindowやdocumentを使うにはclient-only

Nuxt.jsのバージョンが v2.9.0 未満の場合、<client-only><no-ssr> に読み替えてください。

ボタンクリックで新規ウィンドウを開くには、javascriptのwindow.open()を使います。

しかし、NuxtのUniversalモードでは、javascriptのwindowdocumentの命令文をそのまま使うと構文エラーになります。

何故か

この命令文は、ブラウザ側で実行する専用のものです。

SSR(サーバーサイドレタリング)時には、実行するブラウザがありませんので実行結果がundefinedとなるためです。

そこで

このComponentファイルはSSRしなくて良いよ、と指定する<client-only>タグで囲むことで構文エラーを回避します。

なお、この<client-only>タグはComponent単位でしか囲むことができません。

コンポーネント - Nuxt.js

(コラム終わり)

さて、続いてshareBtns.vueを編集しましょう。

components/shareBtns.vue
<template>
  <div>
    shareBtns.vue
  </div>
</template>

<script>
export default {
  props: {
    pageTitle: {
      type: String,
      default: process.env.SITE_NAME
    }
  }
}
</script>
  • default: process.env.SITE_NAME

    渡されたpageTitleがnullの場合は、サイト名が入るように設定しています。

次はfollowBtns.vueです

components/followBtns.vue
<template>
  <div>
    followBtns.vue
  </div>
</template>

<script>
export default {

}
</script>

ここまでできたら、Nuxtを起動して呼び出し元のページを開いて下さい。

「shareBtns.vue」と「followBtns.vue」のテキストが表示されていたら成功です。

nuxt.config.jsに環境変数をセットする

2つの環境変数をセットします。環境変数にすることで利便性が高まります。

  1. SITE_NAME … サイトの名前です。
  2. TWITTER_ACCOUNT … 自分のTwitterアカウント「@」以下の部分です。

@nuxtjs/dotenvをインストールしていない場合は、方法2でも構いませんが、あまりおすすめはしません。

dotenvのインストールは下記コマンドで実行できます。

$ yarn add @nuxtjs/dotenv

それではnuxt.config.jsを開きましょう。

方法1. @nuxtjs/dotenvを導入している場合

nuxt.config.js
require('dotenv').config()	// 新たにdotenvをインストールした場合は追記する

export.default {
  ...
  env: {
    BASE_URL: process.env.BASE_URL || 'http://localhost:3000',	  // 追記
    SITE_NAME: process.env.SITE_NAME,						   // 追記
    TWITTER_ACCOUNT: process.env.TWITTER_ACCOUNT,  // 追記
  }
  ...
}

続いて.envファイルの編集です。

新たにdotenvをインストールした場合は、nuxt.config.jsと同じ階層に.envファイルを作成して下さい。

.env
SITE_NAME=あなたのサイト名を記入
TWITTER_ACCOUNT=あなたのTwitterアカウント「@」以下の部分を記入

方法2. @nuxtjs/dotenvを導入していない場合

nuxt.config.js
export.default {
  ...
  env: {
    BASE_URL: process.env.BASE_URL || 'http://localhost:3000',	  // 追記
    SITE_NAME: "あなたのサイト名を記入",                             // 追記
    TWITTER_ACCOUNT: "あなたのTwitterアカウント「@」以下の部分を記入",   // 追記
  }
  ...
}

確認する

環境変数を確認してみましょう。

sharedBtns.vueに追記して下さい。

components/sharedBtns.vue
<template>
  <div>
    shareBtns.vue
    {{ url }}       <!-- 追記 -->
    {{ pageTitle }} <!-- 追記 -->
    {{ twitter }}   <!-- 追記 -->
    {{ hashtag }}   <!-- 追記 -->
  </div>
</template>

<script>
export default {
  ...
  // 追記
  data() {
    return {
      url: (process.env.BASE_URL + this.$route.path),
      twitter: process.env.TWITTER_ACCOUNT,
      hashtag: process.env.SITE_NAME
    }
  }
}
</script>

Nuxtを起動してブラウザで確認してみてください。

  • urlには現在のURLが、
  • pageTitleには記事のタイトルが、
  • twitterにはアカウント名が、
  • hashtagにはサイト名が、

表示されたら上手く設定できています!

ちなみに、、、

下のdata()プロパティの書き方では、this.$routeが取得できないのでご注意ください。

data: () => ({
	url: (process.env.BASE_URL + this.$route.path),	// NG!!
}),

シェアボタンを作成する

shareBtns.vueは最終的にこのようになります。

components/ui/shareBtns.vue
<template>
  <div>
    <p class="font-weight-bold">
      この記事をフォロワーにシェアする
    </p>
    <v-btn
      dark
      color="twitter"
      @click="windowOpen(twitterShareLink)"
    >
      <v-icon
        aria-hidden="false"
        aria-label="Twitter"
        class="mr-1"
      >
        fab fa-twitter
      </v-icon>
      <b>シェア!!</b>
    </v-btn>
  </div>
</template>

<script>
export default {
  props: {
    pageTitle: {
      type: String,
      default: process.env.SITE_NAME
    }
  },
  data() {
    return {
      url: (process.env.BASE_URL + this.$route.path),
      twitter: process.env.TWITTER_ACCOUNT,
      hashtag: process.env.SITE_NAME,
      twitterLink: 'https://twitter.com/intent/tweet?url={0}&text={1}&hashtags={2}&related={3}&via={4}&lang=ja'
    }
  },
  computed: {
    twitterShareLink() {
      // link, url{0}, text{1}, hashtags{2}, related{3}, via{4}
      return this.formatByArr(this.twitterLink, this.url, this.pageTitle, this.hashtag, this.twitter, this.twitter)
    }
  },
  methods: {
    formatByArr(msg) {
      let args = []
      for (let i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i]
      }
      args = args.map(x => encodeURIComponent(x))
      return msg.replace(/\{(\d+)\}/g, (m, k) => {
        return args[k]
      })
    },
    windowOpen(link) {
      return window.open(link, '_blank', 'top=100,left=100,width=600,height=500')
    }
  }
}
</script>

htmlのポイント

  • aria-hidden="false" aria-label="Twitter"

    この記述がないとSEOチェッカーで評価が下がりました。

    <i>タグ内が空白になるので必要っぽいです。

scriptのポイント

  • twitterLink: 'https://twitter.com/intent/tweet?url={0}&text={1}&hashtags={2}&related={3}&via={4}&lang=ja'

    素のツイートリンクです。

    1. url = シェアするURL
    2. text = 記事、ページのタイトル
    3. hashtags = ツイートに埋め込むハッシュタグ
    4. related = ツイート後にフォローを促すアカウント
    5. via = ツイートに埋め込むアカウント名
  • twitterShareLink()

    引数からツイートリンクを生成し、算出プロパティとして保持しています。(別にmethodsでも良いと思う)

    第一引数には必ずthis.twitterLinkを入れ、あとはtwitterLinkに合わせて引数をセットします。

    埋め込みハッシュタグにはサイト名を、埋め込みアカウントには自分のアカウントをセットしています。

  • formatByArr(msg)

    このmsgには、twitterLinkが入っています。

    twitterShareLink()でセットした引数を一度配列にし、エンコードしてURLを生成しています。

    encodeURIComponent() - MDN - Mozilla

  • windowOpen(link)

    ボタンをクリックすると、新規ウィンドウが開くメソッドです。

    'top=100,left=100はウィンドウが開く位置、width=600,height=500はウィンドウサイズを指定しています。

シェアボタンを押してみよう

クリックしてみましょう。

下のように、ページタイトル、URL、埋め込みハッシュタグ、埋め込みアカウントが自動生成されたツイートが表示されます。

サンプルブログの投稿04 http://localhost:3000/posts/sample04 #デモブログ @esegrammerさんから

フォローボタンを作成する

フォローボタンは、シェアボタンより断然簡単です。

下のコードをfollowBtns.vueに、まるっとコピペしてください。

components/ui/followBtns.vue
<template>
  <div>
    <v-btn
      outlined
      color="twitter"
      @click="windowOpen(twitterLink)"
    >
      <v-icon
        aria-hidden="false"
        aria-label="Twitter"
        class="mr-1"
      >
        fab fa-twitter
      </v-icon>
      フォローする
    </v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      twitterLink: `https://twitter.com/intent/follow?screen_name=${process.env.TWITTER_ACCOUNT}`
    }
  },
  methods: {
    windowOpen(link) {
      return window.open(link, '_blank', 'top=100,left=100,width=600,height=540')
    }
  }
}
</script>

これでフォローボタンは完成です。

本番環境に環境変数をセットする

先ほど.envファイルに登録した環境変数は本番環境にはpushされません。

そこで本番環境のNetlifyに環境変数をセットします。

Netlifyにログインし、

  • ヘッダーメニューの「Settings」より、
  • 左メニューにある「Build & deploy」ページの
  • 「Environment」より

環境変数をセットします。

追加する環境変数

以下、3つを追加します。

  1. BASE_URL = 本番環境のURL
  2. SITE_NAME = サイト名
  3. TWITTER_ACCOUNT = Twitterアカウントの「@」以下の文字列

追加の方法

追加の方法は、こちらの記事に画像付きで紹介しています。

目次「Netlifyに環境変数をセットする」からご覧ください。

Contentfulからブログ記事を取得してNuxt.jsで表示するための手順書

もう一度デプロイする

追加が完了したら、キャッシュクリアをしてデプロイし直します。

ヘッダーメニュー「Deploys」内の「Trigger deploy」より、「Clear cache and deploy site」をクリックしてください。

終わりに

今回は、Twitterのシェアボタンとフォローボタンを追加しました。

基本的にベースの作り方は皆さんと同じです。

他のシェアボタンを追加する場合は、少し編集するだけで追加できると思います。

ここら辺を参考に是非チャレンジしてみてください。

FacebookとLINEのシェアボタン

https://note.mu/fulcrum/n/na5d6a232f427

はてなブログとPocketのシェアボタン(今回は、この記事を参考にカスタマイズしました)

https://www.suzu6.net/posts/52-nuxt-sns-buttons/

また明日!

現在、カテゴリー「Rails apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。デモアプリの進捗状況は こちらの記事 で随時お伝えしてまいります。
スポンサー広告
次の記事はこちらです
ブログ構築
1. 今回作るアプリケーション
#01
Nuxt.jsとContentfulで作るマイブログ
今日のTweet
スポンサー広告