Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Monacaによるモバイルアプリ開発ことはじめ

1,787 views

Published on

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

Published in: Engineering
  • Be the first to comment

Monacaによるモバイルアプリ開発ことはじめ

  1. 1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaによる モバイルアプリ開発 ことはじめ アシアル株式会社 ⽣形 可奈⼦
  2. 2. 2URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ⽣形 可奈⼦(うぶかた かなこ) ⾃⼰紹介 アシアル株式会社 Monaca / Onsen UI エバンジェリスト モナカプレス 編集⻑ セミナー講師・書籍執筆・オウンドメディア運営など、モバイル アプリ開発技術の普及・促進を⽬的とした活動を⾏っています。 https://press.monaca.io
  3. 3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリの概要
  4. 4. 4URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. モバイルアプリ開発に関する課題 開発⾔語がOS毎に異なるため、 1. 開発⼯数がかかる 2. ソースコード管理の複雑化 3. エンジニアの確保が困難 × ×
  5. 5. 5URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリの登場 ハイブリッドアプリはWebの技術を使って開発しますが、⽣成さ れるアプリはネイティブアプリとほぼ同等のものになります。 ×ネイティブアプリ Webアプリ ネイティブアプリとWebアプリ、2つのアプリの特徴を兼ね備え たアプリを「ハイブリッドアプリ」と呼びます。
  6. 6. 6URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 従来の開発⼿法とハイブリッドアプリ の⽐較 特徴・性能 ネイティブ アプリ Webアプリ ハイブリッド アプリ クロスプラットフォーム対応 × ○ ○ 端末へのインストール ○ × ○ マーケットでの配布 ○ × ○ オフラインでの利⽤ ○ × ○ 端末固有の機能の利⽤ ○ △ ○ アプリ実⾏速度 ○ △ △
  7. 7. 7URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. HTML5モバイルアプリ⽤フレーム ワーク Cordova(旧PhoneGap) Apacheソフトウェア財団
  8. 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. 9. 9URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. プラグインでネイティブ機能を拡張 ネイティブの各種機能は、プラグイン形式で実装され ています。 標準プラグインの他にも、第三者によって提供された プラグインを取り込んで機能を拡張できます。 標準プラグイン ・カメラ ・位置情報 ・電話帳 ・加速度センサー ・ファイルアクセス サードパーティ製 プラグイン ・Bluetooth ・プッシュ通知 ・アプリ内課⾦ ・バーコード読取 ・IoT ⾃作プラグイン
  10. 10. 10URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaの紹介
  11. 11. 11URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Cordova開発環境:Monaca 18万⼈が利⽤する Cordova開発環境 実機でのリアルタイム 検証が可能 UIフレームワーク Onsen UI搭載 安⼼の⽇本語サポート Monacaは⽇本でもっとも普及しているCordova開発 環境の⼀つです。
  12. 12. 12URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaの仕組み IDE、ビルド環境はクラウドサービスとして提供。 どんな環境でもアプリ開発を始められます。 IDE デバッガー ビルドシステム クラウド ターゲットOSに 合わせた環境で アプリをビルド 開発環境として提供 ソースコードは クラウド上に
  13. 13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Monacaデバッガー ①ファイルを編集 ②実機ですぐに動作確認 コンパイル処理やUSB経由での実機転送などは不要。 デバッグ専⽤アプリがネットワーク経由で変更箇所を 取得するため、リアルタイムに動作検証できます。 推奨環境 Google Chrome
  14. 14. 14URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 開発事例紹介
  15. 15. 15URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. テレビ朝⽇ みんながカメラマン • ネイティブ開発と⽐較してコスト半減 • Webサイトのみで展開していたがアプリ要望対応後 投稿数が3倍に増加
  16. 16. 16URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. タニタヘルスリンク ヘルスプラネット • 体組成計連携の健康管理アプリを2ヶ⽉で開発 • BluetoothやNFCを使って計測データを受信 • クラウドサービスとも⾃動連携
  17. 17. 17URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. KDDIウェブコミュニケーションズ 内線アプリ • クラウド電話API「Twilio」を⽤いた内線アプリ • 全社員のモバイル端末を内線化
  18. 18. 18URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ⽇本将棋連盟 棋譜記録アプリ・対局時計アプリ • プロの対局での棋譜記録を⼿書きからアプリ化 • アプリを通じてリアルタイムに棋譜を中継 • プログラミング未経験者が⼀⼈でアプリ開発を完遂
  19. 19. 19URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ジャパンネット銀⾏ 残⾼確認アプリ • Onsen UIでハイパフォーマンスなUIを構築 • Monacaの暗号化プラグインを利⽤することでリバー スエンジニアリング対策を実施
  20. 20. 20URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ハイブリッドアプリは パフォーマンスが課題?
  21. 21. 21URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. モバイルアプリ向けフレームワーク Onsen UI • ハイパフォーマンスなUIを実現 • プラットフォームを判別して⾃動でスタイルが変化
  22. 22. 22URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. Onsen UI • ハイパフォーマンスなUIを実現 • プラットフォームを判別して⾃動でスタイルが変化
  23. 23. 23URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. 豊富なUIパーツを利⽤可能
  24. 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. 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. 26. 26URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. デモ
  27. 27. 27URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. DOMツリーへの変更はパフォーマ ンス低下の原因になる • DOMツリーに要素の追加な どの変更処理を加えると、 DOMの再構築&再描画の処 理が都度発⽣します • 複数の要素をDOMに加える ときはDocumentFragment を利⽤して、複数の要素をま とめてから⼀気にツリーに追 加しましょう
  28. 28. 28URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved. ご清聴ありがとうございました

×