Blend を使用した初めての Windows ストアアプリの作成、パート 2: 詳細ページ (HTML と JavaScript)

[アーティクル]
06/05/2015

Blend for Visual Studio の HTML および CSS 用の一連のツールを使用すると、Windows ストアアプリをよりすばやく効率的に開発できます。このチュートリアルでは、PickaFlick という簡単なアプリのビルドについて説明します。このアプリでは、ロッテントマトの API を使用して生成される新しいムービーの一覧を参照できます。

初めての Windows ストアアプリの作成 - Blend (HTML)

サンプルギャラリーからこのプロジェクトをダウンロードすると、コードだけでなく、アセットもすべて確認できるため、作業を進めながらプロジェクトをビルドできます。

注意

このアプリを実行するには、ロッテントマトに登録してキーを取得し、そのキーをコードに貼り付ける必要があります。詳細については、このトピックで後述する「Windows JavaScript API への参照を追加する」を参照してください。

Blend を使用した初めての Windows ストアアプリの作成、パート 1: マスターページ (HTML と JavaScript) では、PickaFlick のホームページを作成しました。パート 2 では、次の方法について説明します。

項目テンプレートをプロジェクトに追加する

ムービーの詳細ページを作成する最初の手順は、このチュートリアルのパート 1 で実行した手順と同様です。HTML ページを作成して div 要素を追加し、その要素の名前を変更して要素 id を作成します。

HTML ページを追加するには

[プロジェクト] パネルで、プロジェクトファイルを右クリックし、[新しいアイテムの追加] をクリックします。

[新しいアイテム] ダイアログボックスが表示されます。
項目テンプレートの一覧で [HTML ページ] をクリックし、「movieDisplay.html」という名前を付けて、[OK] をクリックします。

div を movieDisplay.html に追加するには

[ライブ DOM] パネルで、[body] を右クリックし、[要素の挿入] をクリックして [div] をクリックするか、Ctrl キーと Shift キーを押しながら = キーを押します。
[ライブ DOM] パネルで、追加した div 要素をクリックし、テキストフィールドに「movieDisplayContainer」と入力して名前を変更します。

Visual Studio との間で切り替えを行う

Windows JavaScript の Fragment 名前空間は、このチュートリアルのパート 1 で homepage.html を作成したときに使用した名前空間と同じです。Blend から Visual Studio への切り替えについても同様です。この WinJS.Ui.Fragments 名前空間の呼び出しにより、チキンボタンがクリックされたときに movieDisplay ページが default.html にフラグメントとして読み込まれます。

default.js を変更するには

[プロジェクト] パネルで、PickaFlick.sln ファイルを右クリックし、[Visual Studio で編集] をクリックします。

Visual Studio で Pick-a-Flick プロジェクトが開きます。
ソリューションエクスプローラーで、js フォルダーを展開し、default.js をダブルクリックして開きます。

.done() を探します。次のコードをかっこの内側に貼り付けます。

//when the loadInitialPage function is complete, call handleLoadedPage
    function completed(r) {
      handleLoadedPage();
    }
  );
}

//create the chickenButton variable, and add a click event listener
//when chickenButton is clicked, call loadResultsPage
function handleLoadedPage() {
  var chickenButton = document.querySelector("#chickenButton");
  chickenButton.addEventListener("click", loadResultsPage);
}

//define loadResultsPage function, load movieDisplay.html
function loadResultsPage() {
  clearChildren(target);

//When page is loaded, use Windows Javascript Fragments API to load movieDisplay.html
//call getMovieData
  WinJS.UI.Fragments.render("/movieDisplay.html", target).done(
function completed(r) {
  getMovieData();
}
);
}

function clearChildren(element) {
  while (element.hasChildNodes()) {
    element.removeChild(element.lastChild);
  }
}

//define movieData variable and associated movie data variables
//insert your own Rotten Tomatoes API key for apikey variable
var movieData;

function getMovieData() {
  var movieArray = new Array();
  var apikey = "Insert API Key Here";
  var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
  var moviesSearchUrl = baseUrl + '/lists/movies/box_office.json?apikey=' + apikey;

  WinJS.xhr({
    url: moviesSearchUrl, dataType: "jsonp"
  }).then(function (xhr) {
    var response = JSON.parse(xhr.response);

//get title, summary, box art
    response.movies.forEach(function (i) {
      movieArray.push({
        title: i.title,
        summary: i.synopsis,
        boxart: i.posters.detailed
      });
    });

//create movieData binding
    movieData = new WinJS.Binding.List(movieArray);

    WinJS.UI.processAll();
  }

このアプリを実行する場合は、「Insert API Key Here」というテキストの部分をロッテントマトから受け取ったキーに置き換え、Ctrl キーと Shift キーを押しながら S キーを押してすべての変更を保存します。

ロッテントマトの API キーを登録する際、アプリの名前と URL を入力するように求められるので、任意の名前を付けて、ブログなどの個人用サイトの URL を入力しておいてください。また、アプリケーションの種類も選択するように求められます。このアプリは Windows 8 アプリであり、Windows 8 のタブレットやデスクトップ向けに最適化されています。このアプリでは、新たにリリースされたムービーの一覧を呼び出し、タイトル、ボックスアート、概要などを表示します。
Blend で、[再読み込み] をクリックして、Visual Studio でプロジェクトに対して行った変更を読み込みます。

対話モードを使用する

アプリをビルドして実行した (F5 キーを押すなど) 場合は、チキンボタンをクリックまたはタップして movieDisplay.html にアクセスできます。ただし、デザインサーフェイスでは、チキンボタンをクリックまたはタップできません。 Blend 内から movieDisplay.html にアクセスする場合は、アプリケーション状態を変更する必要があります。対話モードを使用することによって、デザイン時にアプリケーションにイベントを渡すことができ、それにより JavaScript の実行後まで使用できないアプリケーション状態にアクセスすることができます。

対話モードを使用すると、デバイスへのインストール時にユーザーがアプリと対話するのと同じ方法で対話できます。対話モードを使用しない場合と最も大きく異なるのは、対話モードでアプリを実行すると、アプリの主要な要素に Blend 内からアクセスしてスタイルを設定できることです。

対話モードを使用して movieDisplay.html にアクセスするには

デザインサーフェイスに default.html が表示された状態で、[対話型モードをオンにする] (アプリのインターフェイスの右上) をクリックするか、Ctrl キーと Alt キーを押しながら I キーを押します。
対話モードでアプリが起動したら、チキンボタンをクリックまたはタップして movieDisplay.html に移動します (ページにはまだ何も表示されません)。
[対話型モードをオフにする] (アプリのインターフェイスの右上) をクリックするか、Ctrl キーと Alt キーを押しながら I キーを押します。

まだ default.html で作業していることに注意してください (アプリの上部にあるタブで確認できます)。ただし、movieDisplayContainer が [ライブ DOM] パネルに表示されるようになります。また、アプリの上部の [default.html] タブの下に、「選択されたコンテンツは movieDisplay.html のパーツです」という通知が表示されます。このトピックで既に説明したように、対話モードにする前はこのページは動的状態で編集できませんでした。 movieDisplay.html を読み込んだので、movieDisplayContainer のスタイル設定を開始できます。

movieDisplayContainer にスタイルを追加するには

[ライブ DOM] パネルで、[movieDisplayContainer] を右クリックし、[要素 ID からスタイルルールを作成] をクリックします。
[CSS プロパティ] パネルの [適用されているスタイルルール] カテゴリで [#movieDisplayContainer] が選択されていることを確認し、height を 100% に設定します。

Windows JavaScript ライブラリ (WinJS) の FlipView コントロールを追加する

FlipView コントロールは Windows JavaScript ライブラリのコントロールで、コレクション内の項目を一度に 1 個ずつ表示し、コレクション内の項目を参照するための "反転" の動作を有効にします。 PickaFlick では、FlipView コントロールを使用することによって、ロッテントマト API の呼び出しで指定したムービーの一覧を簡単に参照できます。

Blend の [アセット] パネルから FlipView コントロールを直接追加できます。

FlipView コントロールを追加するには

[アセット] パネルの [検索] ボックスに「FlipView」と入力し、Enter キーを押します。
[FlipView] をダブルクリックして、コントロールを movieDisplayContainer に追加します。

FlipView コントロールが [ライブ DOM] パネルに表示されていることに注意してください。 .winjs コントロールが Blend でインスタンス化される場合、コントロールに関連付けられている動的要素も [ライブ DOM] パネルに表示されます。これらの動的要素を表示するには、[ライブ DOM] パネルの FlipView を展開します。要素の右側に表示される稲妻アイコン b5-icn-livedom-dynamic はその要素が動的に生成されていることを示します。

ライブ DOM の Blend FlipView

[ライブ DOM] パネルで [FlipView] にポインターを合わせると、type、tag、id、class など、コントロールに関する詳細情報が表示されます。 FlipView コントロールは win-flipview クラスの一部であることに注意してください。

Blend FlipView ライブ DOM ホバー

[ライブ DOM] パネルで [FlipView] をクリックし、[CSS プロパティ] パネルの [適用されているスタイルルール] カテゴリで [.win-flipview (ui-dark.css)] にポインターを合わせると、.win-flipview が .win-flipview (ui-dark.css) で定義されていること、および height が 400px に設定されていることを確認できます。

uiDarkCSS の Blend FlipView

default.css でカスタムスタイルを作成することによって既定のスタイル (ui-dark.css から派生) をオーバーライドできます。 FlipView コントロールには既にクラスが割り当てられているため、そのクラスへの参照を default.css にすぐに追加して、そのクラスのスタイルルールを定義できます。

win-flipview クラスのスタイルを作成するには

[CSS プロパティ] パネルで、[適用されているスタイルルール] の右にある [選択した要素からスタイルルールを作成] アイコンをクリックし、[要素クラスからスタイルルールを作成] をクリックします。
[スタイルルール] パネルで、[win-flipview] をクリックします。

[CSS プロパティ] パネルの [適用されているスタイルルール] カテゴリに .win-flipview (default.css) が表示されることに注意してください。
[CSS プロパティ] パネルで、height を 100% に設定します。

ムービーデータにバインドする

この時点で、ムービーデータが読み込まれますが、HTML にデータへの参照がないためまだ表示されません。デザインサーフェイスに表示される HTML と default.js によって生成 (および movieData 変数で定義) されたデータは相互に完全に独立しています。デザインサーフェイスにデータを表示するには、データを HTML の FlipView コントロールにバインドする必要があります。

FlipView コントロールを movieData にバインドするには

[ライブ DOM] パネルで、[FlipView] をクリックします。

[HTML 属性] パネル ([CSS プロパティ] タブの隣のタブ) で FlipView コントロールにアクセスできるようになります。

ヒント

要素をクリックすると、要素のプロパティが [HTML 属性] パネルに表示されます。コントロールをクリックすると、コントロールのプロパティが [HTML 属性] パネルに表示されます。
[HTML 属性] パネルの [Windows アプリコントロール] カテゴリで、[itemDataSource] ボックスに「movieData.dataSource」と入力します。

movieDisplay.html で、data-win-options 属性が FlipView コントロールに適用され、属性の値が itemDataSource:movieData.dataSource になります。

項目テンプレートを作成してスタイルを設定する

Blend 内からアプリを実行しているため、デザインサーフェイスにはライブデータが表示されます。これらの生データは文字列として表示されます。データ接続を確認したので、次に、default.js で作成した title、summary、および boxart の各プロパティを使用してデータのスタイルを設定します。

デザインサーフェイス上の Blend データソース

データテンプレートを作成して、ロッテントマトから取得したすべてのムービーデータに同じスタイルを適用します。

itemTemplate プロパティを FlipView コントロールに適用して項目テンプレートを作成します。

項目テンプレートを作成するには

[ライブ DOM] パネルで、[FlipView] が選択されていることを確認します。
[HTML 属性] パネルの [Windows アプリコントロール] カテゴリの [itemTemplate] の一覧で、[新しいテンプレートの作成] をクリックします。

[新しいテンプレートの作成] ダイアログボックスが表示されます。
テンプレートに movieDisplayTemplate という名前を付け、[識別基準 ID] が選択されていることを確認します。
[テンプレートにデータフィールドを追加] ボックスの一覧で、[boxart]、[summary]、および [title] をクリックします。 [OK] をクリックします。

一覧の最初のムービーのボックスアート、概要、タイトルがデザインサーフェイスに表示されます。

重要

このアプリではライブデータを使用するため、このイメージとは異なるデータが表示される可能性があります。

目的のデータがページに表示されますが、最終的なアプリでの表示とはまだかなり異なります。レイアウトを変更するには、ページのコンテンツのレイアウトの基盤となるグリッドを itemTemplate の display プロパティに適用します。グリッドを作成した後に、ページに追加する要素のスタイルを設定できます。

項目テンプレートのスタイルを設定するには

デザインサーフェイスで、ボックスアートのイメージの右側をクリックします。ボックスアート、タイトル、および概要を含む div が選択され、ページ上にそれらの要素を囲む青いボックスが表示されます。
[div] を右クリックし、[新しいクラスの追加] をクリックします。
[新しいクラスの追加] ダイアログボックスで、クラスに movieContainer という名前を付け、[このクラスをターゲットとするスタイルルールの作成] が選択されていることを確認し、[OK] をクリックします。
[スタイルルール] パネルで、[.movieContainer] をクリックします。
[CSS プロパティ] パネルの [検索または設定] ボックスに「height: 100%; width: 100%;」と入力して、height プロパティと width プロパティを同時に設定し、Enter キーを押します。

コンテンツがデザインサーフェイスの左上隅に移動します。

グリッドを作成しやすくするために、movieDisplay.html の次のコードを削除してページの内容をクリアします。

<img data-win-bind="src:boxart" height="100" width="100">
     <div data-win-bind="textContent:summary"></div>
     <div data-win-bind="textContent:title"></div>

[CSS プロパティ] パネルで、[検索または設定] ボックスの右側の [検索のクリア] アイコンをクリックして、ボックスの内容をクリアします。
[レイアウト] カテゴリの [display] ボックスの一覧で [–ms-grid] をクリックします。

レイアウトグリッドを作成する

表示プロパティは -ms-grid に設定されているため、デザインサーフェイスで直接クリックして行と列を作成できます。

オブジェクトを変更するには、オブジェクトの輪郭の四隅とそれらの中間に表示されるハンドルをガイドとして使用します。ガイドはガイドラインとグリッド線の両端にも表示されます。グリッドを作成するときは、挿入ガイドに基づいて目的の位置にグリッド線を配置します。

レイアウトグリッドを作成するには

[CSS プロパティ] パネルで、[優勢なプロパティ] または [.movieContainer] のどちらかが選択されていることを確認します。
デザインサーフェイスで、グリッドの上部の青い点線にポインターを合わせ、表示されるオレンジ色の挿入ガイドをクリックします。

列ガイドが追加されます。
同じ手順を繰り返して、グリッド列ガイドをあと 3 つ追加します。これで 5 つの列が定義されます。
左のグリッドガイドにポインターを合わせ、クリックして行ガイドを追加します。これで 2 つの行が定義されます。

この手順が完了すると、次のような 5 列 x 2 行のグリッドが完成します。

このチュートリアルでは、列と行の幅を厳密に指定する必要はありませんが、幅ガイドを使用すると、列や行の幅をそれぞれ正確に指定してレイアウトを細かく調整することができます。その場合は、ボックスをクリックして数値を入力し、一覧から次のいずれかのオプションを選択します。

分数 (fr)
ピクセル (px)
自動
パーセンテージ (%)

グリッド要素のレイアウトを設定する

このアプリのレイアウトは、ロゴと、ボックスアート、タイトル、および概要のプレースホルダーイメージで構成されます。次の手順では、要素を追加してスタイルを設定し、ボックスアート、タイトル、および概要のデータをページ上の要素にバインドします。

イメージを挿入してスタイルを設定するには

[プロジェクト] パネルで、[イメージ] フォルダーを開き、small-LogoChicken をグリッドの左上のセルにドラッグします。
small-LogoChicken を右クリックし、[新しいクラスの追加] をクリックします。
[新しいクラスの追加] ダイアログボックスで、クラスに smallLogo-Chicken という名前を付けます。
[このクラスをターゲットとするスタイルルールの作成] が選択されていることを確認し、[OK] をクリックします。
[CSS プロパティ] パネルの [グリッド] カテゴリで、grid-column-align と grid-row-align を center に設定します。
[プロジェクト] パネルで、[イメージ] フォルダーを開き、temp.png をグリッドの 2 行目の 3 列目にドラッグします。
temp.png を右クリックし、[新しいクラスの追加] をクリックします。
[新しいクラスの追加] ダイアログボックスで、クラスに boxart という名前を付けます。
[このクラスをターゲットとするスタイルルールの作成] が選択されていることを確認し、[OK] をクリックします。
[CSS プロパティ] パネルの [グリッド] カテゴリで、grid-column-align を center に設定し、grid-row-align を start に設定します。

データにバインドし、デザインサーフェイスでスタイルを直接設定できるようになりました。

データバインディングを編集する

default.js で定義された特定のデータオブジェクトに個々の要素をバインドすることで、要素のスタイルを個別に設定できます。

次の手順では、ボックスアートのイメージをボックスアートのデータオブジェクトにバインドします。さらに、タイトルと概要の要素を追加し、それぞれ対応するデータにバインドして、スタイルを設定します。

ボックスアートのイメージをボックスアートのデータにバインドするには

デザインサーフェイスで、ボックスアートのイメージをクリックします。
[HTML 属性] パネルの [共通] カテゴリで、[詳細オプション] をクリックし、[データバインディングの編集] をクリックします。
[<img>.src のデータバインディングを作成] ダイアログボックスで、[boxart] をクリックし、[OK] をクリックします。

データバインディングオブジェクトであることを示す黄色い枠で値エディターが囲まれます。

しばらくするとデータ接続が更新されて、新しいムービーのイメージがデザインサーフェイスに表示されます。
[CSS プロパティ] パネルで、height を 500px に設定します。

タイトルを追加してスタイルを設定するには

[アセット] パネルで、[検索] ボックスに「h1」と入力し、h1 要素を 1 行目の 3 列目にドラッグします。

h1 要素がページに表示されます。
h1 要素を右クリックし、[新しいクラスの追加] をクリックします。
[新しいクラスの追加] ダイアログボックスで、クラスに title という名前を付けます。
[このクラスをターゲットとするスタイルルールの作成] が選択されていることを確認し、[OK] をクリックします。
h1 要素をクリックしてから、[CSS プロパティ] パネルの [フォント] カテゴリで [color] の横の [設定なし] をクリックします。
カラーエディターの右下にある [色スポイト] をクリックします。
スポイトを使用して、デザインサーフェイスのチキンイメージにポインターを合わせ、タイトルのテキスト用の赤色の網かけを指定します。

チキンイメージの他の部分にポインターを合わせると、それに応じてタイトルの色が変わります。
タイトルに適用する色をクリックします。

h1 要素をタイトルのデータにバインドするには

h1 要素を選択した状態で、[HTML 属性] パネルの [共通] カテゴリで [詳細オプション] をクリックし、[データバインディングの編集] をクリックします。
[h1.textContent のデータバインディングを作成] ダイアログボックスで、[title] をクリックし、[OK] をクリックします。

しばらくするとデータ接続が更新されて、新しいムービーのタイトルがデザインサーフェイスに表示されます。

タイトルが長い場合に 2 行に折り返されないようにするには、複数の列にまたがって表示されるように列スパンを変更します。

タイトルの列スパンを変更するには

[CSS プロパティ] パネルの [グリッド] カテゴリで、grid-column-span の値を 3 に設定し、Enter キーを押します。

h1 要素が 3 列にまたがって表示されるようになります。

概要を追加するには

[アセット] パネルで、[検索] ボックスに「article」と入力し、article を 2 行目の 5 列目にドラッグします。

article 要素は .movieContainer に表示されます。この要素は空であるため、データにバインドするまでコンテンツは表示されません。

article 要素を概要のデータにバインドするには

article 要素を右クリックし、[新しいクラスの追加] をクリックします。
[新しいクラスの追加] ダイアログボックスで、クラスに summary という名前を付けます。
[このクラスをターゲットとするスタイルルールの作成] が選択されていることを確認し、[OK] をクリックします。
[HTML 属性] パネルの [共通] カテゴリで、[textContent] の右にある [詳細オプション] をクリックし、[データバインディングの編集] をクリックします。
[article.textContent のデータバインディングを作成] ダイアログボックスで、[summary] をクリックし、[OK] をクリックします。

新しいムービーの概要がデザインサーフェイスに表示されます。

フォントのプロパティを変更する

既定のテキストのスタイルでは読みにくいフォントが使用されていますが、[CSS プロパティ] パネルを使用してテキストのフォントのプロパティを簡単に変更できます。次の手順では、概要のテキストのスタイルを設定します。タイトルのフォントも同じ方法で変更できます。

概要のテキストのスタイルを設定するには

article 要素をクリックし、[CSS プロパティ] パネルの [フォントファミリ名] の一覧で目的のフォントをクリックします。

[フォントファミリ名] の一覧でフォントをクリックすると、font-family の一覧にフォントを追加できます。

[フォントファミリ名] の一覧でフォントを選択して上下の矢印をクリックすることで、フォントの選択順序を変更することもできます。 .css ファイルでフォントの順序が変更されたことを確認できます。
font-size の値エディターで、目的の値をクリックするか入力します。
[color] の横の [設定なし] をクリックします。
カラーエディターで、目的の色をクリックするか、[16 進数値] ボックスに目的の色の 16 進数コードを入力し、Enter キーを押します。

また、カラーエディターの右下にある [色スポイト] をクリックする方法もあります。スポイトを使用して、デスクトップ上の任意の要素にポインターを合わせて使用する色を探します。他の要素にポインターを合わせると、それに応じてタイトルの色が変わります。使用する色が決まったら、その色の要素をクリックします。概要のテキストがその色になります。

アプリをさらに差別化するために、カスタムフォントを埋め込むこともできます。「カスタムフォントの埋め込み」を参照してください。

概要が長い場合にスクロールバーを追加するには、article 要素の overflow プロパティを変更します。

概要が長い場合にスクロールバーを追加するには

article 要素を選択し、[検索または設定] ボックスに「overflow」と入力します。
[overflow] の一覧で [auto] をクリックします。

概要がページに収まらない場合にスクロールバーが表示されるようになります。

ページに要素を配列するときにルーラーやガイドを使用すると、さらに細かくレイアウトを調整できます。「ルーラーおよびガイドの使用」を参照してください。

ロッテントマトに登録して適切な API キーを組み込んであれば、F5 キーを押してアプリをビルドして実行できます。

次の方法で共有

Blend を使用した初めての Windows ストアアプリの作成、パート 2: 詳細ページ (HTML と JavaScript)