ホストされた Web アプリ

Windows PC を使っている場合も、Mac を使っている場合も、既存の Web サイトのコードで優れた Windows 10 アプリを構築します。開発プラットフォームを選び、指示に従ってください。

Windows 10 のホストされた Web アプリとは

既存の Web アプリケーションについては、Windows 10 を使うことで、Web サイトを Microsoft Store での公開用にパッケージ化するユニバーサル Windows プラットフォーム (UWP) アプリを簡単に作成できるようになります。

  • PC、タブレット、携帯電話、HoloLens、Surface Hub、Xbox、Raspberry Pi などのすべての Windows ベース デバイスでアプリを動作させることができます。
  • Web サイトで実行中の JavaScript からネイティブ Windows API を更新して呼び出すことができるので、より魅力的なユーザー体験を提供することができます。
  • Cortana 音声コマンドと統合できます。
  • Microsoft Edge F12 開発者ツールでアプリをデバッグできます。
  • ステータス、評価、レビューの追跡、分析の表示に加え、Microsoft Store ですべてのアプリから収益を獲得することができます。

アプリを起動する

Windows で Visual Studio を使ってアプリを作成する

Visual Studio を使うと、独自のホストされた Web アプリをほんの数分で作成できます。フル機能を備えた無料の Visual Studio Community 2015 クライアントには、Windows 10 開発者ツール、ユニバーサル アプリ テンプレート、コード エディター、強力なデバッガー、Windows Mobile エミュレーター、充実した言語サポートなどが含まれています。

Mac で ManifoldJS または App Studio を使ってアプリを作成する

Visual Studio にアクセスできない場合でも、いくつかのオプションを選択できます。ManifoldJS は、NPM から簡単にインストールできる Node.js アプリです。無料のオンライン アプリ作成ツール App Studio を使って、Windows 10 アプリをすばやく構築することもできます。

ユニバーサル Windows プラットフォームで動作するように Chrome アプリを変換する

HWA-CLI ツールを使うことで、既存の Chrome でホストされるアプリを Windows でホストされる Web アプリに変換することが容易になりました。このツールは、既存の .zip または .crx ファイルから .appx パッケージを生成します。

ユニバーサル Windows プラットフォームでアプリを拡張する

Windows のネイティブ機能にアクセスする

Windows ランタイムから JavaScript で Windows のネイティブ機能にアクセスすることによりアプリを強化します。

アプリをセキュリティで保護された状態に保つ

Content Security Policy (CSP) モデルでアプリケーション コンテンツ URI 規則 (ACUR) を設定します。

Cortana 音声コマンドを統合する

音声でアプリを実行できます。

アプリの機能を宣言する

ユーザー リソースとデバイスの機能に対するプログラムによるアクセスを許可します。

OpenID や OAuth でユーザーの身元を確認する

OpenID や OAuth でユーザーの身元を確認することによって、シンプルかつスムーズなユーザーのログイン フローを作成します。

ハイブリッド アプリを作成する

ホストされた Web アプリによるオンライン実行と、パッケージ Web アプリによるオフライン実行のいずれかに決定する必要はありません。両方を利用します。

デモ

Contoso Travel アプリ

Contoso Travel アプリにより、Windows ランタイム API を呼び出す簡単な方法がいくつか示されます。ソース コードはここから入手できます。

Windows ランタイム API (JavaScript)

この簡単なデモ ページで JavaScript を利用した Windows API をお試しください。ソース コードはここから入手できます。

  • メッセージ ダイアログ ポップアップ
  • トースト通知
  • 組み込みのカメラ UI へのアクセス
  • 連絡先一覧へのアクセス
  • カレンダーへの予定の追加
このページは役に立ちましたか?
その他にご意見はありますか。
ありがとうございました! フィードバックにご協力いただき感謝します。
Microsoft をフォロー Twitter ブログ Facebook Twitter ブログ Facebook WeChat line