libro
www.tuyano.com
Google Apps Scriptプログラミング [中級編]

Webアプリケーション開発とHtml Service (5/7)

作成:2012-07-04 09:45
更新:2012-07-04 09:45

■テンプレートHTMLと<?= ?>タグ

これで一応、HTMLを表示することはできました。が、ただHTMLをそのまま表示するだけでは、わざわざGoogle Apps Scriptを利用する意味がありません。

HtmlServiceには、単純にHTMLをロードする他にも機能があります。それは「テンプレートHTML」を利用するためのものです。

テンプレートHTMLというのは、文字通りHTMLをテンプレートとして使用するものです。通常のHTMLとの違いは、その中にGoogle Apps Scriptのスクリプトを埋め込むことができるという点です。このテンプレートをロードし、それをレンダリングする段階でスクリプトが実行され、ダイナミックにページを生成することができるのです。

テンプレートHTMLの利用は、通常のHTMLとは異なります。まず、HTMLからテンプレートとなる「HtmlTemplate」オブジェクトを作成します。
変数 = HtmlService.createTemplateFromFile( HTMLファイル名 );
これでHtmlTemplateオブジェクトが用意できました。このオブジェクトにテンプレートを利用するための諸機能がまとめられています。ここからHTMLをレンダリングし表示するには、「evalluate」メソッドを利用します。
変数 = 《HtmlTemplate》.evaluate();
これでレンダリングされたHtmlOutputオブジェクトが生成されます。後はこれをdoGetからreturnするだけです。


●<?= ?>タグについて
実際の利用例を下のリスト欄に掲載しておきました。これでindex.htmlをテンプレートとしてロードし、レンダリングして表示します。実際に試してみるとわかりますが、画面には「Welcome, tuyano!!」というテキストと、現在の日時が表示されます。この部分は、実は以下のようになっています。
  <p><?= printData("tuyano"); ?></p>
  <p><?= new Date(); ?></p>
この<?=○○ ?>というタグは、Google Apps Scriptの値を出力する働きをします。=の後に、出力したい値や変数、値を返す関数などを指定すれば、その値が書き出されるのです。

ここでは、new Date();を出力して日時を書き出しています。これはわかりますね、JavaScriptのオブジェクトですから。では、printData("tuyano"); というのは？　これは何でしょう？

これは、プロジェクトのスクリプトファイルで定義されている関数なのです。スクリプトを見ると、以下のように定義されていることがわかります。
function printData(str){
  return "Welcome, " + str + "!!";
}
このように、スクリプトファイルで定義された関数を、そのままテンプレートHTML内で利用することができます。それをレンダリングすることで、出力時にそれらを値に変換して表示させることができるのです。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※index.htmlの内容

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" 
  content="text/html; charset=utf-8">
  <title>Sample jsp</title>
  <style>
    h1 {font-size:16pt; background:#AAFFAA;padding:5px;}
    p {margin:10px;}
  </style>
</head>
<body>
  <h1>Sample jsp page</h1>
  <p><?= printData("tuyano"); ?></p>
  <p><?= new Date(); ?></p>
</body>
</html>


※スクリプト

function doGet() {
  var output = HtmlService.createTemplateFromFile('index');
  return output.evaluate();
}

function printData(str){
  return "Welcome, " + str + "!!";
}
※関連コンテンツ

「Google Apps Scriptプログラミング [中級編]」に戻る