Vue.jsのインスタンス内では、<script>タグを使用することができません。
そのため、HTMLソース内でサードパーティのスクリプトの呼び出しや実行する際に問題が起きることがあります。
今回は、Vue.jsのインスタンス内でも動くように、コンポーネントを使ってGoogleトレンドの埋め込む方法を紹介します。

サンプルデモ

See the Pen Google Trends with Vue by Masaki Oba (@Cleysense) on CodePen.

実装方法

コンポーネントの準備

まずはVueコンポーネントとVueインスタンスを作成します。

// Vueコンポーネント作成
Vue.component('google-trend', {
  template: '<div :id="id"></div>',
  props: [
    'id', // 要素のid設定
    'keywords', // キーワードは配列 (e.g. keywords="[サッカー,テニス]")
    'geo', // 言語、初期値はJPで省略可
    'search', // 期間 (e.g. 2004-01-01 2018-10-30)
  ],
});

// Vueインスタンス作成
const app = new Vue({
  el: '#app',
});

これでVueインスタンス内で<google-trend>タグ(コンポーネント)を使用することができるようになりました。

<div id="app">
  <google-trend id="" keywords="" geo="" search=""/>
</div>

コンポーネントの呼び出しは下記のように</google-trend>で閉じる形式でも同様に動作しますが、今回はコンポーネントの中に何も記述しないため省略しています。

<div id="app">
  <google-trend id="" keywords="" geo="" search=""></google-trend>
</div>

createdフック内の処理

createdフックを利用することで、インスタンスが生成された後にコードを実行することができます。
propsオプションの各データを初期化して、検索キーワードを複数指定できるように配列で処理するようにした上で、各データを埋め込みコード用に配列にしておきます。

created: function () {
  /* 初期化 */
    let keywords = this.keywords;
    keywords = keywords.split(',');
    const geo = this.geo ? this.geo : 'JP';
    const search = this.search;
    let arr = [];

    /* 複数キーワード対応 */
    for (let i = 0; i < keywords.length; i++) {
      arr.push({
        "keyword": keywords[i],
        "geo": geo,
        "time": search
      });
    }
}

Googleトレンドの埋め込みに必要なjsファイルを予め読み込みます。

/* embed_loader.jsの読み込み */
const script = document.createElement("script");
script.src = "https://ssl.gstatic.com/trends_nrtr/760_RC08/embed_loader.js";
script.async = true;
document.head.appendChild(script);

埋め込み処理コードで再度利用するときのために、keywordsを文字列化して不要な括弧をはずしておきます。

keywords = keywords.join(',');
keywords = keywords.match(/\[(.+)\]/)[1];

jsファイルを読み込んだ後でないと、埋め込み処理のコードが実行できないため、読み込んだ後に実行できるようにonloadを利用して、読み込んだ後に埋め込み処理のコードを実行するようにします。
この際、trends.embed.renderExploreWidgetではなく、trends.embed.renderExploreWidgetToを使い、埋め込む位置を指定するようにします。
埋め込みコード用に配列にしたものをcomparisonItemの中で展開することにより、検索キーワードの複数指定が実現できています。

script.onload = () => {
  var divElem = document.getElementById(this.id);

  /* 処理実行(renderExploreWidgetToで要素に呼び出す) */
  trends.embed.renderExploreWidgetTo(divElem, "TIMESERIES", {
    "comparisonItem": arr,
    "category": 0, "property": ""
   },
   {
    "exploreQuery": "q=" + keywords + "&date=all&geo=" + geo,
    "guestPath": "https://trends.google.com:443/trends/embed/"
  });
}

コンポーネントを使ってみる

<div id="app">
  <google-trend id="google-trend" keywords="[サッカー,テニス]" geo="JP" search="2012-01-01 2018-10-30"/>
</div>

SNSでシェアする:

大場 正樹 (Masaki Oba)

Web制作会社に3年ほど勤務し、2014年1月にフリーランスとして「Cleysense」を立ち上げ、Webデザイン・DTPデザイン・フロントエンド・バックエンド・ディレクション・コンサルティングなど、幅広く活動中。