2014年11月13日木曜日

「Chrome Apps for Mobile」で高速・簡単・快適なハイブリッドモバイルアプリ開発

「Chrome Apps for Mobile」とは?

ここのところCordovaアプリを作るための環境を色々と考えてきた。

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「PhoneGap Developer App」編

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編

もう一つの選択肢がこれだ。

Create Chrome Apps for Mobile Using Apache Cordova

一言で言えば、Chrome Appsをモバイルのネイティブアプリとして動作させるためのツール群だ。Cordovaをベースに開発されている。

ただし、ステータスとしてはディベロッパー・プレビュー状態なので、プロダクションレベルで使うには注意が必要だ。


メリットとしては…

  • Google Play Store、Apple App Storeで配布可能
  • デスクトップでも動作するアプリを同時に開発できる(Chromeウェブストアで配布)
  • Cordovaのプラグインに加えてChrome APIも使える(identityとかGCMとか
  • Chrome App Developer Toolを使えばライブデプロイできる
  • デフォルトで高速WebView「Crosswalk」を使える(Crosswalkのメリットとデメリット
  • 「Crosswalk」を使うことでWebViewが古いAndroidでも高速かつ最新の技術を使えるようになる

などがある。


前提条件

  • Node.jsをつかえる環境
  • Androidアプリを開発できる環境(Android SDK)
  • iOSアプリを開発できる環境(Xcode)


ccaのインストールと環境のチェック

ccaはcordovaコマンドに相当するコマンドラインツールだ。

# sudo npm install -g cca
# cca checkenv
cca v0.4.3
Android Development: SDK configured properly.
iOS Development: SDK configured properly.


プロジェクトの作成と実行

# cd /path/to/project/parent
# cca create YourApp com.your.company.YourApp "Your App" (ディレクトリ名、App ID、アプリ名)

ここでAndroidをUSBデバッグモードでつなぐ。

# cca run android

「cordova run android」した時のようにapkがandroidにインストールされて実行される。


CADTのインストールとライブデプロイの確認

CADT(Chrome Apps Developer Tool)はライブデプロイを実現するためのモバイルネイティブアプリで、「PhoneGap Developer App」とよく似ている。

まずはアプリのバイナリをこちらからダウンロードする。

Releases · MobileChromeApps/chrome-app-developer-tool

多くのAndroid機はARMなので、「android-armv7-debug.apk」をダウンロードする。iOS用は自分でビルドする必要あり。

ここでAndroidをUSBデバッグモードでつなぐ。

# adb install android-armv7-debug.apk

Android機でCADTを起動する。


ライブデプロイを開始する。CADTにAndroid機のIPが表示されるので、そのIPをtargetに指定する。

# cd /path/to/project
# cca push --target=192.168.0.160 --watch

この方法でライブデプロイする場合はAndroid機が同一WiFi内にあるならUSBで繋がっていなくてもよい。

つまり、この方法で複数のコンソールを開いてtargetを変更してライブデプロイすれば、複数のAndroidで一気に内容が変わるということでもある。

以前に試したLiveReload+GapReloadで行うライブデプロイよりも設定が簡単で、しかも変更の反映が速くて安定している。


デバッグ

デバッグの方法は色々とあるが、Androidの場合はChromeを使うのが簡単で一番いいだろう。

琴線探査: Cordova/PhoneGap開発のデバッグを何とかする

残念ながらGapDebugではうまくデバッグできなかった(´・ω・`)

Chromeのomniboxに「chrome://inspect」と打つとこのような画面になる。


ここで「inspect」をクリックするとこのような画面になる。


ふむ。おなじみのChromeのDevToolsですな。あとは通常のWebアプリをデバッグする方法と同じというわけだ。


Crosswalkで動いているのか?確認

Chrome Apps for Mobileはデフォルトで高速版WebViewである「Crosswalk」を使うはずなので特に確認する必要は無いとは思う。

しかし、念のためJelly Bean(Android 4.2.2)で動かすとWebViewが古いためレンダリングがおかしくなるCordovaアプリをccaで再コンパイルして動作させてみた。

cordovaでコンパイル

ccaでコンパイル

レンダリング結果が明らかに違う。Crosswalkが動作しているのかどうかは確認できないが、デフォルトのWebViewを使っていないことは確かだ。


Cordovaアプリと何が違うのか?とりあえず分かったことだけ


cordova.jsを読み込む必要が無い

勝手に読み込まれているようだ。document.addEventListener('deviceready'…するとdevicereadyのイベントを取得できるので。むしろ自分で読み込むとエラー的なメッセージがコンソールに表示された。


cordovaプラグインは本当に動くのか?

ひとつ(GapReload)しか試していないが、動く。


アプリ名やアプリID(パッケージID)はどこで指定するのか?

アプリ名はmanifest.json、アプリIDはmanifest.mobile.json。これらを変更した上で「cca prepare」するとconfig.xmlや各プラットフォームに独自のファイルが書き換わる。


YouTubeのiframe APIは動くか?

ビデオを再生することはできた。しかし、new YT.Player()で返却されたプレイヤーオブジェクトにplayVideo()などのメソッドが追加されておらず、JSによるコントロールができなかった。

enablejsapi関連の問題と思うが、原因は不明。PCでは返却されたオブジェクトY.F = trueとなっているのに、Crosswalk上ではY.F = falseとなっているのが関係しているかもしれない。


追記14.11.14:monacaのCrosswalkでは動いた!

琴線探査: 「Monaca Localkit」で高速・簡単・快適なハイブリッドモバイルアプリ開発

----

とりあえず以上。

追記14.11.26:ionicは簡単!参考に。
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編