【Vue.js】Twitterシェア ツイートの中身の指定（2週間後の日付、本のタイトル）

はじめに

こんにちは！
今回は【Vue.js】Twitterシェアボタンの実装についてアウトプットしていきます！

前回の記事でTwitterシェアの実装を行いました！今回はツイートのコメント部分に、
①2週間後の日付
②診断結果ででた本のタイトル
を自動的に記入される機能を実装していきます！

対象

・vue.jsでTwitterシェアを実装したい方
・vue.jsで日付を取得し表示させたい方
・前回の記事までの内容を実装済みの方。

使用環境

使用技術	バージョン
nuxt.js	2.15.7
@nuxtjs/tailwindcss	4.2.0
moment	2.29.1
nuxt-microcms-module	2.0.0

使用ファイル,概要

ファイル名	概要
pages/result.vue	診断結果表示ページ

実装

pages/result.vue

<template>
   <div class="twitter_share">
     <button
       @click="twitterShare"
       class="
         border-2 border-blue-600
         rounded-full
         h-14
         w-64
         items-center
         flex
         justify-center
         m-auto
         my-8
         hover:bg-blue-200
         duration-1000
       "
     >
       Twitterで宣言する！
     </button>
   </div>
</template>

<script>
import moment from "moment";
export default {

  async asyncData({ query, $microcms }) {
    const id = query.id; 
    console.log(id); 
    const book = await $microcms.get({
      endpoint: "books",
      contentId: id, 
    });
    console.log(book); 
    return {
      book, 
    };
  },
  data() {
    return {
      book: "",
    };
  },
  methods: {
    twitterShare() {
      const today = new Date(); //今日この瞬間の情報を取得
      const date_today = today.getDate(); //日
      const after2Week = today.setDate(date_today + 14); //今日の日＋14日
      const formatDate = moment(after2Week).format("MM月DD日"); //2週間後の日にちを"MM月DD日"で表示
      console.log(formatDate);
      //シェアする画面を設定
      var shareURL =
        "https://twitter.com/intent/tweet?text=" +
        `${formatDate}までに「${this.book.title}」を読み、感想をツイートします！` +
        "%20%23NewSelf" +
        "%20%23書籍診断アプリ" +
        "&url=" +
        "https://www.google.com/?hl=ja"; //アプリURL
      //シェアようの画面へ移行
      location.href = shareURL;
    },
  },
};
</script>

・microCMSのAPI取得の処理の部分の解説は省かせていただきます。

①2週間後の日付の実装

pages/result.vue

<script>
import moment from "moment";
export default {
  data() {
    return {
      moment: ``,
    };
  },
  filters: {
    moment: function (date) {
      return moment(date).format("MM月DD日");
    },
  },
 methods: {
    twitterShare() {
      const today = new Date(); //今日この瞬間の情報を取得
      const date_today = today.getDate(); //日
      const after2Week = today.setDate(date_today + 14); //今日の日＋14日
      const formatDate = moment(after2Week).format("MM月DD日"); //2週間後の日にちを"MM月DD日"で表示
      console.log(formatDate);
      //シェアする画面を設定
      var shareURL =
        "https://twitter.com/intent/tweet?text=" +
        `${formatDate}までに「${this.book.title}」を読み、感想をツイートします！` +
        "%20%23NewSelf" +
        "%20%23書籍診断アプリ" +
        "&url=" +
        "https://www.google.com/?hl=ja"; //アプリURL
      //シェアようの画面へ移行
      location.href = shareURL;
    },
  },
};
</script>

1.momentのインストール

以下をターミナルに記述しmomentをインストールします。

npm install vue-moment


インストールが完了したら、package.jsonに

このように記載されていたらOKです！

2.日付を取得👉2週間後の日付にカスタマイズ

pages/result.vue

<script>
import moment from "moment";
export default {
 methods: {
    twitterShare() {
      const today = new Date(); 
//new Date()で今日この瞬間の情報を取得し、定数todayへ代入
      const date_today = today.getDate(); 
//today.getDate()で今日の日にちのみを取得し定数date_todayへ代入
      const after2Week = today.setDate(date_today + 14);
//today.setDate(date_today + 14)で今日の日＋14日に内容変更し、定数after2Weekへ代入
      const formatDate = moment(after2Week).format("MM月DD日"); 
//2週間後の日にちを"MM月DD日"で表示される処理を定数formatDateに代入
      console.log(formatDate);

      //シェアする画面を設定
      var shareURL =
        "https://twitter.com/intent/tweet?text=" +
        `${formatDate}までに「${this.book.title}」を読み、感想をツイートします！` +
//定数formatDateを${}で囲みツイートコメント部分に記載することで実装完了！
        "%20%23NewSelf" +
        "%20%23書籍診断アプリ" +
        "&url=" +
        "https://www.google.com/?hl=ja";

      location.href = shareURL;
    },
  },
</script>

上記の処理でOKです！

②診断結果ででた本のタイトルの表示

pages/result.vue

<script>
export default {

  async asyncData({ query, $microcms }) {
    const id = query.id; 
    console.log(id); 
    const book = await $microcms.get({
      endpoint: "books",
      contentId: id, 
    });
    console.log(book); 
    return {
      book, 
    };
  },
  data() {
    return {
      book: "",
    };
  },

//👆での処理を簡単に解説すると、endpointとcontentIdを定数bookに返している。つまりmicroCMSにの登録情報がbookに入っている。なのであとはTwitterシェアのコメント部分に呼び出せばOK！

  methods: {
    twitterShare() {
      var shareURL =
        "https://twitter.com/intent/tweet?text=" +
        `${formatDate}までに「${this.book.title}」を読み、感想をツイートします！` +
                          //👆${this.book.title}で呼び出せば実装完了！
        "%20%23NewSelf" +
        "%20%23書籍診断アプリ" +
        "&url=" +
        "https://www.google.com/?hl=ja"; 

      location.href = shareURL;
    },
  },


</script>

・microCMSの処理に関してはこちらの記事に簡単な基礎がまとめてありますので参考にしてみてください。

動作確認

診断を終え、「Twitterで宣言する！」ボタンをクリック

2週間後の日付もタイトル名も無事実装できました！！

まとめ

今回はTwitterシェア　ツイートの中身の指定（2週間後の日付、本のタイトル）について記事にしました。
よりユーザーが使いやすく、手間のかからないアプリにするにはどうすればいいかを考えていきながら、今後も制作していきたいと思います！よりユーザー目線の思考を磨いていきます！

ぜひ参考にしてみていただけるととても嬉しいです！！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！