読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

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

前回

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でタイトルバーに戻るボタンを出す方法 その2 - かずきの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 変える必要があります。
この処理をしないとこのアプリのバックボタンでは永遠にスタート画面に戻ることができません。

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

 

 今回使用されている Windows Runtime のクラスやメソッドやプロパティ(英語)

SystemNavigationManager class - Windows app development

SystemNavigationManager.AppViewBackButtonVisibility | appViewBackButtonVisibility property - Windows app development

AppViewBackButtonVisibility enumeration - Windows app development

SystemNavigationManager.BackRequested | backrequested event - Windows app development

SystemNavigationManager.GetForCurrentView | getForCurrentView method - Windows app development

BackRequestedEventArgs.Handled | handled property - Windows app development

スポンサーリンク