Windowsストアアプリ作成すると、次の/js/default.jsが自動生成されます。このファイルに、アプリで必要な処理をプログラミングします。
(function () {
～中略～
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: このアプリケーションは新しく起動しました。ここでアプリケーションを
// 初期化します。
} else {
// TODO: このアプリケーションは中断状態から再度アクティブ化されました。
// ここでアプリケーションの状態を復元します。
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: このアプリケーションは中断しようとしています。ここで中断中に
// 維持する必要のある状態を保存します。
～中略～
};
～中略～
})();
アプリケーションが起動したときに処理を行いたい場合は、app.onactivatedに代入される関数の中にプログラムを書きます。また、アプリケーションが中断している状態から再度有効になったときに処理を行いたい場合は、app.oncheckpointに代入される関数の中にプログラムを書きます。
では、アプリケーションの起動時や中断時ではなく、ユーザの操作によって処理を実行するにはどのようにすればよいでしょうか？
ボタンをクリックする、画面をタップする、リストの値を変更するなど、ユーザによってアプリケーションが操作された動作を「イベント」と呼びます。
一般的なアプリケーションでは、このイベントが発生したときに、計算する・表示する・通信するといった動作を行います。これを「イベントドリブン型プログラミング」と呼びます。そして、イベントが発生したときに行う処理を記述したプログラムを「イベンドハンドラ」と呼びます。
default.jsは、次のように関数全体がカッコで囲まれています。
(function () {
"use strict";
})();
これは、匿名関数と呼ばれているもので、プログラム内の変数の利用範囲を限定することができます。変数の利用範囲を限定することで、誤って値を書き換えてしまったり、うっかり同じ名前の変数を使ってしまうこともなくなります。
また、use strictの命令を記述することで、通常よりもJavaScriptのエラーチェック機能が厳しくなります。そのため、エラーの可能性を最初に摘んでくれるので、実行時の意図しないエラーを未然に防ぐことができ、より安全なコードになります。
今日の日付を表示しよう
それでは、具体的に旅行カタログアプリケーションのプログラミングを行いながら説明をしていきます。はじめに、アプリケーションを起動したときに、今日の日付が表示できるようにプログラミングをします。
日付を表示する場所をきめる
まず、タイトルの下に日付を表示するためのコントロールを配置します。default.htmlを開き、header要素の中を修正してください。次のようにid属性が「today」であるspan要素を配置します。
<div id="header">
<h2>サンプル旅行代理店 ホテルカタログ</h2>
<span id="today"></span>
</div>
日付を表示するプログラムを書く
Visual Studioのソリューションエクスプローラでdefault.jsを選択し、ダブルクリックしてファイルを開きます。サンプルアプリケーションに実行日の日付を表示する関数showDateを次のように作ります。
function showDate() {
// 1. 日付を表示する位置を取得する
var today = document.getElementById("today");
// 2. 取得した位置に日付を表示する
today.textContent = new Date().toLocaleDateString();
}
それでは、プログラムの説明をします。
1. 日付を表示する位置を取得する
この命令では、default.htmlの中のid属性が「today」のHTML要素を取り出し、それを「today」という変数に入れています。
2. 取得した位置に日付を表示する
次は変数todayの中に、本日の日付を代入します。本日の日付を求めるには、JavaScriptであらかじめ用意されている部品、Dateオブジェクトを使用します。このDateオブジェクトは、日時を自由に決められる時計のようなもので、年/月/日/時間/分/秒を任意の値に設定したり、設定した日時を取得したりできます。
Dateオブジェクトで任意の日付を指定しない場合、すなわちDate()とすると、本日の日付が自動的にセットされます。このDate()で取得できる値を、人間が見やすい形に整えてくれるのが、toLocalDateString()という命令です。この命令はなくてもプログラムは動作しますが、書かなかった場合、協定世界時を基準とした英語表記の日付が表示されます。
これで、日付を表示する関数が出来上がりました。これを、default.jsの末尾から2行目にあるapp.start();の前に入れます。
(function () {
～ 中略 ～
function showDate() {
// 1. 日付を表示する位置を取得する
var today = document.getElementById("today");
// 2. 取得した位置に日付を表示する
today.textContent = new Date().toLocaleDateString();
}
app.start();
})();
あとは、この関数を実行するタイミングにあわせて呼び出します。
app.onactivated = function (args) {
～ 中略 ～
args.setPromise(WinJS.UI.processAll());
// 3. 関数showDateを呼び出す
showDate();
}
};
これで日付表示の処理部分のプログラミングは完成です。［F5］キーをクリックすると、タイトルの下に実行日の日付が表示されているのが確認できるでしょう。
Dateオブジェクトで2013年10月1日を設定するときは、Date(2013,9,1)と指定する必要があります。ここで注意が必要なのは、月がDateオブジェクトで指定したものと1か月ずれるということです。なぜかというと、人間の世界では1月から12月までですが、JavaScriptはコンピュータ内部で、0月から11月までと認識しています。そのため、1か月ずれてしまいます。
