FrontEnd

Cordovaの実機デバッグでハマった話

投稿日:

はじめに

先日、業務で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等でインストールするには以下のようにコマンドを実行します。

Cordovaのコマンドラインツールをインストール

Cordovaのコマンドラインツールをインストールします。cordovaコマンドではプロジェクトの作成、platformの追加、pluginの追加、ビルドなどが行なえます。

以下のコマンドを実行してCordovaのコマンドラインツールをインストールします。

pathを通す

Androidアプリを開発する場合、Android SDKなどのディレクトリにpathを通す必要があります。

以下のようなコマンドを実行します。

プロジェクトを作成

cordova create コマンドでプロジェクトを作成します。

以下のようなコマンドを実行します。

sample、com.hoge.sample、SampleAppはそれぞれ、ディレクトリ名、識別子、アプリ名です。

プラットフォームを追加

cordovaで作成するアプリのプラットフォームを追加します。

iOSとAndroidのアプリを開発するには以下のようにコマンドを実行します。

プラグインを追加

cordovaにはカメラや指紋認証などの様々なプラグインがあります。

例えば、カメラ機能のプラグインを追加する場合は以下のようにコマンドを実行します。

最後の cordova-plugin-camera が追加したいプラグインの名前です。

ビルドする

アプリのビルドはプラットフォームごとに行います。

例えば、iosアプリをビルドする場合は以下のコマンドを実行します。

また、実機で直接確認する場合は端末を繋いで run コマンドを実行します。

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でのアプリの作成方法を簡単に紹介し、実機でバッグでハマった原因と解決方法を紹介しました。

おすすめ書籍

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ) Angular Webアプリ開発 スタートブック HTML5とApache Cordovaで始めるハイブリッドアプリ開発 (CodeZine BOOKS)

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Next.jsでJSON-LDを実装する

1 はじめに2 リッチリザルトとは3 構造化データとは4 Next.jsでJSON-LDを実装4.1 JSON-LDデータの作成4.2 JSON-LDデータの埋め込み5 リッチリザルトテスト6 さいご ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

vuex-module-decoratorsとTypeScriptでvuexをスマートに書く

1 はじめに2 導入3 どのように記述するか3.1 初めに3.2 state3.3 mutation3.4 action3.5 getter3.6 async MutationAction3.7 Dy ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

[Rails + Materialize] パンくずリスト用のヘルパーを作成した

1 はじめに2 パンくずリストを上書き2.1 サンプルのHTML2.2 CSSの上書き3 ヘルパーにする4 さいごに はじめに またまたMaterialize関連の記事になります。 Materiali ...

フォロー

blog-page_side_responsive

2019年7月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。