O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.952 visualizações

Publicada em

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

Publicada em: Engenharia
  • Seja o primeiro a comentar

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. ご清聴ありがとうございました

×