1.
アプリ開発の可能性を広げるプラットフォーム
Cordova×業務システム
失敗しないモバイル開発の秘訣
アシアル株式会社
田中正裕 / @MASSIE
Developer Summit 2015 Summer

2.
アプリ開発の可能性を広げるプラットフォーム
自己紹介
田中正裕
アシアル株式会社 代表取締役
» Twitter: @massie
» 職務: CEO (Chief ExectiveEngineering Officer)
» HTML5エキスパート
» Cordovaユーザー会、発起人

3.
アプリ開発の可能性を広げるプラットフォーム
今日のテーマ
HTML5ハイブリッドアプリ
on
Cordovaを使った
エンタープライズ

4.
アプリ開発の可能性を広げるプラットフォーム
Webとネイティブの融合
ネイティブコード
HTML
コンテンツ
アプリケーション本体は
HTML5技術で実装
ハードウェア機能を利用可能
ネイティブアプリ形式で配布
HTML5ハイブリッドアプリ

5.
アプリ開発の可能性を広げるプラットフォーム
なぜCordova？
 スタンダードWeb
 クロスプラットフォーム
 さまざまな製品へのバンドル

6.
アプリ開発の可能性を広げるプラットフォーム
さ
業界標準となったCordova
様々なソリューションに組み込まれている

7.
アプリ開発の可能性を広げるプラットフォーム
CordovaとPhoneGap
誕生!
PhoneGapは
Adobe社のディストリに
オープンソース化
各社が開発協力
Cordovaと命名
by
2011年
Adobe社がNitobi社を買収
PhoneGapは「Cordova」に
2009年
Nitobi社がPhoneGapを開発
オープンソース製品
その結果
多くの企業がCordova開発に参加

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

9.
アプリ開発の可能性を広げるプラットフォーム
日々進化(1) ハードウェア
初代Xperia Xperia Z4
発売日: 2010年4月
Android 1.6 (後に2.1)
1GHz シングルコアCPU
384MBメモリー
ベンチマークスコア: 3361
発売日: 2015年6月
Android 5.0
2GHz オクタ(8)コアCPU
3GBメモリー
ベンチマークスコア: 52084
5年間で1500%もの
スピードアップ

10.
アプリ開発の可能性を広げるプラットフォーム
MacのJavaScript Automation
Rhino (JavaScript port to Java)
Intel XDK IoT Edition
Smart TV (Hybrid Cast)
Kinoma Create
jQuery
Ajax
Rich Internet App
日々進化(2) JavaScript言語環境
Web
IoT
汎用言語処理系
Node.js
Express Framework
サーバー
Cordova
NW.js(NodeWebkit)と
io.js
Electron
Windows 10
アプリ

11.
アプリ開発の可能性を広げるプラットフォーム
AmazonもSkypeもCordova
出典: AppBrain Stats
0% 5% 10% 15%
ビジネス
金融
医療
ヘルスケア
スポーツ
ショッピング
トラベル
ライフスタイル
ニュース
教育
全Androidアプリの5.83%に採用
Cordova / PhoneGap 5.83%
Unity 3D 4.11%
Adobe AIR 2.87%
Titanium Mobile 1.01%
Xamarin 欄外
クロスプラットフォーム導入状況
ビジネスアプリの割合が高い

12.
アプリ開発の可能性を広げるプラットフォーム
いざ作成！

13.
アプリ開発の可能性を広げるプラットフォーム
よくある失敗パターン
 仕様書は完璧、アプリは使いにくい
 一つのアプリに機能詰め込みすぎ
 構想半年、開発1年
 リリース後アップデートなし
 iOSとAndroidアプリが徐々に別物に
 OSアップデートでトラブル発生

14.
アプリ開発の可能性を広げるプラットフォーム
モバイルならではの開発事情
要
件
定
義
設
計
実
装
テ
ス
ト
・開発サイクルの短縮
・使い勝手の向上に、より注力
・プロトタイプ開発の重要性
・３年後には作り直しの覚悟
ア
ジ
ャ
イ
ル
開
発
Ｕ
Ｉ
プ
ロ
ト
タ
イ
ピ
ン
グ
開
発
実
機
テ
ス
ト
さ
ら
な
る
実
機
テ
ス
ト
従来型
ウォーターフォール
モバイルアプリ
成功パターン
ユーザー観察

15.
アプリ開発の可能性を広げるプラットフォーム
Cordova開発の留意点
 Single Page App、300ms Delay対策が必須。
 iOS、Android、Windowsで異なるWebViewエ
ンジン、違うCSS解釈。
 ネイティブ開発が「ゼロ」にはならない。
 早いバージョンアップ。セキュリティFIXも多い。

16.
アプリ開発の可能性を広げるプラットフォーム
モバイルアプリに特化した
開発プラットフォーム
そこで

17.
アプリ開発の可能性を広げるプラットフォーム
アプリ開発ソリューション
の必要性
 今の業務の延長線でモバイルアプリ開発に対応し
たい
 クロスプラットフォーム開発でも当然UIガイドラ
インに準拠するべき
 社内にMacを組み込めない、開発デバイスを共用
したい
 モジュール単位で開発を手伝ってほしい
 日本語による技術サポート・トレーニングがほし
い

18.
Monaca全体図

19.
アプリ開発の可能性を広げるプラットフォーム
特徴１: 選べる４つの開発環境
MonacaクラウドIDE
Monaca for Visual Studio
Monaca Localkit
Monaca CLI

20.
特徴２: 充実のテストツール
ステップ１:
ファイルを編集
ステップ２:
ライブリロードで
実機上ですぐに動作確認
コンパイル処理やUSB経由での実機転送などは一切不要！
実機は手元にある必要なし！

21.
特徴３: セットアップ不要のリモートビルド
Monacaクラウドを通じて、様々なプラットフォーム向けにビルド
WindowsマシンだけでもiOSアプリの開発が可能！
対応OS: Android・ iOS・Windows・Chrome Apps・Amazon FireOS

22.
特徴４: 超高速モバイルUIフレームワーク
• AngularJSベースのモバイルアプリ
• Custom Elementsで簡単設計
• OSに応じてUIを切り替え＋
CSSで簡単カスタマイズ
• UIガイドラインに準拠
▷ http://ja.onsen.io/

23.
特徴５: Cordovaコアを拡張
最新Blinkエンジンをアプリに組み込み。
Android 4.3未満WebView脆弱性にも対処します。
プログラムコードやアセットを暗号化。
リバースエンジニアリングによる被害を防ぎます。
HTML5
ASSET
ENCRYPTIO
N

24.
アプリ開発の可能性を広げるプラットフォーム
価格は無料～
Webサイトにサインアップするだけで使い始められます

25.
アプリ開発の可能性を広げるプラットフォーム
オンプレミスにも対応
フルカスタマイズ可能な「Monacaエンタープライズ」
• オフラインコード管理
• HTML5リソース暗号化
• セキュアストレージ
• アプリ自動更新
• 開発/技術サポート
• 研修、教育サポート
• 開発アカウント管理
価格： 15万円/月～（企業単位）

26.
アプリ開発の可能性を広げるプラットフォーム
Monaca is...
 Cordovaを使ったHTML5ハイブリッドアプリ開発環境。
 クラウドでもローカルでも開発できる。
 Onsen UIによる高品質でハイパフォーマンスなアプリ開発。
 日本語サポートやドキュメントを完備。
 オープン仕様への準拠でエンタープライズでも豊富な実績。
Monaca is not...
 プロプラエタリィ仕様のプラットフォームではありません。
 「コードを書かない」人のためのGUI開発ツールではありません。
 クローズドソースではありません。Fork us on GitHub!

27.
アプリ開発の可能性を広げるプラットフォーム
トレーニングも
http://monaca.mobi/ja/training/

28.
アプリ開発の可能性を広げるプラットフォーム
技術サポートも
http://monaca.mobi/ja/training/
Monacaに関する事であれば、
HTML5フレームワークやネイティ
ブコードについても対応します。
UI設計、コードレビュー、パフォー
マンスチューニングといった課題に
もお応えします。

29.
アプリ開発の可能性を広げるプラットフォーム
公式ガイドブック 発売中!
豊富なサンプル

30.
アプリ開発の可能性を広げるプラットフォーム
海外でも注目
PhoneGap Day EU
2013
HTML5 Dev Conf 2014 Spring
AngularU 2015

31.
祝☆100,000ユーザー達成！

32.
アプリ開発の可能性を広げるプラットフォーム
事例：ジャパンネット銀行
残高確認アプリ

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