Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Monacaでアプリ開発する際に_役立つテクニック.pdf

 Monacaでアプリ開発する際に_役立つテクニック.pdf

Monaca UG NAGOYA #1 〜 集まれMonaca ユーザー! 〜
https://monacaug.connpass.com/event/141829/

の発表資料です。

4cafe6a1c6287d64d7252279eeeffa94?s=128

Atsushi Nakatsugawa

September 04, 2019
Tweet

Transcript

  1. PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaでアプリ開発する際に 役立つ !

    つのヒント 中津川篤司, MOONGIFT 1
  2. PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint

    fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
  3. PAGE # MOONGIFT / 50 DAY 2019/02/14 もくもく会やってます •Monaca ×

    NCMBなもくもく会です •実体は駆け込み寺になっています •そんなサポートの経験からMonacaアプリ開発のヒントを お送りします 3 IUUQTODNCDPOOQBTTDPN
  4. PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント1 4

  5. PAGE DAY 2017/11/01 # MOONGIFT / 12 プラグインを使う場合はカスタム デバッガービルドを使う •Monacaデバッガーと変わらない使い勝手

    •コード修正がその場で反映される •任意のプラグインも使える 5
  6. PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaのデバッグ方法は5つ 6 Monacaデバッガー

    アプリストアで配布。標準的なプラグインが組み込み済み。 デバッグビルド アプリのコード、プラグインを含めてビルド。クラウド IDEでコード を編集しても反映されない。 プレビュー Web IDEのコード反映をすぐに反映。Webブラウザ上で(HTTPSで) 動作。 カスタムデバッガービルド Monacaデバッガーに任意のプラグインを含めてビルド。クラウド IDEでコード修正してすぐに反映。 ローカルのプレビュー LocalKit、CLI用。ローカルでの修正をすぐに反映。Webブラウザ上 で(HTTPで)動作。
  7. PAGE DAY 2017/11/01 # MOONGIFT / 12 カスタムデバッガービルド 7

  8. PAGE DAY 2017/11/01 # MOONGIFT / 12 使えるプラグインの確認法 8

  9. PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント2 9

  10. PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIの使い方を覚える •標準でサポートされているので楽

    •Angular/React/Vue.js/jQuery/Pure JSどれでも使え るので楽 •テーマローラー見ると何ができるのかだいたい分かる 10 IUUQTKBPOTFOJPUIFNFSPMMFS
  11. PAGE # MOONGIFT / 50 DAY 2019/02/14 ϒϥ΢β ϑϨʔϜϫʔΫ 0OTFO6*

    *POJD 'SBNFXPSL
  12. PAGE # MOONGIFT / 50 DAY 2019/02/14 Onsen UIはモバイル専用 •デスクトップWebブラウザにも対応したい場合

    はVuetify、Bootstrapなどを使いましょう •Firefox、IE、Edgeが対象の場合は特に 12
  13. PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント3 13

  14. PAGE # MOONGIFT / 50 DAY 2019/02/14 Webプレビューはコンテナ 14

  15. PAGE # MOONGIFT / 50 DAY 2019/02/14 コンテナは1ユーザ1つ •プロジェクトをまたがって共有されます(ホーム ディレクトリの内容など)

    •基本的なLinuxコマンドが自由に使えます(プロプ ラン以上) •npmパッケージを使えばコマンドが色々使えて便利 •外向けのポート公開(外部からアクセスするなど) はできないので注意 15
  16. PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント4 16

  17. PAGE # MOONGIFT / 50 DAY 2019/02/14 MonacaアプリはローカルHTML •プレビューはHTTPSで動作している •ローカルHTMLとはセキュリティ制約が異

    なるので注意 17
  18. PAGE # MOONGIFT / 50 DAY 2019/02/14 違い 18 クラウド

    IDE アプリ
  19. PAGE # MOONGIFT / 50 DAY 2019/02/14 Content Security Policy

    19 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
  20. PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント5 20

  21. PAGE # MOONGIFT / 50 DAY 2019/02/14 PWAビルドではプラグインは使えない •PWA(Progressive Web

    App)はWebアプリです •プラグイン(Objective-C/Swift/Javaなど)は使えません 21
  22. PAGE # MOONGIFT / 50 DAY 2019/02/14 Monacaアプリ vs PWA

    22 URLスキーマ Cordovaプラグイン プッシュ通知 審査 デスクトップ Monacaアプリ file:// ◦ iOS/Android 必要 × PWA https:// × Webプッシュ、 Androidのみ 不要 ◦
  23. PAGE # MOONGIFT / 50 DAY 2019/02/14 実はクラウドIDEはPWA 23

  24. PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント6 24

  25. PAGE DAY 2017/11/01 # MOONGIFT / 12 MonacaのWeb IDEはMonaco MonacoはVisual

    Studio Codeでも使われています 25
  26. PAGE DAY 2017/11/01 # MOONGIFT / 12 設定で使いやすく フォント、フォントサイズ、テーマ、タブ、自動インデントな どが設定できます(設定メニューのワークスペース設定)

    26
  27. PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント7 27

  28. PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaデバッガーのあれ、動かせます 28 あれ

  29. PAGE DAY 2017/11/01 # MOONGIFT / 12 ドラッグできます 29

  30. PAGE DAY 2017/11/01 # MOONGIFT / 12 おまけ 30

  31. PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaで何ができるのか知りたい 31 Monaca

    サンプルアプリ 検索
  32. PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaアプリの開発スタイル 32 エディタ

    バージョン管理 オフライン 必須ソフトウェア クラウド IDE Webブラウザ ◦ × × ローカル 任意のエディタ ◎ ◦ Node.js または LocalKit
  33. PAGE DAY 2017/11/01 # MOONGIFT / 12 プッシュ通知送りたい、データ保存したい 33 IUUQTNCBBTOJGDMPVEDPN

  34. PAGE DAY 2017/11/01 # MOONGIFT / 12 まとめ • Monacaは多数の機能があるので、それらを学ぶと生産性アップ!

    • ハイブリッドアプリ(Web)はセキュリティ重視な設定が多いので注意 • 困ったことがあればMonaca UG、Teratailで質問を! 34
  35. PAGE # MOONGIFT / 50 DAY 2019/02/14 " Thanks! @goofmint

    fb.me/goofmint ご感想お待ちします!