ChromeAppをネイティブiOSアプリにビルドするツールを使ってみた感想.

1/28の記事になりますが、

Run Chrome Apps on mobile using Apache Cordova

というポストの中で、Chrome App(Chrome向けアプリ)をモバイルプラットフォーム(iOS/Android)用のネイティブアプリとしてビルドするツールが発表されました.

ChromeAppはHTML/CSS/JavaScriptによるWeb(?)アプリケーションですが、これをApache Cordova(Adobe PhoneGap)を使ってモバイル向けにビルドするらしいです.

僕はChromeAppはもちろんCordovaも使えないのですが、どんなものか気になったのでちょっと試してみました. 今日はそのメモとか感想を書きます.

セットアップとか使い方

Run Chrome Apps on mobile using Apache Cordova

を参考にして進めました. 全くつまづくことなく進んだので、 手順については省略します(書いてもつまらないので).

試したサンプルとビルド結果

前述のとおりChromeAppもCordovaも使ったことないので、試すにあたってChromeAppsのサンプルを試しました.

GoogleChrome/chrome-app-samples

にある、

  • Calculator
  • Manga-Cam
  • ToDoMVC

の3つのプロジェクトです. この3つにした理由は特にないです. 以下それぞれについてビルド結果をかきます.

Calculator

こんな感じでプロジェクトを生成しシミュレーターを起動させます.

プロジェクトの生成

ChromeApp % ls  
chrome-app-samples

ChromeApp % cca create Calculator --copy-from=./chrome-app-samples/calculator/manifest.json  
cca v0.0.3  
## Checking that tools are installed
Android SDK not detected on your PATH.  
Xcode detected.  
Searching for Chrome app source in /Users/huin/Development/ChromeApp/chrome-app-samples/calculator  
Permission not supported by cca: clipboardWrite (skipping)  
## Creating Your Application
create Calculator Calculator Calculator  
Writing config.xml  
Changing directory to: /Users/huin/Development/ChromeApp/Calculator  
platform add ios  
plugin add org.apache.cordova.file  
plugin add org.apache.cordova.inappbrowser  
plugin add org.apache.cordova.network-information  
plugin add org.apache.cordova.keyboard  
plugin add org.apache.cordova.statusbar  
plugin add org.chromium.navigation  
plugin add org.chromium.bootstrap  
plugin add org.chromium.i18n  
plugin add org.chromium.polyfill.CustomEvent  
plugin add org.chromium.polyfill.xhr_features  
plugin add org.chromium.polyfill.blob_constructor  
prepare  
Done!

Your project has been created, with web assets residing inside the `www` folder:  
/Users/huin/Development/ChromeApp/Calculator/www

Remember to run `cca prepare` after making changes (full instructions: http://goo.gl/iCaCFG).  
ChromeApp % ls  
Calculator         chrome-app-samples  

アプリの起動

ChromeApp % ls  
Calculator         chrome-app-samples  
ChromeApp % cd Calculator  
Calculator % cca emulate ios  
cca v0.0.3  
Generating config.xml from defaults for platform "ios"  
Preparing ios project  
Running on emulator for platform "ios" via command "/Users/huin/Development/ChromeApp/Calculator/platforms/ios/cordova/run" --emulator  
Platform "ios" deployed to emulator.  
Calculator %  

image

ここに書いてあるようにCalculatorではfixレイアウトなのか画面サイズにうまく対応できず、画面右側にスペースが空いていました.

Manga-Cam

Calculatorと同様にプロジェクトを作ります.

MangaCamは名前の通りカメラ機能を使うので、実機で実行します.
コマンドから

% cca run ios

と打てば実機で動くと書いてあるのですが、自分の環境だと動きませんでした. (ターミナルの出力だと成功していた)

代わりにXcodeを起動させてインストールさせてみます. プロジェクトディレクトリの/platforms/iosにXcodeのプロジェクトファイルが生成されているのでこれを開いて、通常のアプリ開発のように実機で動かします.

ChromeApp % open MangaCam/platforms/ios/Manga\ Cam.xcodeproj  

ビルド→起動までは行きましたが、

2014-02-02 16:40:28.853 Manga Cam[3224:60b] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'You must specify |clientID| for |GPPSignIn|'  
*** First throw call stack:
(0x3138be83 0x3b6e86c7 0x3138bdc5 0xa5e89 0xa70ab 0x4f8a3 0x218a1 0x2113d 0x20d65 0x31d6fe4b 0x31356f1f 0x313563e7 0x31354bd7 0x312bf471 0x312bf253 0x35ff92eb 0x33b74845 0x271c7 0x27188)
libc++abi.dylib: terminating with uncaught exception of type NSException  

と言われてクラッシュしました. 例外のメッセージを頼りにChromeIdentity.m- (void)getAuthToken:(CDVInvokedUrlCommand*)command メソッドの中を丸っとコメントアウトして再度動かすと今度はうまくいきました.

- (void)getAuthToken:(CDVInvokedUrlCommand*)command
{
    // Save the callback id for later.
    [self setCallbackId:[command callbackId]];

    // Extract the OAuth2 data.
    GPPSignIn *signIn = [GPPSignIn sharedInstance];
    NSDictionary *oauthData = [command argumentAtIndex:1];
    [signIn setClientID:[oauthData objectForKey:@"client_id"]];
    [signIn setScopes:[oauthData objectForKey:@"scopes"]];

    // Authenticate!
    [signIn authenticate];
}

起動まではうまくいったのですが、カメラからのデータが映るであろう場所は真っ黒のままで使い物になりませんでした.

image

ToDoMVC

前の2つと同様にcca createコマンドからプロジェクトを生成し、実行します.

無事起動したとおもいきや、起動直後、キーボードの表示/非表示が無限に繰り返される状態になり、使うところまでは行きませんでした.

gif

まとめ

というわけで3つのプロジェクトを試しましたが、 実用的に使えるような状態ではありませんでした.

ツールのバージョンも現在は 0.0.3 ということで、 ひとまず書き出しが出来る程度ということなのだと思います. MangaCamのカメラ機能などは現状で対応していなくても不思議ではないので今後の開発に期待って所でしょうか.

が、問題はこのツールが充実したところでどれくらい需要があるのかなんですが、正直わかんないですね. 個人的にはだいぶ疑っています.

HTML/CSS/javascriptでiOS/Android両対応のアプリを1-sourceでっていうのは前からある話ですが、結局各プラットフォーム固有のコードを書かないとやってられない、みたいな話を聞くんですよね.

また言語自体はWebアプリでよく使われるものですが、コード自体はアプリの中に含まれているので機能追加などはアプリ自体のアップデートが必要になり開発/リリースの速度が上がるのかも疑問です.(特に審査のあるiOSは)

というわけであまりこのツールのモチベーションを感じられていないのですが、ネイティブへの変換作業そのものは書くのも面倒なくらいにスムーズに終わりました. ChromeAppを最初のプロダクトとして展開している人たちにとっては工数を抑えながらアプリを作れるので便利なのかなとは思います.