cordovaを使ったhtml5ハイブリッド型モバイルア...

1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.

Cordovaを使ったHTML5ハイブリッド

型モバイルアプリの活用ポイント

アシアル株式会社

生形可奈子

URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.

アシアル株式会社のご紹介

アシアルは、「エンジニアリングでインターネットの成長を牽

引する」という事業コンセプトのもと、HTML5、JavaScriptを

中心としたWeb技術をベースにした、デベロッパー支援事業を

行っております。

モバイルアプリ開発環境 UI/UX設計システム構築・コンサルセミナー・スクール


ハイブリッドアプリとは


モバイルOSシェア


モバイルアプリ開発に関する課題

• 開発環境、言語はOS毎に異なる

• ソースコードを別々に管理

• エンジニアの確保が困難

複数OS対応 × 需要の増大


HTML5という選択肢


ハイブリッドアプリの登場

ネイティブアプリとWebアプリ、２つのアプリの特徴をいいとこ

どりしたアプリを「ハイブリッドアプリ」と呼びます。

ハイブリッドアプリは、Webの技術を使って開発しますが、生成

されるアプリはネイティブアプリとほぼ同等のものになります。

×ネイティブアプリ Webアプリ


従来の開発手法とハイブリッドアプリの比較

特徴・性能ネイティブ

アプリWebアプリ

ハイブリッドアプリ

クロスプラットフォーム対応 × ○ ○

端末へのインストール ○ × ○

マーケットでの配布 ○ × ○

オフラインでの利用 ○ × ○

端末固有の機能の利用 ○ △ ○

アプリ実行速度 ○ △ △


ハイブリッドアプリの仕組み

ハイブリッドアプリは、Cordova（PhoneGap）というライブラ

リを利用して開発します。 CordovaはHTMLで作成されたコード

をネイティブコードでパッケージングします。

ネイティブコード

HTMLコンテンツ


ネイティブコード

ネイティブ機能呼び出しの仕組み

カメラなどの端末固有の機能を呼び出す場合、開発者は

JavaScriptで命令を記述します。するとCordovaがネイティブ

コードによって対応する機能を実行します。

HTML・CSS・JavaScript

連絡帳GPSカメラ


ハイブリッドアプリ事例紹介


テレ朝動画アプリ

本日紹介するアプリ

シューズファインダーHealthPlanetauヘッドライン


• 株式会社テレビ朝日

• YouTube上の公式動画閲覧アプリ

• SNS連携、お気に入り登録など

事例１：テレ朝動画アプリ


Android iPhone iPad

1ソースでマルチデバイス対応

HTMLは共通

CSS切替style.css style2.css


データ取得方法

ローカルストレージ

お気に入り

YouTube DataAPI

テレ朝動画アプリ管理サーバー

xml

動画情報

json

おすすめ・公式チャンネル情報

コンテンツはXMLやJSONで取得

アプリ設定は端末内に保存

HTMLテンプレートはアプリ内に保持


• KDDI株式会社、株式会社テレビ朝日

• auスマートパス対応ニュースアプリ

• auのAndroid端末にプリインストール

事例２：auヘッドライン


一般的なアプリ更新の仕組み

アプリ更新

マーケット公開まで、申請から数日

通知

アップデート(ユーザー任意)

申請

修正戻し

マーケット


レイアウト変更やコンテンツの拡充は、即時反映

auヘッドラインの仕組み

HTML・CSS更新

アプリ起動時に取得する

サーバに配置

コンテンツ配信サーバ


事例３：Health Planet

• 株式会社タニタヘルスリンク

• 既存の同名Webサービスとの連携

• 体重計の計測データをBluetoothで

アプリに送信

• 歩数計のデータをNFCで読み込み


Health Planetの仕組み

Bluetooth

NFC(Android)

HTTP

Webサービス

体重計

歩数計

REST API Cordova API


事例４：ASICS SHOE FINDER

• 株式会社アシックス

• 足形計測サービスと連携して、

おすすめシューズを検索

• マーケット公開しない店頭アプリ

• 開発期間は約2週間（iPadのみ）


ハイブリッドアプリ開発環境


Cordovaを使ったアプリの開発環境

Monaca Visual Studio Tools for Apache Cordova

開発ベンダーアシアルマイクロソフト

デバッガー実機 Visual Studioに統合されたエミュレータ

ビルド機能クラウドビルドビルド環境のセットアップ（iOSアプリの場合はMac PCとXcodeも）が必要

Visual StudioでCordovaアプリ開発を行うツールには、以下

の２つがあります。


Monaca for Visual Studio

Visual Studioの拡張機能です。Visual Studio上でMonacaの

機能（実機でのデバッグやAndroid/iOSアプリのビルドなど）

を利用することができます。


Monacaとは

• クラウドベースのハイブリッドアプリ開発環境

• iOS, Android, Windows 8, Chrome Apps対応

• 日本語サポート・ドキュメント

• Windowsマシンでも開発OK

• 無料〜


Monacaによるアプリ開発

ブラウザだけで開発〜テスト〜アプリの生成までのすべての工程

を行うことができます。

①ブラウザで開発 ②実機でデバッグ ③ブラウザでビルド


Monacaの仕組み

WebベースのIDE デバッガービルドシステム

クラウド

ソースコードはクラウド上にターゲットOSに

合わせた環境でアプリをビルド


ハイブリッドアプリが抱える課題

1. Androidアプリのパフォーマンス

2. Androidの断片化問題

3. セキュリティ対策が万全でない


パフォーマンス対策：Onsen UI

・モバイルアプリライクな

フラットデザイン

・CSSによる、ネイティブと

遜色ないアニメーション

・SPAの構築が容易

HTMLの独自タグを記述することで、モバイル用UIを簡単に構築

することができるAngularJSベースのフレームワークです。


断片化対策：Crosswalk

通常のハイブリッドアプリでは、OSに付属しているWebView

を利用していますが、MonacaではIntelのCrosswalkという

WebViewをアプリに内包してビルドすることができます。


セキュリティ対策：ソースコード暗号化

WebView

暗号化済みリソース

読み込み対象ファイルを復号化

ファイル読み込み

メモリ上のデータをWebViewにロード

復号化データ（メモリ上）


Monacaエンタープライズ

エンタープライズ向けの有料プランで、業務アプリ開発をセ

キュアかつ効率的に行うための各種機能を提供します。

・ソースコードの暗号化

・アプリの自動更新機能

・SAP等の既存システムとの連携

・サポートチームによる開発支援


デモ


Monacaによるアプリ開発まとめ

Web標準技術のみを使って開発ができる

多くの端末やOSに、ワンソースで対応できる

リモートデバッグ・リモートビルド機能で手軽に

開発・検証できる

ハイブリッドアプリの弱点を補う暗号化プラグイ

ンやUIフレームワークなどを提供


https://ja.monaca.io/

https://ja.monaca.io/

cordovaを使ったhtml5ハイブリッド 型モバイルア...

Documents

cordovaを使ったhtml5ハイブリッド型モバイルア...