GAS動的Webページ

Google Apps Scriptによる動的Webページの作成

GASでPHPのように動的Webページを作成することができる（参考サイト）。まず、以下のようなテンプレートHTMLファイルをGASエディタで作成する（ファイル名は「テンプレート.html」とする）。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>alert("ようこそ患者一覧へ！");</script>
  </head>
  <body>
    <h1>患者一覧表</h1>
    <p>日付：<?= Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd HH:mm:ss'); ?></p>
    <p>
      <table border="1">
        <tr>
          <th>患者番号</th>
          <th>患者氏名</th>
          <th>性別</th>
          <th>生年月日</th>
        </tr>
        <?
          const patients = [
            {
              "id": "A10101",
              "name": "山田　太郎",
              "gender": "男",
              "birthDate": "2000/12/10",
            },
            {
              "id": "B10203",
              "name": "鈴木　順子",
              "gender": "女",
              "birthDate": "1963/8/15",
            },
            {
              "id": "B30214",
              "name": "佐藤　肇",
              "gender": "男",
              "birthDate": "1945/3/19",
            },
            {
              "id": "D00129",
              "name": "木島　洋子",
              "gender": "女",
              "birthDate": "2005/10/29",
            },
          ];
          for(var patient of patients) {
            output._ = '<tr>';
            output._ = '<td>' + patient.id + '</td>';
            output._ = '<td>' + patient.name + '</td>';
            output._ = '<td>' + patient.gender + '</td>';
            output._ = '<td>' + patient.birthDate + '</td>';
            output._ = '</tr>';
          }
        ?>
      </table>
    </p>
  </body>
</html>

HTMLにJavascriptコードを埋め込む場合、<?と?>で囲む。 ここで、outputオブジェクトは特殊なオブジェクトで、動的にHTMLに要素や文字列を出力するために用いる。もともと、その目的のためにoutput.append()というメソッドがあったようだが、現在はエラーになる（output.append is not a function. というエラーが表示される）ため、「output._ = 出力したい文字列」のように使う（参考サイト）。

次に、以下のようなGASを作成して、上述したHTMLテンプレートファイルを読み込んで、埋め込まれたコードを実行（評価=evaluate）して返す。 

function doGet() {
　　return HtmlService.createTemplateFromFile("テンプレート").evaluate(); 
}

ここで、HtmlService.createTemplateFromFileの引数にはテンプレートHTMLファイル名を指定するのだが、拡張子（.html）は付けない。 

完成した動的Webページを下図に示す。

患者一覧表

 ここをクリックすると実際のページを表示します。

問題点として、「このアプリケーションは、Google ではなく、別のユーザーによって作成されたものです。」が表示される。これに対する解決策はこのサイトに書いてある。

0 件のコメント:

コメントを投稿

登録: コメント (Atom)