Apache Cordova を使用したホスト型 Web アプリの作成


※本ブログは、“Create a hosted web app using Apache Cordova” ページの抄訳です。

更新日:2015年12月19日

本ガイドの内容:

 

Web 開発者が Cordova を使用すると、既存の Web アセットの利用、Web ベース アプリのアプリ ストアへのアップロード、カメラのようなデバイス機能へのアクセスなどが可能になります。ここでは、Apache Cordova を使用して、Web サイトをすばやくモバイルアプリに変換する方法を示します。

一般に、Web サイトの移行時には複数のアプローチを利用できます。以下にそのアプローチをいくつか示します。

· フロント エンド コード (ビュー) を、Web サイトから新しい Cordova アプリに移動する。

Cordova アプリのクライアント側コードではサポートされない ASP.NET、PHP、Ruby などのサーバー側テクノロジを Web サイトに実装しない場合は、このアプローチが有効です。このアプローチを利用する場合、Cordova クライアント (ネイティブ Web ビュー) で実行できるように、Cordova に適した形式 (プレーンな HTML5、CSS、JavaScript と、バックエンド サーバーと通信用の JSON) にフロント エンド コードを再パッケージ化する必要があります。実際に必要な手順は Web サイトごとにきわめて固有になるため、今回はこのアプローチを取り上げません。このアプローチの詳細については、「次の手順」を参照してください。一般的なチュートリアルについては、「初心者向けガイド (英語)」を参照してください。

· ホスト型 Web アプリを作成する。

このアプローチでは、Cordova シン クライアントを使用します。シンクライアントは、ネイティブ アプリに Web サイトが埋め込まれたものと考えてください。このシン クライアントにより自動的に Web サイトへリダイレクトされます。ASP.NET などのサーバー側テクノロジを使用するサイトの場合、このアプローチが Web サイトを稼働させる最速の方法です。また、Cordova を学習しながら、アプリをいずれかのアプリストアにすばやく登録する優れた方法でもあります。アプリのエクスペリエンスをすべて利用するにはインターネット接続が必要になりますが、いくつか作業を行うことで、オフラインのシナリオにも対処できます。このアプローチが最も効果を発揮するのは、Web サイトにレスポンシブ デザイン (英語) 手法を採用して、デバイスの画面サイズに合うようにレイアウトを調整している場合です。

ホスト型アプリを利用するメリットの 1 つは、サーバー側でアプリに変更を加えることができ、デバイスのプラグインに変更がある場合はアプリストアに再発行するだけで済むことです。

このチュートリアルでは、ホスト型アプリをビルドすることによって、Cordova に取り組みます。ホスト型コンテンツのサンプルとして、Azure で実行している ASP.NET Web サイトを使用します (サンプルに含まれる Cordova の機能には、ASP.NET との依存関係はありません)。Cordova モバイル クライアント アプリは、Android、iOS、および Windows 10 で機能します。

ホスト型アプリのアーキテクチャの概要を以下に示します。この図では、サーバーを左側に、Cordova クライアント アプリを右側に示しています。cordova.js は、デバイス API (Cordova のプラグイン) にアクセスできるようにします。このアーキテクチャでは、汎用の JavaScript プラグイン インターフェイスを使用するサーバー側コードを記述して、デバイスで実行しているネイティブコードを呼び出します。

clip_image002[5]

セットアップ

1. Visual Studio Tools for Apache Cordova と Visual Studio 2015 をインストールします (まだ、インストールしていない場合)。

重要: Visual Studio をインストールする場合は、[クロスプラットフォームモバイル開発] の下にある [HTML/JavaScript (Apache Cordova)] オプション コンポーネントもインストールに含めていることを確認してください。

2. スターター ASP.NET ソリューションをダウンロードします。このソリューションを使用して、ホスト型アプリを作成します。

チュートリアルの手順を実行するには、こちら (英語) からスターター ソリューションを入手します。ダウンロードが済んだら解凍します。このサンプルを使用して、ホスト型アプリを作成する方法を示します。

clip_image004[6]

実際に手順を実行しないで完成版のサンプル アプリの実行する場合は、こちら (英語) から完成版サンプルを入手します。手順全体を一読すればコードについての理解を深めることができますが、この手順は既に完了しているものです。

3. ダウンロードしたファイルを取り出します。

4. スターターソリューション (.sln ファイル) を Visual Studio で開きます (必ず、解凍済みのファイルを選択します)。

 

ソリューションへの Cordova プロジェクトの追加

スターター ソリューションには、いずれホスト型アプリで使用することになる ASP.NET MVC サイト (CordovaHostedWeb プロジェクト) が含まれています。このスターター ソリューションに Cordova クライアントアプリを追加して、「CordovaHostedApp-Client」という名前を付けます。

1. Visual Studio のソリューション エクスプローラーで、ソリューションを右クリックし、[追加] をポイントして、[新しいプロジェクト] をクリックします (CordovaHostedWeb プロジェクトではなく、ソリューションを右クリックします)。

clip_image006[4]

2. [新しいプロジェクト] ダイアログ ボックスで、[JavaScript] を展開し、[Apache Cordova Apps]、[空のアプリ (Apache Cordova)] の順にクリックします。

clip_image008[4]

3. プロジェクトに「CordovaHostedApp-Client」のような名前を付け、[OK] をクリックします。

Visual Studio によって Cordova モバイル アプリ プロジェクトが作成され、スターター ソリューションに追加されます。作成されたプロジェクトは、ソリューションエクスプローラーに表示されます。

4. ソリューションエクスプローラーで、その新しい Cordova プロジェクトを右クリックし、[スタートアッププロジェクトに設定] をクリックします。

5. アプリを実行する前に、ホスト型アプリサンプルの初期テストに使用するエミュレーターまたはデバイスを 1 つ以上、開発環境に基づいて特定します。

    • Hyper-V (VM サポートなし) をサポートするコンピューターで Windows 10 を実行している場合は、Visual Studio Emulator for Android でテストする計画を立てます。これは、全機能を装備した高速エミュレーターです (VM 上での実行はサポートされません)。
    • Windows 10 を実行している場合は、Windows Phone 10 エミュレーターまたは Windows 10 デバイスでテストする計画を立てます。デバイスに web カメラが搭載されていれば、このチュートリアルの後半でも使用できます。
    • Windows 7 以降を実行している場合は、Ripple Simulator (英語) でテストする計画を立てます (Chrome がインストールされていない場合は、ここでインストールします)。チュートリアル後半では、Google Android エミュレーターや GenyMotion など、全機能を装備したエミュレーターを構成する必要がありますが、実際のデバイスが手元にあれば、そのデバイスで実行できます (Ripple では、Camera プラグインはサポートされません)。

メモ: iOS でもアプリを実行できますが、セットアップに追加の手順が必要で、Mac ベースまたはクラウドベースの Mac サービスも必要になるため、チュートリアルではこの手順を取り上げていません。詳細については、iOS ガイド (英語) を参照してください。

6. ここで、Visual Studio で使用するエミュレーターを選択します。

Visual Studio 上部にあるデバッグツールバーのソリューション プラットフォームの一覧から、実行対象に指定するプラットフォームを選択します。

Windows 10 で VS Emulator for Android を実行できる場合は、[Android] をクリックし、デバイスの一覧の [VS エミュレーター 5″ Lollipop (5.0) XXHDPI 電話] をクリックします。

hosted-app-select-android

Windows 10 で実行している場合は、実行対象として [Windows – x64] または [Windows – x86] をクリックし、右側のデバイス一覧の [ローカル コンピューター] をクリックします。

最初に Ripple で実行している場合は、[Android] をクリックし、デバイス一覧の [Ripple – Nexus (Galaxy)] をクリックします。以下の図を参照してください。

hosted-app-select-ripple

7. F5 を押してアプリを起動します。

アプリが読み込まれると、「Hello, your application is ready」(アプリケーションの準備が整いました) というメッセージが表示されます (初回のビルドは、常に時間がかかります)。

hosted-app-run-blank

 

この時点で読み込まれるアプリは、ネイティブ Web ビューで実行される Cordova 標準クライアント アプリです。次は、コードを追加して、このアプリをサーバーで実行するホスト型アプリに変換します。

8. Shift キーを押しながら F5 キーを押して、デバッグを停止します。

 

ホスト型 Web アプリへの Cordova プロジェクトの変更

1. ソリューションエクスプローラーで、CordovaHostedApp-Client プロジェクトの config.xml を右クリックし、[コードの表示] をクリックします。

2. 以下のエントリを、最初の一連の <allow-intent.../> タグの後 (<platform> セクションの前) に追加します。

<allow-navigation href="https://cordovahostedweb-starter.azurewebsites.net" />

config.xml のこのエントリは、ホスト型サイトへのナビゲーションを可能にします。

メモ: 後ほど再発行するときは、<allow-navigation> で使用するドメイン名をドメイン URL に一致させるようにします。

3. Windows 10 でテストしている場合は、ソリューション エクスプローラーで config.xml を右クリックして、[ビュー デザイナー] をクリックします。

[Windows 対象バージョン] の [Windows 10] をクリックします。Windows 10 でテストしていない場合は、この手順を省略して、次の手順に進んでください。

4. www\scripts フォルダーの index.js を開き、既定のコードをすべて削除して、以下のコードに置き換えます。

var app = {
    // アプリケーション コンストラクター
    initialize: function() {
    this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');

       // ここで、Web サイトへリダイレクト
        var targetUrl = "https://cordovahostedweb-starter.azurewebsites.net/";
        var bkpLink = document.getElementById("bkpLink");
        bkpLink.setAttribute("href", targetUrl);
        bkpLink.text = targetUrl;
        window.location.replace(targetUrl);
},
    // メモ: 以下のコードは Cordova CLI テンプレートから取得
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

上記のコードは、Cordova の deviceReady イベントが発生した場合に、(window.location.replace を使用して) ネイティブ Web ビュー ウィンドウの URL を設定します。deviceReady ハンドラーで、URL を Web サイトの URL に設定します。

また、pause と resume のイベント コードの削除も行います。このコードは後ほど CordovaHostedWeb プロジェクトに追加して、イベント ハンドラーが Web サイトで実行されるようにします。

残りのコードの大部分は Cordova CLI の空のテンプレートのコードなので、現時点では無視してかまいません。

5. index.html を開き、<body> 要素にある HTML を、すべて以下の HTML に置き換えます。

Verifying connectivity..
<a id="bkpLink" href="https://cordovahostedweb-starter.azurewebsites.net">cordovahostedweb.azurewebsites.net</a>

<div class="app">
    <h1>Apache Cordova</h1>
    <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>

最も重要なことは、前の手順で作成したリダイレクト スクリプトで使用する、アンカー リンクを作成することです。

6. index.html の既定のコンテンツ セキュリティ ポリシー (CSP) (英語) <meta> 要素を、以下の <meta> 要素に置き換えます。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://cordovahostedweb-starter.azurewebsites.net https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Web サイトの URL を既定の CSP (この例では、https://cordovahostedweb-starter.azurewebsites.net) に追加して、信頼できるドメインに指定し、このサイトのコンテンツをホスト型アプリで許可されるようにします。

7. 別の Cordova テンプレートから流用した以下の <meta> 要素を追加します。

<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

上記の要素は、viewport 属性を指定して画面表示を管理し、プラットフォームのその他の属性をいくつか指定して、モバイルデバイスからサイトに接続する際のユーザー エクスペリエンスを向上しています。

8. F5 を押してアプリを起動します。

エミュレーターが起動すると、ホスト型アプリが読み込まれて表示されます。

clip_image016[4]

表示に問題がなければ、ホスト型アプリは機能しています。ここまでは順調です。ただし、デバイス プラグインのサポートを有効にするには、いくつか作業が必要です。

9. 先に進む前に、アプリを実行できる別のエミュレーターがあれば、ここで試してみます。

アプリを Windows 10 で実行しているようすを以下に示します。

clip_image018[4]

メモ: 完成版のサンプルには、最初に表示されるスプラッシュ ページの見た目をよくする CSS コードが含まれています。現時点では、これについて取り上げません。

トラブルシューティング: 解決策

「Verifying Connectivity」(接続を確認中) というメッセージを表示してアプリが応答を停止する

URL が別のアプリの起動を試みているというメッセージを表示してアプリが応答を停止する

Visual Studio Emulator for Android が実行されない

 

Web サイトへのモバイル専用ページの提供

ここでは、サイトが Cordova アプリを検出した場合にモバイル専用ページを表示するよう、Web サイトを更新します。このアプリにコードを追加して、ブラウザーの利用者には既定のホーム ページを表示し、Cordova ホスト型アプリを実行するユーザーにはカメラなどの機能にアクセスできるようにします。

1. CordovaHostedApp-Client プロジェクトの index.js を開き、targetUrl 変数を更新します。

更新後のコード行は、以下のようになります。

var targetUrl = "https://cordovahostedweb-redirect.azurewebsites.net/cordova/setPlatformCookie?platform=" + cordova.platformId;

これで、Cordova アプリが Web サイトにリダイレクトされると、アプリは関数 (setPlatformCookie) を呼び出し、Cordova アプリが実行中であることを Web サイトに通知するようになります。このとき、リダイレクトに必要な Cordova プラットフォーム ID も渡します。

メモ: 後の手間を省くために、https://cordovahostedweb-redirect.azurewebsites.net という新しい URL を使用します。

2. CordovaHostedWeb (ASP.NET) プロジェクトの Controllers フォルダーを右クリックし、[追加] をポイントして、[既存の項目] をクリックします。エクスプローラーを使用して Controllers フォルダーに移動した後、cordovaController.cs という既存のファイルをプロジェクトに追加します。

このファイルには、以下のコードが含まれています。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CordovaHostedWeb.Controllers
{
    public class CordovaController : Controller
    {
        const string platformCookieKey = "cdva_platfrm";
        public ActionResult Index()
        {
            var cookie = HttpContext.Request.Cookies[platformCookieKey];
            var platform = "dontknow";
            if (cookie!=null)
            {
                platform = cookie.Value;
            }
            ViewBag.Platform = platform;
            return View();
        }
        public ActionResult setPlatformCookie(string platform)
        {
            if (!string.IsNullOrWhiteSpace(platform))
            {
                HttpContext.Response.SetCookie(new HttpCookie(platformCookieKey, platform));
            }
            return RedirectToAction("index");
        }
    }
}

上記のコードは、クライアント アプリがプラットフォーム ID を指定した setPlatformCookie 関数呼び出しを含むクエリ文字列を渡したときに、サイトを Cordova 専用の Index.cshtml にリダイレクトします。この URL は、クライアント アプリのリダイレクト スクリプト (index.js) で既に指定したものです。

3. CordovaHostedWeb (ASP.NET) プロジェクトの Views/Cordova フォルダーを右クリックし、[追加] をポイントして、[既存の項目] をクリックします。エクスプローラーを使用して Views/Cordova フォルダーに移動した後、Index.cshtml というファイルをプロジェクトに追加します。

このページには、以下のコードが含まれています。

@{
    ViewBag.Title = "index";
    var platform = ViewBag.Platform;
}

<h2>index</h2>

@section Metas{
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://cordovahostedweb-redirect.azurewebsites.net/ https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
}

@if (platform == "android" || platform == "ios" || platform == "windows")
{
    @Scripts.Render("~/cordovadist/" + platform + "/cordova.js");

    <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    <img class="media-object pull-left" />

    @Scripts.Render("~/cordovaApp/app.js");
}
else
{
    <p>No valid platform found</p>
}

<div>
    Found cookie platform to be: <strong>@platform</strong>
</div>

上記のページはモバイル専用のページで、Cordova アプリが有効なプラットフォーム ID (Android、iOS、または Windows) を指定して接続するとレンダリングされます。上記のコードには、クライアント アプリと同じ CSP <meta> 要素が含まれているため、クライアントアプリはこの Web サイトのコンテンツを表示できます。

また、cordova.js のプラットフォーム専用バージョンも読み込み、デバイスアクセスに Cordova プラグインを使用できるようにします。これらの手順を完了すると、アプリから Android、iOS、および Windows のデバイス機能にアクセスできるようになります。チュートリアルの後半では、デバイスの機能 (カメラ) を使用します。

最後に、app.js スクリプトも読み込みます。後ほどこのファイルを使用して、サーバー側の Camera プラグイン コードを追加します。このコードは、デバイスで実行されるネイティブ コードを呼び出します (現時点では、気にする必要はありません)。

4. オプションとして、ホスト型アプリが読み込まれる前に表示されるクライアントページのスタイルを変更する場合は、

https://raw.githubusercontent.com/ridomin/CdvaHWA/master/CordovaHostedApp/www/css/index.css

の完成版のサンプルから CSS を www/css フォルダーの index.css にコピーします。

デバイスからホスト型 Web アプリへの接続

時間と手間を省くために、ASP.NET プロジェクトを新しい Azure Web アプリの URL に再発行するのではなく、以前に変更を加えたバージョンのプロジェクトに接続します (新しい URL に再発行する方法については、「付録」を参照してください)。

1. 両方のプロジェクトの URL 参照を更新して、新しいサイトをポイントします。具体的には、以下のように参照を更新します。

CordovaHostedApp-Client プロジェクト:

    • config.xml では、<allow-navigation>素を新しい URL https://cordovahostedweb-redirect.azurewebsites.net/ に更新します。
    • index.html では、CSP <meta> 要素を同じ URL に更新します。

index.js では、既に targetURL 変数を新しい URL に変更しましたが、この URL が一致していることを確認します。コードの変更部分は以下のとおりです。

var targetUrl = "https://cordovahostedweb-redirect.azurewebsites.net/cordova/setPlatformCookie?platform=" + cordova.platformId;

CordovaHostedWeb プロジェクト: * Views/Cordova/index.cshtml では、既にCSP <meta> 要素を新しい URL に変更済みのため、変更する必要はありません。

2. F5 を押します。

今度は、デバイスまたはエミュレーターにホスト型アプリが読み込まれると、Cordova 専用ページが読み込まれます。

hosted-app-redirect

メモ: Ripple では、リダイレクトが部分的にしかサポートされません。ポップアップが表示される場合は、メッセージを閉じて、ホスト型アプリのリダイレクトページを表示します。

次は、このページを修正して、デバイスのカメラにアクセスして写真を撮影できるようにします。

トラブルシューティング: 解決策

短時間表示されるスプラッシュ スクリーンに CSS が適用されない

プロジェクトへのプラグインの追加

Cordova のプラグインによって、カメラやファイル システムなどのデバイス機能にアクセスできるようになります。このチュートリアルでは、Camera プラグインを使用します。ホスト型アプリで他のプラグインを使用する場合もまったく同じ方法を当てはめることができます。

1. ソリューションエクスプローラーで、config.xml を開き、[プラグイン] タブをクリックします。

2. Camera プラグインを選択して、[追加] をクリックします。

hosted-app-add-plugin

Visual Studio によって、Camera プラグインがソリューションに追加されます。プラグインは、後ほどデバイス機能を追加する際に使用します。

3. Whitelist プラグインを選択して、[追加] をクリックします。

プラグインは空のアプリ テンプレートに既に存在していますが、Visual Studio の構成デザイナーで確認することができます。

ASP.NET プロジェクトでのプラグイン ファイルの確認

Web サイトでプラグイン コードを実行する場合、cordova.js と JavaScript プラグイン コードを、CordovaHostedApp-Client プロジェクトから CordovaHostedWeb プロジェクトにコピーする必要があります。このチュートリアルでの手間を減らすため、プラグイン ファイルは既にコピーしてあります。CordovaHostedWeb プロジェクトの cordovadist フォルダーにあるファイルを確認してください。

hosted-app-cordova-plugin-files

Android のような特定のプラットフォーム向けに CordovaHostedApp-Client プロジェクトをビルドした場合、これらのファイルは \platforms フォルダーにあります。たとえば、Android ファイルは \platforms\android\assets\www にあります。

CordovaHostedWeb プロジェクトでは ImportCordovaAssets.proj を使用して、CordovaHostedApp-Client プロジェクトから CordovaHostedWeb プロジェクトにこれらのファイルを自動的にコピーします。独自のホスト型アプリで .proj ファイルを使用できますが、これについては今回説明しません。

Camera プラグインのコードを実行するための Web サイトの構成

スターター ASP.NET プロジェクト (CordovHostedWeb) には、プラグイン コードを既に含めています。ここでは、いくつかコードを追加して、デバイスのカメラ アプリを実際に使用します。プラグインコードは CordovaHostedWeb プロジェクトの app.ts に追加します。

1. CordovaHostedWeb プロジェクトの Views/Cordova/Index.cshtml を開きます。

2. btn-lrg 要素を探して、表示テキストを「Take Picture」(写真の撮影) に変更します。

更新後の HTML 行は以下のようになります。

<p><a class="btn btn-primary btn-lg">Take Picture &raquo;</a></p>

3. (アプリのコードを含む) cordovaApp フォルダーで app.ts を開き、ボタンの click イベントのイベント ハンドラーを onDeviceReady 関数に追加します。

更新後の関数は以下のようになります。

function onDeviceReady() {
    // Cordova の pause イベントと resume イベントをハンドル
    document.addEventListener('pause', onPause, false);
    document.addEventListener('resume', onResume, false);

    document.getElementsByClassName('btn-lg')[0].addEventListener('click', takePicture);

}

4. app.ts で、onDeviceReady 関数と同じスコープに以下の関数を追加します (Application モジュールのエクスポートの 1 つにします)。

function takePicture() {
    if (!navigator.camera) {
        alert("Camera API not supported");
        return;
    }
    var options = {
        quality: 20,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: 1,
        encodingType: 0
    };

    navigator.camera.getPicture(
        function (imgData) {
            var el : HTMLElement;
            el = <HTMLElement>document.getElementsByClassName('media-object')[0];
            var srcAttr = document.createAttribute("src");
            srcAttr.value = "data:image/jpeg;base64," + imgData;
            el.attributes.setNamedItem(srcAttr);
        },
        function () {
            alert('Error taking picture');
        },
        options);

    return false;
}

上記のコードは、先ほど Index.cshtml で変更した [Take Picture](写真の撮影) ピクチャ ボタンのイベント ハンドラーを追加します。このボタンを押すと、アプリは takePicture 関数を呼び出して、Camera プラグインを使用するカメラアプリを実行します。

メモ: app.ts は、ビルド時に app.js にコンパイルされます。

 

デバイスで機能している Camera コードとホスト型アプリとの接続

時間と手間を省くために、CordovaHostedWeb プロジェクトを新しい Azure Web アプリの URL に再発行する代わりに、既に Camera が適切にサポートされている完成版のプロジェクトに接続します (新しい URL に再発行する方法については、本ガイドの「付録」を参照してください)。

1. 両方のプロジェクトの URL 参照を更新して、新しいサイトをポイントします。具体的には、以下のように参照を更新します。

CordovaHostedApp-Client プロジェクト:

      • config.xml では、<allow-navigation> 要素を新しいURL https://cordovahostedweb.azurewebsites.net/ に更新します。
      • index.html では、CSP <meta> 要素を同じ URL に更新します。
      • o index.js では、targetURL 変数を新しい URL に更新します。targetUrl に正しい値を使用していることを確認します。コードの変更部分は以下のとおりです。

 

var targetUrl = "https://cordovahostedweb.azurewebsites.net/cordova/setPlatformCookie?platform=" + cordova.platformId;

CordovaHostedWeb プロジェクト: * Views/Cordova/index.cshtml では、CSP 要素を新しい URL に更新します。

2. アプリを実行するエミュレーターを選択します。

メモ: Ripple では Camera プラグインがサポートされないため、現状 Ripple では正常に実行できません。Camera プラグインの動作を確認するには、VS Emulator for Android、Google Android Emulator、GenyMotion など、完全な機能を備えたエミュレーターにアップグレード (英語) するか、実デバイスで実行してください。

3. F5 を押してアプリを実行します。

4. アプリが読み込まれたら、[Take Picture](写真の撮影) をクリックします。

clip_image026[4]

このボタンをクリックすると、カメラ アプリ (またはシミュレーター) がホスト型 Web アプリに読み込まれます。

clip_image028[4]

下部の丸いボタンをクリックすると、デバイスで写真を撮影できます (この例は、Android です)。

これで完成です。Web サイトからデバイスのネイティブ コードを実行できるようになりました。

次の手順

最適なアプローチを見つけるために、どのような選択肢があるかを調べる場合があります。ホスト型アプリという設計は、アプリをアプリ ストアに簡単に登録でき便利ですが、他にも選択肢があります。アプリを一歩先に進めるため、以下の選択肢が考えられます。

· ホスト型アプリの強化

    • スプラッシュ スクリーンやアイコンを追加します。このためのプラグインについては、cordova-imaging (英語) を参照してください。
    • Web サイトをさらにレスポンシブ (英語) にします。Ionic (英語) などのフレームワークを使用して、引っ張って更新 (プルリフレッシュ) のようなネイティブ同様の機能を Web UI に組み込みます。
    • オフライン サポートを追加します。
      • ページをキャッシュする場合は、Service Worker (英語) (iOS プラグイン) を実装するか、HTML5 AppCache (英語) を使用します (AppCache により、必須のマニフェストのデバッグが難しくなることがあります)。
      • Cordova のオフライン データの場合、ローカル ストレージ、IndexedDB、または WebSQL を使用します (WebSQL は非推奨の標準です)。
    • Manifold.js (英語) を検討します。Web サイトの URL を指定すれば、そのサイトのホスト型モバイル アプリを入手できます (現時点で入手できるプロジェクトには、Cordova CLI との互換性も、Visual Studio Tools for Apache Cordova とのような Cordova 依存のツールとの互換性もありません)。

· Web サイトのフロントエンド コードをリファクタリングすることによって Cordova アプリを作成

    • Web サイトが動的に生成される HTML を使用していなければ、このアプローチを利用して、非常にすばやく Cordova アプリを作成できる可能性があります。
    • Cordova プロジェクトでは、UI にプレーンな HTML5、CSS、JavaScript を使用し、バックエンドの呼び出しに xhr 要求と JSON を使用します。Ionic (英語)bootstrap (英語) など、モバイル向けに最適化された JavaScript フレームワークを使用してアプリを強化することもできます。または、JQuery とようなフレームワークを使用します。

· Web サイトを Cordova に移行することによる、完全にパッケージ化されたアプリの作成

    • リファクタリングを行う選択肢に似ていますが、サイトのコードを完全にパッケージ化されたアプリとして、Cordova に移行します。アプリで Web サービスを呼び出す場合は、xhr と JSON を使用します。この作業を行う場合、サイトで多くのサーバー側テクノロジを使用するかどうかによって、難易度が異なります。

· ホスト型アプリに使用できる他のアーキテクチャの調査

トラブルシューティング: 解決策

ホスト型 Web アプリの実行がエラーになる場合は、こちらを参照してください。

  • 「Verifying Connectivity」(接続を確認中) というメッセージを表示してアプリが応答を停止する

以下に示すエラーが表示される場合は、ホスト型アプリ サンプルがサポート対象外の Windows バージョンをターゲットにしている可能性があります。config.xml を開き、[Windows] タブで [Windows 10.0] を選択します。アプリを実行します。

clip_image030[4]

  • URL が別のアプリの起動を試みているというメッセージを表示してアプリが応答を停止する

このエラーが表示される場合は、ホスト型アプリ サンプルがサポート対象外の Windows バージョンをターゲットにしている可能性があります。config.xml を開き、[Windows] タブで [Windows 10.0] を選択します。アプリを実行します。

  • 短時間表示されるスプラッシュ スクリーンに CSS が適用されない

優れたスプラッシュ スクリーンを作成するために、完成版のサンプル (英語) から CSS を入手できます。CSS コードをこちら (英語) からプロジェクトの www/css フォルダーにコピーします。

  • Visual Studio Emulator for Android が実行されない

Visual Studio Emulator for Android には Hyper-V が必要なので、VM での実行時にはサポートされません。詳細については、こちらを参照してください。

以前 Visual Studio Emulator for Android が正常に実行されていたのに、エミュレーターが実行されなくなった場合は、Hyper-V Manager でエミュレーター VM インスタンスを削除してみます。詳細については、「Visual Studio Emulator for Android のトラブルシューティング」を参照してください。

 

付録: Web サイトの発行

ここでは、チュートリアルで使用している既存の Azure Web アプリ URL を使用する代わりに、CordovaHostedWeb ASP.NET プロジェクトを再発行する方法を取り上げます。以下の手順は、CordovaHostedWeb プロジェクトの独自の実装に接続する場合のみ実行してください。

1. [ビルド] をクリックし、[ソリューションのビルド] をクリックします。

2. ソリューション エクスプローラーで、[ASP.NET プロジェクト (CordovaHostedWeb)] を右クリックし、[公開] をクリックします。

clip_image032[4]

3. [Web を発行] ダイアログ ボックスで、[Microsoft Azure Web Apps] をクリックします。

clip_image034[4]

Visual Studio によって Azure Web アプリの設定ページが開かれます。このチュートリアルでは、Azure の設定は重要ではありませんが、ダイアログ ボックスの手順に従うことで、Visual Studio で Web サイトの発行機能を使用できます。

4. [Microsoft Azure Web アプリの構成] ダイアログ ボックスで、入力を求められた場合は Microsoft アカウントの資格情報を入力します。

clip_image036[4]

5. [New](新規) をクリックします。

Web サイトに新しい設定を使用すると、サイトが更新されて新しい URL に発行されます。

clip_image038[4]

「Hosted-App-yourusername」や「Hosted-App-svc-yourusername」のような一意値を使用します。

[OK] をクリックすると、Visual Studio によってソリューションと新しい Web アプリが作成されます (この時点では、Azure のエラー メッセージを無視してかまいません)。

6. [Web を発行] ダイアログ ボックスで、URL を http:// から https:// に変更します。

SSL に変更するのは、iOS をサポートするためです (追加手順が必要になるため、ここではテストしません)。

7. [Web を発行] ダイアログ ボックスで、[ターゲット URL] をクリップ ボードにコピーし、[発行] をクリックします。

clip_image040[4]

ASP.NET MVC Web サイトがブラウザーで開きます。

クライアント アプリから再発行したサイトに接続するには、CordovaHostedApp-Client プロジェクトをコピーした URL で更新する必要があります。更新方法は、既に説明しました。

CordovaHostedWeb プロジェクトの CSP <meta> 要素を新しい URL に更新し、再発行することも必要です。

 

執筆者: Mike Jones。寄稿者: Mikejo5001

Comments (0)