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

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

の発表資料です。

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