Cordova×業務システム：失敗しないモバイル開発の秘訣
Your SlideShare is downloading.
×
Check these out next
More Related Content
Slideshows for you (20)
Viewers also liked (8)
Similar to 【デブサミ関西2014】Web技術で作るエンタープライズアプリ (20)
More from アシアル株式会社 (15)
Recently uploaded (20)
【デブサミ関西2014】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 アプリ開発の可能性を広げるプラットフォーム
