WebRTCクライアントの開発フレームワーク

こんにちは、ベーコン婆男です。

前回、WebRTCのクライアントアプリの開発方法について書きました。
今回は、では実際にどのような開発言語で、どのような開発フレームワークを使って開発するのがいいのかについて書きたいと思います。なお、開発言語や開発フレームワークは、完璧なものはなく、メリット・デメリットを勘案しながら、自分にとって一番いいと思うものを選定する必要があります。このプログでは、ベーコン婆男が、現時点で一番いいとおもった内容で記載しています。そのためもっといいものがあればぜひ教えてください。

WebRTCのクライアントアプリの開発方法

WebRTCでは、せっかくOSに依存せずに開発できるのですから、その特徴を活かすため、ブラウザ、iPhone、AndroidなどのマルチOSで動作可能なクロスプラットフォームな開発方法が望ましいです。

クロスプラットフォームの開発方法はいくつかありますが、無償で利用できる点や、開発実績が多い点、またWebRTCの利用にあたってブラウザベースである点を考慮すると、ハイブリッドアプリが有力候補として挙げられます。

ハイブリッドアプリとは、従来のOS専用のネイティブアプリ(iPhoneであればObjective-C、AndoridであればJava等で開発するOSに特化したアプリ)と、Webアプリ(HTML5、JavaScript、CSSで開発するブラウザ上で動作するアプリ)を組み合わせたアプリになります。

ハイブリッドアプリでは、WebViewというネイティブのブラウザコンポーネントを使って、従来のWebアプリと同様の形態で、ネイティブアプリに近い形でアプリを開発することができます。そのため、iPhoneであっても、Androidであっても、HTML5、JavaScript、CSSを使ってアプリを開発できますので、同じソースコードで動作させることができます。もちろんパソコンの場合は、そのままブラウザ上で、Webアプリとして動作させることが可能です。

さらに、WebViewで対応できない、スマホ特有の機能(例えば、センサーの利用など)を使いたい場合は、プラグインという形でネイティブコードで開発した機能をハイブリッドアプリの中で利用することができます。プラグインは自分で開発することもできますが、すでに世界中で開発されたプラグインがオープンソースとして配布されていますので、ほとんどの機能は既存のプラグインを利用して実現することができます。通常プラグインは、iOS用とAndroid用の少なくとも2種類のものが提供されていますので、スマホのOSに依存することなくアプリを開発することができます。

ハイブリッドアプリは、ネイティブアプリと比較して、速度面や機能面で一部劣る部分があるものの、1つのソースコードでマルチOSで動作可能なクロスプラットフォーム開発ができることを考えると、少々の制約事項を吹っ飛ばすことができる十分なメリットを享受できる非常に有力な開発手段の1つだと言えます。

特に今回のWebRTCのアプリ開発では、ブラウザに組み込まれたWebRTCの機能を利用することになるため、WebViewというネイティブのブラウザコンポーネントを使ってアプリを開発するハイブリッドアプリは、WebRTCに最適な開発方法だと思われます。

ハイブリッドアプリの開発フレームワーク

ハイブリッドアプリを開発する際、通常、Cordova(コルドバ)という基本フレームワークを利用します。また、ハイブリッドアプリでは、サーバとの通信を最小限にとどめて画面を描画するために、SPA(Single Page Application)という方式をとりますが、そのフレームワークとして、Googleが開発したAngularJSというフレームワークが有名です。また、最近ではユーザインターフェースであるフロントエンドの開発を簡易化するため、AngularJS上で動作する、Ionic、OnsenUIといったフレームワークを利用ケースが多いです。例えば、Ionicでは、色々なアイコンも標準で提供されているため、市販のアプリと同等の洗練されたUIを開発することができるようになっています。

また、ハイブリッドアプリの開発環境として、クラウド上でコーディング、ビルド、デバッグができるクラウド開発環境が提供されています。例えば、国内ではアシアル社のMonacaが有名です。上記のOnsenUIもアシアル社の開発フレームワークです。

Monacaを利用すれば、開発用のパソコンを用意する必要がなく、さらにiOSアプリもビルドできるため、iPhoneアプリの開発にmacを購入してなくても、Windowsで開発できます。こんな魅力的なサービスですが、無料プランでは一部のプラグインしか利用できないことと、有償プランでも利用できるプラグインが限られておりベーコン婆男が作りたいアプリにはうまくマッチしませんでした。(ベーコン婆男が利用した時点の話であり、また使い方が悪かったかもしれません)

色々試したり検討した結果、普及率も高く、ドキュメントやサンプルが揃ってそうな、以下のフレームワークを利用することにしました。

Cordova + AngularJS + Ionic

AngularJSとIonicは2.0の新しいバージョンが出ていますが、今回は情報が多い1.0を採用しました。

ちなみに開発言語はハイブリットアプリのため、JavaScript, HTML, CSSになります。

ターゲットOSは、iOS, Android, Windowsパソコン(Chrome, Firefox)としたいと思います。

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です