こんにちは!最近はGASばかり書いている あいてにあむ(@itanium103) です!
はじめに
この記事では、Googleスプレッドシート内のグラフを Google Apps Script (以下 GAS ) の HTML Service で表示させる方法を書いていきます!
方法はいくつかあり、以前はUiAppを用いた方法がおそらくもっとも簡単でしたが、UiAppはサポートが終了してしまったため、ここではBase64の文字列で渡す方法を記します。
以下のような、あるシートにグラフが1つだけあるスプレッドシートがあり、そのグラフを表示させるWebページをHTML Service で作成することを想定しています。

簡単に試したい方へ
このスプレッドシートをコピーすると、簡単にお試しいただけます。
手順
- 当該スプレッドシートに紐づけられたコンテナバインドスクリプトを開く
- 当該スプレッドシートの上のほうのメニューより ツール>スクリプトエディタ で起動
- プロジェクトの名前は適当に変更し、保存
- GASのコードを書く
- 後述するソースコードを参考にコードを書き保存
- ファイル名は任意(*.gs)
- HTMLのコードを書く
- HTMLファイルを作成(上のメニューバーの ファイル>New よりできます)
- ファイル名は index (index.html) で保存
- 後述するソースコードを参考にコードを書き保存
- Webアプリケーションとして導入
- GASのスクリプトエディタ の上のほうのメニューより 公開>ウェブアプリケーションとして導入
- 適当な設定で公開
- アカウントで実行する許可を求められるので、許可
- WebアプリのURLを開く
- グラフが表示される
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はいいぞ!」