GASとスプレッドシートで動的なWebサイトを作る

GAS(GoogleAppsScript)では、HTML/CSSと組み合わせることで簡単なWebサイトを作ることができます。静的だけでなく、動的なコンテンツも自在に作ることが可能なのですが、GAS側からHTML側へのデータの受け渡しに癖があり、思ったようにうまくいかない方も多くいらっしゃるようですね。今回は、そのような方向けに、GASとスプレッドシートで動的なWebサイトを作る方法について解説していきます。

今回のアウトプット

今回は、スプレッドシート特定のセルに記載されたデータをGASで取得し、それをHTMLへ受け渡し、ブラウザに表示させます。

スプレッドシート

https://docs.google.com/spreadsheets/d/1R9A_bjcKI2Bnno_UV93ncw_h5yE0QBlwvg4Ajtb-708/edit

スクリプトエディタ

https://script.google.com/a/meta-reputation.co.jp/d/1aL1bvAkWEiz3mA0ClDcQSMhrFuwIJLmdDDASsz6LECBBJ0XmZuAjVyR3/edit

完成したWebサイト

https://script.google.com/a/meta-reputation.co.jp/macros/s/AKfycbzh6SbcfMn7uhM5A6Bbxa3J4wn4P-huIp9AcQz2i2vsDtMcdgY2/exec

解説

スプレッドシート

特に仕掛けはありません。

ご覧の通り、A2セルに「Hello,World!」と入力されているだけです。

後ほど利用しますので、URLからIDが「1R9A_bjcKI2Bnno_UV93ncw_h5yE0QBlwvg4Ajtb-708」であることをご確認ください。

スクリプトエディタ

スクリプトエディタには、スプレッドシートに紐付けて作成されたものと、紐付けられずに独立して作成されたものの2タイプがありますが、今回は後者の独立したタイプです。

まずはコードを確認しましょう。

【コード.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アプリケーション作りも可能になっていますので、ぜひ挑戦して見てくださいね!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で生産性総合研究所をフォローしよう!