メインコンテンツまでスキップ

Apache Cordova

Apache Cordovaはオープンソースのモバイル開発フレームワークです。標準のウェブ技術であるHTML5、CSS3、JavaScriptを使用して、クロスプラットフォーム開発ができます。アプリケーションは、各プラットフォームに対してターゲットとされたラッパーで実行され、センサー、データ、ネットワークステータスなど、各デバイスの機能にアクセスするための標準準拠のAPIバインディングに依存します。

Cordovaを使用してPlayCanvasアプリをネイティブにラッピングすることができます。その後、iOS App StoreやAndroidのGoogle Playに公開することができます。Cordovaは、macOSやWindowsと互換性がある実行可能ファイルを生成することもできます。

Cordovaのインストール​

はじめるには、コンピュータにCordovaをインストールする手順に従ってください。

プロジェクトの作成​

プロジェクトを作成するには、次のコマンドを入力します。

cordova create hello com.example.hello HelloWorld

helloはプロジェクトが作成されるフォルダーです。com.example.helloはアプリのリバースドメインスタイルの識別子です。HelloWorldはあなたのアプリの人間に読みやすいタイトルです(例えば、生成されたアプリアイコンの名前です)。

したがって、[Master Archer] 3のようなゲームの場合、適切なコマンドは次のとおりです。

cordova create masterarcher com.playcanvas.masterarcher "Master Archer"

プロジェクトが作成されると、プロジェクトのルートフォルダーにconfig.xmlというファイルがあります。ここで、アプリの特定の特性を設定または編集することができます。たとえば、アプリのカスタムアイコンをグローバルにまたはプラットフォームごとに[設定する] 4ことができます。

PlayCanvasアプリの追加​

新しいCordovaプロジェクトを作成すると、wwwというフォルダーにスケルトンのWebアプリが生成されます。wwwフォルダーの中身をすべて削除し、次にPlayCanvasアプリのファイルをこの場所にコピーします。

エンジンのエディターを使用してビルドしている場合は、index.htmlファイルがルートにあるようにアプリファイルをwwwにコピーします。

注記

Audioアセットファイルは、正しくロードおよび再生するために、Base64形式である必要があります。これは、iOSがWebViewを介してローカルディスク経由で読み込まれる可能性があるファイルに関して制限的であるためです。

Base64 Guruなどのツールを使用することをお勧めします。

PlayCanvasエディターでアプリをビルドした場合、Cordovaと最も互換性があるようにプロジェクトをビルドおよび準備する公式の外部ツールがあります。これには、iOSで読み込むためにオーディオファイルをBase64に変換するという課題を自動化するなどのタスクが含まれます。

公式の外部ツールは、[こちら] rest-api-tools-readmeのGitHubで見つけることができます。

GitHubリポジトリのreadmeで[セットアップ手順] rest-api-tools-setupに従ってください。

そして、readmeに示されている[Cordova Publishスクリプト] rest-api-tools-readmeのコマンドを実行します。

これにより、Cordovaに準備が整ったプロジェクトのZIPが作成されます。その内容をwwwフォルダーのルートに展開します。

実行可能ファイルのビルド​

これで、Cordovaでサポートされているプラットフォームのどれかのアプリをビルドする準備が整いました。

iOS向けにビルドする​

iOS向けのビルドは、macOSベースのコンピュータに限定されます。Xcodeがインストールされていることも確認する必要があります。[Mac App Store] 9からインストールできます。

iOS向けにアプリをビルドするには、Cordova iOSプラットフォームをプロジェクトに追加します。プロジェクトのルートから、次のコマンドを入力してください。

cordova platform add ios

バージョンが 6.0.0 以上であることを確認してください。これは、バージョン 6.0.0 でラッパーがUIWebViewからWKWebViewにアップグレードされ、パフォーマンスが向上するためです。Cordovaのブログで詳細を読み取ってください。

CordovaベースのPlayCanvasアプリを実行しようとすると、クロスオリジンHTTPリクエストに関するいくつかのエラー/例外に遭遇することがあります。これを修正するには、プロジェクトのconfig.xmlに次の内容を追加します。

    <platform name="ios">
        <!-- Add these two lines... -->
        <preference name="scheme" value="app" />
        <preference name="hostname" value="localhost" />

        <!-- ...alongside whatever already exists in this section -->
    </platform>

iOS向けのテスト​

これで、アプリをテストする準備が整いました。iOSの場合、シミュレータを使用するか、物理的なiOSデバイスで実行することができます。SimulatorはXcodeツールの一部としてインストールされ、さまざまなiOSベースのデバイスをシミュレートします。Simulatorでアプリを実行するには、次のコマンドを入力してください。

cordova run ios

実行可能ファイルがビルドプロセスで生成されると、Simulatorが開始され、それが読み込まれます。次のようなものが表示されます。

Master Archer in Simulator

物理デバイスで実行するには:

  1. USB経由でiOSデバイスをMacに接続します。

  2. Xcodeでplatforms/ios/<my-project-name>.xcworkspaceを開きます。

  3. プロジェクトのターゲットに対する署名と機能の設定に移動し、デジタル署名されたアプリを展開する前に有効なチームを選択します。

  4. XcodeのスキームドロップダウンリストでiOSデバイスを選択します。

    Xcode Scheme drop-down

  5. Runボタンを押して、アプリケーションをビルド、展開、実行します。

    Xcode Run button

アプリに満足したら、[App Store Connect] 14に出荷することができます。