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

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 ϒϥ΢β ϑϨʔϜϫʔΫ 0OTFO
    6*

    *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 ご感想お待ちします！