Vue.jsでコンポーネントを使ってGoogleトレンドを埋め込む方法

コンポーネントの準備

まずは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>