App Cloud 対 PhoneGap: あるウェブ デベロッパの見解

App Cloud についてデベロッパと話しているとき「App Cloud は PhoneGap とどう違うのですか?」とよく聞かれます。すかさず私は、「PhoneGap は素晴らしいです。でも App Cloud ではもっと多くのことができますよ。」とお決まりの答えを述べます。「多くのこと」というのが常にひっかかっていました。「多い」からといって優れているとは限らないからです。そこでこのことを ウェブ デベロッパの視点から詳しく比較することにしました。同じアプリをまず PhoneGap 上、続いて App Cloud 上で構築し、それぞれのシステムについてプラットフォーム機能の強さ、開発モデル、さらにサービス提供を評価しました。

ネタバレ注意: App Cloud と PhoneGap の両方が勝者となりました! 結論を見るには最後までスキップしてください。

第一印象

PhoneGap: PhoneGap SDK の最新バージョンを見つけてダウンロードするための所要時間は 15 秒ほどで、まったく手間がかかりませんでした。そのため第一印象は極めて良いものでした。また PhoneGap は、古い SDK について公開アーカイブと完全なドキュメントを提供しており、デベロッパとして安心感を得ました。最後に phonegap.com はきちんと整理されていて、ドキュメント、コミュニティ サポート、ケーススタディへのアクセスも簡単でした。

App Cloud: SDK をダウンロードする前に無料アカウントを登録しました。(私のようにせっかちな方は、登録の手順がじれったく感じると思います。しかしクラウド コンパイル、プッシュ通知、解析等のクラウド サービスを利用したい場合、この手順が必要です。)登録後 App Cloud Studio を起動しました。ここで SDK、Workshop アプリ、動画チュートリアル、コミュニティ サポートへのリンクを見つけました。そして SDK と Workshop アプリをダウンロードしました。

利用開始

PhoneGap: SDK を解凍してスタートガイドを開き、iOS および Android 上で開発環境をセットアップする手順に従いました。手順では簡単そうでしたが、実際はとんでもなく複雑でした。

iOS で始めるには、XCode のダウンロードとインストールが必要でした。しかし XCode をダウンロードするにはオペレーティング システムのバージョンを 10.6.8 から 10.7 にアップグレードする必要がありました。この作業に 4 時間かかりました。

Android で始めるにはさらに忍耐が必要でした。Eclipse をダウンロードした後に Android SDK、続いて Android Developer Tools プラグインをダウンロードしました。それぞれの過程において、目もくらむほどたくさんのオプションが提示されました。たとえば Eclipse には 12 種類のバージョン、Android SDK には 11 種類のバージョンがありました。

やれやれ。結局 PhoneGap を使い始めるまでに丸一日を要し、この時点で 1 行のコードも書けていませんでした。

App Cloud: App Cloud を使い始めるのは PhoneGap に比べれば、いとも簡単でした。まず Workshop アプリを iPhone と Android のスマートフォンにダウンロードしました。次に SDK を解凍し、Node.js インストーラをダブルクリックしてスタートアップ スクリプトを実行し、ブラウザで App Cloud 開発サーバを開きました。ここまでに要した時間は約 10 分で、コードを書く準備ができました。

Hello World!

PhoneGap: Xcode を開き、シェルスクリプトから新しい Cordova iOS プロジェクトを作成するため PhoneGap の「Hello World」の指示に従いました。iPhone シミュレータでプロジェクトの実行を試みるまでは、上手くいっているように見えました。

結局のところ、スタートガイドのローカル コピーが古く、重要な手順である Cordova ライブラリのインストールが記述されていませんでした。私はプロジェクトを削除し、Cordova ライブラリをインストールしてスクリプトを再実行しました。続いて index.html を調整してシミュレータ内でアプリを開きました。

よし! iPhone へのアプリの搭載は少し厄介でした。iOS Provisioning Portal でデバイスを登録し、プロビジョニング プロファイルを作成し、開発者証明書を作成してから証明書をインストールする必要がありました。この手順はどのフレームワークにおいても iOS アプリ作成で必要ですが、Hello World アプリを実行するためだけにこのような手順を踏むのは面倒でした。


Android についてもかなり面食らいました。Eclipse で Android Virtual Device を作成し起動するためにあらゆる試みを行ったにもかかわらず、Android Emulator で Hello World アプリを実行することができなかったのです。Stack Overflow さえも役に立たずストレスのたまる数時間を過ごした後、なんとか Android SDK Manager からデバイス イメージを作成し、エミュレータを起動しました。

App Cloud: 提供された Node.js を実行し、App Cloud 開発サーバ内にスターター アプリを作成しました。次にChrome を開いてアプリにナビゲートしました。

CSS ファイルに少しの変更を加えて ウェブ ブラウザを更新し、その作業は楽勝でした。次に iPhone で Workshop アプリを開き、ウェブ ブラウザに表示された QR コードをスキャンしました。3 秒でアプリが iPhone にロードされました。CSS ファイルにいくつかの変更を加え、Workshop の [更新] タブをプルダウンしました。変更内容が表示されました。次に Galaxy Nexus で同じ作業を行いました。

今までこのプロセスを何度も行っていますが、いつも圧倒されます。 たった数分後には iOS と Android の両方でアプリをプレビューし、変更を加え、その変更内容が反映されていることをすぐに確認できます。これには XCode や Android Developer Tool を使わず、ネイティブ アプリ開発の知識も特に使いませんでした。

アプリを構成する

PhoneGap: サンプル アプリである簡単なニュース リーダに、最新ニュースの表示用、そして保存した記事の表示用として異なる 2 つのビューを持たせようと思いました。これらのビューのバッキングを作成するために 2 つの HTML ページを使用できると思いましたが、PhoneGap アプリ全体を 1 つの HTML ページ内で構築する必要があることを知り、驚きました。JavaScript MVC フレームワークで管理しないためコードが乱雑になると思い、また 1 つのページ内で行うことが多すぎるためパフォーマンスを心配していました。

さらに、iOS および Android でネイティブ ナビゲーションのサポートが十分でないことに失望し、HTML において自身のナビゲーションを展開する必要がありました。iOS スタイルのタブバーを Android で使ったり、Android スタイルのアクション バーを iOS で使いたくなかったため、両方のプラットフォームに合う一般的なデザインに落ち着きました。

最終的に、スクロールやページネーションといった基本的なタスクの処理用の、ビルトイン機能が見つかりませんでした。UI ライブラリをいくつか試した後、モバイル ウェブサイト構築用として良く知られているツールである jQuery Mobile をインストールすることに決めました。

App Cloud: App Cloud アプリは PhoneGap と違って複数の HTML ファイルによってバッキングされており、それぞれのファイルが UI の独立したビューに対応しています。典型的なコンテンツ主導のアプリには 4 つか 5 つのビューがあり、ユーザによるビュー間のナビゲートをサポートするネイティブ ナビゲーションを表示するかどうか、デベロッパは選択することができます。そういう意味では UI は真に「ハイブリッド」だと言えます。iOS ではユーザにおなじみのタブバーや「もっと見る」のメニュー、Android ではアクション バーが表示されます。

前もって知っていましたが、複数のビューにわたってコードや機能を展開することはいくつかの点で良いと言えます。まず 1 つ目として、ネイティブ コンテナがメモリを解放する必要がある場合、クラッシュせずに個別のビューをアンロードできます。2つ目は、デベロッパがコードをビューごとにきちんと整理できるという点です(各 HTML ページごとに独自の DOM、CSS、そして JavaScript が存在します)。最後に、アプリが複数のビューに分けられているため、コード自体がよりポータブルなものになります。

App Cloud の UI 層は薄いですが、「タップ」イベント、スムーズなスクロール、1 つのビュー内でのページ遷移、と、私が必要とすることの 90% をカバーしています。これらの基本的な機能については、そのまま使えるので良いと思います。PhoneGap と同様に、App Cloud をサードパーティの JavaScript ライブラリにドロップすることが可能です。(日付フォーマットの Moment.js やジェスチャ サポートの Hammer.js など多くを使用しました。)

もうひとつの素晴らしい機能: App Cloud は HTML 「テンプレート」をデバイスのファイル システム上のプレーンテキスト ファイルからロードし、それらを bc.templates オブジェクト内に取り込みます。これにより、Markup.js(App Cloud SDK に含まれる)または選択したテンプレート フレームワークを使って、制御ロジックをプレゼンテーション ロジックと簡単に分けることができます。

アプリを作成する

PhoneGap: お気に入りのテキスト エディタを使ってローカル ウェブ サーバ(Apache)上でアプリを展開することができましたが、iPhone と Nexus 上でアプリを構築しプレビューするためには、XCode と Eclipse を実行する必要がありました。数分ごとに、以下の同じ動作を行いました ― 1. テキスト エディタからのコンテキストを Xcode、続いて Eclipse に切り替える。2. iPhone シミュレータ内、続いて Android エミュレータ内でアプリを実行する。3. 各デバイスにデプロイする。これが厄介でした。(PhoneGap Build は時間の節約になると思っていましたが、便利な開発ツールであるとは感じませんでした。これは、その名の通り構築ツールです。また Hydration も見てみましたが、ドキュメントで怖気づいてしまいました。 “non-Hydrated binary equivalent” とは何でしょうか?)

この時点で、iOS 用と Android 用として2 つの異なるアプリを作成するために、2 つの異なるコード ベースに対応していることに気づきました。仲間のエンジニアが各プロジェクト内の www ディレクトリ間にシンボリック リンクを作成することを提案してくれましたが、その場しのぎのように思えました。

App Cloud: 自分のアプリを App Cloud のローカル開発サーバに展開(Node.js 上で実行)し、その多くを Chrome でテストしました。iPhone や Nexus 上でアプリをテストするときは、ただ Workshop アプリで読み込みました。

Workshop アプリは、すべての ウェブ デベロッパが知ることになるコード、リフレッシュ、リピートという開発モデルを展開します。アプリが長時間の遅延やアプリの再起動の必要なしにテストできるようになってくると、膨大な時間を節約でき、フラストレーションが軽減されます。

iOS用とAndroid 用を同時に構築していたにも関わらず、PhoneGap とは異なり、最終的にはHTML、CSS、JavaScript ファイルのシングル コード ベースで作業を行っていました。コード間の移動は少なくて済みました。

コンテンツで作業を行う

PhoneGap: jQuery の get() メソッドを使い、自分の ウェブ サイトから直接 RSS フィードをプルしました。次に XML to JSON プラグイン を利用して、それを JavaScript オブジェクトに変換しました。デバイス上にコンテンツをキャッシュするために localStorage メソッドを使いました。.

App Cloud: PhoneGap と同様に、$.get() を使って RSS をプルしました。デバイスにデータを保存するときには bc.core.cache() を使いました。これはキャッシュがいっぱいになった場合に Least Recently Used アルゴリズムを利用してデータをクリアします。さらに App Cloud のキャッシュ機能は、オブジェクトのシリアライゼーションおよびデシリアライゼーションにも対応しています。

さらに一歩進み、データを App Cloud コンテンツ フィードから実行し、SDK メソッド bc.core.getData() を使ってロードすることにしました。このサービスには複数の利点があります。まず発信元サーバの負荷を軽減します(私の場合は小さな Wordpress サイト)。App Cloud サーバが定期的に新しいデータをフェッチし、キャッシュして、多数のデバイスに対し高度に利用可能にします。次に、App Cloud は、不要なデータ フィールドを削除することによってペイロードのサイズを縮小します。さらに App Cloud は XML のデータをサーバ側の JSON に変換し、フラット化して圧縮化し、アクセスに便利なインタフェースを提供します。

デバイスを使用する

PhoneGap: ネイティブのデバイス機能を十分には活用しませんでしたが、PhoneGap のデバイス API が App Cloud よりも成熟していることに気づきました。たとえば PhoneGap は 連絡先データベースおよびコンパスへのアクセスをサポートしています。またデバイスの接続タイプを決めるために、素晴らしいインタフェースを備えています。そして API 自体もよく整理されています。

App Cloud: App Cloud: デバイス機能の点では App Cloud が提供するものは少ないのですが、一部のビルトイン機能は非常に有効であることに気づきました。まず多くのケースにおいて、ユーザをアプリから強制的に移動させることなく、外部の ウェブ コンテンツを表示する必要があります。そのため App Cloud SDK では、ネイティブ モーダル ウィンドウを非常に簡単に開くことができるようにしています。(PhoneGap ではプラグインを用意していますが、さらなる設定が必要です。)次に多くの種類のコンテンツ アプリで、複数の異なるビューが必要です。デフォルトで App Cloud は、ネイティブ ナビゲーション コントロールでバッキングされている複数のビューをサポートしています。デベロッパはナビゲーション バーを完全に隠したり、bc.device.enterFullScreen()bc.device.exitFullScreen() で切り替えたりすることができます。

App Cloud は独自のプラグイン開発キットを近くリリースする予定です。このキットによりデベロッパは、App Cloud SDK 上にカスタム ネイティブ機能を作成することができます。

アプリを実行する

PhoneGap: 遠目には、PhoneGap と App Cloud を区別することは困難でした。しかし PhoneGap には問題が 2 つありました。まず自分で選んだ UI レイヤである jQuery Mobile におけるスムーズ スクロールが満足のいくものではありませんでした(スムーズなスクロールではなかった)。Kendo UI Mobile に切り替えることを考えましたが、$199 を支払いたくはありませんでした。Sencha Touch も考慮しましたがサイズが大きすぎました(ダウンロード サイズが 55MB)。最終的に iScroll に決めました。これで問題は解決です。次に複数の画像(それぞれ 150KB)を表示する UI の一部で、ロードに著しく時間がかかりました。

App Cloud: App Cloud: ここでずるをして無料版(App Cloud Core)には含まれない App Cloud の画像トランスコード API を使いました。各サムネール画像をその場でトリミングしてサイズを変更し、ペイロードの合計を 1MB 近く縮小し、UI のレンダリング速度を高めました。画像を手で分割することもできましたが、多種類のデバイスにわたる複数のプラットフォームに動的画像を配信する場合、単純にこれは実用的でありません。

さらに App Cloud コンテンツ フィードを通して自分のデータをロードすることにより、いくつかのサイクルを省きました。ペイロードが小さくなっただけでなく、クライアント側で XML から JSON に変換する必要がなくなりました。

App Cloud のスムーズ スクロールも、複雑なコンテンツの処理においては iScroll よりも高速でした。

パフォーマンスに関する最後の注釈: どちらのアプリも、Android よりもiOS 上で高速に実行します。

アプリを構築する

PhoneGap: XCode および Android Developer Tool のセットアップという骨の折れる作業をすでに済ませていたため、プロダクション用アプリの構築は比較的簡単でした。開発では、すでに何度も行ってきたことを繰り返すだけでした(独自のアイコンの追加や画像のロードは行いました)。"

App Cloud: 静的アセット(HTML、CSS、JS 等)を含むディレクトリを解凍し、App Cloud Studio にアップロードしました。次に [アプリの公開] をクリックすると、iOS および Android 用に大量のプロビジョニング情報を入力するよう要求されました。これは面倒なプロセスでしたが、自分でアプリを構築するよりも確実に早く、最終的には iOS 用に IPA ファイル、Android 用に APK ファイルをダウンロードすることができました。

And the winner is ...

"結果として勝者は... PhoneGap と App Cloud は異なるカテゴリにおいて、両者ともに勝者です。PhoneGap は、より強固なデバイス API、優れたドキュメントと事例、そしてプラグインの巨大なエコシステムを備えているという点で勝っています。(上記で述べたように、App Cloud は独自のプラグイン フレームワークをリリースしようとしています。これは多くの PhoneGap プラグインをサポートする予定です。)App Cloud は洗練された開発モデル(Workshop アプリは他に類を見ないものです)と、その数々のクラウド サービスで勝っています。"

最も大きな違いは、PhoneGap は開発プラットフォームですが、App Cloud は開発プラットフォームであると同時に運用プラットフォームでもあるという点です。私のシンプルなデモ アプリでは、画像トランスコードとコンテンツ フィードの最適化という 2 つの App Cloud サービスを活用しています。また自分の iOS および Android アプリを、シングル コード ベースからクラウドにコンパイルしました。より複雑なアプリでは、App Cloud のプッシュ通知システム、リアルタイム解析、そしてリモート設定機能を使うでしょう。確かにこれらは PhoneGap でも可能です。しかし多くの異なるベンダによる大量の可動部品を取りまとめなければいけません。

ハイブリッド ネイティブ ソリューションを検討しているデベロッパには、私のように両方のプラットフォームを評価するよう勧めます。PhoneGapこそが、求めていたクロス プラットフォーム開発キットかもしれません。しかし、よりサービス面(画像トランスコード、コンテンツ最適化、プッシュ通知等)がさらに必要で、ヘビーなツールチェーン(XCodeや Eclipse)は少ない方がよい場合、App Cloud を試してみてください。

App Cloud と PhoneGapは両者とも多くの可能性を持っています。両者がお互いを、さらには ウェブ デベロッパを、邁進させ続けることを願っています。