サンプルデモ

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

実装方法

コンポーネントの準備

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

  1. // Vueコンポーネント作成
  2. Vue.component('google-trend', {
  3. template: '<div :id="id"></div>',
  4. props: [
  5. 'id', // 要素のid設定
  6. 'keywords', // キーワードは配列 (e.g. keywords="[サッカー,テニス]")
  7. 'geo', // 言語、初期値はJPで省略可
  8. 'search', // 期間 (e.g. 2004-01-01 2018-10-30)
  9. ],
  10. });
  11. // Vueインスタンス作成
  12. const app = new Vue({
  13. el: '#app',
  14. });

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

  1. <div id="app">
  2. <google-trend id="" keywords="" geo="" search=""/>
  3. </div>

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

  1. <div id="app">
  2. <google-trend id="" keywords="" geo="" search=""></google-trend>
  3. </div>

createdフック内の処理

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

  1. created: function () {
  2. /* 初期化 */
  3. let keywords = this.keywords;
  4. keywords = keywords.split(',');
  5. const geo = this.geo ? this.geo : 'JP';
  6. const search = this.search;
  7. let arr = [];
  8. /* 複数キーワード対応 */
  9. for (let i = 0; i < keywords.length; i++) {
  10. arr.push({
  11. "keyword": keywords[i],
  12. "geo": geo,
  13. "time": search
  14. });
  15. }
  16. }

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

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

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

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

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

  1. script.onload = () => {
  2. var divElem = document.getElementById(this.id);
  3. /* 処理実行(renderExploreWidgetToで要素に呼び出す) */
  4. trends.embed.renderExploreWidgetTo(divElem, "TIMESERIES", {
  5. "comparisonItem": arr,
  6. "category": 0, "property": ""
  7. },
  8. {
  9. "exploreQuery": "q=" + keywords + "&date=all&geo=" + geo,
  10. "guestPath": "https://trends.google.com:443/trends/embed/"
  11. });
  12. }

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

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

SNSでシェアする: