iPhone
 Computer >> コンピューター >  >> スマートフォン >> iPhone

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

Android向けのハイブリッドアプリ開発は、開発環境の構築から本番用の設定まで、非常に手軽に行えます。しかし個人的には、CordovaでのiOSアプリのセットアップ、開発、そしてデプロイはやや複雑だと感じています。

学習段階にあるハイブリッドアプリ開発者の多くは、Macを持っていないためにiOSアプリのハイブリッド開発プロセスを試すことができません。iOSアプリの開発にはiOS SDKとXcodeが必要だからです(Android SDKはどのデスクトップOSでも動作しますが、iOSはそうはいきません)。

そこで本ガイドの目的は、Mac上でのハイブリッドiOSアプリ開発の基本的なワークフローを紹介することです。これにより、実際に開発できない環境にいる開発者でも、その手順を理解できるようになります。

Cordovaプロジェクトの作成

まずターミナルを開き、新しいCordovaプロジェクトを作成します(EACCESSエラーなどの権限問題がある場合のみsudoを使用してください)。

sudo cordova create iosdemo
cd iosdemo
sudo cordova platform add ios

本ガイド執筆時点でのCordova iOSプラットフォームのバージョンは4.3.1です。

ここではアプリのソースコードは変更しません。createコマンド実行時にCordovaが自動的に追加するデフォルトのサンプルコードをそのまま使用します。ただし、通常の開発フローではプラグインを追加し、wwwフォルダ内のコードを編集することになります。

次のステップはcordova buildコマンドの実行です。これにより、アプリのコードが.xcodeprojファイルに変換され、後続の手順で使用します。

sudo cordova build ios

生成されたXcodeプロジェクトファイルは以下の場所にあります。

[アプリフォルダ]/platforms/ios/[アプリ名].xcodeproj

Androidの場合、コード署名には.jks形式のKeystoreファイルを使用します。一方iOSでは、アプリを配布するためにApple Developerアカウントが必要です。このアカウントを使って、アプリ配布に必要な「証明書」と「プロビジョニングプロファイル」を生成します。

Developerアカウントの料金などの詳細については、Appleの公式ページをご確認ください。

開発用証明書の作成

アカウントの準備ができたら、Apple Developerアカウントにログインして作業を進めます。

ダッシュボード画面は以下のような表示になっています。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

「Certificates, Identifiers & Profiles」をクリックします。すると以下の画面に移動し、デフォルトでアカウントから発行された証明書の一覧が表示されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

iOS証明書には主に「Development(開発用)」と「Distribution(配布用)」の2種類があります。リスト右上のプラス(+)ボタンをクリックすると、以下のページが開きます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

まず開発用プロファイルを作成しましょう。「iOS App Development」を選択してContinueをクリックします。

次の画面では、CSR(Certificate Signing Request)ファイルの作成とアップロードを求められます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

画面の指示に従ってCSRファイルを生成し、続行してください。証明書の準備ができたらMacにダウンロードし、ダブルクリックします。これでMacのキーチェーンアクセスに証明書が追加されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

配布用証明書の作成

配布用証明書の作成手順は、開発用証明書とほぼ同じです。違いは、「Add iOS Certificate」ページの「Production」セクションから「App Store and Ad Hoc」を選択する点だけです。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

App IDの作成

「Identifiers」セクションから「App IDs」を選択します。既存のApp IDの一覧が表示されるので、右上のプラス(+)ボタンをクリックします。すると「Register iOS App IDs」ページが開きます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

「Explicit App ID」を選択します。App Descriptionには任意の関連性のある名前を入力できます。これはApp IDリスト内でそのIDとともに表示される名前です。

App IDは「AB11A1ABCD.com.mycompany.myapp」という形式の文字列です。「AB11A1ABCD」はApp IDプレフィックス(デフォルトではチームID)で、「com.mycompany.myapp」は各アプリ固有のBundle IDです。

Bundle IDは逆ドメイン名スタイルの文字列にすることが推奨されます。例えば、MYCOMPANYという会社が2つのアプリ(App1とApp2)を持っている場合、それぞれのHTTP URLは通常app1.mycompany.comとapp2.mycompany.comになるため、Bundle IDはcom.mycompany.app1とcom.mycompany.app2となります。

次に、Push NotificationsやWalletなど、アプリで使用するサービスをチェックリストから選択します。Continueをクリックして内容を確認し、最後にApp IDを登録します。

開発者アカウントへのデバイス登録

「Devices」セクションから「All」を選択します。Apple Developerアカウントに登録済みのデバイス一覧が表示されます。開発中にアプリを実行できるのは、これらの登録済みデバイスのみです。

新しいデバイスを追加するには、右上のプラス(+)ボタンをクリックします。以下の画面が表示されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

名前には分かりやすい任意の名前(例:「iPhone 5s ABC株式会社」など)を入力できます。デバイスUDIDは、各Appleデバイスに紐付けられた固有のIDです。

デバイスのUDIDを調べるには、以下の手順に従います。

  1. デバイスをMacに接続します。
  2. /Applications/Utilitiesフォルダにある「システム情報」アプリを開きます。
  3. 左側の列で「ハードウェア」の下にある「USB」を選択します。
  4. 右側のUSBデバイスツリーから接続されたデバイスを選択すると、下部にデバイスID(シリアル番号)が表示されます。

デバイスのUDIDと名前を入力したら、Continueをクリックし、内容を確認して登録を完了します。

開発用プロビジョニングプロファイルの作成

開発用プロビジョニングプロファイルを作成するには、「Provisioning Profiles」→「All」をクリックします。開発用・配布用すべてのプロファイルが表示されます。次に右上のプラス(+)ボタンをクリックすると、以下のページが表示されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

ここで「iOS App Development」を選択してContinueをクリックします。表示されるドロップダウンから、先ほど作成したApp IDを選択して続行します。

次に証明書のチェックリストが表示されるので、1つまたは複数を選択します。ここで選ぶのは開発用証明書であり、配布用ではない点に注意してください。生成されるプロビジョニングプロファイルは、これらの証明書に紐付けられます。

Continueをクリックすると、デバイスのチェックリストが表示されます。1台、複数台、またはすべてを選択できます。選択されたデバイスのみが、このプロビジョニングプロファイルを使ってアプリを実行できます。

さらにContinueをクリックしたら、プロビジョニングプロファイルの名前を入力し、生成された.mobileprovisionファイルをダウンロードします。

補足:Ad Hoc配布用プロビジョニングプロファイルも同じ手順で作成できます。App Store配布用プロビジョニングプロファイルの作成も非常によく似ていますが、こちらはアプリがApp Store経由で一般公開されるため、デバイスの選択は不要です。

必要なものがすべて揃ったら、Xcodeを使って実際のipaファイルを生成する段階に進みます。

cordova buildコマンドはアプリのコードをXcodeプロジェクトに変換します。そしてXcodeを使って、実際にインストールするアプリである.ipaファイルを作成します。

先に進む前に、両方の証明書をダブルクリックしてキーチェーンに追加しておきましょう。

Xcodeでの作業

次に.xcodeprojファイルをダブルクリックすると、Xcodeで開きます(最新版のXcodeを使用してください。筆者はXcode 8.3.2を使用しました)。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

Xcodeの画面は上記のようになっています。

ウィンドウ左上のアプリ名をクリックすると、右側に詳細ビューが開きます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

次に「Targets」→「アプリ名」をクリックします。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

以下の詳細タブが表示されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

「General」をクリックすると、以下のように表示されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

「Automatically Manage Signing」のチェックボックスのチェックを外します。

すると、「AppName requires a provisioning profile」(AppNameにはプロビジョニングプロファイルが必要です)というエラーが表示されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

次に「Signing (Debug)」の下にあるProvisioning Profileドロップダウンをクリックし、「Import Profile」オプションを選択します。ポップアップ表示されるファイル選択ダイアログで、開発用プロビジョニングプロファイルをダウンロードした場所へ移動し、拡張子が.mobileprovisionのファイルを選択します。

選択するとエラーが消え、Team欄にApple Developerアカウントのチーム名と署名証明書名が表示されるはずです。

同じ操作を「Signing (Release)」セクションに対しても行います。ただし、ファイル選択ダイアログではAd Hoc配布用プロファイルを選択してください。

以上でコード署名の作業は完了です。ここからは以下のいずれかを行います。

  • デバイス上で直接アプリを実行する
  • シミュレータでアプリを実行する
  • 配布用のipaファイルを生成する
  • アプリをApp Storeにアップロードする

デバイス上で直接アプリを実行する

デバイスでアプリを実行するには、USBケーブルでデバイスをMacに接続します。次に左上のデバイス一覧から接続したデバイスを選択し、実行ボタン(黒い三角のボタン)をクリックします。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

ビルド状況はウィンドウ上部のステータスバーに表示されます。問題がなければ、アプリがデバイスにインストールされ、しばらくすると自動的に起動します。

補足:シミュレータでアプリを実行する場合も手順は同じです。実機の代わりに、デバイス一覧から利用可能なiPhoneやiPadのシミュレータを選択するだけです。

配布用ipaファイルの生成

この方法は、テストチームなどにアプリを配布したい場合に利用できます。ただし、配布先のデバイスには、プロビジョニングプロファイルに含まれるUDIDが登録されている必要があります。

Xcodeメニューから「Product」→「Clean」を選択し、続けて「Product」→「Archive」を選択します。Archivesオーガナイザが表示され、新しいアーカイブが表示されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

右側のパネルで「Export」オプションを選択すると、選択肢のリストが表示されます。

指定したデバイスのユーザーにアプリを配布する場合は「Save for Ad Hoc Deployment」を選択します。アプリは配布用証明書でコード署名されます。

社内テスト用にアプリを配布する場合は「Save for Development Deployment」を選択します。アプリは開発用証明書でコード署名されます。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

表示されるダイアログで、ポップアップメニューからチームを選択し「Choose」をクリックします。

Cordova iOS開発をマスターする:セットアップからシームレスなデプロイまで完全ガイド

次にデバイス選択ダイアログが表示されます。「All devices(すべてのデバイス)」または「特定のデバイス」を選択してNextをクリックします。

続いてレビュー画面が表示され、ビルド生成に使用された署名証明書とプロビジョニングプロファイルが確認できます。内容を確認してNextをクリックします。最後に保存先を指定するダイアログが表示されるので、エクスポートしたアプリファイルの保存場所を選択します。

アプリは.ipaファイルとしてエクスポートされます。

このファイルをデバイスで実行するには、単にダブルクリックしてiTunesで開きます。

次にデバイスを接続します(iTunesウィンドウの左上に小さなデバイスアイコンが表示されるはずです)。アイコンをクリックすると、デバイス上のアプリや音楽などの概要が表示されます。「Apps」タブを選択し、左側のペインからインストールするアプリを選んで「Install」をクリックします。処理が完了するのを待ち、「Apply」をクリックすれば、ipaファイルがデバイスにインストールされます。

アプリをデバッグするには:

  1. Safariを開きます。
  2. デバイス上でアプリを起動します。
  3. Safariのメニューバーから「Develop → デバイス名 → アプリ名」を選択します。

まとめ

以上で、Cordovaを使ったiOSアプリ開発の基本ワークフローは完了です。証明書やプロビジョニングプロファイルの作成は最初は複雑に感じるかもしれませんが、一度流れを掴めば、スムーズに開発からデプロイまで進められるようになります。ぜひ本ガイドを参考に、iOS向けハイブリッドアプリ開発に挑戦してみてください。


  1. iOS 16/17/18アップデート後にiPhoneアプリがクラッシュする原因と解決策|簡単トラブルシューティングガイド

    WWDCでiOS開発者向けベータ版が公開されて以来、最新のiOS 17/18をいち早くiPhoneで試したいと期待しているユーザーは少なくありません。しかし最近、iOS 16/17/18にアップデートした後、アプリが正常に動作しなくなったという報告が相次いでいます。アップデート直後のiPhoneでは、Apple Music、YouTube、Facebookなど、さまざまなアプリが頻繁にクラッシュすることがあります。 この記事では、iOSアップデート後にアプリが繰り返しクラッシュする問題を自分で解決するための方法を紹介します。以下のクイックトラブルシューティングと実用的な対処法を順番に試して、

  2. 新しいiPhoneにアプリが移行されない?原因と6つの対処法|iCloudなしで一括転送する方法も解説

    新しいiPhoneにアプリが移行されない 新しいiPhoneの初期設定を終えたのに、アプリが移行されていません。旧iPhoneではアプリを丁寧に整理・配置していたので、とても残念です。本当に1つずつ再ダウンロードし直すしかないのでしょうか?それとも初期設定をやり直して、旧iPhoneとまったく同じ状態に戻す方法はあるのでしょうか? - Appleコミュニティへの投稿より 新しいiPhoneを購入したら、初期設定の過程でiCloudバックアップを使って旧iPhoneからすべてのデータを引き継ぎたいですよね。そうすればすぐに新しいiPhoneを快適に使い始められます。しかし、思いどおりにいか