Yuta Watanabe's Blog

開発周りと、その他諸々

HTML ファイルや Web サイトをアプリ化!Web App Template

こんにちは。

今日は、先日公開された Web App Template という 新しい Windows ストア アプリのプロジェクト テンプレートをご紹介します。

f:id:yuwata:20140219111605p:plain

Web App Template を使うと、誰でも簡単に HTML ファイルや 運営中の Web サイトをアプリ化し、Windows ストアに公開することが出来ます!

  • プログラミング不要 ( 基本的に設定をいじるだけ )
  • OS ネイティブの機能や UI コントロールが使える ( これもプログラミング不要で )
  • できたアプリをそのままストアで公開できる

という、とっても便利なテンプレです。

Web App Template とは?

Web App Template は、WebView コントロールを使って HTMLファイルや Web サイトをアプリ化するテンプレートです。

f:id:yuwata:20140219111219p:plain

  • HTML ファイルや Web サイトの動作、外観の調整
  • 検索、共有、設定等の OS が提供している API の利用
  • アプリ バーを始めとする標準コントロールの組み込み

を、テンプレート内に含まれる設定ファイル config.json を書き換えるだけで行えます。

つまりアプリ公開までに必要な作業は、

  • 開発環境の準備とテンプレートのダウンロード
  • ベースとなる HTML ファイルや Web サイトを読み込み
  • config.json で外観と使う機能を設定
  • ストアに公開申請

だけです。

config.json で設定可能な内容

ドキュメントの Json Reference に、各設定項目の内容が記載されています。まずは homeURL にアプリ化する Web サイトの URL を指定します。共有コントラクトナビゲーションバーもご覧いただけるとおり、JSON のプロパティ指定で実現することができます。

例えば、navBar を下記のように設定してみます。

すると、このようにナビゲーションが出てくる。こんな感じです。WinRT の API や C#, JavaScript の知識がなくても、設定ファイル config.json の変更だけでアプリを形作っていくことができます。

テンプレート利用に際する注意

簡単に Web サイトをアプリ化できる、便利な Web App Template ですが、利用に際してはいくつか注意点、ガイドラインが出されているのでご確認ください。

特に、やってはいけないこととして、

  • 自分が所有していない Web サイトやアプリを使う
  • 振り替え表示が設定されていない Adobe Flash や Microsoft Silverlight を含んだ Web ページを表示する ( *アプリではプラグインがサポートされていません )
  • ナビゲーションバーと表示している Web サイトの両方にナビゲーションを置く ( Styles の設定で隠しましょう )

が、あげられています。その他、これはやった方がいいよ!というポイントもガイドが出ていますので、使用上の注意をよく読んでテンプレートを使いましょう。

このあとは

誰でも簡単に Web サイトをアプリ化できる Web App Template 、ぜひ活用して Windows ストア にアプリをリリースしてみてください!

Windows ストア アプリ開発の概要や開発環境の整え方等は、下記の記事もご参照いただければと思います。