只今、クラウド基盤「Google App Engine(以下、GAE)」の連載しています。
本日から「初級実装編」と称しまして、実際にモノを作っている真っ最中です。
今回は疎通確認まで行ってみます。
疎通確認
過去記事の復習になりますが、GAE開発はフルAjax開発です。この為、GAE開発の最も土台となる部分は非同期通信です。
今回はその非同期通信関連をテーマにお送りします。
非同期通信
私が社会人１年目であった２００７年当時、まだAjaxという言葉は聡明期にありました。この頃はGoogleがAjax機能を用いた「Googleマップ」「Googleサジェスト」を公開してAjaxの知名度が一気に世界的に広まった時期と重なりまして、
私は当時、このAjax機能について熱心に研究を重ねていたものです。
Ajaxというのは主にユーザインターフェースを快適にする為の技術ですので、TwitterやFacebookのようなSNS系のサイトでは多用される一方、
インターフェースよりも機能そのものに重点が置かれる傾向にあるビジネス用アプリでは出番が少な目な傾向にあると思います。
その点、私はビジネス系のSEでありながらAjaxが特技という、ちょっと変わったタイプかもしれませんね。
さて、GAE開発では通常のJavaWebシステム開発とは異なりフルAjax開発となりますので、
最も重要なのは非同期通信のロジックです。
非同期通信を実現する方法はいくつもありますが、
やはり今となっは事実上の業界標準と言って差し障りないjQueryを使うのが最適でしょう。
jQueryの解説サイトは山ほどありますので詳しくは省略しますが、「$.ajax」というメソッドを使うことでサーバと通信が可能です。
function loadMonthlyReport(){
$.ajax({
type: 'GET',
url: '/webapi/develop/responsePing',
data: 'message=' + "testMessage",
dataType: 'json',
success: function(json){
alert(json.message);
}
});
}
ここでポイントとなるのは、「dataType: 'json'」、ここです。
この連載における非同期通信では、リクエストの送信はGET/POSTのような通常のHTTPリクエスト送信で行い、
そのレスポンスはサーバよりJSON形式にて取得致します。
JSONにつきましては次回に先送りし、今回はリクエスト送信に的を絞って記述します。
クルクル画像
過去の記事の復習になりますが、GAEにはスピンアップ問題という宿業がありまして、普通にサーバにアクセスすると、運悪くスピナップのタイミングを引いた人はサーバからのリクエストを何秒か待たされてしまうことになるのです。もし普通のJavaWebシステム開発と同じくjspで開発したら、画面が真っ白のまま１０秒くらい固まってしまうことになります。
これを回避というか、誤魔化す為のテクニックとしてAjaxを使うのです。
Ajax作戦はスピンアップを回避する為のものだという目的意識をハッキリと持たねばなりません。
つまり、上記の非同期通信を投げて、スピンアップして、戻ってくる１０秒弱の間、利用者にストレスを与えないよう「ロード中画像」を表示するというのは、全く当然の帰結なわけです。
ロード中画像とは以下のような画像を意味します。
これが一番オーソドックスで手堅い戦術ですが、よりよりインターフェースの為に、更なる細かい工夫も考えて行きたい所ですね。
受信
さて、リクエスト送信結果をJava側にて取得します。導入しているライブラリ「Slim3」は標準ではパッケージ構成とURLがマッピングしますので、
送信先URLが上記のような「/webapi/develop/responsePing」であった場合、
Javaの方では「jp.co.net.genesis.controller.webapi.develop.ResponsePingController.java」が呼ばれるという、
直感ですぐ分かる便利な構造になっています。
ここまで来れば、後は普通のWebシステムと同じく、HttpServletRequestからパラメータを取得するだけです。
試しにアクセスしてみて、ログを出力してみましょう。
protected void requestLog() {
StringBuilder bul = new StringBuilder();
Map requestMap = request.getParameterMap();
for (String key : requestMap.keySet()) {
bul.append(System.getProperty("line.separator"));
bul.append(key);
bul.append("=");
bul.append(asString(key));
}
if (bul.length() > 0) {
bul.insert(0, "===リクエストメッセージ:START===");
bul.insert(0, System.getProperty("line.separator"));
bul.append(System.getProperty("line.separator"));
bul.append("===リクエストメッセージ:END===");
logger.info(bul.toString());
}
}
結果は以下のような感じです。
普通に出力されましたね。
これで疎通確認の片方、リクエスト送信は終了です。
まあ、何てこと無い簡単な作業でした。
終わりに
「画面⇒サーバ」のリクエスト送信は全く標準的なものでして、特に目新しいことも無く簡単に実現できるかと思います。一方、「サーバ⇒画面」のレスポンス。
これについてはGAEの特徴を考慮してクラス設計をする必要があり、ちょっと頭を捻る必要があります。
次回は「疎通確認 後半 ～レスポンス送信～」をお送りします。
0 件のコメント:
コメントを投稿