モバイルアプリの開発状況について、ハイブリッドアプリの開発手法と技術情報についてまとめました。

1. モバイルアプリ開発の
現状
2015/02
Koji Suzuki

2. モバイルアプリの形態
• ネイティブアプリ
• AndroidやiOS等、デバイス固有のSDKで開発
• アプリとしてインストール
• Webアプリ
• HTML/CSS/JavaScriptで開発
• ブラウザからアクセスして利用する
• ハイブリッドアプリ
• デバイスに依らない言語で開発
• アプリとしてインストール
Native API
Native API
Browser
Application
Application
Application
Device
Device
Device
Runtime

3. ハイブリッドアプリとは
• 複数のプラットフォームの
コードを共通化できる
• ネイティブAPIを呼び出すこ
ともできる
• 処理速度がネイティブアプ
リに比較して低下する Wikipedia Hyblid-App:
http://de.wikipedia.org/wiki/Hybrid-App

4. ハイブリッドアプリの利点
デバイス機能の利用 ホームアイコン 機種対応
ネイティブアプリ ○ ○ ×
ハイブリッドアプリ ○ ○ ○
WEBアプリ × × ○
Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed
Will be Hybrid
Gartner PR, Feb 2013: http://www.gartner.com/newsroom/id/2324917

5. ハイブリッドアプリのアーキ
テクチャ
• 各DeviceIFの差分を吸収するランタイム
ライブラリをアプリに内包する
• ランタイムは多くのベンダーがクロスプ
ラットフォームツールとして提供している
• WebViewを利用しHTMLで記述できるも
のとそれ以外の特定言語で記述するもの
がある
• 共通処理が限定的であればRuntimeを利
用しないでWebviewを直接利用する方法
もある
Application
Source Code
Plotform
Application Package
Runtime

6. クロスプラットフォームツール
の現状
Tool Name Provider Runtime Language Dedicated IDE Remark
PhoneGap Adobe Apache Cordova HTML5 + CSS + JavaScript PhoneGap Build Webビルド環境
Monaca Asial Apache Cordova HTML5 + CSS + JavaScript Monaca Web / Local IDE
IBM Worklight IBM Apache Cordova HTML5 + CSS + JavaScript IBM Worklight Studio Eclipse Base IDE
Sencha Sencha Apache Cordova HTML5 + CSS + JavaScript Sencha Architect Eclipse Plugin 有
Titanium Mobile Appcelerator Titanium HTML5 + CSS + JavaScript Titanium Studio Eclipse Base
Xamarin Xamarin Mono C# Xamarin Studio Visual Studioアドイン有
Unity 3D Unity Technologies Mono UnityScript, C#, Boo Unity IDE -
クロスプラットフォームツール：
クロスプラットフォームで動作するアプリを開発するためのIDE、フレームワーク、プラグイン、クラウド
サービス等の総称
Apache Cordova上でHTMLを利用するものが主流

7. クロスプラットフォームツール
の利用状況
• PhoneGapが高い利用率
• HTML開発者が最もクロスプラッ
トフォームを利用している
• 利用者はWeb技術を利用してモ
バイルアプリを開発している
VisionMobile: http://
www.developereconomics.com/pros-
cons-top-5-cross-platform-tools/

8. クロスプラットフォームツール
の要件
•習得コスト
• C#, JavaScript, HTML5…
•セキュリティ
• ストレージ暗号化、アプリロジック暗号化…
•開発効率
• Web IDE、mBaaS、デバッガー…
•既存資産の活用
• ライブラリの利用、開発ツールの利用…

9. Monaca
• クラウド/ローカルIDE
• アプリロジック/ストレージ暗号化
• リモートアップデート
• デバッグ環境
• EclipseやGrunt等の既存ツールの利用
• 既存システムとの連携（mBaas） https://ja.monaca.io

10. IBM Worklight
• eclipseベースのIDE
• アプリロジック/ストレージ暗号化
• リモートアップデート/ログ収集
• デバッグ環境
• 既存システムとの連携（mBaas）
• ネイティブアプリ開発も可能 http://www.slideshare.net/simontokyo/
ibm-worklighthtml5j-enter

11. Webの技術
JavaScriptライブラリ
UI系
アーキテクチャ系
DOM操作系
…
…
…

12. jQuery
•JavaScriptコードをより容易に記述できるようにす
るためのライブラリ
•煩雑なDOMのAPI、ブラウザ間の実装差等の問題を解
決
•多くの企業が支持しており、JavaScriptライブラリの
デファクトスタンダードとなっている
•jQuery Foundationというチームで保守されている
•MIT license

13. Zepto.JS
•jQueryのモバイル版のような位置付け
•jQueryよりも軽量
•jQuery APIと互換（完全ではない）
•MIT license

14. BackboneJS
•MVCフレームワーク
•コード量が削減されるわけではない
•MIT license

15. AngularJS
•MVCフレームワーク
•Googleによって開発
•双方向データバインディングやDIの機能を持ってい
る
•独自作法で記述する必要がある
•MIT license

16. ionic
•モバイルアプリ向けUIライブラリ
•AngularJS利用を想定
•Apache 2.0 license

17. OnsenUI
•モバイルアプリ向けUIライブラリ
•AngularJS利用想定
•Monaca IDEでデフォルト
•Apache 2.0 license

18. Webの技術
開発支援ツール
•Grunt
• タスクランナー
• 複雑化しているフロントエンド開発を自動化する
•Yo
• フロントエンド用プロジェクトの雛形生成ツール
•Bower
• フロントエンド用パッケージマネージャー
• Mavenのようなもの
•Yeoman
• 上記３ツールを統合したもの