アプリらしさの追求: App Cloud と HTML5 によるネイティブ アプリ開発

(このブログ記事は米 Brightcove Inc. の Adam Mark 氏のブログを意訳したものです。
参照: "The Pursuit of Appiness: Building native apps with App Cloud and HTML5")

私は 13 年間ウェブ開発者そしてウェブ デザイナとしての仕事に携わっており、技術革新の移り変わりに付いていくのは比較的容易でした。最初に、Java、PHP、Ruby と学んでいき、Flash にたどり着き、主要な UI ライブラリである Prototype から jQuery まで、技術革新のスピードに合わせてウェブ開発者/デザイナとして時代を歩んできました。

しかし、多くのウェブ開発者と同じように、モバイル時代の到来には敏感に反応することができませんでした。というのも、C++ や Objective-C のような言語の経験がなく、また学ぶ時間もありませんでした。Java のような言語で小さいアプリを作成するのも魅力的ではなかったのです。

クロス プラットフォーム用製品の開発を見渡すと、どの製品をとっても何かが欠けているように感じました。

  • テンプレート内に RSS フィードを取り込むだけのアプリ開発技術は低い予算で月並みな製品を産み出す傾向にあります
  • JavaScript や ActionScript などをネイティブ コードとして書き出すフレームワークは開発しコンパイルするのに非常に手間がかかります
  • ネイティブ シェル内でウェブページを取り込むフレームワークはほとんど、あるいは全くといっていいほどバックエンドのデータソースやサービスとの連携インフラを提供していません

ですので、HTML、CSS、JavaScript を使用してモバイル アプリを開発するためのフレームワークである App Cloud を最初に知ったときは懐疑的でした。App Cloud は私が関わってきた他の製品とは違うのだろうか? 将来を期待できるものなのか? そこで私は実際にアプリ開発に着手し、はっきり "YES" という答えにたどり着きました。理由を以下に述べます。

私のキャリアは App Cloud とともに

App Cloud はウェブ開発者として私のすべてのスキルを引き出してくれます:HTMLはコンテンツの構造を、CSSはスタイルを、JavaScriptは前述の2つを操作するために。リッチで、コンテンツ重視のアプリを実装する際に新しい言語を学ぶ必要はありません。HTML であらゆる事を成し遂げるシンプルさと iOS 内で Table View を作成する際の複雑さを比べてみてください。

さらに、App Cloud SDK に加え、ほぼどんな JavaScript ライブラリも使用できます。ウェブ開発者として長いキャリアを築き上げた後で、今まで培ってきたスキルを捨てることなく、App Cloud にたどり着きました。

自分のやり方で

私がコードを実装する際には、BBEdit か vim を多用します。他のエディタも使用しましたが、他に気に入るものがありませんでした。App Cloud での開発も、そのツールを使用しています。App Cloud は標準ウェブ テクノロジを使用するので、デスクトップ上で Chrome デベロッパ ツールを使用してコードをデバッグすることができます。

他のシステムが XCode や Eclipse に依存する一方で、App Cloud は自由に開発できます。

App Cloud と Workshop

iOS 用Android 用の App Cloud Workshop アプリ は開発しているアプリをテストしてみることができます。コードを編集し、Workshop 上の「更新」ボタンをクリックすることで編集したコードがすぐに反映され、アプリがどう動くかを試すことができます。ウェブ開発者としては、このような開発サイクル(実装、更新、再編集)を経験します。

開発のほとんどは、デスクトップ上のブラウザでテストできますが、実際の iOS 機器などでアプリを動かしてみることを推奨します。Workshop はこの開発サイクルを簡易化してくれるものです。

API を使用して開発を

App Cloud はカメラ機能などが付いた機器と JavaScript コードとの間のコミュニケーションに役立つ API を提供します。下記にカメラで QR コードをスキャンする際に必要なコードを記載します。

bc.device.getQRCode(
    function (data) {
        // do something
    },
    function (error) {
        bc.device.alert("Oops! " + error.errorMessage);
    }
);

簡単ですよね! iOS、Android、タブレット、スマホなどで機能します。各々の機器のプラットフォームに依存せずにコードを実装できます。

App Cloud Studio: アプリ編集の簡易化

最近、他のフレームワークで実装したアプリをコンパイルするために、Android でデベロッパ ツールをインストールしましたが、非常に手間がかかり半日費やしました。

App Cloud スタジオ を使用すると、そのような煩わしさはなく、単に 2、3 回ボタンをタップするだけで、クラウド上にアプリをコンパイルすることが出来ます。2 〜 3 分で、コンパイルされたアプリはダウンロード可能となり、公開可能となります。App Cloud スタジオ 以外に何も必要ありません。

コンテンツの最適化: シンプルが一番

特にモバイル用のコンテンツ重視のアプリでは、一番のネックがそのコンテンツそのものにあると言われます。App Cloud はアプリを次の点において、アプリ作動をスピードアップしてくれます。

  • App Cloud はコンテンツ フィードから必要のない無駄なデータを削除し、圧縮し、キャッシュし、様々な機器で利用可能な状態にしてくれます。私自身のブログ フィードはコンテンツ最適化・圧縮の後で、39KB から 4KB に最適化されました。ボタン一つで 9 割縮小化されたデータを扱えます。
  • App Cloud はイメージ画像をリサイズし、キャッシュします。イメージ トランスコーディングの素晴しさとその効果は絶大です。下記のようなブログにあるイメージ画像 などは、125KB(425 ピクセル)は 8KB(200 ピクセル)に最適化されました。なんと 94% の縮小化です。ブログに記載されているイメージ画像の数、ユーザ数、ユーザ毎のセッション数などを考慮すれば、このイメージ トランスコーディングがどれほどアプリの最適化に役立つかは容易に想像できます。

過去の研究では、アプリのロード時間がアプリ開発で一番のボトルネックとなると報告されています。App Cloud では、その心配は多いに軽減されます。

アプリ公開後の編集はどうなるの?

ウェブサイト開発のようなコンテンツ重視のアプリでは、多くの場合、アプリが配備された後で、設定を変更します。App Cloud スタジオ では、アプリを公開した後に、"再度アプリをコンパイルし、公開することなく" データ、スタイル、他のカスタマイズされた設定を編集可能にしてくれます。

この機能は、Web 開発者の私に多くの選択肢を与え、他の者がアプリを管理する権限を付与します。

さらには、App Cloud スタジオでデータ、設定、そしてスタイルを変更する機能は余分にコードを追加することなく、1 つのテンプレートから複数のアプリを作成することができます。自身の経験ですが、同じテンプレートから全く異なる 2 つのアプリを作成するまで、その有用性に気づきませんでした。

つまり、データのフィードを取り替えて、設定を多少変更しただけです。アプリのデザイン変更と設定に関するオプションは私の手に委ねられたのです。

アプリの共有の仕方

App Cloud は自分で作成したアプリをオフィス内で共有しレビューしやすい体制を整えてくれます。例えば、Workshop から直接スクリーンショットを送付できます。

あるいは、Workshop をインストールした同僚に URL または QR コードを送付することで、テンプレートを共有できます。

100% クラウド カバレッジ

App Cloud は、広告出力やリアルタイムでのアプリ使用に関する分析まで、製品のコンテンツ アプリを管理し、収益化することまで一元管理できます。例えば、App Cloud スタジオ 内の分析セクションでは、アプリがどれだけインストールされ、どれくらいの使用率なのかを閲覧できます。

App Cloud はサービス重視で、上記で述べたように全機能の一元管理を実現してくれることから、無料でパフォーマンス強化や機能アップデートを提供します。さらには、通知機能(既に利用可能)、アプリ内直接販売機能、Facebookとの共有、他のプラットフォームでのサポートなどが期待されます。

長文になってしまいましたが、ここまで読んだブログ読者の方なら、恐らく App Cloud にご興味をお持ちなのではないでしょうか。デベロッパ専用の無料お試しアカウントをお試し下さい。ご登録は下記よりお願いいたします。

register.brightcove.com/ja/app-cloud

Workshop をダウンロードすることをお忘れなく! Workshop は App Cloud にログイン後にダッシュボード画面よりダウンロード可能となります。

なお、App Cloud のデベロッパ専用の無料お試しアカウントでアプリ開発を行う上で、ご質問等がございましたら、無料で利用できるコミュニティがございますので、下記にてユーザ登録を行い、ご質問いただけます。

groups.google.com/forum/#!forum/bcappcloud-japan

それでは、皆様のご質問をお待ちしております。

(Translated by Ryosuke Kadoi)