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

■スクリプトレットを使おう

単純な値だけでなく、スクリプトの処理をHTML内に埋め込むこともできます。これは、<? ?>というタグを使います。

<?
……処理を記述……
?>

このように、<?から?>までの間にスクリプトを記述することで、レンダリング時にそれを実行させることができます。ただし、通常のJavaScriptの感覚で処理を実行させるとうまくいかないので注意が必要です。

このスクリプトレットは、あくまでサーバー側でレンダリングされた際に実行されるものですから、例えば、document.getElementById("hoge").innerHTML = "hello";というようにDOMオブジェクトを操作するような処理は書けません。ではどうするのかというと、「output」という暗黙オブジェクトを利用します。

output.append( 追加する内容 );

こんな具合にして、その場所に書き出す内容を引数に指定することで、それがレンダリング時にHTML内に組み込まれるようになります。

これは、ちょっと言葉で説明しづらいので、実際にサンプルを見ながら理解していくことにしましょう。ここではごく簡単な掲示板を考えてみます。メッセージを送信すると、それを保管し、リストにして表示する、というようなものですね。メッセージは、ScriptDbを使って保管します。これは以下のような形のオブジェクトとして保存することにしましょう。

{type:'msgdata', msg: メッセージ, num:番号 }

投稿したメッセージの順番がわかるように番号をつけておくことにしました。このようにして保管されたオブジェクトを、ページをロードする際に取得して、スクリプトレットを利用して内容を表示していくことにします。

●データ一覧の表示
下のリスト欄に、とりあえずは「投稿された内容をすべて表示する」という部分だけを掲載しておきました。まだ投稿する部分がないので、実際には役に立ちませんが、「ScriptDbに保存したオブジェクトを取得して表示する」という基本部分の仕組みはこれでわかります。

まず、サーバー側のスクリプトからです。doGetは既に説明済みですね。もう１つ、ScriptDbで検索したオブジェクトを返す関数としてgetMsgsというものを用意してあります。

  var db = ScriptDb.getMyDb();
  var result = db.query({type:'msgdata'}).sortBy('num', db.DESCENDING, db.NUMERIC);
  return result;

これは、このようにqueryを使ってmsgdataオブジェクトを検索し、その結果をreturnするものです。sortByを使って、通し番号（numプロパティ）の降順に並べ替え、一番新しいものから並ぶようにしておきました。

これを、index.htmlに用意したスクリプトレットで呼び出し、受け取った内容を書きだしていきます。

var res = getMsgs();
while(res.hasNext()){
  output.append('<li>' + res.next().msg + '</li>');
}

getMsgsを呼び出して結果を受け取り、while(res.hasNext()) でまだデータが残っている間、繰り返しを行います。その内容は、res.next().msg で取得したメッセージを output.append で<li>タグにまとめて追加する、というものです。両者の働きをよく見て、「サーバーから受け取った情報をスクリプトレットで出力する」という基本的な流れを頭に入れておきましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

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>
  <ul id="list">
<?
var res = getMsgs();
while(res.hasNext()){
  output.append('<li>' + res.next().msg + '</li>');
}
?>
  </ul>
</body>
</html>


※スクリプト

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

function getMsgs(){
  var db = ScriptDb.getMyDb();
  var result = db.query({type:'msgdata'}).sortBy('num', db.DESCENDING, db.NUMERIC);
  return result;
}

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail