クールな Windows 8.1 New API #3: 新しい(改善された) WinJS コントロール

 

皆様、こんにちは！このシリーズ3回目、今回は、# 3の新WinJS コントロールです。

Windows 8.1 Preview 製品ガイド (開発者向け)

こちらのガイドに沿って、新しいWindows 8.1 新しいAPIを一つずつご紹介していくシリーズ、今回の#2は、下記のセクションから、#3 として、WinJS.UI namespace についてご紹介します。

--- Windows 8.1 Preview 製品ガイド (開発者向け)

新規および強化されたコントロール

新しい XAML コントロールおよび WinJS コントロールにより、これまで以上に優れたパフォーマンスを備えるより美しく魅力的なアプリを作成できます。

(中略）

HTML および JavaScript のコントロール

Windows 8.1 Preview では、 WinJS 開発者向けに次の強化点 (英語) が提供されます。

• 新しいハブ コントロールへのアクセス
• 新しい WebView コントロール、Item コントロール、およびナビゲーション バーのサポート
• ListView でのドラッグ アンド ドロップ操作のサポート

ハブ コントロール

新しいハブ コントロールは、 XAML (英語) および WinJS (英語) のいずれの開発者でも使用可能であり、複数の ListView コントロールを管理しなくても、アプリでハブに似たナビゲーション パターンをより簡単に使用できるようにします。その結果、ハブに似たナビゲーションをより迅速に使用できる一貫性があり使い慣れたアプリを作成できます。

---

既に HTML5/JavaScript で Windows ストアアプリ開発をされている方にとっては、多くの新しい WinJS コントロールが出たことと、既存のコントロール（特に、ListView と AppBar）に対していくつかの改善がなされたことは、大変喜ばしいことかと思います。

新しい WinJS コントロールは、WinJS.UI namespace で、更新されたドキュメントとともに見ることができます:

• BackButton: よりシンプルななバックボタン実装がなされています。ダイレクトにWinJS.Navigation API をフックする形になりました。以前は、この機能の大半は Visual Studio テンプレートに実装されており、そのテンプレート中では、<button> のスタイルはまさに Back ボタンのそれだったのです。また、PageControlNavigator コードにより、WinJS.Navigation を呼び出したり詳細な処理を行い、またキーボードイベントも処理していました。当該 BackButton はこのような処理をさらにカプセル化された方法で行います。詳しくは、Navigation and navigation history sample （サンプル）をダウンロードしてコードを見てみてください。
• Hub: 新しく登場したコントロールの目玉が、この Hub コントロールです。これまで、Windows 8 ストアアプリの開発においては、開発者は このようなコントロールを作るのは手動で実装するか、3rdパーティ製のライブラリ (たとえば、Telerik 等々)を利用するしか、ありませんでした。しかし現在ではスタンダードなコントロールがあります。詳しくは、HTML Hub Control sample をご参照ください。
• ItemContainer/Repeater: 同時に、この非常にライトな List コントロールの実装は大変有用です。繰り返しのリストを作ったり、データアイテムの表示をテンプレート化したり、いずれも全て、ListView のような実装は不要な場合も多いからです。詳細については、HTML ItemContainer sample and the HTML Repeater control sample をご参照ください。
• NavBar: Top AppBar にナビゲーションを配置するという、デザインガイドラインに沿った標準的な実装が可能です。詳細については、HTML NavBar Control sample をご参照ください。
• SearchBox: アプリ内での検索は、検索チャーム出の実装から、アプリ内のキャンバスで実装可能になりました。WinJS により追加されたコントロールにより、検索コントラクトのインタラクションと同様の処理が可能で、当該アプリからチャームを呼び出して行うのと同じことができます。詳細については、SearchBox control sample をご参照ください。

ListView についていろいろ関心を持って検討されたのと同じく、多くの変更点がありました。 ここでは詳細に立ち入りませんが、一つ例を挙げると、例えば、カスタムレイアウトです。これは更にシンプルになりました。全てのレイアウトモデルが複雑なカスタムインターフェースから、基本的には CSS をベースとしたインターフェース(ILayout2) に変更されたのに伴うものです。カスタムレイアウトは以前から可能でしたが、実装するのが大変難しかったうえ、ドキュメント化されていませんでした。現在は、よりシンプルに簡単になったということになります。更に、HTML ListView custom layout sample をダウンロードして、見てみてください。 ここでは、いくつかの新しい WinJS レイアウトが使われています。たとえば、CellSpanningLayout があります。これにより、垂直にパンする Gridレイアウトを作ることもでき、List レイアウトにグループヘッダーを追加することもできます。

また、ドラッグ&ドロップによるオーダー変更もサポートされています。詳細は、HTML ListView reorder and drag and drop sample をご参照ください。

さらなる詳細とデモは（AppBar 関連についても）、build 2013 の Paul Gusmorino のセッションをご覧ください。

： What's New in WinJS talk

次回は、# 4 として、WebGL について取り上げます。

それでは、また！

鈴木章太郎