ios/android/windows クロスプラットフォーム モバイルアプリ開発
Post on 08-Jan-2017
1.404 views
TRANSCRIPT
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毎に異なるため、
1. 開発工数がかかる
2. ソースコード管理の複雑化
3. エンジニアの確保が困難
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
HTML5という選択肢
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの登場
ネイティブアプリとWebアプリ、2つのアプリの特徴をいいとこ
どりしたアプリを「ハイブリッドアプリ」と呼びます。
ハイブリッドアプリは、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)というOSSライ
ブラリを利用して開発します。 CordovaはHTMLで作成された
コードをネイティブコードでパッケージングします。
ネイティブコード
WebView
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ネイティブコード
ネイティブ機能呼び出しの仕組み
カメラなどの端末固有の機能を呼び出す場合、開発者は
JavaScriptで命令を記述します。するとCordovaがネイティブ
コードによって対応する機能を実行します。
HTML・CSS・JavaScript
連絡帳GPSカメラ
Cordova標準API
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Cordovaを利用しているAndroidアプリ
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
様々なソリューションで採用
13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaのご紹介
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のユーザー
祝!100,000ユーザー達成
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaによるアプリ開発
① ②
コンパイル処理やUSB経由での実機転送などは不要。デバッグ専用アプリがネットワーク経由で変更箇所を取得するため、リアルタイムに動作検証できます。
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの仕組み
IDE デバッガー ビルドシステム
クラウド
ソースコードはクラウド上に ターゲットOSに
合わせた環境でアプリをビルド
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
選べるIDE
ブラウザーベースのフル機能IDE 既存の開発環境がそのまま利用可能
拡張機能としてMonacaの機能を提供 コマンドラインからの実行
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
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があります。
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
バックエンドサービスとの連携
・クラウドデータベース
・ユーザー認証
・プッシュ通知
Azure Mobile Apps
Azureのモバイル用バックエンドサービスや、オンプレミス環境
のサーバーとの連携が可能です。
JavaScriptによるデータの送受信
21URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
デモ
22URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
開発事例紹介
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
• 株式会社テレビ朝日
• YouTube上の公式動画閲覧アプリ
• SNS連携、お気に入り登録など
事例1:テレ朝動画アプリ
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Android iPhone iPad
ワンソースでマルチデバイス対応
HTMLは共通
CSS切替style.css style2.css
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
事例2:ASICS SHOE FINDER
• 株式会社アシックス
• 足形計測サービスと連携して、
おすすめシューズを検索
• マーケット公開しない店頭アプリ
• 開発期間は約2週間(iPadのみ)
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
事例3: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.
事例4:ジャパンネット銀行残高確認アプリ
• ジャパンネット銀行
• 機能は残高確認のみ
• パターン認証による1秒ログイン
29URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリが抱える課題
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの3つの課題
1. パフォーマンスチューニング
2. Androidの断片化問題
3. セキュリティ対策
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
パフォーマンス対策:Onsen UI
• モバイルライクなフラットデザイン
• ネイティブと遜色ないアニメーション
• 豊富なUIパーツ
• SPAの構築が容易
• UIガイドラインに準拠
HTML5のカスタムタグを記述することでUIを簡単に構築するこ
とができる、モバイルアプリのためのUIフレームワークです。
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Onsen UIの使い方
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
断片化対策:Crosswalk
通常のハイブリッドアプリでは、OSに付属しているWebView
を利用していますが、MonacaではIntelのCrosswalkという
WebViewをアプリに内包してビルドすることができます。
Androidアプリ
URL : 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.
価格は無料~
プラン名
価格
Basic
無料
Personal
980円/月
Gold
5,000円/月
Platinum
8,000円/月
プロジェクト数 3 10 100 無制限
ビルド回数 3回/24時間 無制限 無制限 無制限
Visual Studio連携CommunityEditionのみ
CommunityEditionのみ
○ ○
外部のCordovaプラグイン組み込み
× × ○ ○
ローカル開発 × × ○ ○
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaエンタープライズ
エンタープライズ向けの上位プランです。業務アプリ開発をセ
キュアかつ効率的に行うための各種機能を提供します。
・ソースコードの暗号化
・アプリの自動更新機能
・SAP等の外部システムとの連携
・完全なローカル環境での開発
・その他カスタマイズ対応
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
様々な開発支援サービス
専門のサポートチームが技術的課題を解決します。ご要望に応じてコードレビューも行います。
Monacaによるアプリ開発講座の他、JavaScript等のプログラミング教育も実施しています。
URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
https://ja.monaca.io/