サンプルのプログラムコード解説

データ解析

技術解説

連載 :

gaedirectによるHTML5連携とマッシュアップ

2012年2月6日(月)

清野克行

gaedirectで実現するクラウドWebサービス（スマートクラウド）

(I) 時間取得とフォーマット化

ここでは、チャット書き込みされた時間を取得して、プログラムで処理しやすいフォーマット、および表示用のフォーマットを作成しています。

リスト6 多機能チャットプログラム-４（channelHtl5.htm）

//(I)　開始：時間取得とフォーマット　
function setutime1(){                                                     //（1）
  var date = new Date();
  var yy = date.getYear();
  var mm = date.getMonth() + 1;
  var dd = date.getDate();
  var hh = date.getHours();
  var mt = date.getMinutes();
  var ss = date.getSeconds(); 
  if (yy < 2000) { yy += 1900; }                                          //（2）
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  if (hh < 10) { hh = "0" + hh; }
  if (mt < 10) { mt = "0" + mt; }
  if (ss < 10) { ss = "0" + ss; }
  var utime1 = ""+ yy + mm + dd + hh + mt + ss;                           //（3）
  return utime1; 
} 
function setutime2(utime1){ 
  var utime2 = utime1.substr(0, 4) + ":";
  for (var i = 4; i < 12; i += 2) { 
    utime2 += utime1.substr(i, 2)+ ":";
  } 
  utime2 += utime1.substr(i, 2);
  return utime2;
} 
//(I)　終了：時間取得とフォーマット
</script>
</head>
<body>
<h2>多機能チャット</h2>
<span>
<input type="radio" name="showloc" value="ok" checked />位置表示OK
<input type="radio" name="showloc" value="no" />位置表示NO
</span>  
<input type="button" id="close" value="接続終了" />
<div>
   名前<input type="text" id="uname" size="12"/>
  Email (必須)<input type="text" id="uemail"/>
  <input type="button" id="send" value=" 書込み "/><br/>
  <textarea id="umsg" rows="5" cols="64"></textarea>
</div>
<hr/>
ステータス<span id="status"></span><br/>
<hr/>
<div>
<input type="button" id="revRemote" value=" App Engineデータ参照 "/>
<input type="button" id="revLocal" value=" ローカルPCデータ参照 "/>
<input type="button" id="delLocal" value=" ローカルPCデータ削除 "/>
<input type="button" id="revGmaps" value=" Google Maps参照  "/>
</div>
<table border="0"　width="760"> 
<tbody id="splist" width="760"></tbody>
</table> 
</body>
</html>

リスト6ではsetutime1と setutime2の2つの関数が定義されていますが、それぞれ次のような処理を行っています。

setutime1関数

setutime1では（1）で、Date関数を使用して現在に時刻を取得し、getYear()　から　getSeconds()　の関数で年月日時分秒　を取得していますが、　年4桁、月以下か2ケタの揃えるための処理を（2）からの処理で行っています。以上で処理された値を（3）でutime1に代入していますが、この値は数字だけですべて同じ桁数になり、ソートや数値操作を行い易いデータ形式になっています。

setutime2関数

setutime2では、setutime1で取得された数値並びの年月日時分秒に対して、単位表示の間にコロン（：）を挿入して、人間が見やすい形式に変換しています。

コラム：[Ajax非同期型でのサーバ通信とタイマ処理]

このサンプルでは、gaedirectのChannelサーバに対するプッシュデータ送信でWeb Workersのバックグラウンドスクリプトを使用していますが、Channelサーバへのデータ送信は非同期で行われます。つまりレスポンスはChannelイベント（socket.onmessage）から受信されるので、送信に対するレスポンスは直ちに返され、バックグラウンドで行う意味はあまりありませんでした。

しかし、一般的にはサーバからのレスポンスはサーバ側での処理完了後に返されるので、環境やアプリケーション内容によっては時間が掛かることもあり、特に参照系ではかなり待たされるようなケースも出てきます。このような場合、バックグラウンドスクリプトを使用すれば、サーバからのレスポンスが返されるまでの時間も、フォアグラウンドでの会話型処理はそれを意識することもなく継続することができるようになります。

リスト7　Ajax非同期型でのサーバ通信とタイマ処理

onmessage = function(e) { 
  var timerId = setInterval("timeout()", 3000 );                             //（1）
  var xhr = new XMLHttpRequest(); 
  xhr.open("post", "/channelapi");
  xhr.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");    //（2）
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){                                                //（3）
      if(xhr.status == 200){                                                //（4）
        clearInterval(timerId);                                             //（5）
        var res = xhr.responseText; 
        postMessage("送信完了："+res);                                        //（6）
      }
    }
  }
  xhr.send(e.data);
}
function timeout(){                                                         //（7）
  clearInterval(timerId);                                                   //（8）
  xhr.abort();                                                              //（9）
  postMessage("タイムアウトで通信が切断されました。");                           //（10）
}

リスト7はリスト6のAjax非同期通信を「同期型」に変えたサンプルですが、このサンプルでは、タイマを使用しています。

リストでは（1）でタイマ設定を行っていますが、setIntervalでは、第二引数に指定した時間（ここでは3000ミリ秒）経過すると第一引数に指定した関数が呼び出されます。その後AjaxのPOST同期型での「非同期」通信を行っていますが、（2）はキャッシュデータを使用しないようにするためのHTTPヘッダ追加です。

サーバからのレスポンス受信が完了すると（3）と（4）のif文が満足されて、次のステップに移りますが、ここで直ちに、タイマ設定をクリアして（5）、受信データをpostMessageでフォアグラウンドのスクリプトに送っています。ここでもしタイマで指定した時間内にレスポンスが返らない場合は、（7）のタイマ関数が呼び出されて、タイマ設定のクリア（8）、非同期通信のアボート（9）を行った後、（10）postMessageのでタイムアウトメッセージをフォアグラウンドスクリプトに返しています。

著者

清野克行

この著者の記事一覧この著者の
記事一覧

有限会社サイバースペース

慶應義塾大学工学部電気科卒。日本IBM、日本HPなどにおいて、製造装置業を中心とした業務系／基幹業務系システムのSE／マーケティングや、3階層C/Sアーキテクチャによる社内業務システム開発などに携わる。現在は、Ajax/Web 2.0関連のセミナー講師／コンサルティング、書籍執筆などを行っている。情報処理学会会員。http://www.at21.net/

連載バックナンバー

データ解析技術解説