ios/android/windows クロスプラットフォームモバイルアプリ開発

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毎に異なるため、

1. 開発工数がかかる

2. ソースコード管理の複雑化

3. エンジニアの確保が困難


HTML5という選択肢


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

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

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

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

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

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


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

特徴・性能ネイティブ

アプリWebアプリ

ハイブリッドアプリ

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

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

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

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

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

アプリ実行速度 ○ △ △


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

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

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

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

ネイティブコード

WebView


ネイティブコード

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

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

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

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

HTML・CSS・JavaScript

連絡帳GPSカメラ

Cordova標準API


Cordovaを利用しているAndroidアプリ


様々なソリューションで採用


Monacaのご紹介


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

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

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

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

• Windowsマシンでも開発OK


Monacaのユーザー

祝！100,000ユーザー達成


Monacaによるアプリ開発

① ②

コンパイル処理やUSB経由での実機転送などは不要。デバッグ専用アプリがネットワーク経由で変更箇所を取得するため、リアルタイムに動作検証できます。


Monacaの仕組み

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

クラウド

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

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


選べるIDE

ブラウザーベースのフル機能IDE 既存の開発環境がそのまま利用可能

拡張機能としてMonacaの機能を提供コマンドラインからの実行


Visual StudioによるCordovaアプリ開発

Visual Studio Tools for Apache Cordova

Monaca for Visual Studio

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

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

実機

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

クラウドビルド（iOSアプリも可）

Visual Studioに標準搭載されているツールと、拡張機能とし

て提供されているMonaca for Visual Studioがあります。


バックエンドサービスとの連携

・クラウドデータベース

・ユーザー認証

・プッシュ通知

Azure Mobile Apps

Azureのモバイル用バックエンドサービスや、オンプレミス環境

のサーバーとの連携が可能です。

JavaScriptによるデータの送受信


デモ


開発事例紹介


• 株式会社テレビ朝日

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

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

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


Android iPhone iPad

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

HTMLは共通

CSS切替style.css style2.css


事例２：ASICS SHOE FINDER

• 株式会社アシックス

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

おすすめシューズを検索

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

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


事例３：Health Planet

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

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

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

アプリに送信

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


Health Planetの仕組み

Bluetooth

NFC(Android)

HTTP

Webサービス

体重計

歩数計

REST API Cordova API


事例4：ジャパンネット銀行残高確認アプリ

• ジャパンネット銀行

• 機能は残高確認のみ

• パターン認証による１秒ログイン


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


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

1. パフォーマンスチューニング

2. Androidの断片化問題

3. セキュリティ対策


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

• モバイルライクなフラットデザイン

• ネイティブと遜色ないアニメーション

• 豊富なUIパーツ

• SPAの構築が容易

• UIガイドラインに準拠

HTML5のカスタムタグを記述することでUIを簡単に構築するこ

とができる、モバイルアプリのためのUIフレームワークです。


Onsen UIの使い方

<ons-toolbar></ons-toolbar>

<ons-list-item></ons-list-item>

<ons-tabbar></ons-tabbar>


断片化対策：Crosswalk

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

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

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

Androidアプリ


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

復号化

端末には暗号化されたファイルが保存され、アプリ実行時に

データを複合化します。複合化データは一時的にメモリ上に

展開されるだけなので、外部から読み取られる心配はありません。


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

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

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

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

開発・検証できる

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

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


価格は無料～

プラン名

価格

Basic

無料

Personal

980円/月

Gold

5,000円/月

Platinum

8,000円/月

プロジェクト数 3 10 100 無制限

ビルド回数 3回/24時間無制限無制限無制限

Visual Studio連携CommunityEditionのみ

CommunityEditionのみ

○ ○

外部のCordovaプラグイン組み込み

× × ○ ○

ローカル開発 × × ○ ○


Monacaエンタープライズ

エンタープライズ向けの上位プランです。業務アプリ開発をセ

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

・ソースコードの暗号化

・アプリの自動更新機能

・SAP等の外部システムとの連携

・完全なローカル環境での開発

・その他カスタマイズ対応


様々な開発支援サービス

専門のサポートチームが技術的課題を解決します。ご要望に応じてコードレビューも行います。

Monacaによるアプリ開発講座の他、JavaScript等のプログラミング教育も実施しています。


https://ja.monaca.io/

https://ja.monaca.io/

ios/android/windows クロスプラットフォーム モバイルアプリ開発

Mobile

ios/android/windows クロスプラットフォームモバイルアプリ開発