ウェブサイトを Windows 10 で動く Universal Windows Platform（UWP）アプリにしてみるその2 - ネイティブ命令を実行してみる

前回

<a href="http://browser.hatenablog.com/entry/2015/07/08/203800" data-mce-href="http://browser.hatenablog.com/entry/2015/07/08/203800">ウェブサイトを Windows 10 で動く Universal Windows Platform（UWP）アプリにしてみる - Browser</a>browser.hatenablog.com

今回つくるもの

ネイティブ機能を呼び出しタイトルバーに戻るボタンを付ける。

f:id:x67x6fx74x6f:20150714170850p:plain

JavaScript 版の UWP アプリは C# の名前空間、クラスを使いメソッドやプロパティを取得できネイティブの機能（Windows Runtime）を実行できます。
（注：JavaScript から Windows Runtime の機能にアクセスしますが、JavaScript からすべての機能が使えるわけではありません）

たとえば Windows Phone で環境光センサーを取得するにはこのように書きます

問題は公開されているサイトではブラウザで開いた時 Windows というオブジェクトがなくエラーになります。
下記のように Windows を調べてから実行しましょう。

ちなみに、以下のサンプルでは UI がらみですので Windows.UI を使っていますが、現状 Windows.UI が使えないものが IoT ぐらいで、IoT では JavaScript 版のアプリが動作せず、Windows.UI を判別する処理をしていません。
状況によってはプラットフォーム別で使えるネームスペース、クラス、メソッド、プロパティなどなど判別する必要が出てくるかもしれません。

今回のサンプル

http://toshihirogoto.github.io/ProjectWestminster/

f:id:x67x6fx74x6f:20150714171139p:plain

上記の URL 以前制作した Bing を読み込むだけのアプリの URL を変更してビルドするとこのようになります。

f:id:x67x6fx74x6f:20150714171308p:plain

ブラウザ版とは違い、ボタンが出現します

ボタンを押すとタイトルバーに戻るボタンが出て、タイトルバーの戻るボタンを押すと表示が戻ります。

中身

Windows.UI.Core.SystemNavigationManager の getForCurrentView() で現在のウインドウのタイトルバーの状態を取ります
getForCurrentView() の appViewBackButtonVisibility に Windows.UI.Core.AppViewBackButtonVisibility.visible をぶち込むとタイトルバーに戻るボタンがつきます。

消す場合は Windows.UI.Core.AppViewBackButtonVisibility.collapsed。

戻るボタンが押された際は getForCurrentView() の onbackrequested か、backrequested のイベントリスナに関数を登録します。

参考元

Universal Windows Platform appでタイトルバーに戻るボタンを出す方法 - かずきのBlog@hatena

Universal Windows Platform appでタイトルバーに戻るボタンを出す方法その２ - かずきのBlog@hatena

余談

ダブレットモードでは戻るボタンの見た目と振る舞いが変わります。

タブレットモードボタンなどでタブレットモードになると 8.1 のように最上部にカーソルを持っていくとタイトルバーが出ます

f:id:x67x6fx74x6f:20150714171533p:plain

f:id:x67x6fx74x6f:20150714171855p:plain

また、左下のスタートボタンの横にも戻るボタンがつきます。

f:id:x67x6fx74x6f:20150714172007p:plain

そのままですとタブレットモードでバックボタンを押した場合、スタートに戻ってしまいます。
戻るボタンでイベントを登録した onbackrequested で Windows.UI.Core.SystemNavigationManager.handled を true にするとスタートに戻らなくなります。

ですが onbackrequested は戻るボタンが押される場合に必ず読まれるため、最初のページに来た際は false 変える必要があります。
この処理をしないとこのアプリのバックボタンでは永遠にスタート画面に戻ることができません。

今回はグローバル変数をつくってページ遷移をカウントするというおバカな方法を使っています。
なんかよい方法があったら教えていただけるとありがたいです。