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

作って学ぶ！ 新人研修／Windowsストアアプリで電子カタログを作ろう（4）

ホテルの宿泊料金を計算しよう

　では、ボタンをクリックしたときに処理を行うプログラムをどのように書けばよいかを説明します。

宿泊料金を表示する場所をきめる

　まず、アプリケーションの下部に宿泊料金を表示するためのコントロールを配置します。default.htmlを開き、footer要素の中を修正します。次のようにid属性がpriceであるspan要素と、id属性がtour_infoであるspan要素を配置します。

宿泊料金の表示エリア（default.htmlの抜粋）

<div id="footer">
  <h2>宿泊料金　<span id="price"></span></h2>
  <span id="tour_info"></span>
</div>

ホテルの室料を取得する（ラジオボタン）

　次に、ラジオボタンで選択されたホテルの1泊の一人あたりの室料を取得します。変数hotel_rankにname属性がhotelのラジオボタンを設定します。ラジオボタンは項目が複数ありますので、繰り返し処理を行うfor文を使って、選択されている項目を取得します。ラジオボタンでは、i番目のボタンが選択されていると、hotel_rank[i].checkedの値がtrueになります。室料は、ラジオボタンが選択されている項目のvalue属性の値です。この値を取得して、変数room_chargeの中に代入します。

ホテルの室料を取得（default.jsの抜粋）

// 4.ホテルの室料を取得
var hotel_rank = document.getElementsByName("hotel");

for (var i = 0; i < hotel_rank.length ; i++) {
    if (hotel_rank[i].checked) {
        var room_charge = hotel_rank[i].value;
        break;
    }
}

滞在期間を計算する（日付ピッカー）

　次に、日付ピッカーで選択されたホテルの滞在期間を取得します。ホテルの滞在期間は、開始日から終了日までの日付の差になります。そこで、日付ピッカーで選択されている値の開始日を変数start、終了日をendに設定します。なお、開始日はid属性がstart_date、終了日はid属性がend_dateの日付ピッカーに設定されていますので、これらで選択されている値を取得します。

　滞在期間は変数tour_dayに代入します。日付ピッカーで選択された値をgetTime関数を使って時刻（ミリ秒）を取得します。そして、変数endと変数startの時刻の差を(1000*60*60*24)で割り、滞在期間の単位をミリ秒から日に変更します。

ホテルの滞在期間を取得（default.jsの抜粋）

//　5.旅行期間を取得
var end = document.getElementById("end_date").winControl;
var start = document.getElementById("start_date").winControl;

var tour_day = (end.current.getTime() - start.current.getTime())
             / (1000 * 60 * 60 * 24);

人数を取得する（スライダー）

　最後に、旅行に参加する人数を取得します。人数は、id属性がmemberのスライダーのvalue属性に設定されています。この値を変数tour_memberに設定します。

旅行人数を取得（default.jsの抜粋）

//  6.旅行人数を取得 
var tour_member = document.getElementById("member").value;

宿泊料金を計算する

　ここまでで、ホテルの宿泊料金の計算に必要な条件の取得ができました。サンプルプログラムでの宿泊料金は下記の式で求めるものとします。

• 宿泊料金＝ホテルの室料（room_charge）×滞在期間（tour_day）×人数（tour_member）

　これより作成した関数calcPriceは、次のとおりになります。

関数calcPrice（default.jsの抜粋）

// 連載 第4回  宿泊料金計算処理
function calcPrice(eventInfo) {

    // 4.ホテルの室料を取得
    var hotel_rank = document.getElementsByName("hotel");

    for (var i = 0; i < hotel_rank.length ; i++) {

        if (hotel_rank[i].checked) {
            var room_charge = hotel_rank[i].value;
            break;
        }
    }

    //　5.旅行期間を取得
    var end = document.getElementById("end_date").winControl;
    var start = document.getElementById("start_date").winControl;

    var tour_day = (end.current.getTime() - start.current.getTime())
                 / (1000 * 60 * 60 * 24);

    //  6.旅行人数を取得 
    var tour_member = document.getElementById("member").value;

    //  7.ホテルの宿泊料の表示
    document.getElementById("price").innerText = " " + room_charge * tour_day * tour_member
                                               + "　円";
    document.getElementById("tour_info").innerText =
                                        "ホテルの室料：" + room_charge +
                                        "   宿泊日数：" + tour_day +
                                        "   人数：" + tour_member;
}

ボタンクリックしたときに宿泊料金を表示する

　宿泊料金の表示は、［宿泊料金を計算］ボタンをユーザがクリックしたときに行います。そのため、作成した関数calcPriceを、id属性がcalcButtonのボタンをクリックしたタイミングにあわせて呼び出します。

関数calcPriceの呼び出し（default.jsの抜粋）

app.onactivated = function (args) {
～ 中略 ～
        args.setPromise(WinJS.UI.processAll());
        // 3. 関数showDateを呼び出す
        showDate();

         // 8. 関数calcPriceを呼び出す
         var button1 = document.getElementById("calcButton");
         button1.addEventListener("click", calcPrice, false);
    }
};

　これでプログラミングは完成です。［F5］キーをクリックすると、アプリケーションが実行され、［宿泊料金を計算］ボタンをクリックすると、アプリケーションの下部に宿泊料金が表示されます。

宿泊料金の表示

（応用）チャレンジしてみよう

　今回はストアアプリでのプログラミングを行いました。余力のある人は、今回作成したWindowsストアアプリを、JavaScriptのリファレンスなどを参照して、自由にカスタマイズしてみてください。

• ホテルをリストで選択可能にする
• 旅行日付の選択範囲を3か月後までにする
• ホテルの室料に子供料金を考慮する
• 滞在終了日を必ず対象開始日以降の日付にする

おわりに

　今回は、Windowsストアアプリで作成した旅行カタログアプリで、日付を表示したり、ホテルの宿泊料金が計算できるプログラムを作成しました。これを通して、JavaScriptでのプログラミングの概要や画面コントロールからの値の取得方法などをご紹介しました。

　次回の記事では、この旅行カタログにホテルの写真や各種情報を表示する機能を追加するため、ストアアプリの代表的なコントロールであるListViewコントロールのプログラミングについて説明します。