Windows 10 Mobile で JavaScript 版 UWP アプリを動かす
Windows Phone / Windows 10 Mobile Advent Calendar 2015、12月18日の記事になります。
Project/Solution の起動と初回ビルドが速い以外はほとんど利点の無い JavaScript 版 UWP アプリを Windows 10 Mobile / Windows Phone で動かそうというネタ。
とりあえず、うごかしてみようという初心者向けの内容です。
下準備
その壱： Visual Studio
下準備として Visual Studio 2015 と UWP Apps 開発用の Visual Studio Tools for Universal Windows apps がインストールされている必要があります。
現状、1番手軽なのが Visual Studio 2015 Update 1 ですので、こちらからインストールをすると良いでしょう。
その弐： アプリの検証
エミュレータ設定の説明が面倒だったり、Hyper-V が動かないと使えないので今回は実機でアプリの動作確認をします。
今なら日本でも Windows 10 Mobile 対応済みの Windows Phone が販売されているため、一家に一台以上あると思われます。
実機の場合はまず初めに Windows 10 Mobile の設定アプリから 更新とセキュリティ > 開発者向け > 開発向け機能を使う の「開発者モード」をチェックしましょう。（画像は Project My Screen というアプリを使って Windows Phone 端末の画像を表示させています）
このおまじないをしないと実機にアプリをインストールできません。
そして、端末を開発する PC に USB でつなげば準備完了です。
あ、実機にアプリを転送する際には Microsoft アカウントが必要です。
アプリを動かす
ひとまず、Visual Studio 2015 を開いて「New Project」 か Shift + Ctrl + N を押して、JavaScript > Windows > Universal > Blank App (Universal Windows) を選びましょう。
Solution Explorer に xaml や cs ファイルがある場合は裏切者です。
デバッグするターゲットを Device にして、そのまま押すか F5 的なボタンを押してビルド。
空のアプリがビルドされます。
ちなみ、 iOS と違い、Android と同様に端末がスリープしているとビルドできないので、ビルド前にスリープを解除しましょう。
四角の停止ボタンか Shift + F5 的なボタンでデバッグを止めることができます。
もし、DEP6100、DEP6200 のエラーでビルドできない場合はこの方法で対処できます。
Visual Studio 2015でWindows 10 Mobile端末に配置できるようにする - 遅咲きエンジニアのメモ
また、コードや画像などのリソースを変更しビルドしても変化が見られない場合は再度ビルドしてください。
コードを1行も書かずに Google マップ のアプリをつくる
Hosted Web Apps やら Web Apps on Windows を呼ばれているもので、先ほどのプロジェクトの packeage.appxmanifest ファイルの2か所に URL を書き込みビルドすると作成できます。
packeage.appxmanifest をダブルクリック。
Application タブの Start page へアプリ起動時にアクセスする URL を記述します。
外部を指定すると Hosted Web Apps。内部ファイルを指定すると通常の UWP アプリになります。
ここでは https://maps.google.co.jp/ を入力。
UWP Apps は外部の Web ページへのアクセス制限があります。
Google マップ の URL にアクセスできるように記述しアクセスを許可させる為、
Content URIs タブの URI に https://*.google.co.jp/ を入力します。
今回は指定が面倒なので、*のワイルドカードを使って、google.co.jp へのアクセスをすべて許しています。
ビルドすると端末に以下のアプリ起動され、Google Maps が表示されるはずです。
また、GPS の使用する権限がこのアプリにありませんので現在地をマークすることができません。
再度 packeage.appxmanifest を開き、「Location」をチェックしてビルド。
これで日本を砂漠化した HERE マップとお別れです。
（もう標準でインストールされてないけど）
他のスマートフォンのように Windows Phone / Windows 10 Mobile はスタートに Web ページのショートカットをタイルとして置いたり、タイルの設定ができるため為、あまり Hosted Web Apps が使用されることはないかもしれませんが、Hosted Web Apps 場合はブラウザに無い OS の機能を Windows Runtime からアクセスすることが可能です。
UWP アプリですので Device から Local Machine に変更すると Windows 10 のアプリとして動作します。
JavaScript 版 UWP アプリの動作
WWAHost.exe という仲介役がおり、HTMLのレンダリングエンジン EdgeHTML と JavaScript エンジンの Chakra が動き、こやつが HTML / CSS / JS を実行しアプリとして動きます。
こやつのもう1つの重要な機能は JS から Windows Runtime を通し OS の機能へアクセスできるようにする働きがあります 。
まとめると JavaScript 版 UWP アプリはユーザーがコントロールする UI がなく、OS の機能にアクセスできるブラウザの上で動いているようなものです。
また、WinJS という Windows 10 の UI を作成するためのオープンソースのライブラリが用意されています。
ブランクプロジェクトファイルの中身
default.html 最初にアクセスする html
js フォルダ 開発者が操作する default.js
css フォルダ 開発者用 CSS ファイル
WinJS フォルダ
css フォルダ 白黒各テーマカラーの CSS
fonts フォルダ アイコンフォント
js フォルダ WinJS のライブラリ、ローカライズ用の JS
images フォルダ アイコン、スプラッシュ等の画像ァイル
pfx ファイル アプリの証明書
appxmanifest ファイル アプリの設定ファイル
HTML / CSS / JS、画像 を作成して、必要であればローカライズ用の文言設定、マニフェストファイルで権限やアイコン等アプリ設定をするだけですので、Web の開発と近しい状態で開発できると思われます
default.js
Hosted Web Apps でないは場合は、初期状態では default.html が動き default.js が読み込まれます。
注意点として、アプリ起動時に Windows Runtime や WinJS の処理がされるため、default.js.html ではなく default.js 内で自前関数を呼び出さないと正常に動作しない可能性があります。
default.js の中身に軽くコメントを付けたもの
window.onload ではなく args.detail.previousExecutionState 判別しているとこで関数を動かさないないと DOM の操作を行う JS などがうまく動かないかもしれません。
WiｎJS の UI
ボタンを試す
新規プロジェクト再度つくりましょう。
default.html を開き「<p>Content goes here</p>」の下に Windows 10 デフォルト のボタンを作成します。
以前は <button> タグで作成できたのですが、4.0 からクロスプラットフォーム化のため class 指定で行うことになりました。
<button class="win-button">ぼたん</button>
所謂、デフォルトのボタンが出来上がります。
<button class="win-button win-button-primary">ぼたん</button>
win-button-primary と付けるとテーマカラーが適応されます。
トグルスイッチを試す
ボタン以外は大体、タグの属性の
data-win-control="WinJS.UI.なんちゃら" で UI
data-win-options で設定を指定していきます。
<div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'とぐる', checked: true}"></div>
つくったものの画像と変更した default.html
アプリのテーマをダークからライトに変える
default.html の CSS の読み込みの ui-dark.css を ui-light.css 変えるだけです。
設定でテーマを変更しアプリに戻った際、XAMLの様に自動で変わる事はないようです。
やり方を知っている方がおりましたら教えてください。
Windows Runtime の機能を試す
ブランクのプロジェクトはステータスバーは表示されないので、
Windows Runtime の機能を呼び出します。
起動時に以下の命令で呼び出します。
var s = Windows.UI.ViewManagement.StatusBar.getForCurrentView();
s.showAsync();
C# で動かす場合の名前空間 Windows.UI.ViewManagement、StatusBar クラスの showAsync() と同じであるため、違いは await 付けるか付けないかぐらい。
変更した defualt.js
Windows Runtime からのアクセス方法は以前の記事で書きました。
WinJS の Pivot UI で来季のアニメ番組表をつくる
内容が長くなってきたため割愛。つづきは次回の講釈で。
最後に JavaScript 版 UWP アプリの悲しい実態
Windows 8 / 8.1 では WIｎJS でつくられた MS 謹製アプリが多かったのですが、10 はほとんどありません。
そのせいなのか Windows 10 / Windows 10 Mobile の機能、U Iが放置気味で、InkCanvas や 顔認識などの API は使えませんし、DatePicker や TimePicker、Audio / Video コントロール の UI が 8/8.1 のままだったり Calendar の UI が存在しなかったりします。
また、Phone ハードキーのバックボタンを押すとアプリ内のページが進んでいてもホームに戻ってしまうので止める処理を入れたり、OS のテーマカラーを変更しても反映されなかったり、Windows 10 で Fullscreen API がちゃんと動作せず、Windows Runtime から実行しなければいけなかったりします。
貶していてもあれなんで一応書くと、OSの機能をあまり使わず Web 上でサービスを行っているものの移植にはかなり向いていると思われます。
昨日のニュースとして Netflix が UWP アプリから以前まで使っていた XAML + C# から WinJS に乗り換えたとのこと。
とりあえず、言いたいこと
エミュレータのロック画面がキリンの時から見守ってきましたが、マウスコンピューター様の MADOSMA を筆頭に各社様がリリースされ、今年から本格的に Windows 10 Mobile 端末が広まりそうです。
まだ若干ブルーオーシャンな市場なので、みなさまもアプリをつくってみてはいかがでしょうか。
Advent Calendar も今年も残りわずかとなってまいりました。
明日の Windows Phone / Windows 10 Mobile Advent Calendar は @FIWWA さんです。
