2013年7月24日水曜日

連載:ちょっとディープなXPages 第2-3回~JavaScriptをもっと知ろう

みなさん!XPages開発していますか!?
さて今回は、JavaScriptの型変換について記載してみたいと思います。SSJSについてもやるので、JavaScriptが続いてなんだかXPagesから離れてるな~なんて思っている方、ぜひ見てくださいね。
型変換についての説明は、文字列、数値、日付型の相互変換について書いていきます。

文字列型への型変換

数値→文字列

Number型にtoString()メソッドが存在するので、これを使うことで良いでしょう。また、String関数や自動型変換を利用することもできます。
また、自動型変換を利用した記述の少ない方法もよく取られます。
/* SSJS, CSJS */
var num0 = 123,
    num1 = 456.789,
    num2 = 987.654;
//SSJSの場合はprintを使う
console.log('num0:' + num0.toString()); // "num0:123"
console.log('num1:' + String(num1)); // "num1:456.789"
console.log('num2:' + (num2+'')); // "num2:987.654"
// 一番下は、'num2:' + num2 でも同じ結果だが、
//num2を数値から文字列に型変換することを名確認するため、(num2+'')とする。
書式を指定した変換の仕組みは、ビルドイン関数にありませんが、XPagesでは書式変換用の関数を利用できます。
CSJSではDojoの関数"dojo.number.format"を利用します。
dojo.numberオブジェクトを使用するためには、XPagesのリソース→追加→Dojoモジュール→Dojoモジュール名"dojo.number"を指定します。
イメージ
/* CSJS */
var num0 = 123456;
console.log('num0-1:' + dojo.number.format(num0,{pattern: '0000000000'})); // "num0-1:0000123456"
console.log('num0-2:' + dojo.number.format(num0,{pattern: '#,###.00'})); // "num0-2:123,456.00"
※ 書式については、こちらにを参照してください。
SSJSについては、I18n.toString()を使用することで、任意のフォーマットに安全に変換出来ます。
/* SSJS */
var num0 = 123456;
print('num0-1:' + I18n.toString(num0, '0000000000')); // "num0-1:0000123456"
print('num0-2:' + I18n.toString(num0, '#,###.00')); // "num0-2:123,456.00"

日付→文字列

JavaScriptのDateオブジェクトには、toString()メソッドが存在しますが、これはローケーションによって書式が異なり、戻り値の予測が困難なため、使用してはいけません。
XPagesでは数値型と同じようにCSJS、SSJSに関数が用意されていますので、それを利用しましょう。
dojo.date.localeオブジェクトを使用するので、XPagesのリソース→追加→Dojoモジュール→Dojoモジュール名"dojo.date.locale"を指定してください。
イメージ
/* CSJS */
var date = new Date();
//日付のみ変換
console.log('date0-1:' +
  dojo.date.locale.format(date,{datePattern: 'yyyy/MM/dd', selector:'date'})); // "date0-1:2013/07/01"
//日時
console.log('date0-2:' +
  dojo.date.locale.format(date,{datePattern: 'yyyy/MM/dd HH:mm:ss'})); // "date0-2:2013/07/01 17:25:31"
/* SSJS */
var date = new Date();
//日付のみ変換
print('date0-1:' + I18n.toString(date, "yyyy/MM/dd")); // "date0-1:2013/07/01"
//日時
print('date0-2:' + I18n.toString(date,"yyyy/MM/dd HH:mm:ss")); // "date0-2:2013/07/01 17:25:31"
日付から文字列への変換で、注意しなければならないのは日付、時刻をユーザーのタイムゾーンに合わせる必要がある、ということです。
日本国内のみのアクセスに限定されるのであれば意識することはないですが、複数のタイムゾーンからのアクセスが考えられる場合は必ず配慮してください。
サーバーとクライアントとのタイムゾーンが違う場合、サーバーでDateオブジェクトから文字列に変換すると、通常はサーバーのタイムゾーンで変換され、レンダリングされるので、ユーザーには間違った日時が出力されてしまいます。
XPagesでは、SSJSでの日付の処理をクライアントのタイムゾーンに合わせることができます。DBのプロパティで設定出来ます。
イメージ
こ の設定を行うとXPagesは、初回アクセス時にブラウザのタイムゾーンを取得するためのレスポンスを出力し、クライアント側でJavaScriptに よって自動的にタイムゾーンの取得と、サーバーへの送信が行われ、サーバーがセッション情報として保持する、という動作をするようです。
また、XPagesをJSONを使用したWebサービスとして使うような場合では、この支援が受けられない場合があります。
そういった場合には、JavaScriptビルドインのDate.getTime() / Date.setTime() を使用することで、数値を介して変換します。
getTime() / setTime() はタイムゾーンに関係なく、UTCの1970/1/1からその日付までのミリ秒値(Tick値)を出力/入力できますので、タイムゾーンを意識することなく安全で確実に日時情報のデータの送受信ができます。
//サーバー側
var date = new Date(),
    retObj = {
        tick: date.getTime();
    }
//レスポンスDobyに書き出し(例
writer.write(retObj.toJSON());

//-クライアント側-------------
//--ajax通信については後日やります
var resDate = new Date();
$.ajax({
  url: "test.xsp",
  context: document.body,
  success: function(resBody){
   var retObj = xsp.fromJson(resBody);
   resDate.setTime(retObj.tick); 
  }
});

まだまだ続くよ

今日はこのへんで。次回は数値型、日付型への変換について書く予定です。
JavaScriptが続きますが、もう少しお付き合いを

0 件のコメント:

コメントを投稿