こんにちは!最近はGASばかり書いている あいてにあむ(@itanium103) です!

はじめに

この記事では、Googleスプレッドシート内のグラフを Google Apps Script (以下 GAS ) の HTML Service で表示させる方法を書いていきます!

方法はいくつかあり、以前はUiAppを用いた方法がおそらくもっとも簡単でしたが、UiAppはサポートが終了してしまったため、ここではBase64の文字列で渡す方法を記します。


以下のような、あるシートにグラフが1つだけあるスプレッドシートがあり、そのグラフを表示させるWebページをHTML Service で作成することを想定しています。

簡単に試したい方へ

このスプレッドシートをコピーすると、簡単にお試しいただけます。

完成したグラフ表示ページの例はこちら

手順

  1. 当該スプレッドシートに紐づけられたコンテナバインドスクリプトを開く
    1. 当該スプレッドシートの上のほうのメニューより ツール>スクリプトエディタ で起動
    2. プロジェクトの名前は適当に変更し、保存
  2. GASのコードを書く
    1. 後述するソースコードを参考にコードを書き保存
    2. ファイル名は任意(*.gs)
  3. HTMLのコードを書く
    1. HTMLファイルを作成(上のメニューバーの ファイル>New よりできます)
    2. ファイル名は index (index.html) で保存
    3. 後述するソースコードを参考にコードを書き保存
  4. Webアプリケーションとして導入
    1. GASのスクリプトエディタ の上のほうのメニューより  公開>ウェブアプリケーションとして導入
    2. 適当な設定で公開
    3. アカウントで実行する許可を求められるので、許可
  5. WebアプリのURLを開く
  6. グラフが表示される

GASのコード

// ▼グラフがあるシートの名前
var GRAPH_SHT_NAME = "今週の売上";

// WebAppアクセス時実行
function doGet(e) {    
  return HtmlService.createTemplateFromFile("index").evaluate()
    .setTitle('Graph')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// アクティブスプレッドシートのnameシートを開く
// @param  {str} シート名
// @return {sheetObject} アクティブスプレッドシートのnameシート
function openShtByName(name){
  try{
    const ss = SpreadsheetApp.getActiveSpreadsheet(); //アクティブスプレッドシートを開く->ss
    const sss = ss.getSheetByName(name);              //nameという名前のシートを開く->sss
    return sss;
  }catch(e){ 
    Logger.log( e );
    return -1;
  }
}

// 画像データをbase64の文字列で渡す
// @return {str} 画像データ
function getChartBlob(){
  var sht = openShtByName(GRAPH_SHT_NAME);
  var chart = sht.getCharts()[0]; // そのシートにある1つ目のグラフを取得 添え字を変えれば2つ目,3つ目...に変更可
  return (Utilities.base64Encode((chart.getBlob().getBytes())));
}

HTMLのコード

<!DOCTYPE html>
<html>
  <head>
    <script>      
      function showGraph(){ 
        try{          
          let callbk = (data) =>{ ElmId("gr").src = "data:image/png;base64," + data; }
          google.script.run.withSuccessHandler(callbk).getChartBlob();
        }catch(e){
          alert("グラフ表示に失敗しました:\n" + e);
        }        
      }
      
      function ElmId(id){
        return document.getElementById(id); 
      };
      
      window.onload = showGraph;
      
    </script>
    <base target="_top">
    <style>
      section{
        display:    block;
        width:      100%;
        max-width:  100vw;
        text-align: center;
      }
    </style>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
  </head>
  <body>
    <section>
      <h1>グラフ</h1>
      <p><input type="button" onclick="showGraph();" value="更新"></p>
      <p><img id="gr" style="width:100%;max-width:640px;" alt="loading..."></p>
    </section>
  </body>
</html>

完成イメージ

公開したURLにアクセスすると、以下のようなページが表示されるはずです。

この通り、スプレッドシートのグラフをGASで公開することができました!

また、スプレッドシートの金額の値を書き換えて[更新]ボタンを押してみてください。

以下は例のスプレッドシートで12/27の金額を0に書き換えてから[更新]ボタンを押した例です。

すぐに反映されていることがわかりますね!

スプレッドシート標準の公開機能だと反映が遅いので、これだけすぐに反映されるのはありがたいことです。

アクセスの度にsheetObjectのgetCharts関数を呼び出しているので、キャッシュされた古いデータではなく最新のデータを表示できているものだと思われます。

この反映の速さを活かし、頻繁に変わるグラフを表示させるのに利用するときにsetIntervalとかで1分ごとにグラフ更新を回して常時最新情報を表示させる、といったこともできますね。

おわりに

いかがでしたk(ry

最後に私からひとこと。

「GASはいいぞ!」

Twitterでフォローしよう

おすすめの記事