Cordovaを 使 ったHTML5ハイブリッド 型 モバイルアプリの 活 用 ポイント アシアル 株 式 会 社 生 形 可 奈 子 1
アシアル 株 式 会 社 のご 紹 介 アシアルは エンジニアリングでインターネットの 成 長 を 牽 引 する という 事 業 コンセプトのもと HTML5 JavaScriptを 中 心 としたWeb 技 術 をベースにした デベロッパー 支 援 事 業 を 行 っております モバイルアプリ 開 発 環 境 UI/UX 設 計 システム 構 築 コンサル セミナー スクール
ハイブリッドアプリとは 3
モバイルOSシェア
モバイルアプリ 開 発 に 関 する 課 題 複 数 OS 対 応 需 要 の 増 大 開 発 環 境 言 語 はOS 毎 に 異 なる ソースコードを 別 々に 管 理 エンジニアの 確 保 が 困 難
HTML5という 選 択 肢
ハイブリッドアプリの 登 場 ネイティブアプリとWebアプリ 2つのアプリの 特 徴 をいいとこ どりしたアプリを ハイブリッドアプリ と 呼 びます ネイティブアプリ Webアプリ ハイブリッドアプリは Webの 技 術 を 使 って 開 発 しますが 生 成 されるアプリはネイティブアプリとほぼ 同 等 のものになります
従 来 の 開 発 手 法 とハイブリッドアプリの 比 較 特 徴 性 能 ネイティブ アプリ Webアプリ ハイブリッド アプリ クロスプラットフォーム 対 応 端 末 へのインストール マーケットでの 配 布 オフラインでの 利 用 端 末 固 有 の 機 能 の 利 用 アプリ 実 行 速 度
ハイブリッドアプリの 仕 組 み ハイブリッドアプリは Cordova(PhoneGap)というライブラ リを 利 用 して 開 発 します CordovaはHTMLで 作 成 されたコード をネイティブコードでパッケージングします HTMLコンテンツ ネイティブコード
ネイティブ 機 能 呼 び 出 しの 仕 組 み カメラなどの 端 末 固 有 の 機 能 を 呼 び 出 す 場 合 開 発 者 は JavaScriptで 命 令 を 記 述 します するとCordovaがネイティブ コードによって 対 応 する 機 能 を 実 行 します HTML CSS JavaScript ネイティブコード カメラ GPS 連 絡 帳
ハイブリッドアプリ 事 例 紹 介 11
本 日 紹 介 するアプリ テレ 朝 動 画 アプリ auヘッドライン HealthPlanet シューズファインダー
事 例 1:テレ 朝 動 画 アプリ 株 式 会 社 テレビ 朝 日 YouTube 上 の 公 式 動 画 閲 覧 アプリ SNS 連 携 お 気 に 入 り 登 録 など
1ソースでマルチデバイス 対 応 Android iphone ipad style.css CSS 切 替 HTMLは 共 通 style2.css
データ 取 得 方 法 HTMLテンプレートは アプリ 内 に 保 持 動 画 情 報 xml YouTube Data API アプリ 設 定 は 端 末 内 に 保 存 ローカル ストレージ お 気 に 入 り コンテンツはXML やJSONで 取 得 おすすめ 公 式 チャンネル 情 報 json テレ 朝 動 画 アプリ 管 理 サーバー
事 例 2:auヘッドライン KDDI 株 式 会 社 株 式 会 社 テレビ 朝 日 auスマートパス 対 応 ニュースアプリ auのandroid 端 末 にプリインストール
一 般 的 なアプリ 更 新 の 仕 組 み マーケット 公 開 まで 申 請 から 数 日 申 請 通 知 アプリ 更 新 マーケット 修 正 戻 し アップデート (ユーザー 任 意 )
auヘッドラインの 仕 組 み レイアウト 変 更 やコンテンツの 拡 充 は 即 時 反 映 HTML CSS 更 新 サーバに 配 置 アプリ 起 動 時 に 取 得 する コンテンツ 配 信 サーバ
事 例 3:Health Planet 株 式 会 社 タニタヘルスリンク 既 存 の 同 名 Webサービスとの 連 携 体 重 計 の 計 測 データをBluetoothで アプリに 送 信 歩 数 計 のデータをNFCで 読 み 込 み
Health Planetの 仕 組 み REST API Cordova API 体 重 計 Webサービス Bluetooth HTTP NFC (Android) 歩 数 計
事 例 4:ASICS SHOE FINDER 株 式 会 社 アシックス 足 形 計 測 サービスと 連 携 して おすすめシューズを 検 索 マーケット 公 開 しない 店 頭 アプリ 開 発 期 間 は 約 2 週 間 (ipadのみ)
ハイブリッドアプリ 開 発 環 境 22
Cordovaを 使 ったアプリの 開 発 環 境 Visual StudioでCordovaアプリ 開 発 を 行 うツールには 以 下 の2つがあります Monaca 開 発 ベンダー アシアル マイクロソフト Visual Studio Tools for Apache Cordova デバッガー 実 機 Visual Studioに 統 合 されたエミュレータ ビルド 機 能 クラウドビルド ビルド 環 境 のセットアップ(iOSアプリの 場 合 はMac PCとXcodeも)が 必 要
Monaca for Visual Studio Visual Studioの 拡 張 機 能 です Visual Studio 上 でMonacaの 機 能 ( 実 機 でのデバッグやAndroid/iOSアプリのビルドなど) を 利 用 することができます
Monacaとは クラウドベースのハイブリッドアプリ 開 発 環 境 ios, Android, Windows 8, Chrome Apps 対 応 日 本 語 サポート ドキュメント Windowsマシンでも 開 発 OK 無 料
Monacaによるアプリ 開 発 ブラウザだけで 開 発 テスト アプリの 生 成 までのすべての 工 程 を 行 うことができます 1ブラウザで 開 発 2 実 機 でデバッグ 3ブラウザでビルド
Monacaの 仕 組 み ソースコードは クラウド 上 に クラウド ターゲットOSに 合 わせた 環 境 で アプリをビルド WebベースのIDE デバッガー ビルドシステム
ハイブリッドアプリが 抱 える 課 題 1. Androidアプリのパフォーマンス 2. Androidの 断 片 化 問 題 3. セキュリティ 対 策 が 万 全 でない
パフォーマンス 対 策 :Onsen UI HTMLの 独 自 タグを 記 述 することで モバイル 用 UIを 簡 単 に 構 築 することができるAngularJSベースのフレームワークです モバイルアプリライクな フラットデザイン CSSによる ネイティブと 遜 色 ないアニメーション SPAの 構 築 が 容 易
断 片 化 対 策 :Crosswalk 通 常 のハイブリッドアプリでは OSに 付 属 しているWebView を 利 用 していますが MonacaではIntelのCrosswalkという WebViewをアプリに 内 包 してビルドすることができます
セキュリティ 対 策 :ソースコード 暗 号 化 ファイル 読 み 込 み 暗 号 化 済 みリソース WebView 読 み 込 み 対 象 ファイルを 復 号 化 メモリ 上 のデータを WebViewにロード 復 号 化 データ(メモリ 上 )
Monacaエンタープライズ エンタープライズ 向 けの 有 料 プランで 業 務 アプリ 開 発 をセ キュアかつ 効 率 的 に 行 うための 各 種 機 能 を 提 供 します ソースコードの 暗 号 化 アプリの 自 動 更 新 機 能 SAP 等 の 既 存 システムとの 連 携 サポートチームによる 開 発 支 援
デモ 33
Monacaによるアプリ 開 発 まとめ Web 標 準 技 術 のみを 使 って 開 発 ができる 多 くの 端 末 やOSに ワンソースで 対 応 できる リモートデバッグ リモートビルド 機 能 で 手 軽 に 開 発 検 証 できる ハイブリッドアプリの 弱 点 を 補 う 暗 号 化 プラグイ ンやUIフレームワークなどを 提 供
https://ja.monaca.io/