アップススクリプトでウェブアプリ画面を動的に構成する

アップススクリプトでウェブアプリ画面を動的に構成する

クエリパラメータなどを使用して表示するインターフェースを動的に作成したい場合にはHtmlTemplateを使用すると便利です。HtmlTemplateを使用すればHTMLファイルにパラメータやプログラムを埋め込むことができます。

HTMLの構成にプログラムを使用するサンプルコード

HtmlServiceにはHtmlOutputを直接作成する以外にも、Templateを経由してHtmlOutputを作成する方法があります。この方法を使えば、HTMLの構成に文字パラメータやif、forなどを使用することができます。

gsファイル

function doGet(e) {
  var query = e.parameter.query;
  var template = HtmlService.createTemplateFromFile("html");
  template.query = query;
  template.list = ["a""b""c"];
  template.obj = {"a":"A""b":"B""c":"C"};
  var html = template.evaluate();
  return html;
}

HtmlServiceを使用して、HTMLファイルからテンプレートを作成します。作成したテンプレートに含まれるパラメータは、オブジェクトとしてtemplate.queryのように値を代入できます。最後にevaluateすることでテンプレートをHtmlOutputに変換して返しています。

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>表示するパラメータ</div>
    <p><?= query ?></p>

    <div>if文</div>
    <? if(!query){ ?>
      <p>no query</p>
    <? } ?>

    <div>for文 配列</div>
    <? for(var i = 0i < list.length; i ++){ ?>
      <p><?= list[i?></p>
    <? } ?>

    <div>for文 オブジェクト</div>
    <? for(var i in obj){ ?>
      <p><?= obj[i?></p>
    <? } ?>
  </body>
</html>

テンプレートとなるHTMLサンプルコードです。<?と?>で囲まれた部分がevaluateで実行されるプログラムです。

<?= ?>とイコールを使用するとパラメータに代入した値が文字として置き換えられ表示されます。ただし、HTMLコードを代入しても単なるテキストとして認識されることは注意が必要です。

if文やfor文は行が連続している必要はありません。{と}の間にHTMLコードを入れてHTMLコードを切り替えたり、繰り返し同じHTMLコードを使用することができます。for文の変数として配列やオブジェクトを使用することも可能です。

サンプルではパラメータqueryを表示するかno queryを表示し、配列とオブジェクトを順にすべて表示しています。

ウェブアプリの実行結果

クエリパラメータHellow World!でのテンプレートを使用したウェブアプリ実行結果

クエリパラメータHello World!(ウェブアプリのURL?query=Hello World!)でウェブアプリを実行した場合の実行結果です。

クエリパラメータであるHello World!が表示されています。また配列のa、b、cが表示され、オブジェクトのA、B、Cも表示されています。ここからfor文が実行されたことが分かります。

今回のサンプルの実行URL(クエリパラメータHello World!)です。匿名で実行できます。Hello World!を削除して実行すればno queryが表示されます。

お読みくださり、ありがとうございました。