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設計 システム構築・コンサル セミナー・スクール

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

ハイブリッドアプリとは

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

モバイルOSシェア

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

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

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

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

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

複数OS対応 × 需要の増大

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

HTML5という選択肢

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

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

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

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

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

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

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

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

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

特徴・性能ネイティブ

アプリWebアプリ

ハイブリッドアプリ

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

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

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

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

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

アプリ実行速度 ○ △ △

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

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

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

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

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

ネイティブコード

HTMLコンテンツ

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

ネイティブコード

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

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

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

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

HTML・CSS・JavaScript

連絡帳GPSカメラ

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

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

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

テレ朝動画アプリ

本日紹介するアプリ

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

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

• 株式会社テレビ朝日

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

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

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

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

Android iPhone iPad

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

HTMLは共通

CSS切替style.css style2.css

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

データ取得方法

ローカルストレージ

お気に入り

YouTube DataAPI

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

xml

動画情報

json

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

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

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

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

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

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

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

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

事例２：auヘッドライン

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

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

アプリ更新

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

通知

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

申請

修正戻し

マーケット

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

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

auヘッドラインの仕組み

HTML・CSS更新

アプリ起動時に取得する

サーバに配置

コンテンツ配信サーバ

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

事例３：Health Planet

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

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

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

アプリに送信

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

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

Health Planetの仕組み

Bluetooth

NFC(Android)

HTTP

Webサービス

体重計

歩数計

REST API Cordova API

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

事例４：ASICS SHOE FINDER

• 株式会社アシックス

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

おすすめシューズを検索

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

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

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

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

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

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

Monaca Visual Studio Tools for Apache Cordova

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

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

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

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

の２つがあります。

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

Monaca for Visual Studio

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

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

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

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

Monacaとは

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

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

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

• Windowsマシンでも開発OK

• 無料〜

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

Monacaによるアプリ開発

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

を行うことができます。

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

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

Monacaの仕組み

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

クラウド

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

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

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

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

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

2. Androidの断片化問題

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

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

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

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

フラットデザイン

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

遜色ないアニメーション

・SPAの構築が容易

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

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

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

断片化対策：Crosswalk

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

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

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

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

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

WebView

暗号化済みリソース

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

ファイル読み込み

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

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

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

Monacaエンタープライズ

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

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

・ソースコードの暗号化

・アプリの自動更新機能

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

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

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

デモ

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

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

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

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

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

開発・検証できる

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

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

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

https://ja.monaca.io/