ウェブサイトを Windows 10 で動く Universal Windows Platform（UWP）アプリにしてみる

今回つくるもの

bing.com が表示できるだけの UWP アプリ。

f:id:x67x6fx74x6f:20150708201819p:plain

背景

Universal Windows Platform bridges というものが build 2015 発表され、そこで計画されている4つプロジェクトがあります。

f:id:x67x6fx74x6f:20150708202845p:plain

Project Astoria	APK を UWP アプリに変換する。 Windows Phone のみ実行可能
Project Islandwood	Objective-C コードで書かれた Xcode のプロジェクトファイルを Visual Studio にインポートし UWP アプリとしてビルドする
Project Centennial	従来の Win32 や .NET のアプリを UWP アプリにパッケージ化する
Project Westminster	公開されている Web サイトを UWP アプリにパッケージ化する

今回は最後の Project Westminster というやつを使います。
ちなみにこれ以外の他の3つは Windows 10 が出てから詳細が公開される予定とのこと。

ユニバーサル Windows プラットフォームブリッジ - Windows アプリの開発

Project Westminster の正体とは？

スマートフォンのアプリを制作したことがある方なら気づかれた方もいるとは思われますが所謂ガワネイティブです。
内容としては Visual Studio プロジェクトのマニフェストファイルで最初に読み込むファイルをローカルファイルから外部ファイルにするだけのものです。

また、通常のガワネイティブとの違いは、公開しているサイトでも script タグ内に Windows Runtime の命令を記述するとアプリで動かすことができる点にあます。
JavaScript だけでは実行できない通知やタイル、日本では使えませんが Cortana や、日本では使えませんが Cortana 等の機能を呼びたい時に使います。
（Cortana 使いたい）

環境

今回は Windows 8.1 上の Hyper-V で動く Windows 10 Insider Preview build 10162。
Visual Studio Community 2015 RC と Windows 10 SDK Preview Build 10158 を使用しています。

Windows 10 開発ツールのインストール - Windows アプリの開発

手順

Visual Studio でブランクアプリをつくる
今回使用しないファイルを消す
package.appxmanifest ファイルを編集する
ビルドして確かめる

Visual Studio でブランクアプリをつくる

Visual Studio 起動し、Ctrl + N で新しいプロジェクトを作成。
インストール済みのテンプレートから JavaScript の Windows Universal の Blank App を選択し、適当なプロジェクト名を付けます。

f:id:x67x6fx74x6f:20150708201901p:plain

今回は Google 検索にしてみました。

プロジェクトが作成できましたら F5 を押してデバッグしてみましょう。
自分の環境ですとビルドエラーになります。

f:id:x67x6fx74x6f:20150708201939p:plain

ソリューションエクスプローラのプロジェクトを右クリックして .jsproj のあるフォルダを開き、.jsproj の内容を変更します。

f:id:x67x6fx74x6f:20150708202024p:plain

.jsproj 内の TargetPlatformMinVersion と TargetPlatformVersion が 10.0.10069.0 になっているので 10.0.10158.0 に変更します。

以前に書いた記事参照

&amp;amp;amp;lt;a href="http://browser.hatenablog.com/entry/2015/07/02/204918" data-mce-href="http://browser.hatenablog.com/entry/2015/07/02/204918"&amp;amp;amp;gt;Windows 10 SDK Preview Build 10158 で JavaScript の UWP Apps がビルドできない - Browser&amp;amp;amp;lt;/a&amp;amp;amp;gt;browser.hatenablog.com

変更後ビルドができれば下準備は OK です

今回使用しないファイルを消す

今回はローカルファイルを使わないので css、js、WinJS のフォルダと default.html を消します。

f:id:x67x6fx74x6f:20150708202135p:plain

消さなくてもビルドはできますが必要ないので今回は削除。

また、images フォルダはスプラッシュやアイコンが入っています。

package.appxmanifest ファイルを編集する

ソリューションエクスプローラから package.appxmanifest をダブルクリックして開き
<Application Id="App" StartPage="default.html"> を
<Application Id="App" StartPage="http://www.bing.com/"> にします。

f:id:x67x6fx74x6f:20150708202220p:plain