1/28の記事になりますが、
というポストの中で、Chrome App(Chrome向けアプリ)をモバイルプラットフォーム(iOS/Android)用のネイティブアプリとしてビルドするツールが発表されました.
ChromeAppはHTML/CSS/JavaScriptによるWeb(?)アプリケーションですが、これをApache Cordova(Adobe PhoneGap)を使ってモバイル向けにビルドするらしいです.
僕はChromeAppはもちろんCordovaも使えないのですが、どんなものか気になったのでちょっと試してみました. 今日はそのメモとか感想を書きます.
セットアップとか使い方
を参考にして進めました. 全くつまづくことなく進んだので、
手順については省略します(書いてもつまらないので).
試したサンプルとビルド結果
前述のとおりChromeAppもCordovaも使ったことないので、試すにあたってChromeAppsのサンプルを試しました.
にある、
- Calculator
- Manga-Cam
- ToDoMVC
の３つのプロジェクトです. この３つにした理由は特にないです. 以下それぞれについてビルド結果をかきます.
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 %
ここに書いてあるように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];
}
起動まではうまくいったのですが、カメラからのデータが映るであろう場所は真っ黒のままで使い物になりませんでした.
ToDoMVC
前の２つと同様にcca createコマンドからプロジェクトを生成し、実行します.
無事起動したとおもいきや、起動直後、キーボードの表示/非表示が無限に繰り返される状態になり、使うところまでは行きませんでした.
まとめ
というわけで３つのプロジェクトを試しましたが、
実用的に使えるような状態ではありませんでした.
ツールのバージョンも現在は 0.0.3 ということで、
ひとまず書き出しが出来る程度ということなのだと思います.
MangaCamのカメラ機能などは現状で対応していなくても不思議ではないので今後の開発に期待って所でしょうか.
が、問題はこのツールが充実したところでどれくらい需要があるのかなんですが、正直わかんないですね. 個人的にはだいぶ疑っています.
HTML/CSS/javascriptでiOS/Android両対応のアプリを1-sourceでっていうのは前からある話ですが、結局各プラットフォーム固有のコードを書かないとやってられない、みたいな話を聞くんですよね.
また言語自体はWebアプリでよく使われるものですが、コード自体はアプリの中に含まれているので機能追加などはアプリ自体のアップデートが必要になり開発/リリースの速度が上がるのかも疑問です.(特に審査のあるiOSは)
というわけであまりこのツールのモチベーションを感じられていないのですが、ネイティブへの変換作業そのものは書くのも面倒なくらいにスムーズに終わりました. ChromeAppを最初のプロダクトとして展開している人たちにとっては工数を抑えながらアプリを作れるので便利なのかなとは思います.