at Shibuya.js beyond HTML5 (2010/07/30) http://atnd.org/events/6730

1. 時を超えた JavaScript の道
@teppeis
Shibuya.js beyond HTML5 2010/07/30

2. 自己紹介

3. 経緯
席が向かえの amachang と机の下で足があたっ
たりして ｷｬｯｷｬｳﾌﾌ ヾ(*´∀｀*)ﾉ するリア充生活
を送っていたら、いつのまにか LT することになっ
ていました。
お手柔らかにおねがいします！

4. さて、国際化が叫ばれる昨今
社内公用語の英語化が話題です。

5. ちょっと待って！
国際化といえば、
タイムゾーンを忘れてませんか？
ということで、
JavaScript のタイムゾーンの話をします。

6. とりあえずデモ
画面上の時刻表示を変換する Chrome 拡張
ATND の microformats を読み取って、
PST（太平洋標準時）に変換します。

7. 音響カプラと
3Dと
顔文字アセンブラ
のあとに
この地味なデモ。

8. Warning
こっから
地味な話が続きます。
眠たい人は
今がチャンスです。

9. Date Object in JavaScript
new Date() はローカルタイムを生成
ローカルタイムとUTCのみを扱える
ローカルタイムのタイムゾーンはOS設定
夏時間の計算方法は環境依存

10. え。ということは？
UTCやOS設定以外のタイムゾーンを扱うことが
できない
環境によって日時表示や日時計算がずれる場合
がある

11. いろんなTZを扱いたいケース
例）JST を PST に変換したい
例）カレンダーに旅行の予定を登録するUI
帰りの飛行機は現地時刻(PST)で14:00
「時差何時間だっけ。。」
「この時期ってサマータイム？」
「OSの設定変えたくないよ＞＜」
JavaScript Date では解決できない！

12. 環境によって日時がずれるケース
// OSのタイムゾーンをPST（太平洋標準時）に設定して
// 2006年4月2日 午前1時 (PST) のタイムスタンプをチェック
var dt = new Date(2006,3,2,1,0,0,0);
if (1143968400000 === dt.getTime()) {
alert( "OK" );
} else {
alert( "NG" );
}

13. 結果
Firefox Chrome Safari Opera IE
Windows NG NG NG NG NG
Mac OK OK NG NG -
Linux OK OK - NG -
iPhone - - NG NG -
Android - OK - - -

14. なんでズレたの？
PDT（太平洋夏時間）の期間が
2006年から2007年にかけて変更されたから
夏時間の期間が約１ヶ月後ろにずれた
2006-04-02 01:00:00 は歴史的には夏時間
ただし、新ルールで計算し直すと標準時

15. 夏時間の対応レベル
Lv.1 ルールベース
毎年同じ夏時間ルールを適用
例）毎年3月第2日曜午前2時から夏時間
Windows
Lv.2 ヒストリカルデータ
過去の時差情報を利用して時差計算
いわゆる zoneinfo, tz database.
世界の秩序は Olson さんがローカルで管理してる！
Linux, Java, Python, Ruby...

16. ブラジルにルールなんてない！
ブラジルは夏時間期間を毎年都度発表
ネパールは +5:45（1986年までは +5:40）

17. ECMAScript ではどうなってるの？
15.9.1.8 Daylight Saving Time Adjustment
ECMAScriptの実装としては、同じルールを毎
年適用する。
でもホスト環境が年ごとの夏時間情報を提供
する場合は、それを利用してもいいよ。
つまり、環境と実装に依存

18. ということで、
OSに依存せずタイムゾーンを選択
OSに依存せず時差計算
ヒストリカルデータ対応
こんなことをやりたいな。

19. アプリ開発言語としての JS
Webサイトのクライアント側、じゃなくて
HTML5 = オフラインアプリケーション
サーバーアクセス無しで動きたい
ECMAScript の Date では不十分
ActionScript はどうしてるんだろう

20. あった。
Google Closure Library

21. あれ？肝心のデータが。
URLが。。

22. データ生成する
せっかくなので Rhino 使ってみた
タイムゾーンデータは Joda Time（手抜き）
JSONフォーマットに変換
tzdata['America/LosAngeles'] = {
'transitions': [ // 遷移時刻タイムスタンプ（時間）と標準からの時差（分）の配列
2770, 60, 7137, 0, 11506, 60, 16041, 0,
...
580186, 60, 585897, 0, 588922, 60, 594633, 0
], // 標準時の短縮名、正式名、夏時間の短縮名、正式名
'names': ['PST', 'Pacific Standard Time', 'PDT', 'Pacific Daylight Time'],
'id': 'America/Los_Angeles', // ID
'std_offset': -480 // 標準時差
};

23. 生成したタイムゾーンデータ
1970年 - 2038年
全558地域
358 KB
Webアプリならアプリケーションキャッシュを使う
か、ファイルを分割して遅延ローディングが良さそ
う。

24. あれ？
goog.i18n.TimeZone には localToUTC なメソッ
ドがない
goog.date.DateTime にもない。
タイムゾーンの変換ができない。片手落ち。
ので、いくつかの API 追加実装。

25. goog.i18n.TimeZone.prototype.getUTCMillisFromLocal = function(
opt_year, opt_month, opt_date, opt_hours,
opt_minutes, opt_seconds, opt_milliseconds) {
...
var localMillis = Date.UTC( opt_year, opt_month, opt_date, opt_hours,
opt_minutes, opt_seconds, opt_milliseconds);
var localDate = new Date(localMillis);
var localOffset = this.getOffset(localDate) * 60 * 1000;
var adjustedDate = new Date(localMillis + localOffset);
var adjustedOffset = this.getOffset(adjustedDate) * 60 * 1000;
if ( localOffset > adjustedOffset ) {
var localNext = this.nextTransitions(localMillis + localOffset);
var adjustedNext = this.nextTransitions(localMillis + adjustedOffset);
if ( localNext !== adjustedNext ) {
return localMillis + localOffset;
}
}
return localMillis + adjustedOffset;
};

26. ようやくデモ
デモ
画面上の時刻表示を変換する Chrome 拡張
ATND の microformats を読み取って、
PST（太平洋標準時）に変換します。

27. まとめ
JS でマルチタイムゾーンを扱うには自前で実装する必要
があるよ。
標準でなんとかならないかなぁ。
Google Closure 使うんじゃなかった。。
HTML5 ってなんだっけ。

28. 以上です。
ありがとうございました！