Web アプリケーションをユニバーサル Windows プラットフォーム (UWP) アプリに変換する

Web サイトの URL のみから開始して、Windows 10 用のユニバーサル Windows プラットフォーム アプリをすばやく作成する方法について説明します。

注意

以下の手順は、Windows の開発プラットフォームで使用される手順です。 Mac ユーザーの場合は、Mac の開発プラットフォームを使用する手順をご覧ください。

Windows での開発に必要な要素

  • Visual Studio 2015。 フル機能を備えた無料の Visual Studio Community 2015 には、Windows 10 開発ツール、ユニバーサル アプリ テンプレート、コード エディター、強力なデバッガー、Windows Mobile エミュレーター、充実した言語サポートなどが含まれており、すべて運用環境で使うことができます。
  • (省略可能) Windows Standalone SDK for Windows 10。 Visual Studio 2015 以外の開発環境を使っている場合は、Windows Standalone SDK for Windows 10 インストーラーをダウンロードできます。 Visual Studio 2015 を使っている場合は、この SDK をインストールする必要はありません (既に含まれています)。

手順 1: Web サイトの URL の選択

単一ページ アプリとして適切に動作する既存の Web サイトを選びます。 この作業は、サイトの所有者または開発者が行うことを強くお勧めします。これにより、必要なすべての変更を行うことができます。 具体的な URL がない場合は、こちらのCodepen の例を Web サイトとして使用してみてください。 このチュートリアル全体で使用する、Web サイトの URL または Codepen の URL をコピーします。

手順 1: Web サイトの URL の選択

手順 2: 空の JavaScript アプリの作成

Visual Studio を起動します。

  1. [ファイル] をクリックします。
  2. [新しいプロジェクト] をクリックします。
  3. [JavaScript][Windows ユニバーサル] で、[空のアプリケーション (Windows ユニバーサル)] をクリックします。

手順 2: 空の JavaScript アプリの作成

手順 3: パッケージ化されたコードの削除

これはホストされた Web アプリであり、コンテンツはリモート サーバーから提供されるため、既定で JavaScript テンプレートに付属しているローカル アプリ ファイルの多くは必要ありません。 ローカルの HTML、JavaScript、CSS リソースを削除します。 残す必要があるのは、アプリを構成するための package.appxmanifestファイルと、画像リソースのみです。

手順 3: パッケージ化されたコードの削除

手順 4: スタート ページの URL の設定

  1. package.appxmanifest ファイルを開きます。
  2. [アプリケーション] タブで、[スタート ページ] テキスト フィールドを探します。
  3. default.html を Web サイトの URL に置き換えます。

手順 4: スタート ページの URL の設定

手順 5: Web アプリの境界の定義

アプリケーション コンテンツ URI 規則 (ACUR) は、どのリモート URL からアプリやユニバーサル Windows API へのアクセスを許可するかを指定します。 少なくとも、スタート ページとそのページで使用されるすべての Web リソースの ACUR を追加する必要があります。 ACUR について詳しくは、ここをクリックしてください。

  1. package.appxmanifest ファイルを開きます。
  2. [コンテンツ URI] タブをクリックします。
  3. スタート ページに必要な URI を追加します。

次に例を示します。

1. http://codepen.io/seksenov/pen/wBbVyb/?editors=101
2. http://*.codepen.io/
  1. 追加したすべての URI について、[WinRT アクセス][すべて] に設定します。

手順 5: Web アプリの境界の定義

手順 6: アプリの実行

この時点で、ユニバーサル Windows API にアクセスできる、完全に機能する Windows 10 アプリが完成しました。

Codepen の例を使っている場合は、[Toast Notification] ボタンをクリックすると、ホストされたスクリプトから Windows API が呼び出されます。

手順 6: アプリの実行

ボーナス: カメラ キャプチャの追加

次の JavaScript コードをコピーして貼り付けると、カメラ キャプチャが有効になります。 独自の Web サイトを使っている場合は、cameraCapture() メソッドを呼び出すボタンを作成します。 Codepen の例を使っている場合は、ボタンは既に HTML に存在しています。 このボタンをクリックすると、写真が撮影されます。

function cameraCapture() {
  if(typeof Windows != 'undefined') {
   var captureUI = new Windows.Media.Capture.CameraCaptureUI();
   //Set the format of the picture that's going to be captured (.png, .jpg, ...)
   captureUI.photoSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
   //Pop up the camera UI to take a picture
   captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
      // Do something with the picture
   });
  }
}

関連トピック