ホストされた Web アプリの作成
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ホストされた Web アプリはUniversal Windows Platform applications (UWP apps) です。これにより、既存の Web ワークフローを活用し、継続的な展開によって、応答性の高い Web アプリを Windows ストアに公開できるようになります。最初は、既存の Web サイトの URL を使用できます。これをアプリ マニフェストに配置し、Windows プラットフォームを対象とするアプリを作成します。これだけの簡単な操作です。
概要
ホストされた Web アプリは、Visual Studio またはコマンド ライン インターフェイスで作成できます。どちらの方法でも、展開方法と、Web アプリとして実行されることを説明するアプリ パッケージ マニフェストで操作できる、ホストされている既存の Web サイトがあることが必要です。
ホストされた Web アプリには、プラットフォームへのフル アクセスが許可されています。つまり、Cortana との統合を活用し、オンライン認証プロバイダーを使用して、サーバーでホストされているスクリプトから直接、Windows ランタイム API を呼び出すことができます。ハイブリッド アプリもサポートされているため、ホストされているスクリプトから呼び出されるローカル コードを使って、リモートとローカルのページ間でのアプリのナビゲーションを簡単に提供することができます。
ハイブリッド アプリ
UWP アプリを作成するためのオプションがあります。アプリは、Windows ストアからダウンロードし、ローカル クライアントで完全にホストするように設計することができます (一般的にPackaged Web Appと呼ばれます)。これにより、互換性のある任意のプラットフォームでアプリをオフラインで実行できます。または、アプリはリモート Web サーバーで実行する完全にホストされた Web アプリ (一般的にHosted Web Appと呼ばれます) とすることができます。ただし、3 つ目のオプションもあります。アプリはローカル クライアントで部分的にホストされるか、リモート Web サーバーで部分的にホストできます。この 3 つ目のオプションをHybrid appと呼び、通常 WebView コンポーネントを使って、リモート コンテンツをローカル コンテンツのように表示します。ハイブリッド アプリ パッケージには、ローカル アプリ コンテンツ内のパッケージとして実行される HTML5、CSS、Javascript コードを格納し、リモート コンテンツを操作する機能を保持できます。
manifoldjs とアプリ マニフェスト
Web サイトを UWP アプリに変換する簡単な方法は、app manifestと manifoldjs を使うことです。 アプリ マニフェストは、アプリに関するメタデータを格納する xml ファイルです。アプリ マニフェストでは、アプリの名前、リソースへのリンク、表示モード、URL など、アプリを展開し、実行する方法を説明するデータを指定します。manifoldjs は、このプロセスを簡単にします。Web アプリをサポートしないシステムでも同様です。詳しくは、「manifoldjs.com」をご覧ください。この Windows 10 Web Apps プレゼンテーションの一部として、manifoldjs のデモを見ることもできます。
アプリ マニフェストでの URL の使用
ホストされた Web アプリに含めることができる URL と、含めることができない URL を定義できます。これを行うには、アプリケーション コンテンツ URI 規則 (ACUR) をアプリ パッケージ マニフェストで設定します。この規則には、アプリのスタート ページと、アプリのページとして含めるその他のあらゆるページを含める必要があります。必要に応じて、特定の URL を除外することもできます。
規則では、次のような方法で URL 照合を指定します。
- 完全なホスト名
- 任意のサブドメインを指定した URI を含むホスト名、またはサブドメインを指定した URI を除外したホスト名
- 完全な URI
- クエリ プロパティを含むことができる完全な URI
- 対象に含めるルールの場合は、部分的なパスと、特定のファイル拡張子を示すワイルドカード
- 対象から除外する規則の場合は、相対パス
規則に含まれない URL にユーザーが移動した場合は、Windows によってターゲット URL がブラウザーで開かれます。
以下に、ACUR の例をいくつか示します。
<uap:ApplicationContentUriRules>
<uap:Rule Type="include" Match="https://example.com/" />
<uap:Rule Type="include" Match="https://*.example.com/" />
<uap:Rule Type="exclude" Match="https://example.com/excludethispage.aspx" />
</uap:ApplicationContentUriRules>
Windows ランタイム API の呼び出し
サーバーでホストしている Windows ランタイム API は、ホストされているコンテンツが Windows でアプリとして実行されている限り、JavaScript で直接呼び出すことができます。
これを実現するには、ACUR で (WindowsRuntimeAccess="<<level>>") 属性を、次のいずれかの値で指定する必要があります。
- "none" を指定すると、Windows ランタイム API へのすべてのアクセスがブロックされます。これが既定値です。
- "AllowForWebOnly" を指定すると、アプリ パッケージに含まれているローカルの Windows ランタイム コンポーネントをリモート スクリプトで呼び出すことができます。
- "all" を指定すると、Windows ランタイム名前空間全体とすべてのローカル コンポーネントに開発者のサーバー コードがアクセスできます。
以下に、規則の種類の例を示します。
<uap:ApplicationContentUriRules>
<uap:Rule Type="include" WindowsRuntimeAccess="all" Match="http://example.com/" />
</uap:ApplicationContentUriRules>
これにより、http://example.com/ で動作しているスクリプトに、Windows ランタイム名前空間と、パッケージに含まれるカスタム コンポーネントへのアクセスが許可されます。 トースト通知用の GitHub のサンプル Windows.UI.Notifications.js をご覧ください。
Cortana 音声コマンドの統合
html ページで音声コマンド定義 (VCD) ファイルを指定すると、Cortana 統合を利用できます。VCD ファイルは、コマンドに特定の語句をマップする xml ファイルです。たとえば、[スタート] ボタンをタップし、「Contoso Widgets、ベスト セラーを表示」と発声すると、Contoso Widgets アプリを起動して、アプリ内の "ベスト セラー" ページに移動できます。
VCD ファイルの場所の一覧を含む <meta> 要素タグを追加すると、Windows によって音声コマンド定義ファイルが自動的にダウンロードされ、登録されます。
ホストされた Web アプリの html ページでの <meta> タグの使用例を次に示します。
<meta name="msapplication-cortanavcd" content="http:// example.com/vcd.xml"/>
Cortana 統合と VCD の詳細については、「Cortana の操作」と「Voice Command Defintion (VCD) elements and attributes v1.2」をご覧ください。
Web 認証ブローカーの使用
インターネット認証と、OpenID や OAuth などの認証プロトコルを使用するオンライン ID プロバイダーがある場合は、Web 認証ブローカーを使って、ユーザーのログイン フローを処理できます。アプリの html ページ上の <meta> タグに、開始 URI と終了 URI を指定します。これらの URI が Windows で検出され、Web 認証ブローカーに渡されて、ログイン フローが完了します。 開始 URI は、オンライン プロバイダーに対する認証要求の送信先のアドレスと、必要なその他の情報 (アプリ ID、認証後にユーザーが転送されるリダイレクト URI、必要な応答の型など) で構成されます。必要なパラメーターについては、プロバイダーに確認してください。
<meta> タグの使用例を次に示します。
<meta name="ms-webauth-uris"
content="https://<providerstartpoint>?client_id=<clientid>&response_type=token,
https://<appendpoint>"/>
詳しいガイダンスが必要な場合は、「Web 認証ブローカーに関する考慮事項 (オンライン プロバイダー向け)」をご覧ください。
新しいセキュリティ モデル
UWP アプリでは、最初は Windows の特定の Web アプリのセキュリティ ポリシーが使われました。Windows 10 では、新しい W3C 標準 Content Security Policy (CSP) の使用に基づく新しいセキュリティ モデルが導入されています。UWP が自動的にローカル コンテンツの既定のポリシーを適用します。ただし、開発者はポリシーを変更し、必要に応じて制限を調整することができます。CSP は標準の HTTP ヘッダーに対応して、アプリでの実行が許可されるコンテンツの承認済みのソースを宣言します。これには、JavaScript、フレームワーク、CSS、HTML フレーム、フォント、画像、および Java アプレット、ActiveX、オーディオおよびビデオ ファイルなどの埋め込み可能オブジェクトが含まれます。詳しくは、「W3C ドラフト コンテンツ セキュリティ ポリシー」をご覧ください。
使用可能なプラットフォーム機能
ホストされた Web アプリは、Windows ランタイム API の大部分にアクセスできますが、本質的には対応していない特殊な機能があります。 詳しくは、「アプリ機能の宣言」をご覧ください。
Visual Studio の使用
ホストされた Web アプリを Visual Studio で作成するのは簡単です。必要なのは、ホスト対象の既存の Web サイトだけです。 Visual Studio を使用すると、ユニバーサル Windows プラットフォーム全体と、サポートされるすべての API へのアクセスも許可されます。
- 空のテンプレートを使って、新しい Windows 10 JavaScript プロジェクトを開始します。
- スタート ページの URL とアプリケーション コンテンツの URI 規則を package.appxmanifest に設定します。
- Microsoft Visual Studio のソリューション エクスプローラーで、アプリの package.appxmanifest ファイルを右クリックし、[デザイナーの表示] を選びます。
- 含める、または除外する URI を指定します。
- これで、Visual Studio でマニフェスト ファイルが更新されます。
- [実行] を押します。
WinJS サイトを試す
WinJS を試すサイトは、WinJS プロジェクトと UWP アプリ作成の中心的な部分です。これにより、jsfiddle 上のように、開発者は WinJS とその UI コントロールの実践的な操作経験を得ることができます。主要な各 UI コントロールが、変更できる実用的な HTML/CSS/JS コードで示され、それらの変更の効果がすぐにわかります。WinJS ライブラリを使って独自の HTML/CSS/JS コードをテストできる、Playground 機能が提供されます。リンクにより、GitHub (WinJS ソース コードのホーム)、Windows デベロッパー センターの WinJS ゲートウェイ、WinJS の使用に関するビデオにアクセスできます。
今後、さらに新しいコンテンツを WinJS を試すサイトに追加するアクティブな計画があります。
関連トピック
Codepen: Windows ランタイム API の呼び出しに使用するサンドボックス
Voice Command Defintion (VCD) elements and attributes v1.2
Web 認証ブローカーに関する考慮事項 (オンライン プロバイダー向け)
Guide to Universal Windows Platform (UWP) apps