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

Article
10/11/2013

いよいよ明日公開になる Windows 8.1 特集ということで、前回の記事に引き続き Windows ストアアプリの新機能について紹介していきます。

今回は、HTML + JavaScript で作成する Windows ストアアプリ全体のフレームワークである、Windows Library for JavaScript こと、WinJS の 2.0 についてです。

この WinJS 2.0 の新機能について、前篇と後編の二回に別けて紹介していきます。

上の図は Windows 8.1 で追加、変更された API の一覧です。青いところが追加された API、黒字が変更された API、白枠がデスクトップアプリでも使用できる API です。

Windows 8.1 の Windows Runtime API にさまざまな新機能が追加されたのと同じように WinJS2.0 にもさまざまな新機能が追加されています。

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

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

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

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

WinJS2.0 では、アプリ開発の生産性を高めてくれる様々なコントロールが追加されており、これまで複数のコントロールを組み合わせる必要があったコントロールを簡単なマークアップで記述することができるようになつています。

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

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

ここからは、新しく追加された各コントロールについて、その概要を紹介していきます。

アプリバーコマンド

これまでアプリバー内に配置できるコントロールはマンドボタンのみでした。そのため、画面上下部分にボタンとは異なるコントロールを配置する場合は、フライアウトを利用するなどして、開発者がアプリバーと同等の動作を施して使用する必要がありました。

アプリバーにコマンドボタン以外のコントロールを配置できないのは WinJS2.0 になっても変わっていませんが、その代わりにアプリバーに非常に似た形態で、任意のコントロールを自由に配置することができるアプリバーコマンドが追加されました。

アプリバーコマンドを使用すると、任意のコントロールを組み合わせてカスタマイズしたアプリバーをそれまでよりも簡単に作成することができます、

アプリバーコマンドのサンプルアプリは以下から入手することができます。

HTML AppBar control sample (Windows 8.1)
https://code.msdn.microsoft.com/App-bar-sample-a57eeae9

バックボタン

バックボタンはこれまで WinJS のナビゲーションフレームワークによって自動的に表示されるものを使用することしかできませんでしたが、WinJS2.0 ではタグによって任意でバックボタンを表示させることができるようになっています。

このバッグボタンによって戻れる遷移先 = ヒストリーは、WinJS2.0 によって管理されているため開発者が前のページに戻るためのなにがしかの処理を記述する必要はありません。開発者がバックボタンを実装するための作業は、バックボタンを表示するためのマークアップを記述するだけです。

あるいは

バックボタンの機能を JavaScript コードから呼び出すのは WinJS.Navigation.back メソッドを使用します。

しかし、基本的にはコードを記述する必要はなく、ユーザーがボタンをクリックするか、キーボードショートカット (Alt + ←や BrowserBack キーなど) を使うと、自動的に WinJS.Navigation.back を呼び出してページを戻ります。コードは一切記述する必要がありません。

Hub コントロール

Hub コントロールを使用すると大きさやレイアウトの異なるコントロールを任意に配置した、一貫性のあるメニュー画面を提供することができます。

各レイアウトの区切り = セクションは文字どおり HubSection オブジェクトを追加して行います。

Hub コントロールを使用すると、分類/目的にあった異なる種類を含めた複合的なデザインを持った画面を提供することができます。

ハブコントロールのサンプルアプリは以下から入手することができます。

HTML Hub control sample (Windows 8.1)
https://code.msdn.microsoft.com/windowsapps/HTML-Hub-control-sample-a15e5c2d/

アイテムコンテナ

アイテムコンテナのタグ内に既存の HTML コントロールや、その他の WinJS コントロールを含めると、スワイプ、ドラッグアンドドロップ、ホバーといった機能をもったコントロールを簡単に実装できます。

これらのコントロールに追加されるアクションは JavaScript のイベントモデルで扱うことができます。

項目は既定で選択可能になっています。選択を無効にするには、ItemContainer コントロールの selectionDisabled プロパティを true に設定します。

アイテムコンテナのサンプルアプリは以下から入手することができます。

HTML ItemContainer Sample (Windows 8.1)
https://code.msdn.microsoft.com/HTML-ItemContainer-Sample-932b2817

Nav バー

Nav バーはナビゲーション (画面遷移) 用に追加された新しいコントロールです。

Windows ストアアプリでは画面を遷移させるためのコントロールは画面上部のアプリバー内に配置する必要がありますが、前述のとおりアプリバーには既定の状態ではコマンドボタンしか配置できないため、ボタンを形状や大きさの異なるコントロールは配置することができませんでした。

Nav バーを使用すると、Windows ストアアプリのデザインガイドに沿ったデザインの NavBarCommand コントロールを配置することができます。

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

ナビゲーションを有効にするには、NavBarCommand オブジェクトの location プロパティを設定します。ユーザーが Nav バー上のコマンドをクリックすると、WinJS.Navigation.navigated イベントが発生するので、このイベントを使って、指定された場所に移動します。

または、NavBar 上の oninvoked イベントに登録し、イベントハンドラーを使ってナビゲーション操作を行うことができます。

Nav バーコントロールのサンプルアプリは以下から入手することができます。

HTML NavBar control sample (Windows 8.1)
https://code.msdn.microsoft.com/windowsapps/HTML-NavBar-control-sample-4472d92a

Repeater コントロール

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

同じようなコントロールとして従来から ListView コントロールがありました。

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

WinJS.Namespace.define("Data", {
        items: new WinJS.Binding.List([
            { id: 1, description: "アイテム 1 説明" },
             { id: 2, description: "アイテム 2 説明" },
            { id: 3, description: "アイテム 3 説明" }
        ])
    });

Repeaterコントロールのサンプルアプリは以下から入手することができます。

HTML Repeater control sample (Windows 8.1)
https://code.msdn.microsoft.com/HTML-Repeater-control-da22d278

Web ビュー

HTML + JavaScript の Windows ストアアプリではこれまで、ネットワーク上にある Web コンテンツを表示するのに iframe タグを使用してきました。

WinJS2.0 からは、XAML + C#,VB,C++ の Windows ストアアプリのように Web ビューコントロールが追加されました。

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

document.getElementById("webview").navigate( "https://blogs.msdn.com/b/osamum/");

Web ビューコントロールのサンプルアプリは以下から入手することができます。

HTML WebView control sample (Windows 8.1)
https://code.msdn.microsoft.com/HTML-WebView-control-sample-56e773fa

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

アプリ内検索をサポートするための検索ボックスコントロールが追加されました。

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

var searchBox = document.getElementById(“searchBox”);
searchBox.addEventListener("suggestionsrequested", suggestionsRequestedHandler);
searchBox.addEventListener("querysubmitted", querySubmittedHandler);
function suggestionsRequestedHandler(eventObject) {
var queryText = eventObject.detail.queryText,
       query = queryText.toLowerCase(),
      suggestionCollection = eventObject.detail.searchSuggestionCollection;
      for (var i = 0, len = suggestionList.length; i < len; i++) {
           ...
       }
}

検索ボックスコントロールのサンプルアプリは以下から入手することができます。

SearchBox control sample (Windows 8.1)
https://code.msdn.microsoft.com/windowsapps/SearchBox-control-sample-0f64f94d

------ ・ ----- ・ ------ ・ ----- ------ ・ ----- ------ ・ ----- ------ ・ ----- ------ ・ -----

今回は Windows 8.1 アプリ用の JavaScript フレームワークである WinJS2.0 に新しく追加されたコントロールについて紹介しました。

より詳しい情報については、以下のドキュメントで解説されていますので、ぜひご覧ください。

コントロール (HTML と JavaScript)
https://msdn.microsoft.com/ja-jp/library/windows/apps/bg182879.aspx

Clicky