Monacaによるモバイルアプリ開発ことはじめ

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

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

ハイブリッドアプリの概要

モバイルアプリ開発に関する課題
開発⾔語がOS毎に異なるため、
1. 開発⼯数がかかる
2. ソースコード管理の複雑化
3. エンジニアの確保が困難
×
×

ハイブリッドアプリの登場
ハイブリッドアプリはWebの技術を使って開発しますが、⽣成さ
れるアプリはネイティブアプリとほぼ同等のものになります。
×ネイティブアプリ Webアプリ
ネイティブアプリとWebアプリ、２つのアプリの特徴を兼ね備え
たアプリを「ハイブリッドアプリ」と呼びます。

従来の開発⼿法とハイブリッドアプリ
の⽐較
特徴・性能
ネイティブ
アプリ
Webアプリ
ハイブリッド
アプリ
クロスプラットフォーム対応 × ○ ○
端末へのインストール ○ × ○
マーケットでの配布 ○ × ○
オフラインでの利⽤ ○ × ○
端末固有の機能の利⽤ ○ △ ○
アプリ実⾏速度 ○ △ △

HTML5モバイルアプリ⽤フレーム
ワーク
Cordova（旧PhoneGap）
Apacheソフトウェア財団

Cordovaの仕組み
Cordova層
HTML5層
アプリ本体は
HTML5で実装
CordovaがOSに
合わせたネイティブ
コードを提供
OS
1. JavaScriptでAPI実⾏
2. Cordovaがネイティブ
機能を実⾏

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

Monacaの紹介

Cordova開発環境：Monaca
18万⼈が利⽤する
Cordova開発環境
実機でのリアルタイム
検証が可能
UIフレームワーク
Onsen UI搭載
安⼼の⽇本語サポート
Monacaは⽇本でもっとも普及しているCordova開発
環境の⼀つです。

Monacaの仕組み
IDE、ビルド環境はクラウドサービスとして提供。
どんな環境でもアプリ開発を始められます。
IDE デバッガー
ビルドシステム
クラウド
ターゲットOSに
合わせた環境で
アプリをビルド
開発環境として提供
ソースコードは
クラウド上に

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

開発事例紹介

テレビ朝⽇
みんながカメラマン
• ネイティブ開発と⽐較してコスト半減
• Webサイトのみで展開していたがアプリ要望対応後
投稿数が3倍に増加

タニタヘルスリンク
ヘルスプラネット
• 体組成計連携の健康管理アプリを2ヶ⽉で開発
• BluetoothやNFCを使って計測データを受信
• クラウドサービスとも⾃動連携

KDDIウェブコミュニケーションズ
内線アプリ
• クラウド電話API「Twilio」を⽤いた内線アプリ
• 全社員のモバイル端末を内線化

⽇本将棋連盟
棋譜記録アプリ・対局時計アプリ
• プロの対局での棋譜記録を⼿書きからアプリ化
• アプリを通じてリアルタイムに棋譜を中継
• プログラミング未経験者が⼀⼈でアプリ開発を完遂

ジャパンネット銀⾏
残⾼確認アプリ
• Onsen UIでハイパフォーマンスなUIを構築
• Monacaの暗号化プラグインを利⽤することでリバー
スエンジニアリング対策を実施

ハイブリッドアプリは
パフォーマンスが課題？

モバイルアプリ向けフレームワーク
Onsen UI
• ハイパフォーマンスなUIを実現
• プラットフォームを判別して⾃動でスタイルが変化

Onsen UI
• ハイパフォーマンスなUIを実現
• プラットフォームを判別して⾃動でスタイルが変化

豊富なUIパーツを利⽤可能

使い⽅は独⾃タグを記述するだけの
簡単設計
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>

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

デモ

DOMツリーへの変更はパフォーマ
ンス低下の原因になる
• DOMツリーに要素の追加な
どの変更処理を加えると、
DOMの再構築＆再描画の処
理が都度発⽣します
• 複数の要素をDOMに加える
ときはDocumentFragment
を利⽤して、複数の要素をま
とめてから⼀気にツリーに追
加しましょう

ご清聴ありがとうございました

Monacaによるモバイルアプリ開発ことはじめ

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Similar to Monacaによるモバイルアプリ開発ことはじめ

Similar to Monacaによるモバイルアプリ開発ことはじめ (20)

More from アシアル株式会社

More from アシアル株式会社 (20)

Monacaによるモバイルアプリ開発ことはじめ