読者です 読者をやめる 読者になる 読者になる

Phonegap と Titaniumを比較してみた

お久しぶりです。長らく放置してしまった Phonegap と Titanium Mobile の比較について書きたいと思います。

また、今週の水曜日 11/24 のはてな技術勉強会#2(http://d.hatena.ne.jp/hatenatech/)で Titanium について話しますので、お近くの方は是非はてな本社にお越しくださいませ。Titanium界隈で有名なid:donayamaさんも来られるようなのでドキドキですね!

色々ある XCode 以外の開発環境

前前回のTitaniumが楽しすぎてやばい - kurainの壺では、Titanium Mobile という Appcelerator が開発している iPhone アプリ開発環境を紹介しましたが、Titanium 以外にも iPhoneアプリを開発する環境はいくつか存在していて、有名なところでは Adobe Fash CS5 (Adobe AIR | Deploy applications) が対応しています。開発打ち切りのニュース(Adobe、Flash CS5のiPhone OS向けツールの開発を打ち切り | マイナビニュース) もありましたが、復活したみたいですね。

他にも、Phone GapCorona という開発環境があって、こちらの二つは Titanium と同様に iPhone だけでなく Android など他のモバイルデバイスでの開発にも対応しています。

ということで 今回は PhoneGap と比較するのですが、すでに英語の比較記事(iphone - Comparison between Corona, Phonegap, Titanium - Stack Overflow)がありますので、そちらも合わせて御覧ください。

また最初に謝っておきますが、PhoneGap を最初に使ったのは今年のはじめなので(最近の情報も確認はしていますが)微妙にアップデート出来ていないかもしれません。ツッコミ募集中。

PhoneGapを使ってみる


PhoneGap は XCode のテンプレートとして配布されているので、ダウンロードしてインストールが終わると、XCode の Project 作成画面で PhoneGap が選択できるようになります。これを選択すると、普通に iPhone アプリのプロジェクトが生成され、必要最低限の状態でエミュレータを起動できるようになります。

アプリケーションの実装は、プロジェクトの中のwwwディレクトリにある index.html を編集して行います。

Titanium との違い

PhoneGap も Javascriptで開発が行えるのですが、Titanium と大きく違うのは、ベースとなる HTML ファイルが存在すること。PhoneGap は HTML ファイルをアプリ内の WebView で描画することアプリを動かしています。よって基本的に書いていく Javascript のコードは所謂 Webアプリケーションと同じように DOM を操作したり、Canvas を使って図形の描画をしたりという事がメインになっていきます。

一方 Titanium は Javascript で書いて、ネイティブのコードに変換しています。よって固有のオブジェクトやメソッドを呼び出してアプリケーションを構成していくことになります。これは大きな違いです。

画面遷移の描画も両者には違いがあります。例えば Navigationコントロールを使って画面が右へ右へ遷移していく動作を iPhoneアプリ では良く見かけます。これを Titanium ではネイティブのナビゲーションコントロールを利用しているように見えますが、PhoneGapではCSSを用いて実現しています。未確認

HTML+Javascriptだけで大丈夫か?

HTMLだけでは、Cameraコントロールとか、加速度の取得とかどうするんだ。と疑問に思われそうですが、ここは当然そういったデバイス固有の昨日にアクセスできるオブジェクトが存在しています。

navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

のようなコードで加速度値を取ることができるようになっています。(引数はcallback function)

実行速度

TitaniumとPhoneGapを比較すると、ネイティブアプリに変換されるいる分 Titanium のほうが早いように思えます。しかし、iPhone4になりWebViewもだいぶ高速に表示されるようになっていますし、CSSによるアニメーションをGPUを使って支援する機能も WebView には搭載されているように見えます。実際のところどのくらい速度に差があるのかはつくってみないと分からなそうです。

PhoneGap or HTML5

お気づきの方も多いと思いますが、PhoneGapはWebアプリケーションをそのまま iPhone アプリに変換しているだけというようなところがあります。HTML構造の変更などは必要だと思いますが、同じようなことを HTML5 で構成した Webアプリケーションでも実現できます(デバイスのセンサー類は使えませんが)。とすれば Browser Storage などを駆使すればオフラインで動作する Webアプリケーションで事足りるかもしれません。違うのは App Store に載せられるかどうかという点だけです。
この点は非常に重要な違いですが Google は Web Application向けの課金も初めているわけで、Appleもそのうち何か良い仕組みを用意してくれないかなあーと個人的には思う次第です。

まとめ

  • TitaniumとPhoneGapについて比較してみました
  • HTML+Javascirpt(+DOM) で書くのか、専用に整備されたAPIを呼び出して書くのかという大きな違いがあります。
  • 速度差は正直分からん。
  • HTML5 Web Application もありかもー

僕はDOM操作するより、専用APIで書いてくほうが性にあっていると思いました。