[GAS][HTML]動的ページを表示するには: 逆引きGoogle Apps Script

2012 年 7 月 22 日 日曜日

HTMLサービスでは、あらかじめ用意したHTMLを表示するだけでなく、HTMLファイルにGoogle Apps Scriptを記述して、動的なページを生成することができる。このページのサンプルでは、Googleドライブのファイル一覧を画面にリスト表示している。

HTMLにスクリプトを記述できるというのは、PHPやASP、JSPなどを想像して頂きたい。もちろん、サーバ側からHTMLに値を渡したり、HTML側からサーバ側の関数を呼び出すことも可能だ。

まずはHTMLファイルを用意する必要がある。HTMLファイルの作成方法については、静的ページを表示するにはの(1)〜(3)を参照して頂きたい。

サンプルスクリプト

▼example.html

1
2
3
4
5
6
7
8
9
10
11
<html>
  <p>こんにちは、<?= Session.getActiveUser(); ?>さん。</p>
  <ul>
<?
  var myFiles = DocsList.getAllFiles();
  for(var i=0; i<myFiles.length; i++){
    output.append('<li>'+myFiles[i].getName()+'</li>');
  }
?>
  </ul>
</html>

行2 <?= Session.getActiveUser(); ?>
<?= … ?>タグは、間に挟まれた文字列を出力する。
行4 <? … ?>タグに挟まれたスクリプトを実行する。一部を除き、ほぼ全てのAppsスクリプトを記述できる。
行7 output.append(“”)により、文字列を出力することができる。HTMLタグをエスケープしたい場合は、output.appendUntrusted(“”)関数を実行する。

▼Appsスクリプトファイル

1
2
3
4
function doGet(){
  var html = HtmlService.createTemplateFromFile('example');
  return html.evaluate();
}

行2 Appsスクリプトを記述しているHTMLファイルは、createTemplateFromFile();関数でHtmlTemplateオブジェクトを生成する。
行3 {HtmlTemplateインスタンス}.evaluate()により、HTMLファイル内に記述したスクリプト実行後の結果を取得することができる。

構文

HtmlService.createTemplateFromFile(filename)

HTMLファイルからHtmlTemplateオブジェクトを生成する。

String filename
使用するHTMLファイル名。

戻り値

HtmlTemplate
生成したHtmlTemplateオブジェクト

関連記事

コメントをどうぞ

トラックバック

このエントリーのトラックバックURL:

http://www.bmoo.net/archives/2012/07/314465.html/trackback