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

Browser

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

Microsoft Edge まとめページ

ウェブサイトを 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 アプリの開発

 

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

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

Visual Studio 起動し、Ctrl + N で新しいプロジェクトを作成。
インストール済みのテンプレートから JavaScriptWindows 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 に変更します。

 

以前に書いた記事参照

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

 

StartPage を変更しましたが外部URLへのアクセス権限がないため bing が表示されません。

<Application Id="App" StartPage="http://www.bing.com/"> の下に以下のものを追加しましょう。

 

 

f:id:x67x6fx74x6f:20150708202306p:plain

 

WindowsRuntimeAccess で Windows Runtime の実行制限ができます。

「all」は制限なし。
「allowForWeb」 はカスタムパッケージコードのみ。
「none」 は Windows Runtime への命令実行を許可しません。

デフォルトは 「none」 です。

 


ビルドして確かめる

F5 押してビルド。
アプリで動く bing を堪能できると思われます。

 


締め

ただ公開しているサイトをアプリにしたいだけならばこれで終了です。

Windows Runtime へのアクセス、タイル、使用する画像関連、ストア申請等、まだまだできることがあるので今後紹介していきたいと思います。

 


注意点

UWP アプリということは Windows Phone や Xbox One などでも動くということになります。
画面サイズが異なる為、サイトをアプリにする場合は必ずレスポンシブ(アダプイティブ)レイアウトをする必要があります。

 

 

今回の記事の元ネタ

Publish responsive websites to the Windows Store with Project Westminster | Microsoft Edge Dev Blog

スポンサーリンク