カサレアル、アシアル共催セミナー「ハイブリッドアプリ開発最前線　使いやすいJavaScriptフレームワークを見極めよう」で利用したスライド資料です。

1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaによる
モバイルアプリ開発
ことはじめ
アシアル株式会社
⽣形 可奈⼦

2. 2URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
⽣形 可奈⼦（うぶかた かなこ）
⾃⼰紹介
アシアル株式会社
Monaca / Onsen UI エバンジェリスト
モナカプレス 編集⻑
セミナー講師・書籍執筆・オウンドメディア運営など、モバイル
アプリ開発技術の普及・促進を⽬的とした活動を⾏っています。
https://press.monaca.io

3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの概要

4. 4URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
モバイルアプリ開発に関する課題
開発⾔語がOS毎に異なるため、
1. 開発⼯数がかかる
2. ソースコード管理の複雑化
3. エンジニアの確保が困難
×
×

5. 5URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの登場
ハイブリッドアプリはWebの技術を使って開発しますが、⽣成さ
れるアプリはネイティブアプリとほぼ同等のものになります。
×ネイティブアプリ Webアプリ
ネイティブアプリとWebアプリ、２つのアプリの特徴を兼ね備え
たアプリを「ハイブリッドアプリ」と呼びます。

6. 6URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
従来の開発⼿法とハイブリッドアプリ
の⽐較
特徴・性能
ネイティブ
アプリ
Webアプリ
ハイブリッド
アプリ
クロスプラットフォーム対応 × ○ ○
端末へのインストール ○ × ○
マーケットでの配布 ○ × ○
オフラインでの利⽤ ○ × ○
端末固有の機能の利⽤ ○ △ ○
アプリ実⾏速度 ○ △ △

7. 7URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
HTML5モバイルアプリ⽤フレーム
ワーク
Cordova（旧PhoneGap）
Apacheソフトウェア財団

8. 8URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Cordovaの仕組み
Cordova層
HTML5層
アプリ本体は
HTML5で実装
CordovaがOSに
合わせたネイティブ
コードを提供
OS
1. JavaScriptでAPI実⾏
2. Cordovaがネイティブ
機能を実⾏

9. 9URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
プラグインでネイティブ機能を拡張
ネイティブの各種機能は、プラグイン形式で実装され
ています。
標準プラグインの他にも、第三者によって提供された
プラグインを取り込んで機能を拡張できます。
標準プラグイン
・カメラ
・位置情報
・電話帳
・加速度センサー
・ファイルアクセス
サードパーティ製
プラグイン
・Bluetooth
・プッシュ通知
・アプリ内課⾦
・バーコード読取
・IoT
⾃作プラグイン

10. 10URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの紹介

11. 11URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Cordova開発環境：Monaca
18万⼈が利⽤する
Cordova開発環境
実機でのリアルタイム
検証が可能
UIフレームワーク
Onsen UI搭載
安⼼の⽇本語サポート
Monacaは⽇本でもっとも普及しているCordova開発
環境の⼀つです。

12. 12URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの仕組み
IDE、ビルド環境はクラウドサービスとして提供。
どんな環境でもアプリ開発を始められます。
IDE デバッガー
ビルドシステム
クラウド
ターゲットOSに
合わせた環境で
アプリをビルド
開発環境として提供
ソースコードは
クラウド上に

13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaデバッガー
①ファイルを編集 ②実機ですぐに動作確認
コンパイル処理やUSB経由での実機転送などは不要。
デバッグ専⽤アプリがネットワーク経由で変更箇所を
取得するため、リアルタイムに動作検証できます。
推奨環境
Google Chrome

14. 14URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
開発事例紹介

15. 15URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
テレビ朝⽇
みんながカメラマン
• ネイティブ開発と⽐較してコスト半減
• Webサイトのみで展開していたがアプリ要望対応後
投稿数が3倍に増加

16. 16URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
タニタヘルスリンク
ヘルスプラネット
• 体組成計連携の健康管理アプリを2ヶ⽉で開発
• BluetoothやNFCを使って計測データを受信
• クラウドサービスとも⾃動連携

17. 17URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
KDDIウェブコミュニケーションズ
内線アプリ
• クラウド電話API「Twilio」を⽤いた内線アプリ
• 全社員のモバイル端末を内線化

18. 18URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
⽇本将棋連盟
棋譜記録アプリ・対局時計アプリ
• プロの対局での棋譜記録を⼿書きからアプリ化
• アプリを通じてリアルタイムに棋譜を中継
• プログラミング未経験者が⼀⼈でアプリ開発を完遂

19. 19URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ジャパンネット銀⾏
残⾼確認アプリ
• Onsen UIでハイパフォーマンスなUIを構築
• Monacaの暗号化プラグインを利⽤することでリバー
スエンジニアリング対策を実施

20. 20URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリは
パフォーマンスが課題？

21. 21URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
モバイルアプリ向けフレームワーク
Onsen UI
• ハイパフォーマンスなUIを実現
• プラットフォームを判別して⾃動でスタイルが変化

22. 22URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Onsen UI
• ハイパフォーマンスなUIを実現
• プラットフォームを判別して⾃動でスタイルが変化

23. 23URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
豊富なUIパーツを利⽤可能

24. 24URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
使い⽅は独⾃タグを記述するだけの
簡単設計
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>

25. 25URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaによるアプリ開発まとめ
l Web標準技術のHTML5で開発ができる
l 多くの端末やOSに、ワンソースで対応できる
l デバイス固有の機能を活⽤することが可能
l ネイティブUIを構築できるUIフレームワークを搭載
l HTML5アプリの弱点を補うプラグインも提供

26. 26URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
デモ

27. 27URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
DOMツリーへの変更はパフォーマ
ンス低下の原因になる
• DOMツリーに要素の追加な
どの変更処理を加えると、
DOMの再構築＆再描画の処
理が都度発⽣します
• 複数の要素をDOMに加える
ときはDocumentFragment
を利⽤して、複数の要素をま
とめてから⼀気にツリーに追
加しましょう

28. 28URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ご清聴ありがとうございました