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/

の発表資料です。

Atsushi Nakatsugawa

September 04, 2019
Tweet

More Decks by Atsushi Nakatsugawa

Other Decks in Technology

Transcript

  1. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    Monacaでアプリ開発する際に
    役立つ ! つのヒント
    中津川篤司, MOONGIFT
    1

    View full-size slide

  2. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    自己紹介
    2
    @goofmint
    fb.me/goofmint
    中津川 篤司
    株式会社MOONGIFT代表取締役
    エバンジェリスト
    コミュニティ
    主催
    https://www.moongift.jp

    View full-size slide

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

    View full-size slide

  4. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    ヒント1
    4

    View full-size slide

  5. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    プラグインを使う場合はカスタム
    デバッガービルドを使う
    •Monacaデバッガーと変わらない使い勝手
    •コード修正がその場で反映される
    •任意のプラグインも使える
    5

    View full-size slide

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

    View full-size slide

  7. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    カスタムデバッガービルド
    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    Onsen UIの使い方を覚える
    •標準でサポートされているので楽
    •Angular/React/Vue.js/jQuery/Pure JSどれでも使え
    るので楽
    •テーマローラー見ると何ができるのかだいたい分かる
    10
    IUUQTKBPOTFOJPUIFNFSPMMFS

    View full-size slide

  11. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    ϒϥ΢β ϑϨʔϜϫʔΫ
    0OTFO6*
    *POJD
    'SBNFXPSL

    View full-size slide

  12. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    Onsen UIはモバイル専用
    •デスクトップWebブラウザにも対応したい場合
    はVuetify、Bootstrapなどを使いましょう
    •Firefox、IE、Edgeが対象の場合は特に
    12

    View full-size slide

  13. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    ヒント3
    13

    View full-size slide

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

    View full-size slide

  15. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    コンテナは1ユーザ1つ
    •プロジェクトをまたがって共有されます(ホーム
    ディレクトリの内容など)
    •基本的なLinuxコマンドが自由に使えます(プロプ
    ラン以上)
    •npmパッケージを使えばコマンドが色々使えて便利
    •外向けのポート公開(外部からアクセスするなど)
    はできないので注意
    15

    View full-size slide

  16. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    ヒント4
    16

    View full-size slide

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

    View full-size slide

  18. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    違い
    18
    クラウド IDE アプリ

    View full-size slide

  19. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    Content Security Policy
    19
    content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
    style-src 'self' 'unsafe-inline';
    media-src *;
    img-src 'self' data: content:;">

    View full-size slide

  20. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    ヒント5
    20

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    実はクラウドIDEはPWA
    23

    View full-size slide

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

    View full-size slide

  25. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    MonacaのWeb IDEはMonaco
    MonacoはVisual Studio Codeでも使われています
    25

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    Monacaで何ができるのか知りたい
    31
    Monaca サンプルアプリ 検索

    View full-size slide

  32. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    Monacaアプリの開発スタイル
    32
    エディタ バージョン管理 オフライン 必須ソフトウェア
    クラウド
    IDE
    Webブラウザ ○ × ×
    ローカル 任意のエディタ ◎ ○
    Node.js または
    LocalKit

    View full-size slide

  33. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    プッシュ通知送りたい、データ保存したい
    33
    IUUQTNCBBTOJGDMPVEDPN

    View full-size slide

  34. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    まとめ
    • Monacaは多数の機能があるので、それらを学ぶと生産性アップ!
    • ハイブリッドアプリ(Web)はセキュリティ重視な設定が多いので注意
    • 困ったことがあればMonaca UG、Teratailで質問を!
    34

    View full-size slide

  35. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    " Thanks!
    @goofmint
    fb.me/goofmint
    ご感想お待ちします!

    View full-size slide