ハイブリッドアプリ

.NET 開発基盤部会 Wiki

• 戻る

目次 †

概要 †

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

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

特徴 †

方式 †

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

• HTMLコンテンツをスマホネイティブのWebViewから呼び出す方式。
• Cordovaが拡張した
  • WebViewを使用してHTML/CSS/JavaScriptをロードし、
  • プラグインを使用してネイティブアクセスする。

ドメイン †

適合するドメイン †

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

適合しないドメイン †

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

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

課題 †

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

オフライン対応 †

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

データ保護 †

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

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

セキュリティ †

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

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

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

• データ保護に関する問題
  • HTML5のストレージ機能は、デバッグツールなどを用いて参照できる

開発ツール †

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

Cordova (PhoneGap) †

Electron †

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