実機でのアプリ動作確認が簡単にできるIonic DevAppの使い方
はじめに
Ionicで作成したアプリをiOSやAndroidのエミュレータを使って動作確認する場合、Webブラウザでの動作確認を行う場合に比べて環境構築にすこし時間がかかり手間です。そこで、より簡単にiOSやAndroidで作成したアプリの動作確認をおこなう手段として、Ionic公式のDevAppという動作確認用アプリが提供されています。ここではこのDevAppを使ってiPhone実機で動作確認するまでの手順をメモします。なお、この手順自体はAndroidの場合でも同じになります。
DevAppでの動作確認の流れ
・iPhone、AndroidとIonicを動かしているパソコンを同じネットワークに接続する ・iPhone、AndroidでDevAppを開く ・DevAppに自動的にアプリが表示され動作確認を行う
前提と環境と必要なもの
・動作確認用のスマートフォン(iOS、Androidどちらでも可) ・Ionicが動作している前提 以降ではiPhoneでの作業手順を載せますが、Androidの場合でも全く同じになります。
パソコンでの作業
以下のように、ionic serve
コマンドを実行してアプリを動作させます。以下の-c
オプションは、ログ表示のためのものです。
$ ionic serve -c
> ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --consolelogs --nobrowser
[app-scripts] [12:33:45] ionic-app-scripts 3.2.0
[app-scripts] [12:33:45] watch started ...
[app-scripts] [12:33:45] build dev started ...
[app-scripts] [12:33:45] clean started ...
[app-scripts] [12:33:45] clean finished in 18 ms
[app-scripts] [12:33:45] copy started ...
[app-scripts] [12:33:46] deeplinks started ...
[app-scripts] [12:33:46] deeplinks finished in 19 ms
[app-scripts] [12:33:46] transpile started ...
[app-scripts] [12:33:58] transpile finished in 11.81 s
[app-scripts] [12:33:58] preprocess started ...
[app-scripts] [12:33:58] preprocess finished in 4 ms
[app-scripts] [12:33:58] webpack started ...
[app-scripts] [12:33:58] copy finished in 12.66 s
[app-scripts] [12:34:05] webpack finished in 7.36 s
[app-scripts] [12:34:05] sass started ...
[app-scripts] [12:34:10] sass finished in 4.72 s
[app-scripts] [12:34:10] postprocess started ...
[app-scripts] [12:34:10] postprocess finished in 39 ms
[app-scripts] [12:34:10] lint started ...
[app-scripts] [12:34:10] build dev finished in 24.54 s
[app-scripts] [12:34:10] watch ready in 25.00 s
[INFO] Development server running!
Local: http://localhost:8100
External: http://10.0.2.15:8100, http://192.168.1.3:8100, http://192.168.56.11:8100
DevApp: myApp@8100 on local
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
[app-scripts] [12:34:21] lint finished in 10.88 s
あとはiPhone、またはAndroid端末でDevAppアプリを各ストアからインストールし、DevAppから接続します。具体的な手順を以降に載せます。
iPhone側での作業
まずはAppStoreでionic devapp
と検索し、以下のDevAppをインストールします。
インストール後、DevAppを起動するとログイン画面が表示されます。
DevAppの使用にはIonic Proのアカウント(無料プランあり)が必要となるため、Sign up
から登録するか、もしくは公式サイトから登録しておきます。ログインすると、以下のようにガイドが表示されます。
iPhoneとIonicアプリが動作しているパソコンが同じネットワークに接続されていれば、以下のように自動的にアプリが表示されます。
表示されているアプリをタップすれば、そのアプリが以下のように表示されます。以下はスターターアプリのsidemenuを動かしいる状態です。
DevAppにアプリが表示されない場合
いくら待ってもDevAppに作成したアプリが表示されない場合は、以下の原因と対策が考えられます。
IPアドレスを手動で入力する
何かしらの理由でDevAppとIonicが動作するパソコンと接続できていない場合があります。この場合は、まずは以下のようにサイドメニューにある「Enter address manually」から手動でIPアドレスを入力することができます。ここで入力するIPアドレスはIonicが動作しているパソコンのIPアドレスです。
以下のようにIPアドレスとポート番号の入力フォームが表示されるので、入力して 「Done」をクリックします。
これで表示されない場合は以降の原因と対策を検討します。
Vagrantのネットワーク設定をブリッジ接続に変更する
DevAppが起動しているスマートフォンとIonicが起動しているパソコンは同じネットワークにある必要があります。そのため、例えばWindows10でVagrantなどを使って仮想マシン上でIonicを起動している場合は、Vagrantの設定によっては仮想マシンがホストマシンであるWindows10とのみ通信を許可している場合があります。そしてこの場合は仮想マシン上で動作するIonicとDevAppが通信できず、アプリも表示できません。この解決策としては、Vagrant上の仮想マシンのネットワーク設定をブリッジ接続に変更します。Vagrant上の仮想マシンのネットワーク設定をブリッジ接続に変更するには、以下の設定をVagrantfile
に追記します。
config.vm.network "public_network"
ただし、すでにconfic.vm.network
で他の設定がVagrantfile
に記載されている場合は、その設定を一度コメントアウトするか削除する必要があるかもしれません。
Vagrantfileに記述できるネットワーク設定については以下にもまとめているので必要な方は見てみてください。
Windows Defenerのフィアウォール設定を変更する
Windows10では、デフォルトでWindows Defenderというファイアウォールが動作しています。そしてWindows Defenderでは、Ionicが使用するポート番号8100番が許可されておらず、これが原因でDevAppと作成したアプリが通信でてきない可能性があります。そこで、ポート番号8100番を許可するようWindows Defenderの設定変更を行います。ポート番号の許可設定方法については以下のサイトが参考になりました。
Windows10 のファイアウォール経由で、特定のポート番号を開放し、通信を許可する方法を紹介します。 他の設定も合わせてご覧ください。 ファイアウォールを無効/有効に ファイアウォール - アプリの通信を許可/不許可 設定をデフォルトに戻すこともできます。こちらもご覧ください。 Windows10 -
また、Windows Defender以外にファイアウォールを導入している場合は、そのファイアウォールの設定変更も必要かもしれないので一度確認することをお薦めします。
まとめ
DevAppを使うことで、これまで色々と準備が必要であった実機での動作確認が格段に楽になりました。