アプリに表示するデータを用意しよう
旅行先を決めるときは、観光地やホテルなどの写真や情報が一目で分かると便利です。そこで、旅行カタログアプリでは次のデータを用意します。
- 旅行先の写真
- タイトル
- インフォメーション
まず、旅行先カタログに表示したい写真を用意し、それらの写真をVisual Studioのソリューションエクスプローラの［images］フォルダにドラッグ＆ドロップします。画像は任意のもので構いませんが、サンプルアプリでは（eu1.jpg～eu2.jpgおよびbeach1.jpg～beach5.jpg）の7つのファイルを使います。
なお、［images］フォルダには、あらかじめアプリケーションのロゴ画像ファイルが4つ（logo.png／smalllogo.png／splashscreen.png／storelogo.png）用意されていますが、これらのファイルを削除しないようにしてください。
データバインディングとは？
JavaScriptのプログラムで定義したデータを、htmlの画面に表示させるには、プログラムと画面を連携させる必要があります。この連携は「データバインディング」と呼ばれています。このデータバインディングを行うと、プログラムで動的に変更した値を、画面に反映させることができます。
表示するデータを定義する
用意した画像ファイルにテキスト形式のタイトルとインフォメーションを追加して、次のようにデータを表示させます。
まず、アプリケーションで使用するデータを、JavaScriptでプログラミングします。Visual Studioの［ソリューションエクスプローラ］で/jsフォルダを選択した状態で、右クリックし［追加］－［新しい項目］を選択します。新しい項目を作成するダイアログで、JavaScriptファイルを選択し、ファイル名を「traveldata.js」として［追加］ボタンをクリックします。
これで、ソリューションエクスプローラの/jsフォルダの配下に、traveldata.jsという新しいJavaScriptのファイルが生成されました。
今回のサンプルアプリでは、ヨーロッパとビーチリゾートの2か所の旅行先データを次のように定義します。
| 変数名 | 画像 | 説明 |
|---|---|---|
| dataArrayEU | eu1.jpg～eu2.jpg | ヨーロッパの写真（2枚） |
| dataArrayBeach | beach1.jpg ～beach1.jpg | ビーチリゾートの写真（5枚） |
各画像ファイル（image）に、それぞれテキスト形式のタイトル（title）とインフォメーション（info）を定義します。
(function () {
"use strict";
// 旅行データの登録（ヨーロッパ）
var dataArrayEU = [
{ title: "イタリア", image: "/images/eu1.jpg", info: "地中海に面した温暖な気候です" },
{ title: "イタリア", image: "/images/eu2.jpg", info: "歴史的な建造物が数多くあります" }
];
// 旅行データの登録（ビーチリゾート）
var dataArrayBeach = [
{ title: "バリ島", image: "/images/beach1.jpg", info: "プール付きの部屋です" },
{ title: "バリ島", image: "/images/beach2.jpg", info: "コテージが点在しています" },
{ title: "バリ島", image: "/images/beach3.jpg", info: "エステも充実しています" },
{ title: "バリ島", image: "/images/beach4.jpg", info: "天蓋付きのベッドです" },
{ title: "バリ島", image: "/images/beach5.jpg", info: "手入れの行き届いた庭です" }
];
})();
ここで作成したデータを、旅行カタログアプリの画面で使用するために、default.htmlを開き、head要素の中を次のように修正します。
<head>
～中略～
<!-- WinJS 参照 -->
～中略～
<!-- TravelSample 参照 -->
～中略～
<!-- 連載第5回 旅行のデータ参照 -->
<script src="/js/traveldata.js"></script>
</head>
