Firefox add-on 艦これ遠征 Timer 改良版作成記

　艦これの8月1日アップデートも無事終わり，期間限定海域が実装されましたね！潜水艦の硬さに第一水域で絶賛苦戦中です...。

　アップデートという大仕事の中，運営鎮守府の方々のライブ感あふれる丁寧なツイートがとても印象的でした。それに触発されて，自分も頑張って艦これ遠征 Timer をアップデートしなくちゃ！と思い立ちました。


　 前回の記事での実装は，情報系をかじった者としてはちょっと恥ずかしいものでした。同じ処理をタイマーの個数分記述していたりと，無駄が多いものでした。
　そこで今回，JavaScript のオブジェクト指向言語の特性を活かしたコーディングに挑戦してみました。

　全体の構造の参考にさせていただいたのは，下記サイトです。
[js]キャンペーンや締め切り日を100分の1秒までカウントするタイマーを作りました | つーる亭
イヌでもわかるJavaScript講座 - ラーメンタイマー

　とりあえずこちらのコードを元に，3 つのプルダウンメニューを追加し，各メニューの onchange からタイマーを設置してみました。しかし，3 つとも同じタイマーを使用しているため，1 つのメニューの変更が，他のメニューにも反映されてしまいました。
　まあ当然といえば当然。いろいろと試してみましたが，結局タイマーを 3 つに分けて，外部変数にすることで解決しました。


　さてこれで動くと思ったのもつかの間，メニューを「長距離演習航海」から「海上護衛任務」に切り替えると，「残り時間 30 分」のカウントダウンと，「残り時間 1 時間 30 分」のカウントダウンが交互に表示されてしまいました！
　メニュー切り替えのたびに新しいタイムリミットを渡しているのになぜだろう....とひとしきり悩みました。そして気づきました！

　今までのコーディングでは，メニュー切り替えのたびに新しいカウントダウン関数オブジェクトを生成し，そいつに新しいタイムリミットを渡していました。そのため，新しいカウントダウンを始めているつもりでも，以前のオブジェクトはそのまま残っているため，2 重にカウントダウンされてしまっていたのです。
　そこで，typeof オブジェクト名 == 'undefined' による判定結果を元に，タイマーオブジェクトがまだ定義されていなかったらオブジェクトを生成し，オブジェクトが既に存在しているならば，
オブジェクト名.initialize(引数)
によってオブジェクトを初期化し，再利用するように変更しました。

　これでようやくきちんと動作するようになりました！


　また，今までは決め打ちの時間をカウントダウンしていましたが，タイムリミットを現在時刻を元に設定し，そのリミットと現在時刻の差を取ることによりカウントダウンをするように変更しました。
　これにより，PC のスリープなどにより，Firefox が動いてなくてもカウントダウンが継続するように，ずれないようになりました。


　こちらにアドオンを置きました
艦Timer add-on
2013/7/27 : ver. 0.1 公開
2013/8/2   : ver. 0.2 公開
2013/8/9   : Firefox 23 における，プルダウンメニュー描画の不具合に対応。
2013/8/12 : 遠征終了時刻になると，アドオンのアイコンの色が変わるように改良。
 ＃注意：本プログラムを動作させた結果については、一切責任を負いかねますので、ご了承下さい。くれぐれも自己責任での使用をお願い致します。
＃遠征先は，コスパの良い，長距離練習航海，海上護衛任務，鼠輸送作戦の3つ限定となっています。
　解凍後，xpi ファイルを Firefox ウインドウ内にドラッグアンドドロップするとインストールが行えます。

　動作画面。金剛さんを見るとやる気が出てきます。

　公式の UI が遠征時間表示に対応しない間は，折を見てまたアドオンのアップデートをしようと思います。
　それでは呉鎮守府に帰投いたします。