サンプルデモ
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>