DNET_HybridApp

ハイブリッドアプリ

• 戻る（クロスプラットフォーム開発ツール）

概要

ハイブリッドアプリとは、

• マルチプラットフォームをターゲットとしたアプリケーション。
• HTML/CSS/JavaScriptと
  スマホネイティブを組み合せて開発する。

特徴

方式

皮（側？）ネイティブ方式で動作

• HTMLコンテンツをスマホネイティブの
  WebViewから呼び出す方式。

• Cordova（Cordova (PhoneGap)）が拡張した

  • WebViewを使用してHTML/CSS/JavaScriptをロードし、
  • プラグインを使用してネイティブアクセスする。

ドメイン

適合するドメイン

• ビジネス系アプリ
• ニュース系アプリ
• バックエンド・システムのデータのビューア
• シンプルなグラフィックのゲーム

適合しないドメイン

• 速度を求められるケース

  • 3Dゲームのような高度なグラフィックスを利用するアプリ
  • デバイスの持つ性能を最大限に生かさなければならないアプリ

• ネイティブのユーザエクスペリエンスを100%再現するアプリ

課題

ハイブリッドアプリの課題

オフライン対応

• 利用者から見て≒ネイティブなので、オフラインであっても動作は行えるという前提。
• オフライン時（ネットワークが長い時間使えない場合）のデータ保護が課題。

データ保護

端末内にデータを保存する場合、以下の機能を利用できる。

• HTML5のストレージ機能
• プラグインを用いてネイティブ機能

セキュリティ

セキュリティ・プライバシーに関する問題

• 外部から取得したHTMLをそのままWebViewに表示すると、
  セキュリティ的に問題になることがある。
  （その為、SPA（(MV*) UIフレームワーク）が
  推奨と言われるケースもある）。

• プラグイン

  • ネイティブアクセス可能
  • 利用しない機能はあらかじめ有効にしない。

• データ保護に関する問題

  • HTML5のストレージ機能は、デバッグツールなどを用いて参照できる

開発ツール

クロスプラットフォーム開発ツールの
HTML5ハイブリッド型の節と同じ。

Cordova (PhoneGap)

Cordova (PhoneGap)

Electron

Electron

PWA（Progressive Web Apps）

PWA（Progressive Web Apps）

参考

• 連載 | ハイブリッドアプリ開発最前線 | HTML5Experts.jp
  https://html5experts.jp/series/hybrid-special/

  • HTML5ハイブリッドアプリ開発、最新動向はやわかり！
    https://html5experts.jp/anatoo/7253/
  • ハイブリッドアプリ開発といえばこれ！PhoneGap/Cordova事始め
    https://html5experts.jp/fenomas/7672/
  • IDE完備！日本語の情報豊富！MonacaとOnsen UIで楽々ハイブリッドアプリ開発！
    https://html5experts.jp/ataruohto/7274/

• MonacaとPhoneGap Buildを試してみる - Qiita
  http://qiita.com/itagakishintaro/items/5b276a0ecee209d0c341

• PWA, Cordova, Capacitor, ReactNative Dom の比較からみる、
  これからのHTML5 アプリ/feacture_of_html5app - Speaker Deck
  https://speakerdeck.com/rdlabo/feacture-of-html5app

移行メモ

• 「利用しない機能があらかじめ有効にしない。」は 「利用しない機能はあらかじめ有効にしない。」に正した。
• 「データ保護に関する問題」の末尾にあった空の箇条書き項目（--）は削除した。

---

Tags: 移行, ハイブリッドアプリ, Cordova, Electron, PWA, WebView, スマホ