CodeZine(コードジン)

特集ページ一覧

Windowsストアアプリでボタンを押して計算しよう

作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/10/17 14:00
目次

 Windowsストアアプリ作成すると、次の/js/default.jsが自動生成されます。このファイルに、アプリで必要な処理をプログラミングします。

default.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に代入される関数の中にプログラムを書きます。

 では、アプリケーションの起動時や中断時ではなく、ユーザの操作によって処理を実行するにはどのようにすればよいでしょうか?

 ボタンをクリックする、画面をタップする、リストの値を変更するなど、ユーザによってアプリケーションが操作された動作を「イベント」と呼びます。

 一般的なアプリケーションでは、このイベントが発生したときに、計算する・表示する・通信するといった動作を行います。これを「イベントドリブン型プログラミング」と呼びます。そして、イベントが発生したときに行う処理を記述したプログラムを「イベンドハンドラ」と呼びます。

イベント駆動型プログラミング
イベント駆動型プログラミング
Windowsストアアプリのセキュリティ

 default.jsは、次のように関数全体がカッコで囲まれています。

(function () {
 "use strict"; 
})();

 これは、匿名関数と呼ばれているもので、プログラム内の変数の利用範囲を限定することができます。変数の利用範囲を限定することで、誤って値を書き換えてしまったり、うっかり同じ名前の変数を使ってしまうこともなくなります。

 また、use strictの命令を記述することで、通常よりもJavaScriptのエラーチェック機能が厳しくなります。そのため、エラーの可能性を最初に摘んでくれるので、実行時の意図しないエラーを未然に防ぐことができ、より安全なコードになります。

今日の日付を表示しよう

 それでは、具体的に旅行カタログアプリケーションのプログラミングを行いながら説明をしていきます。はじめに、アプリケーションを起動したときに、今日の日付が表示できるようにプログラミングをします。

日付を表示する場所をきめる

 まず、タイトルの下に日付を表示するためのコントロールを配置します。default.htmlを開き、header要素の中を修正してください。次のようにid属性が「today」であるspan要素を配置します。

日付の表示エリア(default.htmlの抜粋)
<div id="header">
     <h2>サンプル旅行代理店 ホテルカタログ</h2>
     <span id="today"></span>
</div>

日付を表示するプログラムを書く

 Visual Studioのソリューションエクスプローラでdefault.jsを選択し、ダブルクリックしてファイルを開きます。サンプルアプリケーションに実行日の日付を表示する関数showDateを次のように作ります。

日付の表示(default.jsの抜粋)
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();の前に入れます。

日付の表示(default.jsの抜粋)
(function () {
     ~ 中略 ~

    function showDate() {
        // 1. 日付を表示する位置を取得する
        var today = document.getElementById("today");
        // 2. 取得した位置に日付を表示する
        today.textContent = new Date().toLocaleDateString();
    }
    app.start();
})();

 あとは、この関数を実行するタイミングにあわせて呼び出します。

ShowDate関数の呼び出し(default.jsの抜粋)
app.onactivated = function (args) {
~ 中略 ~
        args.setPromise(WinJS.UI.processAll());
        // 3. 関数showDateを呼び出す
        showDate();
    }
};

 これで日付表示の処理部分のプログラミングは完成です。[F5]キーをクリックすると、タイトルの下に実行日の日付が表示されているのが確認できるでしょう。

日付表示の完成
日付表示の完成
Dateオブジェクトでの月の指定について

 Dateオブジェクトで2013年10月1日を設定するときは、Date(2013,9,1)と指定する必要があります。ここで注意が必要なのは、月がDateオブジェクトで指定したものと1か月ずれるということです。なぜかというと、人間の世界では1月から12月までですが、JavaScriptはコンピュータ内部で、0月から11月までと認識しています。そのため、1か月ずれてしまいます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5