ハイブリッドアプリケーションとその界隈について情報整理：2014年12月初旬


ハイブリッドアプリケーションについて調査しました。基本的にはWebにある情報や書籍の寄せ集めとなりますが、自分のために整理して置いておきます。かなり疎い世界ですので初歩的なことになっています。

※ 認識の間違い等は修正致しますので、修正リクエストいただけましたら幸いです。

また、下記書籍の情報が大変参考になりました。本当にありがとうございます。

* 全体参考：[HTML5 ハイブリッドアプリ開発[実践]入門](http://www.amazon.co.jp/dp/4774162116)

![kobito.1418029152.996958.png](https://qiita-image-store.s3.amazonaws.com/0/39380/667072f4-e330-88d8-f190-1eb16bbef2de.png "kobito.1418029152.996958.png")


## スマートフォンアプリケーションについて
スマートフォン向けのアプリケーションの実現にはいくつかの手法があります。これまで曖昧な部分だったこともあり、書籍やWebの情報を整理しました。

### ネイティブアプリケーションのメリット・デメリット
####＜メリット＞

* AppStore、Google Play Storeで配布できる
* 端末の機能・パフォーマンスを最大限に引き出すことができる
* ユーザはホーム画面からアプリを起動できる
* オフライン時に利用できる

####＜デメリット＞
* マルチプラットフォーム対応にコストがかかる
* どちらも対応すると開発期間は2倍。
* どちらも対応するには専門のエンジニアが必要。
* コンテンツの同期ができない

### Webアプリケーションのメリット・デメリット
####＜メリット＞

* 常に最新の状態を保ことができる：プラットフォームの承認を得て公開する期間が必要ない
* Webの標準技術を用いることができる
* クロスプラットフォーム性がある：1つのソースコードでiOS、Androidで動作可能
* 開発速度が早い・開発費が比較的抑えられる

####＜デメリット＞
* ブラウザを経由しないとアプリを起動できない
* 端末の機能を利用できない：プッシュ通知 etc.
* パフォーマンスが出ない
* オフライン時には利用できない

### ハイブリッドアプリケーションのメリット・デメリット
####＜メリット＞

* ネイティブアプリ同様、AppStore、Google Play Storeで配布できる
* クロスプラットフォーム性がある
* 端末の機能を呼び出すことができる
* Web技術のノウハウや資産を利用できる

####＜デメリット＞

* 端末の性能・パフォーマンスを最大限に利用することができない
* 実行速度や描画速度を必要とする処理には向いていない
* オフライン時には利用制限がある

### 参考
さらに下記ではより詳細な比較が行われていますので是非参考にしてください。
[ウェブアプリとネイティブアプリの違い｜抑えておくべき7つの項目](http://appbu.jp/webapps-nativeapps)

## フロントエンドフレームワークについて

ハイブリッドアプリケーションの開発で利用可能なフレームワークを2つ整理。他にもあるかと思いますが、今回はこちらのみです。

### ionic Framework(with AngluarJS)
http://ionicframework.com/

* verβ
* 対応OS
    * iOS: 6+
    * Android 4+

> ionicとはAngularJSに最適化されたモバイルアプリ向けのUIフレームワークです。 
> Cordova、AngularJS、Sass というスタックで構成されており、はじめからCordovaで動かすことを念頭に置かれているため、モバイルアプリをつくるのに適したフレームワークです。 
> ドキュメントが大変充実しているのも特徴の一つです。

* 広告掲載用のライブラリ：Cordova が AdMob対応しているので、そちらのライブラリを利用することになりそうです
    * AdMob：http://ngcordova.com/docs/#AdMob 


### OnsenUI Framework(with AngularJS)
http://ja.onsen.io/

* ver1.2.1
* 対応OS
    * iOS: 6+
    * Android: 2.3+

> OnsenUIとは、HTML5を利用したモバイルアプリ向けのUIフレームワークです。 
> Angular.js/jQueryを採用したWEBコンポーネント型のフレームワークで、日本語のドキュメントもとても豊富。

* 広告掲載用のライブラリ：Monaca を利用すると対応可能なようです
    * nend：http://docs.monaca.mobi/3.5/ja/sampleapp/tips/external_services/nend_ad/
    * inmobi：http://docs.monaca.mobi/3.5/ja/sampleapp/tips/inmobi/
    （AdMob：2014年12月8日現在は対応予定ないとのこと）

## ハイブリッドアプリ向けにビルドするプラトフォームなどについて

ハイブリッドアプリにするためには、ビルドする必要があります。そのフレームワークとして有名なのがCordovaです。

### Cordova
http://cordova.apache.org/

* ver4.0.0
* 以前：Phonegap → 最近：Cordova
* ver4 になりブラウザエンジンの切り替え、組み込みがやりやすくなりました

### ngCordova
http://ngcordova.com/

* ver α
* AngularJSからCordovaのAPIを利用するためのJS API
* バージョンはαだが、Cordova 開発者を中心に順次開発が進められている

### Intel Crosswalk
https://crosswalk-project.org/

* Cronium ベースのブラウザエンジン
* Android と Tizenに対応


## ハイブリットアプリケーションとスマートフォン端末

### 日本の iOS と Android のOSシェアとバージョンシェア
* 2014年9月の記事：http://jp.techcrunch.com/2014/10/30/20141029kantar-september-2014/
    * iOS：31.3%
    * Android：64.5%

### Android 向けのハイブリッドアプケーション近況

*  Android 4.0以上であれば、Intel Crosswalkブラウザエンジンを内包
    * OSバージョンの違いを吸収
    * AndroidWebView のパフォーマンス向上
    * AndroidWebView のフラグメンテーション改善

* 2014年12月：Android バージョン別シェア：https://developer.android.com/about/dashboards/index.html
    * Android4以上：90.4%（グローバル） 

### ハイブリッドアプリケーションノウハウ
* [成功するPhoneGapアプリを開発するための高速化＆UXテクニック](http://blog.asial.co.jp/1142)

    * これからアプリ開発を行うので、こちらを参考に高速化やUI/UX対応していきたいと思います。

* [Android Design 日本語](http://android-design.teamegg.co.jp/home)

    * 上記はデザインガイドラインの日本語訳です。たまたま見つけたので載せておきます。

## 全体まとめ

### どのアプリを選択するか

* 更新頻度の高いコンテンツがあるものは、ハイブリッドアプリ or Webアプリを選択するのがベター
* 端末の機能を利用したい場合には、ネイティブアプリ or ハイブリットアプリを選択するのがベター
* 実行速度、描画速度を必要とする場合は、ネイティブアプリを選択するのがベター

何を選択するのかは専任のエンジニアがいるかどうかや人数など背景は様々だと思います。一概にどれとは言えないと思います。ただ、上記のような特徴を踏まえておくと、判断の材料になるでしょう。

### AndroidのOSバージョンのターゲット

世界シェアで見ると10%弱です。日本のOS対応は遅いと思いますので倍の20%と仮定しても、100人のうちAndroid OSの人が65人（64.5%）そこからAndroid4.0未満の人が13人（20%）となります。これをどう捉えるか。アプリのパフォーマンスや開発のしやすさを考えると、Android4以上をターゲットとし、ブラウザエンジンを内包すれば、ユーザーの利便性もあがり開発者にも優しくなりそうです。

### 雑感

今のチームで限って言えばWeb系人間というのとチームメンバーも限られていますので、ハイブリッドアプリケーションを調査しているという状態です。実際に実装や展開の段階になれば、もう少し情報整理＆共有できればと思いっています。