マイクロソフト エバンジェリストのブログ

日本マイクロソフトのエバンジェリストが、技術情報を発信するブログです!

Windows 8.1 アプリ WinJS2.0 の新機能について - 前篇

エバンジェリストの物江です。

いよいよ明日 (10/18) 、Windows 8.1 が公開されます。

私の所属するエバンジェリストチームでは、パートナー企業さま向けに Windows 8 用アプリから Windows 8.1 用アプリに移行する方法についてセミナーを開催しております。

その中から、前回の私の記事では、Windows 8 アプリから Windows 8.1 用アプリへの移行方法の概要を紹介しました。

今回は、HTML + JavaScriptWindows 8.1 アプリを開発する際にキモとなる WinJS2.0 (Windows Library for JavaScript 2.0) の新機能について紹介したいと思います。

WinJS2.0 に追加された新機能

WinJS2.0 に追加された新機能は以下の 3 つに大別することができます。

  1. 新しいコントロールの追加
  2. 既存のコントロールの機能強化
  3. JavaScript 用の新しい API

今回は WinJS2.0 の新機能紹介の前篇ということで、新しく追加されたコントロールについて紹介していきます。

WinJS2.0 で追加されたコントロール

WinJS2.0 で追加されたコントロールは以下の通りです。

  • アプリバーコマンド
  • バックボタン
  • Hub コントロール
  • アイテムコンテナ
  • Nav バー
  • Repeater コントロール
  • Web ビューコントロール

ここから各コントロールについて、可能な限り簡潔に概要を紹介していきます。

アプリバーコマンド

 Windows ストア アプリの操作 UI は、ユーザーの没入(イマーシブ) 感 を優先するため、画面の上下単に非表示にしておくことが推奨されています。

この部分の操作用 UI のコンテナーとして使用されるのが従来からあるアプリバーです。

しかしながらアプリバーには、簡単なコマンドボタン形式のコントロールしか配置することができませんでした、

WinJS2.0 で追加されたアプリバーコマンドを使用すると、コマンドボタンだけでなく、HTML や WinJS が提供する様々なコントロールを組み合わせ配置することができます。

バックボタン

複数ページに画面が遷移するアプリを、WinJS が提供するナビゲーション機能を使用して実装している場合、トップ画面以下の階層の画面を表示した際にはバックボタン (戻るボタン) が表示されます。

しかしながら、Windows 8 用の Windows ストア アプリでは、このボタンの表示を任意で行うことはできませんでした。

Windows 8.1 用 (WinJS2.0) ではマークアップで自由に表示の指定ができるようになっています。

Hub コントロール

 Windows 8 用には、アイテムの一覧を表示するコントロールとして ListView コントロールが用意されていました。

ListView は、データをバインドしてアイテムの一覧を表示する機能としては申し分ないものですが、複数の異なるコントロールや、異なるレイアウトのアイテムを表示するには複雑に処理を開発者自らが実装する必要がありました。

WinJS2.0 に追加された Hub コントロールを使用すると、上記のような、コントロールやレイアウトのことなる UI を一つの統合されたビューの中に表示することができます。

アイテム コンテナ

アイテム コンテナは、名前のとおり、他のコントロールを載せるためのコンテナ コントロールです。アイテム コンテナは単なるプレースホルダではなく、その上に表示したコントロールにスワイプ、ドラッグ アンド ドロップ、ホバーといった機能を付加します。

アイテム コンテナには、既存の HTML コントロールや、その他の WinJS コントロールを含めることができます。

Nav バー

Windows ストア アプリでは、ナビゲーション (画面遷移) 用のコントロールは、画面上部のアプリバー内に配置することが推奨されています。

従来まではアプリバーのコマンドボタンを使用するか、それ以外のコントロールを使用するためにフライアウトを利用して自作する必要がありましたが WinJS2.0 にはナビゲーションに特化した Nav バーコントロールが追加されました。

Nav バー内に記述する NavBarCommand コントロールの location プロパティに任意の画面の URI を記述すれば、画面遷移のためのコードを記述しなくでも任意の画面に遷移させることができます。

Repeater コントロール

 Repeater コントロールを使用するとデータとバインド(連結) されたエレメントを連続して表示することができます。

Repeater コントロールは ListView のようなデータ項目の読み込みの制御など、高度な機能の一部はサポートしませんが、リスト (<ul>,<ol>)、 リストボックス (<select>) の項目(<option>) やテーブル (<table>) のセル (<tr><td>) を構成するのに向いています。

Web ビュー コントロール

Windows 8 用に提供された WinJS1.0 には、ネットワーク上の Web コンテンツを表示するためのコントロールは含まれておらず、HTML + JavaScript で作成された Windows ストア アプリ内に外部の Web コンテンツを表示するには iframe タグを使用する必要がありました。

WinJS2.0 からは、外部の Web コンテンツを表示するためのコントロールとして Web ビューコントロールが追加されました。

Web ビューコントロールは単に Web ページを表示するだけでなく、navigate メソッド goBack, goFoward メソッドを使用して、Windows ストア アプリ内のコードからページを遷移させることができます。また、navigateToString メソッドを使用してユーザーの操作によって遷移したページの URL を取得したり、capturePreviewToBlobAsync メソッドを使用して Web ビューコントロール内に表示された Web ページの画面キャプチャを取得することもできます。

検索ボックス コントロール

Windows 8 用 Windows ストア アプリでは、検索機能をサポートする際は、OS の検索チャームと統合することが推奨されていました。

しかし、Windows 8.1 では、OS の検索機能の仕様が変更されたことに伴い、アプリ内に検索ボックスを置くこと推奨されています。

その変更を受けて (?) WinJS2.0 には検索用まキーワードボックスの実装を簡単にするための検索ボックスコントロールが用意されています。

検索ボックス コントロールを使用すると、検索の実行、検索候補の表示、追加のタイミングなどがそれ専用のイベントを使用して実装できるため、テキストボックスとその他のコントロールを組み合わせて作成するよりも簡単です。

 

以上、今回は WinJS2.0 に追加されたコントロールについての概要を紹介しました。

より詳しい情報を以下のブログ記事にまとめてありますので、興味のある方はぜひご覧ください。

 

HTML+JavaScript で作る Windows 8.1 アプリ(WinJS2.0)の新機能 - 前篇

http://blogs.msdn.com/b/osamum/archive/2013/10/11/html-jacascript-windows-8-1-winjs2-0.aspx