前提
- 2019/9/19追記：2016年09月28日投稿の記事なので結構古い情報です。ご注意ください。
- 社内の勉強会用に情報をまとめてみたのでせっかくなのでQiitaにも投稿
- ハイブリッドアプリでも主にionic中心になります。
- 検討段階でMonacaも選択肢にあったためMonacaとの比較も記載。
- ハイブリッドアプリを始める場合に困ったら以下も参考にしてみてください（自分の投稿のステマ）
- 【ハイブリッドアプリ】Monacaを利用してみてはじめに疑問に思ったこと一覧
ハイブリッドアプリとは
- アプリをWeb技術を使って作成する技術
- ネイティブアプリ
- Java
- Swift / ObjectiveC
- ハイブリッドアプリ
- HTML + CSS + JavaScript
- SPA（SINGLE Page Application）
- APIで情報取得。デザインはHTMLやCSSで切り分ける。
- 誤解されているのがWebViewにWebサイトを表示していると思われる時があるが基本的に違う。
- HTML/CSS/JSはアプリ内にありWeb側はAPIサーバ。
- ネイティブアプリ
- ストアの１割以上はハイブリッドアプリらしい
- Gartnerによると2016年、企業向けアプリのうち約50%がハイブリッドアプリになると予想。
ハイブリッドアプリ フレームワーク
- cordova
- 元々PhoneGapという名前で開発されていたがAdobeに買収されて公開された。
- 現在はAdobeだけでなく、GoogleやMicrosoft、IBM、Intelなどたくさんの企業がCordovaに関わっている。
- Electron
- GitHub社提供
- 主にデスクトップアプリを開発するために利用される
- 他にも色々ある
- React Native
- Intel XDK
Cordova関連
- PhoneGap
- Adobeが提供しているもの。
- PhoneGapBuildというビルドツールがある
- Monaca
- cordova + onsenUI + クラウドビルドツールで提供されているもの。
- Ver2がリリースされた
- Ver1： OnsenUIがAngular必須
- Ver2： OnsenUIがAngularJSから切り離されてReactからでも利用可能になった。ionicと方向性が異なるようになった。
- Angular2やReactも選択できるようになった（ただしクラウドIDEからは利用できずMonaca CLIのみ）
- ionic
- cordova + ionicフレームワークで提供されているもの。
- Ver2がリリースされた
- Ver2はAngularJS2を利用。
- プロトタイプツールのようなionic Creatorとかもある。
Monaca
- Monaca = cordova + OnsenUI + クラウドビルドツール
- クラウドビルドツール
- ブラウザIDE、クラウドビルド
- ローカルキット有り。Git利用可能
- Monaca for Visual Studio
- クラウドでビルドできるためWinからでもiOSのビルドが可能
- AppStoreへの設定は必要なのでどちらにしてもMacは１台必要？
- Monaca CLIもある
- デバッグアプリ有り
- 特にcordova pluginを利用する場合に便利
- アシアルさん運営
- 国産で日本語ドキュメント有り。英語情報は少なめ
- チケット制による問い合わせ可能
- パートナーにもなれる
- 60,000以上のアプリがリリースされている
- 有料（無料もある）
- 月額: 無料、980円、5,000円、8,000円など複数
- 無料プランもあるがプロジェクト数やビルド数に制限があり個人かお試しレベル。
- 上記のデバッグアプリやビルドツールに魅力を感じれば価値有り。
- 無料で使いたい場合はcordova + OnsenUIで利用するのもよい思う。
- Monacaで作ったものをダウンロードしcordova run すれば利用可能？
- 月額: 無料、980円、5,000円、8,000円など複数
- クラウドビルドツール
monaca IDE
ionic
- cordova + ionic
- ビルドはコンソールから
- ビルドはコンソールから行いXcodeとかでも可能。
- 基本的にMacからiOSのビルドは行う。（開発環境はMacがよさそう）
- クラウドサービスでMonaca同様にクラウドビルドが可能（有料）
- ionic公式アプリがありコンソールからionic uploadでクラウドにアップロード可能。そのアプリから開発中のアプリを見ることが可能
- ionic マーケット
- 各種テンプレートがionic storeで公開されておりダウンロード・購入できる
- ionic creator
- ブラウザからパーツを置くことである程度モックアプリを作ることができる
- モック制作にも使え、そのあとソースをDLすればそのまま開発に利用することも可能。
- 結構便利なのでぜひ見て下さい。
- ionic windows
- windowsアプリを作ることができる。
- 基本無料
- クラウドを利用する部分は一部有料。使わなくても問題なさそう。
- モック作るものやuploadの数の制限など
- クラウドを利用する部分は一部有料。使わなくても問題なさそう。
- クラウドサービスは有料
- $39~/月
- プッシュ通知、ビルド、会員など
- ビルドはコンソールから
ionic creator
Monaca ionic の違い まとめ
- クラウドIDEの有無(Monaca)
- 日本語情報の豊富さ(Monaca > ionic)
- 英語情報の量(Monaca < ionic)
- 費用(△Monaca ○ionic)
- angular以外(○Monaca ☓ionic)
- Monacaとionicで比較される事が多いが比較するなら(cordova + onsenUI)とionicのような気がする。またはMonacaとionic cloudやionic Enterprise。
- Monacaの初期テンプレートにionicが選択できるようにもなった。
特徴
ハイブリッドアプリ 利点
- 開発工数がネイティブアプリより少ない傾向にある
- クロスプラットフォーム
- リリース改善ペースも早くなり多くの改善が行い易い
- 単OSでみても工数は少なめになると言われている
- でもテストは普通に各OS毎にかかるのでテスト工数は変わらない。
- Web技術の利用が可能
- HTML + CSSのためコーダーでもある程度開発可能
- ネイティブのモック制作にも
- フレームワークで提供されているUIパーツを利用することで簡単にアプリっぽく表現できる
ハイブリッドアプリ 弱点
- 動作スピードがネイティブより遅い
- ゲームなど高レスポンスが必須なアプリでなければ問題無いレベルになった
- famo.usなど動作が早い特化型のライブラリを使う手も。
- ゲームなど高レスポンスが必須なアプリでなければ問題無いレベルになった
- ネイティブ独自の機能開発
- 各OS毎にcordovaプラグインの開発などが必要
- IoT機器などでJavascriptSDKがない場合とか
- 配布されているプラグインの修正などを行う可能性も。ノウハウが必要。
- 各OS毎にcordovaプラグインの開発などが必要
事例
- cordova
- Monaca
- Eight
- ジャパンネット銀行
- ionic
- クローゼット
- TechFeed(ionic2)
- Monaca
- Electron
- Atom
- Slack
- Visual Studio
- Kobito for Windows
- その他
- クックパッド（Android版）
開発
Webとの違い・はまりポイント
- Webのみの経験だと仕組みがアプリ開発と多少異なるため戸惑う
- ネットワーク切断関連
- WifiからLTEに接続が変わった時など
- この辺はネイティブも同様
- WifiからLTEに接続が変わった時など
- キャッシュ関連
- ネットワーク切断関連
- SPAなのでその違いにとまどったり。
- サーバサイドでデザインを出力することはない。
- plugin関連。
開発環境でのビルドの違い
- Cordovaはクロスプラットフォームだが、ビルドはローカル環境に依存。
- macOS: iOS, Android
- Windows: Windows, Android
- Linux: Android
SPA フレームワーク
- ちなみにionicやOnsenUIはシングルページアプリケーションとして動いているがSPA対応のフレームワークは色々ある
- Angular
- React
- Aurelia
- Vue.js
- Backbone.js
- knockout.js
- Ember.js
AngularJS
- SPA作るに最適
- AngularJSのわかりにくい所
- MVC
- HTMLはテンプレート。変数を入れておくイメージ。
- Controller、Service、Directiveが基本
- この辺りが最初わかりづらいがわかると便利。
- moduleオブジェクトのメソッド
- animation
- controller
- directive
- filter
- サービス
- service
- factory
- provider
- value
- constant
- config
- run
- module(name [,requires [,config]]
- 上記のようなmoduleオブジェクトのメソッドの違いや利用方法を理解しておくとよい。
- AngularJSでのアニメーション
- jQueryのようにDOMを直接いじることはできるだけしない。
- CSSアニメーションで実施
- Classの付与・外すで対応
- どうしてもDOM必要が必要な場合は利用する
- jQueryは出来る限り利用しない。
- jQueryのUIプラグインなどの利用
- Angular対応でないと動かない場合が多い
Cordovaプラグイン
- ネイティブアプリ独自な機能はプラグインから呼び出す
- Push通知とか
- 端末のセンサーなどの機能でブラウザから取得できないもの。
- すでにあるプラグインを探したり、なかった場合は自作する
- 自作する場合は、各OS毎に作る必要有り
- ネイティブで作成する必要があるため開発者が限られる
- この辺りがボトルネックになる可能性が高い
mBaaS(Mobile Backend as a Service)
- スマートフォン アプリ向けのよく利用される汎用的な機能を利用できるサービス。
- API
- Push通知
- 会員管理・認証
- SNS連携
- DB
- ファイルストレージ
- etc
mBaaSのサービス
- AWS MobileHub
- MobileHubを使ってもいいけど、AWSの各機能を別々に使い分けてサーバレスアーキテクチャで構築するのもよさそう
- Google Cloud Platform
- Firebase
- Azure Mobile Apps
- Nifty mobile backend
- 無料で結構できる
- KeyCloud
- Parse
- サービス終了
- Monacaやionicにも独自のものがある
おまけ
- ハイブリッドアプリで作ったSPA部分をWebサイトに使えるかどうか
- 使える
- SEO
- 以前はSEOがダメだったが今はgooglebotが賢くなったのである程度は大丈夫
- Search Console などでレンダリングが正しいかチェック
- ただそれでもダメ場合もあるので対応が必要。ノウハウがないとここの工数が大きくなる。
- 将来的には自動で大丈夫になるかも。
- SPAなのでリンクが大切
- pushState（PJAX）を使ったりする
- 以前はSEOがダメだったが今はgooglebotが賢くなったのである程度は大丈夫
- facebookやTwitterなど
- og:titleなどが変数名だと対応していないので別途対応が必要
- ionicのファイルそのままアップロードについて
- APIのCORSなどの対応
- URLに＃があるとクローリングされないので修正の必要あり