GAS(GoogleAppsScript)では、HTML/CSSと組み合わせることで簡単なWebサイトを作ることができます。静的だけでなく、動的なコンテンツも自在に作ることが可能なのですが、GAS側からHTML側へのデータの受け渡しに癖があり、思ったようにうまくいかない方も多くいらっしゃるようですね。今回は、そのような方向けに、GASとスプレッドシートで動的なWebサイトを作る方法について解説していきます。
今回のアウトプット
今回は、スプレッドシート特定のセルに記載されたデータをGASで取得し、それをHTMLへ受け渡し、ブラウザに表示させます。
スプレッドシート
https://docs.google.com/spreadsheets/d/1R9A_bjcKI2Bnno_UV93ncw_h5yE0QBlwvg4Ajtb-708/edit
スクリプトエディタ
完成したWebサイト
解説
スプレッドシート
特に仕掛けはありません。
ご覧の通り、A2セルに「Hello,World!」と入力されているだけです。
後ほど利用しますので、URLからIDが「1R9A_bjcKI2Bnno_UV93ncw_h5yE0QBlwvg4Ajtb-708」であることをご確認ください。
スクリプトエディタ
スクリプトエディタには、スプレッドシートに紐付けて作成されたものと、紐付けられずに独立して作成されたものの２タイプがありますが、今回は後者の独立したタイプです。
まずはコードを確認しましょう。
【コード.gs】
function doGet() {
var sh=SpreadsheetApp.openById(“1R9A_bjcKI2Bnno_UV93ncw_h5yE0QBlwvg4Ajtb-708”);
var ss=sh.getSheetByName(“シート1”);var msg=ss.getRange(2, 1).getValue();
var t=HtmlService.createTemplateFromFile(“index”);
t.msg=msg;return t.evaluate().setTitle(“GASとスプレッドシートで動的なWebサイトを作る”);
}
var msg=ss.getRange(2, 1).getValue();
の部分で、スプレッドシートのA2セルの入力された内容、すなわち「Hello,World!」を取得しています。
var t=HtmlService.createTemplateFromFile(“index”);
の部分では、「index.html」をHtmlTemplateとして取得しています。
t.msg=msg;
によって、index.htmlにmsgの情報を受け渡しています。
今回はHtmlService.createTemplateFromFileを利用していることに気をつけてください。
似たメソッドに、createHtmlOutputFromFile(filename)がありますが、こっちの返り値はHtmlOutputtとなり、GASからのデータの受け渡しができず、動的なコンテンツを作成することができません。
【index.html】
<!DOCTYPE html>
<html>
<head>
<base target=”_top”>
</head>
<body>
<?= msg ?>
</body>
</html>
<?= msg ?>
の部分で、GASから渡されたデータをHTMLで受け取っています。
このように、<?= 変数名 ?>とすることで受取りが可能です。
まとめ
以上が、GASとスプレッドシートで動的なWebサイトを作る方法となります。
今回はシンプルにスプレッドシートの入力内容をHTMLに渡してブラウザで表示させただけでしたが、応用させることで複雑なWebアプリケーション作りも可能になっていますので、ぜひ挑戦して見てくださいね！
