はじめに
先日、業務でCordovaを触る機会があったのですが、実機でのデバッグにて思いもよらずハマりました。
そこで、今回はCordovaについて簡単に紹介しつつ、ハマった原因と解決方法を紹介します。
Cordovaとは
Cordova（Apache Cordova）はオープンソースで開発されているモバイルアプリケーション開発のためのフレームワークです。
以前はPhonegapという名前でしたが、後にアドビシステムズが開発元のニトビ・ソフトウェアを買収したことにより今の名前になりました。
React Nativeとの違い
CordovaとReact Nativeとの違いを簡単に説明すると、CordovaはHTML、CSS、JavaScriptで書かれたコードを端末のWebView上で動作させます。
対してReact Nativeでは、JavaScriptで書くところまでは一緒ですが、これをネイティブのコンポーネントに変換します。
両者の違いについて詳しくはこちらをご覧ください。
Cordovaでモバイルアプリを作る
Cordovaでモバイルアプリを開発する方法を紹介します。まず初めに開発環境を整備します。
Node.jsをインストール
Cordovaのコマンドを実行するためにはNode.jsが必要です。Homebrew等でインストールするには以下のようにコマンドを実行します。
| 1 2 3 4 5 6 7 8 9 10 11 12 | brew install nodebrew # nodebrewをセットアップ nodebrew setup # 環境変数の設定 export PATH=/usr/local/var/nodebrew/current/bin:$PATH export PATH=$HOME/.nodebrew/current/bin:$PATH source ~/.bash_profile # node.jsをインストール nodebrew install v10.16.0 |
Cordovaのコマンドラインツールをインストール
Cordovaのコマンドラインツールをインストールします。cordovaコマンドではプロジェクトの作成、platformの追加、pluginの追加、ビルドなどが行なえます。
以下のコマンドを実行してCordovaのコマンドラインツールをインストールします。
| 1 | npm install cordova -g |
pathを通す
Androidアプリを開発する場合、Android SDKなどのディレクトリにpathを通す必要があります。
以下のようなコマンドを実行します。
| 1 2 3 4 5 | export JAVA_HOME="/Applications/AndroidStudio.app/Contents/jre/jdk/Contents/Home" export ANDROID_HOME="/Users/USER_NAME/Library/Android/sdk/" export PATH="/Users/USER_NAME/Library/Android/sdk/platformtools:/Users/USER_NAME/Library/Android/sdk/tools:$PATH" export PATH="/Users/USER_NAME//.gradle/wrapper/dists/gradle-X.X-all/XXXXXXXXXX/gradle-X.X/bin:$PATH" |
プロジェクトを作成
cordova create コマンドでプロジェクトを作成します。
以下のようなコマンドを実行します。
| 1 | cordova create sample com.hoge.sample SampleApp |
sample、com.hoge.sample、SampleAppはそれぞれ、ディレクトリ名、識別子、アプリ名です。
プラットフォームを追加
cordovaで作成するアプリのプラットフォームを追加します。
iOSとAndroidのアプリを開発するには以下のようにコマンドを実行します。
| 1 2 | cordova platform add ios cordova platform add android |
プラグインを追加
cordovaにはカメラや指紋認証などの様々なプラグインがあります。
例えば、カメラ機能のプラグインを追加する場合は以下のようにコマンドを実行します。
| 1 | cordova plugin add cordova-plugin-camera |
最後の cordova-plugin-camera が追加したいプラグインの名前です。
ビルドする
アプリのビルドはプラットフォームごとに行います。
例えば、iosアプリをビルドする場合は以下のコマンドを実行します。
| 1 | cordova build ios |
また、実機で直接確認する場合は端末を繋いで run コマンドを実行します。
| 1 | cordova run ios |
Cordovaアプリをデバッグする
Cordovaアプリをデバッグする方法を紹介します。
iOSアプリをデバッグする
iOSアプリをデバッグするには Safari の 開発 から接続している端末もしくはシミュレータのアプリを選択してデバッグします。アプリを選択するとWebインスペクターが表示されます。
開発メニューを開くには、Safari の環境設定 の 詳細 からメニューバーに”開発”を表示 を有効化します。また、実機でデバッグする場合は事前に端末の設定の Safari > 詳細 > Webインスペクタを有効化しておく必要があります。
Androidアプリをデバッグする
Androidアプリのデバッグには Chrome DevTool を利用します。メニューの More tools > Remote Devices を選び、Devices に表示されている端末の該当ページの inspect をクリックすると新しいウィンドウが表示されます。
なお、事前に端末をつなぎ、開発者向けオプションのUSBデバッグを有効にしておく必要があります。
実機でバッグにハマった話
さて、私が実機でバッグでハマった原因と解決方法について紹介します。原因はとても単純だったのですが、調べても出てこなかったので解決までに時間がかかってしまいました。
何が起こったか
当時私はdistribution向けにエクスポートしたipaをデバイスにインストールしてテストしていました。
その際、JavaScript側で出力したログを見るためにWebインスペクタを起動しようとしたのですが、端末を接続しているにも関わらず Safari の開発メニューに端末名を表示されるもののアプリ名が表示されませんでした。
どう解決したか
調査しても原因がわからず途方に暮れていたところ、distribution向けにビルドしたことが原因ではと思いXcodeから直接インストールしたところ無事にアプリ名が表示されるようになりました。
さいごに
Cordovaでのアプリの作成方法を簡単に紹介し、実機でバッグでハマった原因と解決方法を紹介しました。
おすすめ書籍
