Ionicで実機確認時、ローカルのサーバーと通信する方法あれこれ
Published in
3 min readNov 14, 2018
アプリの実機確認時、ローカルに立てたAPIサーバーと通信する方法は色々ありますが、Ionicを利用している時はどのような方法があるのか？
私がよく使う3手段を紹介します。
目次
- Ionic DevAppを使う
ionic cordova runを使う- ローカルに
proxyサーバーを立てる
1. Ionic DevAppを使う
Ionicで最も簡単に実機確認を行えるのはIonic DevAppを使う方法でしょう。Ionicチームが開発したアプリで、ローカルで立ち上げたIonicアプリをスマホ上で実行できます。
素晴らしいのはAPIとのやりとりを中継してくれる点、ionic devappを使うだけでローカルに立てたAPIサーバーと通信できるようになります。
使い方
- スマホでStoreからIonicDevAppをインストールする
- PCでionic serveする
- スマホでIonicDevAppを立ち上げる
- 画面上にPCで立ち上げたアプリが出てくるのでタップする
メリット
- 簡単にはじめられる
- live reloadされる
- ブラウザ上の開発とコードを書き換える必要がない
デメリット
- IonicDevAppがサポートしていないpluginがある(camera-previewとか)
- Pluginのサポートは公式ドキュメント参照
2. ionic cordova runを使う
こちらはcordovaが提供している機能をionicのCLIがラッパーしているものです。
ビルドに少し時間はかかりますが、IonicDevAppとは違ってプラグインがによっては動かないといったことはありません。またLiveReloadも動きます。
反面、ビルドに時間がかかるので初インストール時だけ作動するような機能(Push通知許諾など)のテストをやるには時間がかかりすぎる可能性高いです。
手順
- スマホとPCを接続する
ionic cordova run ios -lcまたはionic cordova run android -lcを実行する
メリット
- Ionic DevAppがサポートしていないプラグインも対応してくれる
- Live Reloadされる
デメリット
- ビルドに時間がかかる
- 初期立ち上げなどインストールが必要な機能のテストには不向き
3. ローカルにproxyサーバを立てる
最後に紹介するのがローカルにproxyサーバーを立てる方法です。CharlesやTinyProxy等でPC上に立てたプロキシサーバにスマホからつなぐことで、ローカルに立てたAPIサーバにもアクセスできるようになります。
手順
メリット
- Ionic DevAppがサポートしていないプラグインも対応してくれる
ionic cordova runを使う方法よりはビルド時間が短くすむionic cordova buildは最初の一回で十分。2回目以降はwwwフォルダの入れ替えだけで済むことが多い。
デメリット
- 最初の環境構築が面倒
- Live Reloadされる
まとめ
今回、私がよく使う3手段を紹介させていただきました。
3つそれぞれ、メリット・デメリットがあり、自分もちょっとした画面確認はIonicDevApp、初インストールの処理はproxyサーバ立てる、といったように使い分けています。
Ionic、意外とブロウザ上でみる見た目と実機でみる見た目が違うことが多々あるので、実機確認は面倒がらず行なっていきたいですね。
