NSA ニュービジネス委員会 セミナー
モバイルアプリ開発業務における
Monacaの活⽤用
アプリ開発の可能性を広げるプラットフォーム
アシアル株式会社
塚⽥田 亮亮⼀一

アプリ開発の可能性を広げるプラットフォーム
⾃自⼰己紹介
塚⽥田 亮亮⼀一
アシアル株式会社
マーケティング担当取締役
東京餃⼦子通信 編集⻑⾧長
E-mail: ryo@asial.co.jp

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

HTML5ハイブリッドアプリ
開発へ注⼒力力
HTML5アプリ
技術サポート
アプリ開発の可能性を広げるプラットフォーム
HTML５アプリ
開発
Monaca
Onsen UI
KidoZen
技術情報
書籍執筆
HTML5技術者
トレーニング

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

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

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

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

クロスプラットフォーム開発の概要
iOS (iPhone, iPad)
Android
Windows
・・・
1つのソースコードで、複数のOSに対応する技術
アプリ開発の可能性を広げるプラットフォーム

クロスプラットフォームの例例
ブラウザーという共通プラットフォームによって
WebサイトはOSや端末の種類に関わらず
同じコンテンツを表⽰示できる
アプリ開発の可能性を広げるプラットフォーム
HTML

クロスプラットフォーム
ではない例例
デスクトップアプリモバイルアプリ
アプリ開発の可能性を広げるプラットフォーム
スタートメニューから
起動する
アプリ
マーケットから
インストールする
アプリ

クロスプラットフォーム
ではない例例
デスクトップアプリモバイルアプリ
“ネイティブアプリ“
アプリ開発の可能性を広げるプラットフォーム
スタートメニューから
起動する
アプリ
マーケットから
インストールする
アプリ
と呼ばれます

アプリ開発の可能性を広げるプラットフォーム
アプリの活⽤用
u オフライン対応
u プッシュ通知
u ダウンロード課⾦金金、アイテム課⾦金金
u O2O、Felica、iBeacon等の連携
u IoT（Internet of Things）、デバイス通信
u バックグラウンド実⾏行行

ネイティブ開発の課題
u OSごとに開発を進めていく必要がある
u 異異なった開発⾔言語や技術スキル
アプリ開発の可能性を広げるプラットフォーム
u リリース後のメンテナンス

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

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

アプリ開発の可能性を広げるプラットフォーム
開発⼿手法の⽐比較
Webアプリハイブリッドアプリネイティブアプリ
開発⾔言語HTML5、JavaScript、CSSObjective-‐‑‒CやJava
機能Webブラウザーが備える
機能のみ利利⽤用可能
JavaScriptから
ネイティブの機能を
呼び出せる
端末やOSが持つすべて
の機能を利利⽤用可能
開発環境Webアプリ⽤用
開発環境
ハイブリッドアプリを
サポートする開発環境
iOS、Android等で
別々の開発環境
クロスプラットフォーム○×開発⾔言語⾃自体が異異なる
実⾏行行速度度
△
Webブラウザーが実⾏行行エン
ジン
○
ソースコードを端末上に
保存することが可能
◎
OSが直接実⾏行行する
オフライン対応
△
キャッシュを⽤用いて⼀一部オ
フライン対応も可能
◎
端末内にプログラムが配置
アプリの配布⽅方法Webサイトにアクセス
マーケットへの登録は不不可マーケットの登録が原則
メンテナンス⽅方法サーバーから配信するため
常に最新状態をキープ可能
ネイティブ部分はマー
ケット経由の更更新。
HTML5部分は任意のタイ
ミングで更更新可能
アップデートのたびに
マーケット登録。更更新は
ユーザー次第

ハイブリッドアプリの例例
アプリ開発の可能性を広げるプラットフォーム

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

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

ハイブリッドアプリ⽤用
フレームワーク
アプリ開発の可能性を広げるプラットフォーム
PhoneGap
アドビシステムズ
Cordova
Apacheソフトウェア財団

業務アプリ開発の本命はCordova
各社のエンタープライズ向けモバイル開発基盤はCordovaを採⽤用
アプリ開発の可能性を広げるプラットフォーム
PhoneGap
Monaca
Sencha
MS Visual
Studio
IBM
Worklight
SAP Mobile
Platform
34% PhoneGap
21% Titanium
19% Adobe AIR
12% Sencha
11% Qt mobile
9% Unity
7% Corona
7% Mono
6% marmalade
Source: Developer Enconomics 2013 | www.developerEconomics.com | 2013

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

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

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

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

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

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

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

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

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

エンタープライズmBaaS KidoZen

エンタープライズ向けに特
化したmBaaS機能
アプリ開発の可能性を広げるプラットフォーム
u Monacaエンタープライズのオプションとして提供
u 既存のバックエンドシステムとの連携用コネクター
u Active Directory、SAP、Oracle、SalesForce等との連携
u LDAP、Active Directory等の認証基盤との連携
u アプリ開発者はKidoZenのAPIのみを意識識
u データ仮想化でシンプルなモバイルアプリ開発
u アプリから各データソースは共通API化
u データソースレベルでのセキュリティコントロール
u ⼀一般的なmBaaS機能の提供
u セキュアデータストレージ機能
u プッシュ通知
u ユーザー認証
u 選べるシステム環境
u クラウドでもオンプレミスでも

アプリストア＆データ分析
機能
u 開発後の企業内でのアプリ運⽤用もサポートする各種機
能を提供
u 企業内アプリストア機能
アプリ開発の可能性を広げるプラットフォーム
u アプリ配布を⼀一元管理理
u ユーザー毎のマイストアを提供
u 分析・レポーティング機能
u アプリの利利⽤用分析
u クラッシュレポート

既に60,000アカウント
2000以上のアプリが
ストアでリリース済み
教育機関
導⼊入企業
アシックス株式会社様
株式会社テレビ朝⽇日様
株式会社タニタ様
⼤大⼿手Sier、情シス部⾨門等等

（株）タニタヘルスリンク様
Health Planet
HealthPlanetアプリは体組成や歩数、⾎血圧、⾎血糖値な
どの健康データを管理理することができます。本アプリ
では、Bluetooth内蔵の体組成計と連携して⾃自動的に体
組成データをアプリ内に取り込むことができます。
対応機種：
Android、iPhone
テクノロジー： HTML5、CSS3、JavaScript、
Monaca、Bluetooth
開発期間：2.5ヶ⽉月(Andoridプリインストール版)
開発体制：3名

（株）アシックス様
ASICS SHOE FINDER
アシックスストア東京の開店の
⽬目⽟玉のツールとして公開
計測データを元に、おすすめシューズを
iPadに表⽰示する接客⽀支援アプリ。現在では
全世界の基幹店で導⼊入
開発技術：HTML5、CSS3、JavaScript
対応機種：iPad
開発期間：2ヶ⽉月

HTML5ハイブリッドアプリ
開発の技術⽀支援
アプリ開発の可能性を広げるプラットフォーム
u HTML5ハイブリッドアプリ開発
u UI/UX設計、デザイン
u アプリケーション設計、開発
u Cordovaプラグイン開発
u HTML5ハイブリッドアプリ開発ヘルプデスクサービス
u HTML5、Cordova、プラグイン、AngularJS等、HTML５ハ
イブリッドアプリ開発に必要な技術をトータルにサポート
u HTML5ハイブリッドアプリ開発研修サービス
u HTML5、JavaScript⼊入⾨門講座
u HTML5ハイブリッドアプリ開発講座
u HTML5プロフェッショナル認定試験対策講座

Monaca
開発パートナー制度度
(1) Monaca公式サイトでご紹介
会社概要、アプリ開発実績、得意分野等をご紹介させていただきます
(2) 共同マーケティング
共同プレスリリース、共同セミナー、展⽰示会出展などを通じ、
開発パートナー様のアプリ開発事業の拡⼤大をご⽀支援いたします
(3) パートナーロゴの利利⽤用
パートナーロゴを⾃自社サイトやその他販促物にご利利⽤用頂く事が可能です
(4) アプリ開発の技術サポート
Monacaを⽤用いたアプリ開発の技術⽀支援やプラグイン開発のお⼿手伝いをいたします
(5) セミナー・トレーニングプログラム
開発パートナー様向けにMonacaを使ったトレーニングプログラムを提供、
技術セミナーを開催いたします
アプリ開発の可能性を広げるプラットフォーム

アプリ開発の可能性を広げるプラットフォーム
まとめ
u 今後業務システムのモバイル化のニーズが⾼高まる
u マルチプラットフォーム要件は必須
u HTML5ハイブリッドアプリ開発が有⼒力力
u 既存のWeb開発エンジニアでアプリ開発が可能
u HTML5ハイブリッドアプリ開発の課題はほぼ解決
されてきた
u 専⽤用の開発環境であるMonacaがオススメ

無料料セミナー＠御茶茶ノ⽔水
「HTML5が創りだす新たな世界」
LPI-Japan 理理事⻑⾧長 成井 弦 様
「 HTML5で加速するモバイルアプリ開発 」
アシアル株式会社 代表取締役 ⽥田中正裕
http://www.asial.co.jp/seminar/

ありがとうございました
アプリ開発の可能性を広げるプラットフォーム
QA