PhoneGap CLI によるアプリの開発

メモ

アドビは、シングルページアプリケーションフレームワークをベースにしたクライアント側のレンダリング（React など）を必要とするプロジェクトには SPA エディターを使用することをお勧めします。詳細情報を参照してください。

開発者は、開発環境を設定しておくと、デバイス上またはエミュレーター内でいつでもアプリを実行できます。

次のサンプルを実行するには、Xcode 搭載の OSx を実行しているシステム（Mac）か、Android SDK がインストールされた Mac／Win／Linux システムが必要です。

開発環境のブートストラップ

PhoneGap CLI の設定

iOS の場合：iPhone および iPad 向けに開発するには、Apple の Xcode IDE が必要です。

Android の場合：Android 向けに開発するには、Google の Android Studio IDE が必要です。

ソースのダウンロード

開発環境を正常にブートストラップしたら、AEM アプリのビルドタイルからソースをダウンロードします。

  • 「PhoneGap Buildタイル」ドロップダウンの山形をクリックします。

chlimage_1-45

  • 「ソースをダウンロード」をクリックします。
  • 「ソースをダウンロード」モーダルから目的のソースを選択します。

chlimage_1-46

メモ

開発ソースにはアプリの最新状態が含まれていますが、ステージングされていない変更も含まれています。アプリストアベンダーに提出するリリース候補をビルドするには、ステージングソースを使用します。

まだアプリをステージングしていない場合には、「ステージング」を選択するとステージングワークフローが実行されます（ヒント：これにより、AppStore および Google PlayStore で使用可能な PhoneGap エンタープライズ版 Viewer アプリにステージング済みアプリとして表示されるようになります）。

  • 「ダウンロード」をクリックし、コンピューターに ZIP を保存します。
  • ダウンロードした zip ファイルをワークスペースに抽出します。

（ソースからの）アプリのビルドおよび読み込み

PhoneGap CLI では、プラットフォームプロジェクトの作成、ソースのコンパイルおよびアプリのデプロイを単一のコマンドで実行できます。

メモ

これらすべての手順を個別に行うことができます。PhoneGap CLI のドキュメントを参照してください。

  1. PhoneGap CLI をインストール済みであることを確認してください（上記を参照）。
  2. コンソール（またはターミナル）ウィンドウで、抽出したソースのルートディレクトリに移動します。
  3. 以下のコマンドを入力します。
phonegap run android

// -- or -- //

phonegap run ios
メモ

この時点で問題が発生した場合には、基本に戻ってトラブルシューティングしてください。

  1. 新規フォルダーを作成します（mkdir test）。
  2. この新規フォルダーに移動します（cd test）。
  3. 「phonegap create helloWorld」を実行します。
  4. helloWorld に移動します（cd helloWorld）。
  5. 「phonegap run android」を実行します（または上記のように android を ios に置き換えます）。
  6. エミュレーターが開いて、新規に作成した PhoneGap アプリが実行されます。ネイティブへの JavaScript ブリッジが動作している場合には、「Device Ready」と表示されます。

この場合、PhoneGap CLI 開発環境は正しく稼動していることになります。

Safari および iOS デバッグでの JavaScript のデバッグ

Web アプリケーションの場合と同じように、Safari の開発者向けツールを使用してアプリの JavaScript をデバッグできます。

Safari 開発者向けツールの使用可能化

開発者向けツールを使用可能にするには：

  • Safari の環境設定を開きます。

    • メニューバーで「Safari」をクリックします。
    • 「環境設定」をクリックします。

  • 環境設定ウィンドウで「詳細」をクリックします。

chlimage_1-47

  • 「メニューバーに開発メニューを表示」をオンにします。
  • 環境設定ウィンドウを閉じます。

iOS への Safari の接続

iOS デバイスまたはエミュレーターに Safari を接続できます。

  • コンソールウィンドウで、抽出したソースのルートディレクトリに移動します。
  • 次のコマンドを入力して、デバイスまたはエミュレーターでアプリを起動します。
phonegap run <platform> --device

// -- or -- //

phonegap run <platform> --emulator
  • Safari を開きます。
  • メニューバーで「開発」をクリックします。
  • iOS シミュレーターサブメニューを選択します。
  • home.html をクリックします。

chlimage_1-48

Safari の Web インスペクタでの JavaScript のデバッグ

ソースの任意の場所にブレークポイントを設定できます。エミュレーターまたはデバイスと対話する場合、設定したブレークポイントでアプリの実行が停止します。アプリをステップ単位で実行して、変数の値を調べることができます。

  • Web インスペクタウィンドウで「リソース」をクリックします。
  • ソースツリーを移動し、目的のソースファイルをクリックします。
  • 隣接する行番号をクリックして、ブレークポイントを追加します。
  • デバイスまたはエミュレーターと対話します。

chlimage_1-49

  • コントロールボタンを使用してメソッドの実行、ステップオーバー、ステップインおよびステップアウトを続行します。

メモ

変数の値を表示するには、現在のメソッドにマウスのカーソルを置きます。

次の手順

PhoneGap CLI によるアプリの開発について学習したら、デバイスの機能へのアクセスを参照してください。

このページ