ionicによるハイブリッド型アプリ開発の研究
概要
昨今のアプリ開発事情を鑑みるとAndroidが基準となり、iOSが付属となるケースが多くなってきました。日本国内ではiPhone人気が根強いものの、国際的にはAndroidが主流となってきたので、妥当な流れだと思われます。しかしAndroidは、バージョン分断、メーカによる動作の違いがあり、iPhoneだけを対象にしたアプリ開発と比較すると、解決しなければいけない課題が数多く存在します。このような状況の中で（株）ユーワークスでも、いかに効率よくアプリを開発するかということが重要になってきており、そこで今回、ハイブリッド型アプリ開発において実績を積んできたCordovaをベースにしたionicというフレームワークについて技術評価を行いました。
ref: http://www.idc.com/prodserv/smartphone-os-market-share.jsp
ref: http://ascii.jp/elem/000/001/045/1045551/index-2.html
ionicによるハイブリッド型スマホアプリ開発
アプリ開発方法
アプリ開発はネイティブ型、Web型、ハイブリッド型の3種類に分けられます。
● ネイティブ型…iOS、AndroidそれぞれのSDKで開発を行う。開発言語レベルで統一されておらずライブラリ類の統一は困難。ただし、常に最新の機能がサポートされ、高速に動作する。品質重視。
● Web型…要するにWebアプリケーション。ブラウザを基に動作するためハードウェア固有の機能は使用不可。
● ハイブリッド型…iOS向け、Android向けのいずれのアプリも同じソースコードで開発を行います。開発言語にはJavaScript、ランライムにはWebブラウザを用いるのが一般的ですが、ネイティブのようにコンパイルする方法もあります。iOS、Android固有機能についてはネイティブのSDKで別途開発を行い統合します。iOS、Androidで開発リソースの共有が容易。開発効率重視。
このうち、Cordovaやionicで実装できるのはハイブリッド型になります。
Cordovaとは
ハイブリッド型でのアプリ開発を行うための仕組みとして、現時点で最も有力なのがPhoneGap(Apache Cordova)です。元々はPhoneGapという製品でしたが、Adobeが買収後、オープンソース化しApacheへ寄贈しました。このオープンソース版のことをCordovaと呼んでいます。Cordovaでは、Webブラウザを使い「HTML+JavaScript」でプログラムを記述し、パッケージ化する機能が提供されており、またプラグインとして、iOS、Androidのネイティブ機能（カメラやGPS等）のサポートも付随します。つまりCordovaを用いれば、Webアプリのアプリ化が可能というわけです。このパッケージ化するWebアプリは、SPAと呼ばれるWebアプリです。従来型のようにラウンドトリップで全てのHTMLを取得するのではなく、JSONを用い最小限のデータ通信のみで動作させる、クライアント中心のWebアプリです。SPAのWebアプリ開発では、JavaScriptフレームワークとしてAngularJS、CSSフレームワークとしてBootstrapがよく利用されています。つまり「Cordova + AngularJS + Bootstrap」で開発を行うことも可能ということです。しかし、アプリ開発により特化した環境としてionicがあります。ionicは、CordovaとAngularJSを基にしており、Bootstrapの代わりとしてモバイルに特化したUIコンポーネント群を提供しています。これにより、Webアプリ開発の技術を活かしつつ、ネイティブに近いUIを備えたハイブリッド型アプリを開発することができます。
サンプルアプリの開発
NetAtmo WeatherStationのAPIを使用し、オフィスの温度／湿度／CO2濃度／騒音レベルを取得するプログラムを開発してみました。
今回実装する機能は次の3つです。
● netatmo API へのログイン機能
● アクセストークンの保持と更新
● WeatherStation からデータを取得する機能
次に画面側の実装を説明し、その後内部のロジックを説明します。
画面
取得データ表示画面
保存されているアクセストークンから取得したデータを表示します。
テンプレート：templates/browse.html:
ログイン画面
ログイン処理を行い、アクセストークンを取得し保存します。
テンプレート：templates/login.html:
メニュー画面
選択された項目に該当する画面を表示します。
テンプレート：templates/menu.html
ロジックの実装
ログイン処理
ログインは、ログイン画面で入力された loginData.userNameとloginData.password を基にログイン処理を行います。通信には、$httpサービスを使います。ログインに成功した場合は、取得したアクセストークン(response.data.access_token)とリフレッシュトークン(refresh_token)をストレージに保存し、その後、取得データ表示画面の内容を更新するためにreloadを実行します。
Client id 、 Client secret の取得
https://dev.netatmo.com/ から作成することができます。
Client secret は簡単に把握できないよう注意が必要ですが、このサンプルでは、わかりやすさを優先するためコードに埋め込んでいます。
取得データ表示画面の処理
取得データ表示画面では、ログイン時に取得したアクセストークンを使って現在の気温等を取得します。取得したデータは、devices変数に保存することで、自動的に画面に反映されます。ただし、アクセストークンを取得してから一定時間が経過すると、アクセストークンが有効期限切れになります。アクセストークンの有効期限エラーが発生した場合(エラーコード=3)には、アクセストークンを更新します。
アクセストークンの更新
アクセストークンを更新するには、ログイン時に保存したリフレッシュトークンを使用します。リフレッシュトークンを提示し、更新要求を行うことで、新しいアクセストークンとリフレッシュトークンを取得することができます。次回以降のために、これらのトークンを保存しておきます。
ログアウト処理
ログアウト時には、確認ダイアログに「本当にログアウトしますか？」と表示し、「OK」の場合には、アクセストークンとリフレッシュトークンを削除します。
動作検証
動作検証時に実機での確認のみに頼っていては開発効率が悪いため、エミュレータをいかに活用するかが重要です。選択肢としては4つあります。
● Androidエミュレータ…動作が遅いうえに不正確。
● ブラウザ…純粋なHTML5部分しか確認できない。
● iOSエミュレータ … Macでしか動作しない。
● Ripple … ある程度まではCordovaのAPIをカバーして動作確認できる。手軽で速い。
基本的な機能はRippleで確認できるので、少なくとも開発初期段階は手軽なRippleが最適です。検証項目を完全に網羅しているわけではありませんが、エミュレータに完全性を求めること自体がナンセンスですので、今回はRippleを選択しました。
Rippleによるエミュレーション実行
Visual Studio であれば、 Cordova Tools for Visual Studio に組み込まれているので、実行するだけでRippleが立ち上がります。
【Rippleの操作でつまずいたのは次の点】
１．ボタンをタッチしたときに、クリックイベントが2回発行された。マウスで操作すれば問題なし。
２．AJAX通信でエラーが発生した。「Lag the network」をチェックすると改善した。原因は不明。
ビルド
Android版のビルドには事前にAndroidSDKのインストールが必要です。おすすめは、AndroidStudioです。AndroidStudioのSDK Managerを使用すれば、簡単に任意のバージョンのSDKをインストールできます。WindowsでもMacでもビルドを実行すれば*.apkファイルが作成されます。これらのファイルをAndroidの実機端末に転送して動作を確認することができます。
iPhone版はMacでのみビルド可能です。ビルドにはXcodeの事前インストールが必要です。USB接続したiOSデバイスにアプリがインストールされます。ただし、証明書関係の処理で失敗することがあるようで、その場合は一旦Xcodeからビルド及びデバイス実行を行うと解決しました。
まとめ
● ionicを使うことで、効率よくOS依存性の低いアプリ開発が可能です。
● しかしながらiOS版をビルドするにはMACが必要です。
● 基本部分の動作確認にはエミュレータのRippleが手軽で便利でした。
● ionicのベース部分は、NG-Cordova ⇒ Angular-js なので、まずはAngular-jsを理解しておくことが大切です。Angular-jsとElectron(Atom-SHELL)を使うことで、デスクトップ開発も可能なので、基礎知識としておさえておくと良いでしょう。
●ちなみに、ionicの有力な競合とされるonsenui(日本製)も基本はAngular-JSです。