デブサミ関西2014での講演資料です。 http://event.shoeisha.jp/devsumi/20140905/session/557/ 講演概要は下記の通りとなります。 業務システムにおいてもモバイルアプリを活用するケースが急増する中で、HTML5やJavaScriptといったWeb標準技術でマルチプラットフォームのモバイルアプリを開発するHTML5ハイブリッドアプリ開発への注目が集まっています。一方で、企業がモバイルアプリを開発、運用する際の課題となるのが、セキュリティ対策や開発ノウハウの不足です。 更に、業務アプリにおいては、既存データベースやERP、CRMなどのバックエンド側との接続や、従業員向けのアプリ配信の仕組みなども必要となり、B2Cアプリに比較してアプリ自体の開発以外に検討すべき事が多岐にわたります。 本セッションでは、Web技術と各種ツールを活用し、安全に効率的にエンタープライズモバイル・アプリの開発を行うためのポイントを解説いたします。

1. Developer Summit 2014 Kansai
Web技術で開発する
エンタープライズモバイルアプリ
アプリ開発の可能性を広げるプラットフォーム
アシアル株式会社
田中正裕/ @MASSIE

2. アプリ開発の可能性を広げるプラットフォーム
自己紹介
田中正裕
アシアル株式会社代表取締役
Twitter: @massie
E-mail: masahiro@asial.co.jp
アシアル執筆の最近の書籍

3. アシアル株式会社
フロントエンド：モバイルアプリ、JavaScript、HTML5
サーバーサイド：PHP、JavaScript、Groovy
その他：インフラ、教育事業など
アプリ開発の可能性を広げるプラットフォーム

4. 業務アプリは
「使う」から「作る」へ
アプリ開発の可能性を広げるプラットフォーム

5. 企業もモバイルファースト
 最適なアプリを最適なデバイスで使えるように
 業務アプリ（B2BやB2Eアプリ）の充実
 BYOD：作業環境をパーソナライズし、生産性を向上
アプリ開発の可能性を広げるプラットフォーム

6. 今後は、インテグレーション経験
業務ノウハウを持つSI企業が主役
カスタムB2Eアプリ顧客ニーズに沿った
パッケージソフト/SaaSの
モバイルアプリ化
アプリ開発の可能性を広げるプラットフォーム
企業モバイル活用の段階
B2Eアプリの導入
メールと
インターネットの閲覧
• MDM（セキュリティ）
• VPN（社内システム連携）
ソリューション提案
モバイル端末導入に長けた
ソリューションベンダーが主役

7. 企業モバイル視点の技術選定
アプリ開発の可能性を広げるプラットフォーム
複数の対応プラットフォーム
• BYODの浸透で、iPhoneとAndroidの両方に対応する必要がある
• 取引先の端末を限定することができない
• 特定のプラットフォームに縛られることにリスクを感じる
開発効率・導入コスト
• 今のチームで開発できるようエンジニアの技術スキルとマッチした開発手法を採用したい
• 新技術に伴う教育コストを下げたい
開発技術
• ロックオンされない技術を使用したい
• 最先端の技術よりも、安定性や継続性を重要視したい
運用
• プライベートクラウドやイントラネットに配備された企業バックエンドと接続したい
• 数年間使うことを想定して、メンテナンスコストを抑えたい

8. アプリ開発の可能性を広げるプラットフォーム
そこでHTML5。
HTML5は業務アプリに最適
 デバイスの多様性に対応
 iPhone、Android、WindowsなどOSの種類を問わない
 スクリーンサイズに合わせた最適化が容易
 既存ノウハウの活用
 HTML、JavaScript、CSSの組み合わせで開発が可能
 ブラウザーの進化
 オフライン対応やクライアント側ストレージなどが充実
 3Dグラフィックや高機能オーディオ等も実装

9. ブラウザーの壁を越える
HTML5ハイブリッドアプリ
・Web技術を用いた開発
・JavaScript経由ネイティブAPI
・マルチOS・スクリーン対応
アプリ開発の可能性を広げるプラットフォーム
HTML
コンテンツ
ネイティブコード
iOS、Android
ネイティブアプリ形式
・デバイス機能へのアクセス
・Bluetooth、NFC、GPS等
・OSの独自機能の活用
・プッシュ通知、セキュリティ
・サイドローディングにも対応

10. HTML5ハイブリッドアプリ
の仕組み
アプリ開発の可能性を広げるプラットフォーム
コ
ー
ル
バ
ッ
ク
HTML5
CSS
JavaScript
WebViewエンジン
ネイティブ
API
ネイティブアプリ

11. HTML5ハイブリッドアプリ
の仕組み
アプリ開発の可能性を広げるプラットフォーム
コ
ー
ル
バ
ッ
ク
HTML5
CSS
JavaScript
WebViewエンジン
ネイティブ
API
いくつかの方式がある：
専用インターフェースを用いる方法
専用プロトコルを使う方法
リフレクションを使う方法

12. HTML5ハイブリッドアプリ
の仕組み
アプリ開発の可能性を広げるプラットフォーム
コ
ー
ル
バ
ッ
ク
HTML5
CSS
JavaScript
WebViewエンジン
ネイティブ
API
WebViewが画面を占拠す
るのでFlashのように、ブ
ラウザー内に描画するの
は難しい。

13. HTML5ハイブリッドアプリ
の仕組み
アプリ開発の可能性を広げるプラットフォーム
コ
ー
ル
バ
ッ
ク
HTML5
CSS
JavaScript
WebViewエンジン
ネイティブ
API
iOSではUIWebViewかWKWebView。
AndroidではWebViewを用いる。

14. HTML5ハイブリッドアプリ
の仕組み
アプリ開発の可能性を広げるプラットフォーム
コ
ー
ル
バ
ッ
ク
の
仕
組
み
HTML5
CSS
JavaScript
WebViewエンジン
ネイティブ
API
詳しくは
この本を買おう

15. ハイブリッドアプリの種類
W3CのPackaged Web Apps（Widgets）で仕様が定められたインター
フェースを持つOSSライブラリー「Cordova」を基盤とするもの。
独自にWebViewを拡張し、ネイティブと連携するインターフェースを提供
するもの。
アプリ開発の可能性を広げるプラットフォーム
A. HTML5+JavaScriptタイプ
A-1. Cordovaタイプ
A-2. 独自実装タイプ
B. 単一言語タイプ
HTML5ではない方法で、単一言語でクロスプラットフォームを実現するも
の。一般的には、ハイブリッドアプリとは呼ばれない。

16. ハイブリッドアプリ製品群
A. HTML5+JavaScriptタイプ
PhoneGap、Monaca、IBM Worklight、Sencha等
A-2. 独自実装タイプ
Applican、Triaina（mixi）、trigger.io
Titanium、Xamarin、Unity 3D、Herlock等
アプリ開発の可能性を広げるプラットフォーム
A-1. Cordovaタイプ
B. 単一言語タイプ

17. ハイブリッドアプリ
よくある質問
アプリ開発の可能性を広げるプラットフォーム
Cordovaファミリー
（MonacaやPhoneGap）

18. パフォーマンスが悪い。
特にAndroid。
課
題
 ネイティブと比べると遅いのは事実です。
アプリ開発の可能性を広げるプラットフォーム
 遅くなる要因
 DOMの操作でリフローが発生している
 クリックイベントで処理をしている
 GPUを使って描画をしていない
 WebViewエンジンがネイティブと比べて遅い
これらは（ある程度）解決できる方法があります。

19. アプリ開発の可能性を広げるプラットフォーム
パフォーマンス改善策
タッチイベントを使う
onclickではダブルクリック判定のため、300ms Delayが発
生する。回避策としてontouchstartを使用する。
例：fastclickライブラリーなどを使用する
before: <a onclick="hogehoge()">Tap Me</a>
after: <a ontouchdown="hogehoge()">Tap Me</a>
Hammer.jsを使うと、スワイプやピンチといった
ジェスチャーを認識させることも可能。

20. パフォーマンス改善策
DOMリフローを出来るだけなくす
GPUが有効になるCSS3プロパティを用いると良い。
例：famo.usフレームワーク
パフォーマンス改善策
CSSトランジションを有効に使う
Chrome Dev Toolsを使って、どの部分が再描画されてい
るかを確認しよう。
アプリ開発の可能性を広げるプラットフォーム

21. アプリ開発の可能性を広げるプラットフォーム
パフォーマンス改善策
WebViewを交換する
アプリに最新のブラウザーエンジン（Chromiumベース）
を組み込む方法。IntelのCrosswalkエンジンなど。
 パフォーマンスが大幅に向上。最新機能も使用可能
 デバイスやOSの差異が発生しない
 USB Debuggingが全端末で利用できる
ただし...
 Android 4以上でないと利用できない
 アプリのサイズが15MB程度増加し、アーキテク
チャー依存（ARMかIntel）に。

22. アプリ開発の可能性を広げるプラットフォーム
一部はネイティブで
書かないといけない
ネイティブAPIを呼び出す際は、Objective-CやJavaで記述
する必要がある
 Cordova Plugin Registryを検索すると、お目当てのプ
ラグインが見つかるかも
 http://plugins.cordova.io/
 OSSプラグインをベースに必要な部分だけを改修する
方法がおすすめ
課
題

23. セキュリティに気をつける
 アプリ内に配置されるソースコードが丸見え
アプリ開発の可能性を広げるプラットフォーム
 暗号化ストレージが
暫定的な対策：難読化（uglify等）
 現在Monacaで暗号化用Cordovaプラグインを開発中。
近日リリース予定
 IBM社Worklightにも同様の仕組みが既に実装されてい
ます。

24. JavaScriptの開発体制を作る
アプリ開発の可能性を広げるプラットフォーム
推奨
フレームワークを全面的に採用する
候補
AngularJS、Knockout.js、WinJS等
コーディングルールは：Google JS Style Guide
※ jQueryやBackbone.jsは大規模では難しい
Onsen UI等のAngularJSベースのフレームワークを使うと
モバイル開発が簡単に。

25. JavaScriptや実機端末での
デバッグが大変
課
題
最新WebViewエンジン＋Dev Toolsを使いこなそう。
・ブレークポイントやステップ実行
・プロファイル（関数ごとの実行速度の把握）
・レンダリングのボトルネック検証
など、PCと遜色ないデバッグが可能です。
アプリ開発の可能性を広げるプラットフォーム
iPhoneをChromeでリモートデバッグ
・ios-webkit-proxyを使うとMac上のChromeでデバッグ
・ios-webkit-proxy-win32を使うと、Win上のChromeでデバッグ

26. アプリ開発の可能性を広げるプラットフォーム
Chrome Dev Toolsで
デバッグするイメージ

27. 実際に開発が楽になるの？
ネイティブ
じゃないとできない
アプリ開発の可能性を広げるプラットフォーム
一言で説明するのは難しい。
実際WebGLで
ゲームアプリも作れたりする。
ネイティブアプリ開発
Webでも
出来る
難しい
ハイブリッドアプリ開発
一線を越えると
ハイブリッドアプリ
の工数が上がる

28. ハイブリッドアプリ開発の
他と比べたメリットは？
アプリ開発の可能性を広げるプラットフォーム
 開発チームを1つにできる
 開発時だけでなく、メンテナンス時にも効果がある
 Web制作チームがアプリ開発できる
 ただしSPA（シングルページアプリ）の知識が必要
 プラグインでネイティブ機能も何とかなる
 Webアプリだと要件変更で対応できない
 アプリの「自動更新」に対応できる
 起動時に強制的にプログラムをアップデート可能

29. アプリ開発の可能性を広げるプラットフォーム
Monacaの紹介

30. 業務アプリ開発の本命はCordova
各社のエンタープライズ向けモバイル開発基盤はCordovaを採用
IBM
Worklight
アプリ開発の可能性を広げるプラットフォーム
PhoneGap
Monaca
Sencha
MS Visual
Studio
SAP Mobile
Platform

31. Cordovaベースの
ハイブリッドアプリ開発の課題
アプリ開発の可能性を広げるプラットフォーム
• ユーザーインターフェース
 ネイティブアプリのようなスムーズなUIの実現
• 実行パフォーマンス
 ストレスのない画面描画
• セキュリティ
 HTMLやJavaScriptコードの漏洩を防止
• 開発環境
 開発効率を上げるためのツールやライブラリーの充実
• ノウハウ
 ナレッジベースの共有

32. Monaca製品ラインアップ
Monaca クラウドIDE
ブラウザベースのハイブリッドアプリ開発環境
Monaca Localkit
スタンドアロン型開発をするための、ローカル開発
環境
Monacaデバッガー
実機でのデバッグとテストをサポート
Onsen UI
HTML5ハイブリッドアプリ向けフレームワーク
アプリ開発の可能性を広げるプラットフォーム

33. アプリ開発の可能性を広げるプラットフォーム
MonacaクラウドIDE
• ブラウザベースのフル機能IDE
• モバイルとPC開発に対応
• iOS
• Android
• Windows 8
• Chrome Apps
• バックエンドやビルド機能

34. Monacaデバッガー
• ハイブリッド開発の実行ツール、
コンパイルせずに開発と動作確認
• Cordova APIやプラグイン追加にも
対応
同じアプリを実機上で簡単に動作確認できます。ライブリロード対応。

35. Onsen UIフレームワーク
• AngularJSベースのモバイルアプリ
• Custom Elementsで簡単設計

36. Monaca Localkit
• ローカルで開発できるMonaca

37. Monacaは初心者からプロの方まで使える
HTML5ハイブリッドアプリ開発環境
どちらのスタイルでも
小規模・学習ユースプロ・業務ユース
アプリ開発の可能性を広げるプラットフォーム
• サインアップだけで開発開始
• ローカルPCのセットアップが不要
• プッシュ通知やユーザー管理も
• 料金は、無料から
• 教育目的でも利用可能
• 好きなIDEやエディタで開発
• GitやGrunt等との連携
• より高度なデバッグ機能
• 社内システムへの接続
• Cordovaプラグインの作成

38. アプリ開発の可能性を広げるプラットフォーム
Monacaご利用料金
機能Basic Personal Professional Business
料金無料月980円月5,000円月8,000円
ストレージ容量250MB 1GB 10GB 制約なし
Cordova
プラグイン組込
× × ○ ○
チーム機能△
※ソースコード閲覧不可
△
※ソースコード閲覧不可
○ ○
サポートフォーラムフォーラム1チケット/月2チケット/月

39. 業務アプリ開発向けに導入しやすい仕組みを提供。
アプリ開発の可能性を広げるプラットフォーム
エンタープライズ版
 ローカル開発（オフライン開発）
 ソースコードの暗号化
 アプリの自動アップデート
 暗号化ストレージ
 キャッシュデータのリモートワイプ
 社内システムへのアクセス

40. 既に60,000アカウント
2000以上のアプリが
ストアでリリース済み
教育機関
導入企業
アシックス株式会社様
株式会社テレビ朝日様
株式会社タニタ様
システムインテグレーター様
開発ベンダー様

41. アプリ開発の可能性を広げるプラットフォーム
トライアル募集中
詳しくはブースまで！デモも実施中。
Monaca Localkit Monacaエンタープライズ版
 好きなツールでローカル開発
 クラウドとの同期も可能
 Grunt、Git、SASS等にも対応
 もちろんデバッガーやビルドは
セットアップ不要
 完全オフライン開発に対応
 社内ERPやRDBMSにアクセス
 トレーニングやサポート体制
 暗号化やコードセキュリティ

42. ありがとうございました
Masahiro Tanaka
Founder & CEO, Asial Corporation
Twitter: @massie
E-mail: masahiro@asial.co.jp
アプリ開発の可能性を広げるプラットフォーム