MonacaでiOSアプリをビルドしてみた
MonacaでiOSアプリをつまづきながらもビルドした話です。
公式ドキュメントに手順が詳しく記載されていますが、自分の中での手順再確認も兼ねて、記事にしてみます。
例によってMonacaやiOSに関しては初心者もいいところなので、書き方が変だったり言葉を誤って使用していたりするかもしれません。ご了承ください。
Monacaは、スマートフォンなどで動作するモバイルアプリを、HTML、CSS、JavaScriptを使ってクラウド上で作成できる開発環境です。Apache Cordovaというハイブリッドアプリのフレームワークを利用しています。
ハイブリッドアプリ、Cordovaについての解説は、本題からそれるため省略します。気になる方は調べてみてください。
さて、何故僕がMonacaでiOSアプリをビルドすることになったのか、そこから説明しようと思います。
まず、Cordovaには、ネイティブ機能を提供するプラグインというものがあります。必要なネイティブ機能、例えばカメラの起動やバイブレーションの動作などに合ったプラグインを組み込むことで、そのネイティブ機能をJavaScriptで呼び出せるようになります。
カメラの起動やバイブレーションの動作のような、基本的な機能を提供するプラグインは、基本Cordovaプラグインとして用意されており、気軽に使うことができます。しかし、それだけではネイティブアプリのような高度な機能を持ったアプリは実装できません。
ではどうすればいいのか。自分に必要なネイティブ機能を提供するプラグインを自分で作成してそれを組み込めばいいのです。今回は、プラグインを作成したのは別の人でしたが、そのプラグインがiOSアプリ上で期待通りの機能を提供してくれるかの検証を、僕が行うことになりました。
Monacaは開発者向けにデバッガーを提供しているため、これを使えば簡単に検証できると、最初はそう思っていました。早速ストアからダウンロードして、動作を確認してみます。ところが、何度試してみても、検証したい機能が動作してくれません。
こういうときは公式ドキュメントを読んでみます。先ほどもちょっと触れましたが、Monacaは公式ドキュメントがかなり充実しているように思います。
公式ドキュメントを読んでみると、ちゃんと書いてありました。ストア版のデバッガーには、自作のプラグインが実装されていないため、デバッガー上でアプリをそのまま実行しても、正しく動作しません。そこで、ストア版のデバッガーの代わりに、カスタムビルド版のデバッガーを使用する必要があるとのことです。カスタムビルド版のデバッガーは、文字通りMonacaクラウドIDE上でビルドして端末にインストールするものなので、プラグインの検証を行うためには、iOSアプリのビルドが必要不可欠ということがわかりました。
また、デバッガーを使用しない場合でも、デバッグビルドというビルドが必要になるようです。
少し長くなってしまいましたが、以上が僕がMonacaでiOSアプリをビルドすることになった理由です。
それでは本題、MonacaでiOSアプリのビルドの手順に移ります。
手順を知りたい場合は、やはり公式ドキュメントを読むのが確実です。というかMonacaで何かする方法を検索してみてもヒットするのは公式ドキュメントばかりで、個人ホームページやブログは全くと言っていいほどヒットしません。公式ドキュメントが充実している証拠でしょうか。
というわけで、公式ドキュメントのカスタムビルド版Monacaデバッガーのビルド方法と、iOSアプリのビルドを参考に進めてみます。
まず、MonacaクラウドIDE上で、設定→iOSアプリ設定でiOSアプリの設定画面を開き、アプリケーション名、App ID、バージョンを入力します。今回の目的はデバッグなので、アプリケーション名は適当で大丈夫そうです。短くてわかりやすい名前をつけてあげましょう。バージョンもやはり適当で大丈夫なはずです。もちろんチーム内などでルールがある場合は、そのルールに従う必要がありますが。
App IDは要注意です。この後にiOS Dev Center上でApp IDを登録するのですが、そのときにこのApp IDを登録することになります。
続いて、設定→iOSビルド設定でiOSビルドの設定画面を開き、秘密鍵を生成します。ここではユーザー名と、Apple IDとして使用しているメールアドレスを入力します。
秘密鍵を生成すると、その秘密鍵に関連付けられたCSRファイルも生成されます。これは次のステップでiOS Dev Center上で証明書を発行するのに必要になるので、エクスポートしてどこかに保存しておきます。"csr.certSigningRequest"というファイル名になっているので、別のものと区別できなくならないように注意しましょう。
次に、iOS Dev Center上で、証明書を発行します。今回はデバッグ用にビルドを行うため、配布用証明書ではなく、開発用証明書を発行します。
Certificates→Developmentを選択し、追加ボタンを押し、iOS App Developmentを選択し、先ほど保存しておいたCSRファイルをアップロードすることで、開発用証明書が発行されます。
発行された開発用証明書は、次のステップでMonacaクラウドIDEにアップロードするので、どこかに保存しておきます。"ios_development.cer"というファイル名になっているので、こちらも別のものと区別できなくならないように注意しましょう。
今度はまたMonacaクラウドIDEに戻り、開発用証明書をアップロードします。公式ドキュメントにはどこにどうやってアップロードすればいいのか書かれていないため、要注意ポイントです。
先ほど秘密鍵を生成したiOSビルドの設定画面を開き、下の方にある証明書のアップロードのもう少し下、デベロッパー証明書のところにアップロードします。今回はデバッグ用にビルドを行うため、ディストリビューション証明書は必要ないはずです。
次はまたiOS Dev Centerに移り、App IDと開発用端末を登録します。それぞれ登録の作業が必要になるので、App IDから順番に説明します。
まずApp IDの登録です。Identifiers→App IDsを選択し、追加ボタンを押します。App ID Descriptionは、自分がわかりやすい説明を記入します。僕は先ほどMonacaクラウドIDE上で設定したアプリケーション名にしました。App ID Prefixはデフォルトです。App ID Suffixは要注意です。Explicit App IDを使う場合でも、Wildcard App IDを使う場合でも、先ほどMonacaクラウドIDE上で設定したApp IDとマッチするようにする必要があります。
例えば、MonacaクラウドIDEで入力したApp IDが"com.hoge.fuga"だった場合、Explicit App IDを使う場合は"com.hoge.fuga"にする必要がありますし、Wildcard App IDを使う場合は"com.hoge.*"のようにする必要があります。僕はExplicit App IDを使ったので、Wildcard App IDの方はよくわかりませんが、多分こういうことだと思います。
ちなみにここでApp IDを間違えると、後でビルドがコケます。ガックリ。
さて続いて開発用端末の登録です。Devices→iPhoneを選択し、追加ボタンを押します。もちろん開発用端末がiPhoneではない場合はiPhone以外のどれかを選択します。Nameは、自分が端末を区別しやすいように名前をつけてあげます。UDIDは、開発用端末のUDIDを入力します。
UDIDを確認する方法も説明しておきます。まず、開発用端末をコンピューターに接続し、iTunesを起動します。次に、iTunes上で端末のシリアル番号が表示されている箇所をクリックします。すると、UDIDが表示されるので、そこを右クリックしてコピーを選択します。コピーしたら、それをUDIDの欄にペーストしてあげれば完了です。
続いて、プロビジョニングプロファイルを作成します。開発用と配布用の2種類ありますが、例によって今回はデバッグ用にビルドを行うため、開発用のプロビジョニングプロファイルを作成します。
Provisioning Profiles→Developmentを選択し、追加ボタンを押します。DevelopmentはiOS App Developmentを選択し、次に進みます。App IDは先ほど登録したApp IDを選択します。Select certificatesでは、先ほどMonacaクラウドIDE上で秘密鍵を生成したときに入力したユーザー名を選択してあげれば大丈夫です。Select devicesでは、やはり先ほど登録した開発用端末を選択します。最後に、このプロファイルに名前をつけます。僕はApp IDのときと同様、アプリケーション名にしました。
作成したプロビジョニングプロファイルをダウンロードします。これも次のステップでMonacaクラウドIDEにアップロードするので、どこかに保存しておきましょう。ファイル名は"[プロファイル名].mobileprovision"のようになっているので、紛らわしい名前をつけていなければ他のプロファイルとの区別は容易です。
最後に、MonacaクラウドIDE上でアプリをビルドします。
ビルド→iOSアプリのビルドで、iOSアプリのビルド画面を開き、デバッグビルドか、デバッガーのビルドを選択します。次に、先ほどダウンロードしたプロビジョニングプロファイルを選択し、アップロードします。
プロビジョニングプロファイルを作成する際に、Select certificatesで他のユーザー名を選択してしまった場合、ここでエラーメッセージが出るので、確認が必要です。
ビルドが完了するまでしばらく待ちます。無事に終わったら、アプリをダウンロードします。ダウンロードしたアプリのアイコンをiTunes上にドラッグして、ライブラリに追加して、端末にインストールします。これで、ようやく自作のCordovaプラグインの検証を行うことができます。長い道のりお疲れさまでした！
ここからちょっと余談になります。
実は、今回の検証で、デバッグビルドはできるものの、カスタムビルド版のデバッガーはビルドできない状態に陥っていました。動作の検証自体はデバッグビルドでも行えるので大丈夫と言えば大丈夫なのですが、コールバックに、
console.log('hoge');
のようなものがある場合、それを確認するにはカスタムビルド版のデバッガーが必要になります。
検証対象となるプラグインを組み込まないでデバッガーのビルドを行うと、問題なくビルドできるので、原因はプラグインにあるところまで突き止めました。
そのことをプラグインの開発者に伝えたところ、どうやらプラグインで使っているライブラリとMonacaデバッガーで使っているライブラリが衝突してしまっていたのが原因だったようです。
もしデバッグビルドはできるのにデバッガーのビルドはうまくいかないという方がいらっしゃいましたら、そこを確認してみると良いと思います。僕はプラグインの開発には関わっていないため、具体的に何をどうすればいいのかまではわかりません。すみません。
