Ionic DevAppについて調べてみた

はじめに

ionic startでプロジェクトを作成するとき、以下のメッセージが表示されていたため、Ionic DevAppについて調べてみました。

* IONIC DEVAPP *
Speed up development with the Ionic DevApp, our fast, on-device testing mobile app
- Test on iOS and Android without Native SDKs
- LiveReload for instant style and JS updates
-> Install DevApp: https://bit.ly/ionic-dev-app <--

Ionic DevAppとは

Ionicの開発を効率化するための無償ツールで、以下のような特徴があるようです。

  • iOSとAndroidをサポート。
  • 開発に当たって、XCode、Android Studioのインストールが不要。Windows PCで、iOSアプリの開発が可能。
  • 多数のNative Pluginがプレインストールされ、Pluginのインストールが不要。
  • 開発PCとiOS、Android端末はWiFiで接続。
  • 一度に複数のiOS、Android端末を接続してテストが可能。
  • LiveReload機能で、ソースを変更したら即時に実機にデプロイしているアプリに変更が反映される。

WindowsパソコンでiOSアプリを開発できる点や、LiveReload機能、AndroidとiOS端末を一度にテストできる点など、非常に魅力的です。

DevAppの利用方法

  • 最新のionicをインストール(インストール方法の詳細は、こちらを参照)

$ npm install -g ionic

  • Android アプリストア、iOS AppStoreから、スマホに「Ionic DevApp」をインストール

  • スマホでIonic DevAppを起動

  • スマホにログイン画面が表示されるので、Ionicアカウントを作成して、ログイン。

  • 開発PCで、ionicのプロジェクトを作成し、プロジェクトフォルダに移動

$ ionic start test-project blank

$ cd test-project

  • 開発PCで、プロジェクトフォルダで以下のコマンドを実行
    (明示的にビルドを実行する必要はないようです。)

$ ionic serve -c

  • Windows Firewallの設定解除が表示されたら対象のネットワークをチェックしてOKをクリック
  • スマホにアプリ名称が表示される(左がandoroid、右がiPhone)

  • アプル名称をタップするとアプリが起動

  • Visual Studio Codeで、作成したプロジェクトを修正すると、リアルタイムに変更点が反映される。ここでは、”your Oyster”を、”your BIG Oyster”に変更。

 

AndroidとiOS端末の両方を同時に接続してテストをすることも可能ですので、端末間での表示や動作の違いも一度に確認することができます。

なお、私が試したときは、アプリの更新時間が長くかかったり、作成アプリ自体が立ち上がらなかったりして、一部不安定なところがありました。

DevAppの利用上の注意点

  • ionic startでプロジェクトを作成する際、ionic1で作成すると、実行はできましたが以下のWarningが表示されたため、動作が不安定かもしれません。最新のionicを使った方がいいと思います。

[WARN] Error with .\www\lib\ionic\version.json file: FILE_NOT_FOUND, trying .\bower.json.

 

Native SDKを利用する場合と比較してどこまで再現性があるのかわかりませんが、スマホアプリを開発するのが非常に効率的になるのは間違いないので、実用性を今後見てみたいと思います。

なお、Ionicアプリをスマホに配信するツールとして、Ionic Viewが従来からあるのですが、Ionic Viewは他のユーザにアプリを配信するために利用し、DevAppはローカル環境でテストをするために使うという位置づけのようです。

以上

コメントを残す

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