クイック スタート: FlipView の追加 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
多くのアプリでは、ユーザーがめくって表示できる項目の一覧が表示されます。これらのリストのデータは、データベース、Web、または JSON データ ソースから取得されます。 WinJS には、この操作のための FlipView コントロールが用意されています。
.png "FlipView コントロール。")
前提条件
FlipView とは
FlipView は、項目のコレクションを 1 つずつめくって表示できるようにする WinJS コントロールです。これは、イメージ ギャラリーの表示に適しています。
FlipView は、IListDataSource からデータを取得します。 WinJS には、数種類の IListDataSource オブジェクトが用意されています。
- List を使うと、データ配列から IListDataSource を作成できます。
- StorageDataSource を使うと、ファイルとディレクトリに関する情報にアクセスできます。
また、Web サービス、データベースなど、その他の種類のデータ プロバイダーに接続するカスタム データ ソースを独自に作成することもできます。詳しくは、「カスタム データ ソースを作成する方法」をご覧ください。
シンプルな FlipView の作成
WinJS への参照を HTML ファイルに追加していない場合は追加します。
<!-- WinJS references --> <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>Microsoft Visual Studio で**"空のアプリケーション"** プロジェクトを作成したときに生成される default.html ファイルの HTML を次の例に示します。WinJS への参照が既に含まれていることに注意してください。
<!-- default.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>FlipViewExample</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet"> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script> <!-- FlipViewExample references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>この例では、濃色スタイル シートではなく淡色スタイル シートを使います。このため、この例と同じようにアプリを表示するには、次の参照の箇所を変更します。
<!-- WinJS references --> <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">変更後の行は次のとおりです。
<!-- WinJS references --> <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">HTML ファイル内に div 要素を作成し、data-win-control プロパティを "WinJS.UI.FlipView" に設定します。
<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" ></div>HTML ファイルに付随する JavaScript コードで、HTML が読み込まれるときに WinJS.UI.processAll 関数を呼び出します。
WinJS.UI.processAll();新しいアプリケーション プロジェクトを作成すると生成される default.html ファイルに付随する default.js ファイルの例を次に示します。
// default.js (function () { "use strict"; var app = WinJS.Application; // This function responds to all application activations. app.onactivated = function (eventObject) { if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { // TODO: Initialize your application here. WinJS.UI.processAll(); } }; app.start(); })();これは、FlipView をスタート ページ (default.html) に追加すると機能します。FlipView を Page コントロールに追加する場合、WinJS.UI.processAll は、Page コントロールで呼び出されるため、呼び出す必要はありません。FlipView を独自のカスタム HTML に追加する場合は、DOMContentLoaded イベントを使って WinJS.UI.processAll を呼び出すことができます。コントロールのアクティブ化について詳しくは、「クイック スタート: WinJS コントロールとスタイルの追加」をご覧ください。
重要:FlipView の高さと幅を設定します。 FlipView をレンダリングする場合は、高さの絶対値を指定する必要があります。FlipView を含む HTML ページの CSS スタイル シートに、次の CSS を追加します。
#basicFlipView { width: 480px; height: 270px; border: solid 1px black; }
このコードを実行すると、空の FlipView が作成されます。アプリを実行すると、空のコントロールが表示されます。次のセクションで、FlipView に表示するデータを作成します。
データの定義
データ ソースを作成するコードを別の JavaScript ファイルに配置しておくと管理が簡単になります。このセクションでは、データ用の JavaScript ファイルの作成方法、List の作成方法、アプリの他の部分からデータにアクセスできるようにする WinJS.Namespace.define 関数の使用方法について説明します。
Visual Studio を使って、プロジェクトにデータ ファイルを追加します。ソリューション エクスプローラーで、プロジェクトの
jsフォルダーを右クリックし、[追加]、[新しい項目] の順にクリックします。[新しい項目の追加] ダイアログが表示されます。[JavaScript ファイル] をクリックします。"dataExample.js" という名前を付けます。 [追加] をクリックしてファイルを作成します。dataExample.js という名前の空の JavaScript ファイルが作成されます。
dataExample.js を開きます。匿名関数を作成し、strict モードを有効にします。
「基本的なアプリのコーディング」で説明したように、JavaScript コードを匿名関数でラップしてカプセル化し、strict モードを使用することをお勧めします。
(function () { "use strict"; })();データ配列を作成します。この例では、オブジェクトの配列を作成します。各オブジェクトには、type、title、image の 3 つのプロパティがあります。
(function () { "use strict"; var dataArray = [ { type: "item", title: "Cliff", picture: "images/Cliff.jpg" }, { type: "item", title: "Grapes", picture: "images/Grapes.jpg" }, { type: "item", title: "Rainier", picture: "images/Rainier.jpg" }, { type: "item", title: "Sunset", picture: "images/Sunset.jpg" }, { type: "item", title: "Valley", picture: "images/Valley.jpg" } ]; })();注 コードを実行するときに、ローカル コンピューター上のファイルに画像を変更できます。また、HTML FlipView コントロールのサンプルから画像をダウンロードすることもできます (サンプル コードは異なりますが、同じ画像を使っています)。画像を追加せずにサンプルを実行しても、動作します。
配列を使って List オブジェクトを作成します。
(function () { "use strict"; var dataArray = [ { type: "item", title: "Cliff", picture: "images/Cliff.jpg" }, { type: "item", title: "Grapes", picture: "images/Grapes.jpg" }, { type: "item", title: "Rainier", picture: "images/Rainier.jpg" }, { type: "item", title: "Sunset", picture: "images/Sunset.jpg" }, { type: "item", title: "Valley", picture: "images/Valley.jpg" } ]; var dataList = new WinJS.Binding.List(dataArray); })();名前空間を宣言し、パブリック メンバーとして List を追加して、List を公開します。
作成したコードは匿名関数でカプセル化されているので、パブリックにアクセスすることはできません。これは匿名関数を使う理由の 1 つで、プライベート データの機密性を確保するためです。FlipView から List にアクセスするには、パブリックにアクセスできるようにする必要があります。そのためには、WinJS.Namespace.define 関数を使って名前空間を作成し、そのメンバーの 1 つとして List を追加する方法があります。
WinJS.Namespace.define 関数は 2 つのパラメーターを受け取ります。作成する名前空間の名前と、1 つ以上のプロパティ/値ペアを含むオブジェクトです。各プロパティはメンバーのパブリック名で、各値は、プライベート コードの基になる変数、プロパティ、または関数です。指定した変数、プロパティ、関数が公開されます。
この例では、List を返す itemList という名前のパブリック メンバーを公開する、DataExample という名前の名前空間を作成します。
(function () { "use strict"; var dataArray = [ { type: "item", title: "Cliff", picture: "images/Cliff.jpg" }, { type: "item", title: "Grapes", picture: "images/Grapes.jpg" }, { type: "item", title: "Rainier", picture: "images/Rainier.jpg" }, { type: "item", title: "Sunset", picture: "images/Sunset.jpg" }, { type: "item", title: "Valley", picture: "images/Valley.jpg" } ]; var dataList = new WinJS.Binding.List(dataArray); // Create a namespace to make the data publicly // accessible. var publicMembers = { itemList: dataList }; WinJS.Namespace.define("DataExample", publicMembers); })();
これで、FlipView からアクセスできるデータ ソースが作成されました。 次のセクションで、FlipView にデータを接続します。
FlipView へのデータの接続
FlipView が含まれている HTML ファイルの head セクションに、作成したデータ ファイル (dataExample.js) への参照を追加します。
<head> <meta charset="utf-8"> <title>FlipViewExample</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet"> <script src="//Microsoft.WinJS.2.0/js/base.js"></script> <script src="//Microsoft.WinJS.2.0/js/ui.js"></script> <!-- FlipViewExample references --> <link href="/css/default.css" rel="stylesheet"> <script src="/js/default.js"></script> <!-- Your data file. --> <script src="/js/dataExample.js"></script> </head>前のセクションで作成したデータを使って、FlipView コントロールの itemDataSource プロパティを設定します。
itemDataSource プロパティは IListDataSource オブジェクトを受け取ります。List オブジェクトは IListDataSource ではありませんが、それ自体の IListDataSource バージョンを返す dataSource プロパティを持っています。
データに接続するには、FlipView コントロールの itemDataSource プロパティを
DataExample.itemDataList.dataSourceに設定します。<div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource }"> </div>
アプリを実行します。FlipView に、データ ソースのプロパティと値が表示されます。
.png "テンプレートなしで表示されているデータ ソース コンテンツ。")
これは、表示しようとした外観とはまったく異なります。title と text フィールドの値だけを表示し、画像へのパスではなく実際の画像を表示する必要があります。表示しようとしたとおりにレンダリングするには、Template を定義する必要があります。次の手順で、この方法を説明します。
項目テンプレートの定義
この時点で、FlipView に必要なデータは用意できていますが、表示方法が指定されていません。表示方法を指定するには、項目テンプレートが必要です。テンプレートを作成する方法には、マークアップを使って WinJS.Binding.Template を定義する方法と、テンプレート関数を作成する方法の 2 種類があります。この例では、マークアップでテンプレートを作成します。(テンプレート関数の作成方法について詳しくは、itemTemplate プロパティの説明をご覧ください)。
WinJS.Binding.Template は簡単に作成できます。各リスト項目の表示に使うマークアップを定義し、各データ フィールドの表示場所を指定するだけです。
HTML で WinJS.Binding.Template コントロールを作成し、ID を割り当てます。この例では ID "ItemTemplate" を使います。
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> </div>注 テンプレートを使う前に定義する必要があるため、FlipView の HTML の前に、テンプレートの HTML を追加します。
WinJS.Binding.Template のルート要素は単一にする必要があります。テンプレートのコンテンツの親として機能する div 要素を作成します。
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div> </div> </div>FlipView を構成する各データ項目を生成するマークアップを作成します。 前のセクションで作成したデータには、画像の場所、タイトル、テキストが含まれているため、これらの要素を作成します。
- img 要素は画像フィールドの表示用です。
- h2 要素は title フィールドの表示用です。
(この例では、書式設定のために別の div も追加しています。)
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div> <img src="#" /> <div> <h2></h2> </div> </div> </div>データを表示する各要素の data-win-bind 属性を設定します。data-win-bind 属性の構文は次のとおりです。
data-win-bind="propertyName: dataFieldName"
たとえば、img の src プロパティを "picture" フィールドにバインドする場合の構文は、次のとおりです。
<img data-win-bind="src : picture" />複数のプロパティを設定するには、プロパティをセミコロンで区切ります。
data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"
この例では、テンプレート内の項目を、対応するデータ フィールドにバインドします。
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div> <img src="#" data-win-bind="src: picture; alt: title" /> <div> <h2 data-win-bind="innerText: title"></h2> </div> </div> </div>項目テンプレートを使うには、FlipView の itemTemplate プロパティを項目テンプレートの ID (この例では "ItemTemplate") に設定します。
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template"> <div> <img src="#" data-win-bind="src: picture; alt: title" /> <div> <h2 data-win-bind="innerText: title"></h2> </div> </div> </div> <div id="basicFlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }" ></div>これで、アプリを実行すると、バインドされたデータがリストに表示されるようになりました。
.png "データがバインドされた FlipView。")
ただし、まだ書式設定に問題があります。タイトル テキストが表示されていません。 次のセクションでは、テンプレートのスタイルを指定することで、この問題を修正する方法を説明します。
項目のスタイル指定
CSS を使って項目テンプレートのスタイルを指定することもできます。次の例では、「項目テンプレートの定義」で定義したテンプレートに、CSS クラスを追加しています。
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="overlaidItemTemplate">
<img class="image" src="#" data-win-bind="src: picture; alt: title" />
<div class="overlay">
<h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
</div>
</div>
</div>
<div id="basicFlipView"
data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>
HTML ファイルの CSS スタイル シートで、テンプレートのこれらのスタイルを追加します。
#basicFlipView
{
width: 480px;
height: 270px;
border: solid 1px black;
}
/**********************************************/
/* */
/* Styles used in the item template */
/* */
/**********************************************/
.overlaidItemTemplate
{
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
width: 480px;
height: 270px;
}
.overlaidItemTemplate img
{
width: 100%;
height: 100%;
}
.overlaidItemTemplate .overlay
{
position: relative;
-ms-grid-row-align: end;
background-color: rgba(0,0,0,0.65);
height: 40px;
padding: 20px 15px;
overflow: hidden;
}
.overlaidItemTemplate .overlay .ItemTitle
{
color: rgba(255, 255, 255, 0.8);
}
この FlipView の外観は次のようになります。
.png "スタイル指定された FlipView。")
注
FlipView ナビゲーション ボタンのフォント ファミリを変更すると、ボタンに含まれるグリフが適切ではなくなります。
FlipView の向きの変更
既定では、FlipView は横方向になります。orientation プロパティを "vertical" に設定すると、FlipView を縦に表示できます。
<div id="basicFlipView"
data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate, orientation: 'vertical' }"
></div>
.png "縦方向の FlipView。")
項目テンプレートへの対話要素の追加
項目テンプレートには他のコントロールのほとんどを追加できますが、ListView と他の FlipView は追加することができません。
通常、ユーザーが要素を操作したときに FlipView がその操作をキャプチャし、それを使って、ユーザーが項目を選択したか、項目を呼び出したか、項目をパンしたかを判断します。コントロールなどの対話要素の場合、入力を受け取るには、win-interactive クラスを対話要素またはその親要素の 1 つにアタッチする必要があります。この要素とその子要素は対話入力を受け取り、FlipView に対してイベントをトリガーしなくなります。
win-interactive を項目テンプレート内の要素にアタッチする場合には、項目全体がその要素で満たさなれないようにしてください。項目全体が満たされた場合、ユーザーはその項目を選ぶことも呼び出すこともできなくなります。
項目テンプレートに対話要素を追加するには、WinJS.Binding.Template ではなく、テンプレート関数を使用する必要があります。その方法の例については、HTML FlipView コントロールのサンプルに関するページをご覧ください。テンプレート関数について詳しくは、「FlipView.itemTemplate」の例をご覧ください。
コンテキスト コントロールの作成
FlipView では、カスタム コントロールを作成できるメソッドとイベントが公開されます。これは、現在の項目の場所をユーザーがわかるようにし、コレクション内を移動するための代替手段となります。次の画像は、スタイル指定されたラジオ ボタンを示しています。これらのボタンは、pageselected および pagevisibilitychanged イベントを通じて FlipView と同期しています。
.png "コンテキスト コントロールを備えた FlipView。")
この方法を説明するコードについては、HTML FlipView コントロールのサンプルに関するページをご覧ください。