スタートアップ向けハイブリッドUIフレームワークの比較

はじめまして、水谷と申します。

Railsの開発をメインにやっているのですが、最近ではフロント部分の比率も増えてきており、Backbone.jsやAngularJSなどJavaScriptに関わったり、Hubot, Chef, Vagrant, AWSなどでインフラ関連もしたりしています。小さなチームでやることが多いので何でも屋的なエンジニアです。

はじめに

スタートアップのサービス立ち上げの開発に関ることが多く、ここのところデスクトップ向けの開発では、バックエンドにRailsを使い、フロントエンドにリッチなUIを提供できるようにAngularJSを採用するケースが多くなってきています。

一方で、これだけスマートフォンが普及しているとサービス開始と同時にモバイルアプリも提供したいというニーズをよく承けます。

ただ、スタートアップで限られたリソースでデスクトップ向けの開発と同時にネイティブアプリを開発していくのは非常に難しい場合が多いと思われます。

そこで、タッチ/マルチタッチイベントやスマートフォン特有のAPIを扱うためのフレームワークを導入して、HTML5ハイブリッドアプリを構築するのも一つの手ではないでしょうか。

ここでは、AngularJSを使ってHTML5ハイブリッドアプリを構築できるフレームワークの代表的な3つのフレームワークの比較をしていきたいと思います。

ハイブリッドUIフレームワークの比較

比較のポイントとして、それぞれのGetting Startedを試してみてすぐに使えるか、さらにフレームワークを学習していくためのドキュメントやサンプルが充実しているかや、コミュニティが活発かどうかなどをみていきたいと思います。

Ionic Framework

Ionic Frameworkは登場してだいたい1年くらいになります。この分野では非常に人気の高いフレームワークです。

早速試してみたいと思います。

最初にIonicとCordovaをインストールします。

$ npm install -g cordova ionic

次にアプリを作成していきます。いくつかベースのタイプが選べるのですが、ここではタブベースのアプリにします。

$ ionic start TabApp tabs
$ cd TabApp/
$ ionic serve

これでサーバが起動して、ブラウザが開き、アプリをブラウザで確認できます。

さらに、CordovaでiOS向けのアプリをビルドするための環境をセットアップします。

$ cordova platform add ios
$ npm install -g ios-sim
</code>

iOS向けにビルドします。


$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

非常に簡単な手順でアプリをエミュレータで動かすとこまでいけました。

あとは、このディレクトリ以下のJavaScript, CSS, HTMLを修正してアプリを構築していくのですが、Webの開発に慣れていればほとんど違和感なく開発できるのではないでしょうか。

また、ドキュメントも十分揃っているので、これらを参照にしていけばある程度のアプリは作れるようになりそうです。

コミュニティは独自のフォーラム(http://forum.ionicframework.com/)をもっていて、こちらでは非常に活発なやりとりされています。また、GitHubのリポジトリで獲得Starが11,000以上で、登場して一年でGitHub内でトップ50にはいっているのは、非常に人気が高いといえるのではないでしょうか。

OnsenUI

OnsenUIは国産のフレームワークになります。

それでは、こちら(http://onsen.io/guide/getting_started.html)を順にやっていきたいと思います。

Cordovaをインストールします。

$ sudo npm install -g cordova

サイトから元となるテンプレートを選択してダウンロードします。ここでは、[Tab bar]を選びます。ダウンロードしたファイルを解凍して、エミュレーターで実行します。

$ mkdir onsen_tab_bar
$ unzip onsen_tab_bar.zip
$ cordova platform add ios
$ cordova emulate

エミュレータが実行されて、エミュレータ内でアプリが起動します。

こちらも簡単な手順でアプリの実行までできるようになりました。さらに、OnsenUIの場合はMonacaと組み合わせるとアプリを開発するためのサイクルがスムーズになるようです。

ドキュメントに関しては、さすが国産なだけに日本語の情報は豊富ですね。簡単なアプリであれば、ドキュメントを参照して一通り作成できそうです。

コミュニティに関しては、Ionicに比べるとGitHubの獲得Starが1,400程度だったりと若干弱い感があります。ただ、Monacaの商用サポートもあるので、そちらを検討すれば何か問題があったときにカバーできるのではないでしょうか。

famo.us

famo.usはここ半年に登場したフレームワークになります。HTML5ハイブリッドアプリだとどうしてもネイティブに比べパフォーマンスに難がある場合があります。そこで、パフォーマンスに重点をおいたフレームワークになります。

Getting Startedはどうもこちらのブラウザベースでやっていくようです。

http://famo.us/university/home/#/

ローカルに環境せずに実行結果を試せるのはいいですね。ただ、Ionicのような最初のテンプレートを作成したり、実際のプロジェクトでのとっかかりを作成するコマンドツールはまだ整備がまだされていないようです。

ドキュメントに関してもAPIのリファレンスは揃っているようなのですが、どのようにCordovaと連携するかなどの情報が不足しているように思われます。

コミュニティに関しては、GitHubの獲得Starがすでに6,000になっており、非常に期待度は高いのではないでしょうか。

まとめ

いま、実際のプロジェクトに採用していくのであれば、IonicかOnsenUIのどちらかになってくるかと思います。

コミュニティの活発度などはIonicが先行しており、またスタートアップの場合、Webのデスクトップ版とアプリ両方を担当するケースも多いと言うことで、両方の開発がシームレスにできるIonicがいいのではないでしょうか。

一方で、デスクトップよりモバイルに特化しているのであれば、Monacaを使うことで実機での動作までのライフサイクルを効率的にできるのでOnsenUIを採用するのもいいのではないでしょうか。

あと、famo.usに関してはまだまだこれからだと思います。ただ、サイト上のデモを動かしてみると非常にスムーズに動作するので、これからが楽しみなフレームワークではあります。


ギルドワークスでは様々なツールを使って、開発をしています。興味が湧いた方は「ギルドワークスと組む」などを見ていただき、お気軽にお問い合わせください。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中