Cordova アプリケーションまたは PhoneGap アプリケーションの作成

Cordova

Apache Cordova は、Android、iOS、BlackBerry、Windows Phoneデバイス用のアプリケーションを作成する API およびパッケージ化ツールを提供します。Sencha Cmd 5.0+ は複数のビルドプロファイルをサポートするビルドシステムを提供します。これはネイティブのパッケージ化に最適です。Cordova Native Packager コンポーネントはこの機能を最大限に活用できるように更新されています。

PhoneGap

PhoneGapはCordovaの上位にビルドされ、どちらもCordova APIにアクセスします。PhoneGapとCordovaは、パッケージングツールの実装方法が異なります。PhoneGapでは、Adobe PhoneGap Build でリモートビルドインターフェースが提供され、クラウドの単一プラットフォームのアプリケーションのパッケージ化とエミュレーションを行うことができます。PhoneGap Native Packager コンポーネントはこの機能を最大限に活用できるように更新されています。

フレームワークの選択

Cordova または PhoneGap かのいずれかを選択する場合、次のような注意点があります。

  • Cordova のパッケージングツールでは、ご利用のマシン上の複数のプラットフォームに対して同時にビルドも行われます。
  • Cordova はオープンソースコミュニティにより定期的にアップデートされているのに対し、PhoneGap のアップデートは Adobe 主導で行われています。
  • PhoneGap はローカルでビルドする必要のないリモートビルドアプリケーションを提供します。

Cordova と PhoneGap での Sencha Cmd の使用

Sencha Cmd 5.0+ では、Cordova と PhoneGap は Sencha フレームワークの一部を成すものです。Sencha Cmd が生成するアプリではすべてこれらのサービスによるネイティブビルドを作動させることができます。Sencha Cmd は、アプリのビルド、Cordova または PhoneGap 用の配置、アプリケーションのビルド、エミュレーション、実行の適切なコマンドの実行など繰り返し作業を処理します。

ネイティブ開発に関する詳細は、Apache Cordova Platform Guides を参照してください。これらのガイドでは、利用を開始するための情報やシステムを稼働するために必要な条件を解説します。

重要

  1. packager.json は全て削除されました。プロジェクトにまだこのファイルが含まれている場合、安全に削除することができます。このファイルは Sencha のレガシー Native Packager でのみ使用されていました。

  2. Cordova と PhoneGap では、Sencha Cmd はアプリケーションの DEBUG バージョンのみを作成し、Release(App Store)バージョンは作成できません。リリースバージョンを作成するには、Eclipse や IntelliJ for Android、Xcode for iOS などのパッケージ作成ツールを使用する必要があります。

  3. Sencha Cmd Cordova コマンドを適切に動作させるためには、Java JRE 1.7 が必要です。

環境設定

Cordova や PhoneGap アプリケーションを開発する前に、次のソフトウェアで環境設定を取得する必要があります。

  1. Java JRE のインストール

  2. Node.js のインストール

  3. Cordova でパッケージ化やエミュレーションを行う場合、次のコマンドでインストールします。

    npm install -g cordova

Mac の場合、インストールを完了するには “sudo” を含める必要があります。コマンドは次のようになります。

sudo npm install -g cordova

注意:アプリのパッケージ化とエミュレーションを目的としたCordovaのインストールに関わらず、Cordova API をアプリケーションで利用できます。Cordova のパッケージ化とエミュレーションは Cordova または PhoneGap アプリでの Cordova API の使用には影響しません。

  1. PhoneGap でパッケージ化およびエミュレーションを行う場合、次のコマンドでインストールします。

    npm install -g phonegap

Mac の場合、インストールを完了するには “sudo” を含める必要があります。コマンドは次のようになります。

sudo npm install -g phonegap

注意:PhoneGap リモートビルドサイトにアクセスするには、無料の Adobe PhoneGap Build サイトで登録し、ユーザー名とパスワードを取得する必要があります。

  1. Sencha Cmd 5+ をダウンロードしてインストールします。このプロセスの詳細については、Cmd Intro Guide を参照してください。

  2. ターゲットデバイスのプラットフォーム固有の要件を満たします。

    Android:Android SDK Manager をダウンロードしてインストールします。

    Blackberry:BlackBerry Native SDK を確認し、BlackBerry Keys Order Form で登録してアプリに署名します。

    iOS:Apple iOS プロビジョニングプロファイルポータル(Apple ID、パスワード、購入済みの開発者ライセンスが必要)上で、iOS プロビジョニングのすべての手順を完了します。このサイトを使用して証明書を取得し、デバイスを確認してAppIDを入手します。

    さらに、無料の Xcode ソフトウェアをダウンロードしてインストールします。Xcode シミュレータを使用して iOS アプリをデバッグしてから、デバイスにインストールすることができます。Xcode は Lion、Mountain Lion、Mavericks OS X を搭載した Mac でのみ動作します。

config.xml

PhoneGap または Cordova アプリを作成する場合、いずれもプロジェクトに config.xml ファイルを作成します。

Cordova は config.xml を “app_root/cordova” フォルダに格納し、PhoneGap は config.xml ファイルを “app_root/cordova/www” フォルダに格納します。これは、www フォルダがコンパイルのビルド先となるため問題になります。この www フォルダは削除され、config.xml ファイルが消去される可能性が高くなります。

Cmd 5 でこれに対処するためには、PhoneGap アプリケーションの作成時に config.xml ファイルを PhoneGap プロジェクトのルートにコピーします。ビルドを行うたびに、コンパイルされたアプリケーションと一緒に www フォルダにコピーします。これは、使用するフレームワークに関わらず、config.xml ファイルが Cordova または PhoneGap フォルダのルートにあると想定します。

PhoneGap および Cordova の設定に関する詳細は、次のリソースを参照してください。

Cordova アプリの開発

sencha -sdk /path/to/Framework generate app MyApp /path/to/MyApp などの Cmd 生成コマンドを使用してアプリケーションを作成します。

アプリケーションの app.json ファイルを編集して、次の “builds” オブジェクトを追加します。

"builds": {
    "native": {
        "id": "com.mydomain.MyApp",
        "packager": "cordova",
        "cordova" : {
            "config": {
                    "platforms": "ios"
                }
        }
    }
}

上記のコードスニペットについて詳しく見てみましょう。

ビルド名

「native」という単語はビルドの名前であり、何を指定しても構いません。ビルド名はスペースなしの英数字を含む単一の文字列にする必要があります。例えば、ios、android、iphone、ipad などのビルド名を付けることができます。

注意:ビルド名には何を指定しても構いませんが、「production」と「testing」は Sencha Cmd の予約語となっており、この文脈では使用できません。

プラットフォーム

次に、プラットフォームオブジェクトにプラットフォームまたはプラットフォームの組み合わせを設定できます。Cordova の場合、「ios android」などのスペース区切りリストを指定できます。

ID

‘id’ プロパティは Cordova アプリケーションを最初に生成する場合に使用されます。これはアプリケーションの識別子です。ただし、これは正しく選ぶようにしてください。変更する必要がある場合、Cordova フォルダをプロジェクトから削除し、ID プロパティの変更後に Cmd で再生成します。iOS アプリケーションでは Bundle 識別子を一致させる必要があるため特に重要です。

ターミナルまたはコマンドラインから次のコマンドを実行します。

sencha app build {build-name}

ここで、{build-name} は app.json ファイルのビルドオブジェクトで定義された名前の 1 つです。例えば、ビルドを「android」と名付けると、コマンドは次のようになります。

sencha app build android

その通りです。これで、Sencha Cmd が Cordova アプリケーションを作成し、app.json の platforms プロパティで指定したプラットフォームをビルドしました。

Sencha Cordova のコマンド

Cordova とこの新しいビルドオブジェクトで使用できるコマンドが 4 つあります。

Build

sencha app build {build-name}

“build” は Sencha アプリケーション、ネイティブアプリケーションの順にビルドします。

Run

sencha app run {build-name}

“run” は Sencha アプリケーションとネイティブアプリケーションを実行します。次に、接続デバイスで実行しようとします

Emulate

sencha app emulate {build-name}

“emulate” は Sencha アプリケーションとネイティブアプリケーションをビルドします。次に、エミュレータで実行しようとします

Prepare

sencha app prepare {build-name}

“prepare” は Sencha アプリケーションをビルドし、ネイティブアプリにビルドするアプリケーションを準備します。ただし、ネイティブ部分はビルドしません。Sencha コンパイル後のネイティブビルド前にアプリケーションを挿入する必要がある場合に役立ちます。

PhoneGap アプリの開発

PhoneGap は Cordova と非常に似ています。実際、このプロセスは PhoneGap クラウドサービスでビルドしない場合とほぼ同じです、

これは、上記の Cordova プロジェクトと同じ PhoneGap プロジェクトを提供する app.json のスニペットです。

"builds": {
    "native": {
    "id": "com.mydomain.MyApp",
        "packager": "phonegap",
        "phonegap" : {
            "config": {
                "platform": "ios"
            }
        }
    }
}

違いは少ないですが、重要な違いがいくつかあります。

  • 名前が「cordova」から「phonegap」に変わります。

  • 「platforms」は単数形です。Cordova では複数のプラットフォームを同時にビルドできますが、PhoneGap を使用すると同時にビルドできるプラットフォームは 1 つだけです。

これらの違いを理解すれば、以降は上記の同じコマンドを使用できます。“sencha app build native” または “sencha app run native” を実行するだけで、Cordova と同じパスになります。

Sencha PhoneGap のコマンド

PhoneGap とこの新しいビルドオブジェクトで使用できるコマンドが 3 つあります。PhoneGap は Cordova にある ‘prepare’ はサポートしません。“sencha app prepare native” は PhoneGap を使用している場合はエラーをスローします。その他 3 つは上記の Cordova コマンドと同じです。

Build

sencha app build {build-name}

“build” は Sencha アプリケーション、ネイティブアプリケーションの順にビルドします。

Run

sencha app run {build-name}

“run” は Sencha アプリケーションとネイティブアプリケーションを実行します。次に、接続デバイスで実行しようとします

Emulate

sencha app emulate {build-name}

“emulate” は Sencha アプリケーションとネイティブアプリケーションをビルドします。次に、エミュレータで実行しようとします

リモート PhoneGap アプリの開発

PhoneGap アプリケーションをクラウドでビルドすると数々のメリットがあります。SDK やツールをマシンにすべてダウンロードする手間は必要ありません。ウェブアプリを PhoneGap サーバーに送信し、Adobe がネイティブアプリケーションを生成するだけです。

Sencha Cmd とリモートビルドを開始する前に、http://build.phonegap.com をご覧になり、無料アカウントにサインアップします。

index.html ファイルを含む zip をアップロードするだけでビルドプロセスをテストできます。次に、PhoneGap Remote Build がパッケージ化します。

iOS をビルドしている場合、サイトの指示に従ってアプリケーションをビルドするための適切な認証情報を追加する必要があります。

アカウントが設定され、正しいファイルが Adobe にアップロードされたら、Sencha ワークフローにリモートビルドをすぐに追加できます。

リモートで導入するためのビルドオブジェクトを見てみましょう。

"builds": {
    "native": {
    "id": "com.mydomain.MyApp",
        "packager": "phonegap",
        "phonegap" : {
            "config": {
                "platform": "ios",
                "remote": true
            }
        }
    }
}

ご覧の通り、ローカルからリモートビルドには切り替えるのはシンプルです。リモートフラグを app.json ビルドブロックに追加するだけです。

次に、Sencha Cmd が自動的に PhoneGap リモートサーバーにログインしてプロジェクトをアップロードできるようにユーザー名とパスワードを提供します。

これを行うためには、local.properties ファイルをアプリケーションのルートに追加することをお勧めします。セキュリティ上、この properties ファイルはあらゆる形式のバージョンコントロールで無視する必要があります。

そのファイルに次の行を追加します。

[email protected]
phonegap.remote.password=s3nch@isgr3@t

ユーザー名とパスワードを設定したら、ビルドを送るのはシンプルです。‘sencha app build native’ を実行するだけでアプリケーションがコンパイルされ、Adobe がネイティブアプリケーションを生成できるようにクラウドにアップされます。

ビルドが完了したら、デバイスでテストし、アプリストアにアップロードするために、PhoneGap ポータル経由で最終パッケージにアクセスできます。

Last updated