Dartで Androidアプリを作成して Google Play に登録してみた。

Dart言語でAndroidアプリを作成して、実際にGoogle Playに登録してみた

Dart言語でAndroidアプリを作成して、実際にGoogle Playに登録してみました。その時に得たノウハウをまとめてみました。
いくつか方法がありますが、今回試した方法についてのみの解説となります。

[レ] リンク

• Chrome Apps APIs Support Status for Mobile(https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/APIsAndLibraries.md)
• mobile-chrome-apps(https://github.com/MobileChromeApps/mobile-chrome-apps)

[レ] 成果物

• Google Play
  https://play.google.com/store/apps/details?id=net.hetimatan.dart.portmap
• Chrome Store
  https://chrome.google.com/webstore/detail/hetimaportmap/naifildeohmcocnmibaampijofhcohif
• ソースとか
  https://github.com/kyorohiro/HetimaPortMap

[レ] アジ

Chromeアプリが、iOS Androidで動作とするようになりました。利用可能なAPIを見てもらうとわかる通り、かなり機能豊富です。
同時に複数のプラツトフォームへ展開するツールとして、Dart or JavaScriptでChromeアプリを作成するという選択肢が見えてきたのではないでしょうか?

なんと、payments api　は､Android とiOSに対応しているみたいですよ。課金アプリもAndroidとiOSアプリを同時に展開できます。
互換性の問題への考慮もバッチリです。WebViewに相当する部分に、Crosswalkエンジンを指定すれば、端末の違いの大部分を吸収できます。

これは、私たちが欲しかった開発環境そのものではないでしょうか?

Mobile-chrome-apps がsockets.tcp sockets.udp に対応した

ChromeアプリをAndroidアプリやiOSアプリに変換する機能がかなり進化して、最新のsocket api をサポートしました。

これによって、Chrome用に作成したP2PアプリをiOSやAndroidへ素早く展開できるようになりました。

実際に、P2Pアプリの必須機能であり、かつ、UDPとTCP両方を利用するポートマッピングアプリをAndroidアプリに変換してみることしました。そして、 Google Play にアプリをアップしてみました。

まずは、Chromeアプリを作成する

まずは、Chromeアプリを作成しましょう。Dart言語、JavaScript言語などで Chromeアプリを作成することができます。Chromeアプリは、DartEditor、Chrome Dev Editor などで作成できます。もちろん、テキストエディタでも可能です。

[レ] 個人的には、開発環境としては、DartEditor 推し

• http://qiita.com/laco0416/items/9aef51decb2a20ba6080
• http://daiiz.hatenablog.com/entry/2014/07/11/210920
• http://qiita.com/takeharu/items/f866f2b0dfc5665acb45

個人的には、DartEditorがオススメです。この頃補完機能がちょっとバグっぽい動作をしていますが、早くて、補完もしてくれます。Chrome Dev Editorは補完機能が弱くてビルドに時間がかかるように思えます。
米: まあ、両方使うことになると思います。

[レ]　以前作成したものを使用します。

以前、作成したものを使用します。説明は省きます。以下のページで紹介されたものです。

• http://qiita.com/kyorohiro/items/948d62262a32f9c9df64
• http://qiita.com/kyorohiro/items/56cf17f2eb47e4a9bfbe

ChromeアプリをiOSとAndroidアプリに変換する

mobile-chrome-apps(https://github.com/MobileChromeApps/mobile-chrome-apps)
に記載の通り進めると、ChromeアプリがAndroid Studio用プロジェクト、xCode用プロジェクトに変換されます。

• 1 nodejsをインストール
  http://nodejs.org/ からダウンロード

• 2 cca (https://www.npmjs.com/package/cca)をインストール

例

npm install -g cca

• 3 アプリ変換作業プロジェクトを作成する

cca create <生成するフォルダ名> <パッケード名> <アプリ名> --copy-from=

例

cca create HetimaPortMap net.hetimatan.dart.portmap HetimaPortMap --copy-from=./w/HetimaPortMap/build/web/manifest.json 

• 4 ios(xCode用) android(Android Studio用)のプロジェクトを作成する

手順3で生成した、<生成するフォルダ名>配下で、"cca prepare"とすると、各種プラットフォーム用のプロジェクトが作成されます。

例

cca create prepare

• 5 各プロジェクトに合わせて、ビルドして終わり。

注意点 version 0.13

• chrome.sockets.tcp.create()のオプションは必ず指定する事。
  そうしないと、Andriod側のChromeSocketsTcp#create(..)でエラーとなる。
• chrome.sockets.udp.create()のオプションは必ず指定する事。
  そうしないと、Andriod側のChromeSocketsUdp#create(..)でエラーとなる。
• コマンドラインで生成する場合、WebViewのエンジンを指定できます。
  Crosswalkエンジンを指定できます。メリットも豊富ですが、サイズがかなり大きくなります。2-3MBでおさまるアプリも20MBくらいまで大きくなります。

Crpsswalkの利点

1: 高速なレンダリングエンジンであるBlinkが搭載されており、レンダリング速度を改善できる。
2: JavaScript, CSSの端末由来のバグや、解釈の差異を解消できる。
3: WebSocketやWeb GLなど他のモダンブラウザなどで実装されているHTML5のAPIが使用できる。
(ref http://blog.asial.co.jp/1296)

コマンドサンプル

# Creates ARM and x86 APKs
cca build android --release --webview=crosswalk
# Creates Cross-platform apk with higher versionCode
cca build android --release --webview=system --android-minSdkVersion=21

(ref https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Publish.md)
(ref https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/NextSteps.md)

• 基本、一度作成すれば、javascriptの部分を変更するだけて良いです。
• [ちらつき対策1]起動時にちらつく場合があります。以下の方法で対策できます。
  CordovaWebViewImpl#init()で、engine.getView().setBackgroundColor(Color.TRANSPARENT);とする