CodeZine(コードジン)

特集ページ一覧

Xcode×PhoneGapでiOSアプリ開発!
~インストールからアプリ実行まで

原題:XcodeとPhoneGapでiOSアプリケーションを開発する

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/08/06 14:00

目次

Xcodeでプロジェクトを作成する

 PhoneGapをインストールすると、XcodeにPhoneGapプロジェクトテンプレートが追加され、PhoneGapアプリケーションを効率的に作成できます。

  1. プロジェクトを作成するには、Xcodeのスタートアップ画面(図2を参照)で、「Create A New Xcode Project(新規Xcodeプロジェクトの作成)」をクリックします。または、File(ファイル)/New(新規)/New Project(新規プロジェクト)を選択して新しいPhoneGapプロジェクトを作成することもできます。

     

    図2:Xcodeのスタートアップ画面
    図2:Xcodeのスタートアップ画面
  2. 新しいXcodeプロジェクトを作成する最初の手順は、プロジェクトテンプレートを選択することです。iOS/Application(アプリケーション)で、「Cordova-based Application(Cordovaベースのアプリケーション)」テンプレートを選択し、「Next(次へ)」を選択します(図3参照)。

     

    図3:プロジェクトテンプレートの選択
    図3:プロジェクトテンプレートの選択

     

     プロジェクトテンプレートを選択したら、プロジェクトに名前を付ける必要があります。作成するアプリケーションに適したわかりやすい名前を付けます。ここでは単純なHello Worldアプリケーションを作成するので、「Hello」と入力します(図4参照)。

     

    図4:プロジェクト名とその他のオプションを設定
    図4:プロジェクト名とその他のオプションを設定
     New Project Options(新規プロジェクトのオプション)画面で、会社IDも入力する必要があります。会社IDは、製品名の前に付加されるプレフィックスで、この2つが連結してアプリケーション固有のバンドルIDになります。バンドル IDは、Appleのプロビジョニングポータルでアプリケーションに対して作成する固有のアプリケーションIDと同一になります(図5を参照)。

     

    図5:AppleプロビジョニングポータルのバンドルIDを指定
    図5:AppleプロビジョニングポータルのバンドルIDを指定
     何を入力すればよいかわからない場合、またはこのアプリケーションのデバイスへの展開や配信をすぐには行わない場合は、何を入力してもかまいませんし、空白のままにすることも可能です。バンドルIDは、後からいつでも変更できます。その場合は、Xcodeのプロジェクト概要画面のIdentifier(ID)フィールドを編集するか、プロジェクトのInfo.plistファイルを手動で編集します。

     

    注意

     プロジェクトのオプション画面には、Automated Reference Counting(ARC)を有効にするためのオプションもあります。PhoneGapアプリケーション内でネイティブコードを記述しない場合は、このオプションは無視してかまいません。

     PhoneGapネイティブプラグインまたはネイティブコードを記述する場合のみ、ARCの設定を行う必要があります。PhoneGapネイティブプラグインを使用すると、独自のネイティブコードおよびJavaScript APIを記述して、PhoneGapコンテナの機能を拡張できます。

     PhoneGapプロジェクトは、ARCの設定にかかわらず機能します。ARCを有効にすると、どのネイティブコードでも、retainおよびreleaseコードを用いてメモリ割り当てを管理する必要がなくなります。XcodeのLLVMコンパイラーによって適切なretainおよびreleaseコードが自動的に生成されます。ARCを無効にすると、メモリを手動で管理する必要があります。ARCはネイティブコードにのみ適用され、HTMLまたはJavaScriptコードには適用されないのでご注意ください。
  3. 「Next(次へ)」をクリックします。
  4. ファイルシステム内でPhoneGapプロジェクトを格納するフォルダーを選択します(図6を参照)。

     

    図6:プロジェクトの場所を選択
    図6:プロジェクトの場所を選択
  5. 「Create(作成)」をクリックすると、XcodeでPhoneGapプロジェクトが作成されます。ただし、プロジェクトを機能させるには、まだいくつか手順を行う必要があります。PhoneGapプロジェクトのインターフェイスの作成に使用するHTMLおよびJavaScriptはすべて、wwwフォルダーに格納されます。このwwwフォルダーは、最初はPhoneGapプロジェクトにはありません。このフォルダーを作成するには、まずアプリケーションを実行する必要があります。
  6. ウィンドウの左上隅にある「Run(実行)」をクリックしてアプリケーションを実行します(図7を参照)。または、Product(製品)/Run(実行)を選択することもできます)。

     

    図7:Xcodeの「Run(実行)」ボタン
    図7:Xcodeの「Run(実行)」ボタン

     iOSシミュレーターでPhoneGapアプリケーションの起動が試行されます。最初の起動時には、「ERROR: Start Page at 'www/index.html' was not found.(エラー:スタートページ'www/index.html'が見つかりません。)」というエラーメッセージが表示されます。これは、普通の現象なので心配する必要はありません。この最初の手順中に、wwwフォルダーが作成されます。このフォルダーをプロジェクトに追加すると、エラーは発生しなくなります。

  7. プロジェクトにwwwフォルダーを追加するには、Ctrlキーを押しながらプロジェクトのルートをクリックし、「Add Files To "Hello"(ファイルを「Hello」に追加)」を選択します(図8を参照)。

     

    図8:プロジェクトにファイルを追加する準備
    図8:プロジェクトにファイルを追加する準備
  8. 表示されたダイアログボックスで、新たに作成されたプロジェクトのwwwフォルダーを選択します。親フォルダーまたはフォルダー内のコンテンツではなく、 wwwフォルダーそのものを選択してください。
  9. 「Create Folder References For Any Added Folders(追加されたフォルダーのファイル参照を作成)」を選択します(図9を参照)。このオプションを選択しないと、プロジェクトでエラーが発生します。

     

    図9:Xcodeでプロジェクトにファイルを追加
    図9:Xcodeでプロジェクトにファイルを追加
  10. 「Add(追加)」をクリックします。プロジェクトのルートの直下にwwwフォルダーが追加されています(図10を参照)。

     

    図10:プロジェクトのルートにwwwフォルダー
    図10:プロジェクトのルートにwwwフォルダー
  11. 「Run(実行)」をクリックして再びプロジェクトを起動します。今度は、プロジェクトが正しく設定され、iOSシミュレーターで起動します。wwwフォルダー内のHTMLファイルを一切変更していない場合は、iOSシミュレーターで実行されているアプリケーションにはデフォルトのPhoneGapスターターページが表示されます(図11を参照)。

     

    図11:iOSシミュレーター
    図11:iOSシミュレーター

 この画面が表示されたら、PhoneGapを使用してXcodeでiOSアプリケーションを作成することができます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • Andrew Trice(Andrew Trice)

    Universal Mind の主席ソフトウェアアーキテクト。 RIA の設計および実装に10年以上の経験を持ち、FlexやAIR、Objective C、Flash、Java、MySQL、Oracleなど多くの技術に精通し、オブジェクト指向、マルチデバイス開発、リアルタイムデータシステム、データ...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5