株式会社ジェニシス 技術開発事業部の遠藤 太志郎(Tacy)です。
本年もよろしくお願いします。
さて、ここしばらくはJavaScriptによる画面レンダリングツール「JsRender」について連載していましたが、
それも今回で最終回を迎えます。
最終回はGAEとの連携です。
思い出す
過去の記事を掘り返してみたら、GAEの記事を最後に書いたのは2014年9月でした。もう4ヶ月も経ってしまったのですね……。
そして、そのGAEでの連載で私が何度も主張していたこと。それは。
GAEはjspを使わず、フルAjaxで書いてこそ真価を発揮する。
これでした。
そして、そのGAEの連載を中断して始めたのが、本連載である画面レンダリングツール「JsRender」のご紹介……。
もうお分かりですね。
この一連の連載は、JsRenderをGAEで使用する為の前振りだったのです。
ようやく本懐を遂げること出来ました。
では、さっそくGAEに適用してみましょう。
JSON発行
GAEからJSONを発行する方法は過去の記事で紹介しておりましたね。昔の記事なので改めて書きますが、
GAEでは「GSON」というライブラリを使ってJavaのオブジェクトをJSON文字列化するやり方をオススメします。
Gson gson = new Gson(); String json = gson.toJson(jet);
その結果、以下のようなJSON文字列が出力されます。
{"shohinList":[{"key":{"kind":"Shohin","id":57},"seqNo":1,"shohinId":"57","shohinName":"%E5%95%86%E5%93%813","stock":345,"deliveryDate":"2015/01/10","createdAt":"2015/01/08 21:45:28","updatedAt":"2015/01/08 21:45:28"},{"key":{"kind":"Shohin","id":56},"seqNo":2,"shohinId":"56","shohinName":"%E5%95%86%E5%93%81%EF%BC%92","stock":234,"deliveryDate":"2015/01/09","createdAt":"2015/01/08 21:45:15","updatedAt":"2015/01/08 21:45:15"},{"key":{"kind":"Shohin","id":55},"seqNo":3,"shohinId":"55","shohinName":"%E5%95%86%E5%93%81%EF%BC%91","stock":123,"deliveryDate":"2015/01/08","createdAt":"2015/01/08 21:44:48","updatedAt":"2015/01/08 21:44:48"}],"responseCode":0}
ゴジャゴジャしていて分かりませんが……。
実は「日本語はURLエンコードしないと文字化けして送受信出来ない」とか色々問題があるのですが、その辺については後日の連載で。
ともかく、この文字列を以下のやり方でレスポンスに乗せてあげれば、Ajaxでレスポンスを取得することが出来ます。
response.getWriter().write(json);
画面出力
文字列さえ出力出来てしまえばこっちのものです。標準的なJQueryの非同期通信で文字列を取得し、そのままJsRenderに流し込んでしまいます。
function doSearch() {
$.ajax({
url : $("#form").attr('action'),
type : $("#form").attr('method'),
data : $("#form").serialize(),
dataType : 'json',
success : function(json) {
var items = json.shohinList;
var length = items.length;
for (i = 0; i < length; i++) {
items[i].shohinName = decodeURI(items[i].shohinName);
}
$("#shohinList").html($("#shohinListTemplate").render(json));
}
});
}
JsRenderのテンプレートはこちら。 <script id="shohinListTemplate" type="text/x-jsrender">
<table class="shohinList">
<tr>
<th class="no">NO</th>
<th class="shohinId">商品ＩＤ</th>
<th class="shohinName">商品名</th>
<th class="action"></th>
</tr>
{{for shohinList}}
<tr>
<td class="no">{{>seqNo}}</td>
<td class="shohinId">{{>shohinId}}</td>
<td class="shohinName">{{>shohinName}}</td>
<td class="action">詳細 編集</td>
</tr>
{{/for}}
</table>
</script>
>/script<
結果は、ほら。
普通のjspと比較しても遜色無い機能的な検索結果一覧が出力出来ました。
これでGAEの画面出力も安心ですね。
終わりに
ようやくGAEに戻って参りました。画面出力機能の骨子が出来上がったことですし、
次回からは再びGAEに復帰。
GAEのDBであるBigTableの『検索』についてご紹介して行きたいと思います。
