GASで自動更新されるグラフを作る

GAS(Google Apps Script)とは、
Google が提供しているGmailやGoogle スプレッドシートなどのアプリを
連携して利用するためのスクリプトです。

このスクリプトは、Googleのサーバー上で実行されるので、
手元でサーバーを用意することなく、
全てGoogleのプラットフォーム上で完結するのが魅力です。

普通、定期的にジョブを実行するには、
ジョブを実行するサーバーを用意することになるのですが、
自前サーバーが不要となるので、
自動化へのハードルが大きく下がります。

ここでは、そんなGASを使って、
定期的にデータを取得して、
随時新しいデータを反映して更新されるグラフを作ってみます。

準備

GASを利用するのに特別な準備は必要ありません。

必要なのは、Google アカウントのみです。

ページロード時間を計測するスクリプト

取得するデータはなんでも良いのですが、
ここでは、Webページのロード時間を定期的に計測して、
グラフ化することにします。

スクリプトエディタを開く

まずは、新規のスクリプトを作成しましょう。
スクリプト単体でも作成できますが、
計測した値を格納していくために、
スプレッドシートとセットで作成すると便利です。

ということで、Google スプレッドシートから、
新規にスプレッドシートを作成します。

そして、メニューバーの「ツール」から、
「スクリプトエディタ」を選択します。

これで、新規のまっさらなスクリプトが作成されます。

スクリプトを書く

続いて、データを取得し、
スプレッドシートに格納するという一連の動作を、
スクリプトで記述します。

下は、[URL]で指定されたWebサイトから
ページをロードする時に要する時間を計測して、
結果をスプレッドシートに追記していくスクリプトです。

var max_row = 60*24

function myFunction() {
  var start = new Date();
  var res = UrlFetchApp.fetch("[URL]");
  var end = new Date();
  var time = end - start
  Logger.log(time);
  
  var ss = SpreadsheetApp.getActive();
  var s = ss.getActiveSheet();
  var row = s.getLastRow();
  
  s.getRange(row+1, 1).setValue(time);
  s.getRange(row+1, 2).setValue(start);
  
  if(row > max_row){
    diff = row - max_row;
    s.getRange(1, 1, diff,2).clear();
    s.getRange(diff+1,1,row+1,2).moveTo(s.getRange(1, 1, max_row,2));
  }
}

無限に計測データが追加されると面倒なので、
max_rowで格納するデータの最大数を指定するようにしています。

最大数を超えた場合は、古いデータから削除されて、
最新のデータがスプレッドシートに並ぶように処理しています。

定期実行を設定する

スクリプトエディタのメニューにある
▶︎印でスクリプトを実行できます。
実行すると、スプレッドシートに計測値が
記載されることが確認できるでしょう。

このように手動で実行することもできますが、
目指しているのは、自動化です。

そこで、実行を自動的に行うように設定しましょう。

1. メニューの中の「時計マーク」をクリックします。
2. 右下の「トリガーを追加」をクリックします。
3. 実行のタイミングを設定します。

上の例では、イベントのソースを「時間主導型」にして、
定期的に実行するようにし、
「分ベースのタイマー」、「1分おき」を選択することで、
1分毎に計測スクリプトを実行するようにしています。

しばらく待てば、スクリプトが起動されて、
スプレッドシートに新しい計測結果が記録される様子がみれるでしょう。

グラフを作成する

グラフの作成は、
データを選択して、
メニューの「挿入」から、
「グラフ」をクリックするだけです。

データは指定された行数まで追加され続けるので、
列を丸ごと選択するようにしましょう。

グラフをWebページに埋め込む

上で作成したグラフは、時間経過とともに、
自動計測された値で更新されていきます。

このグラフを普通の図としてWebページに貼り付けてしまうと、
せっかくの自動更新が無駄になってしまいます。

そこで、グラフそのものをWebページに埋め込みことが必要になります。

1. グラフを選択する
2. グラフ右上の「・・・」をクリックする
3. 「グラフを公開」を選択する
   
4. 「埋め込む」タブから「公開」をクリックする
5. 表示されたiframeコードをWebページに貼り付ける

これで下のようなグラフがWebページに埋め込まれます。

まとめ

GASを利用して、自動的に更新されるグラフを作成、
Webページに埋め込む方法を紹介しました。

ここでは、サイトのロード時間を計測しただけですが、
イベントの参加申し込みのメールをカウントして、
リアルタイムに参加者数をWebページに表示するなど、
様々なシーンで活用できそうです。