Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
Monacaでアプリ開発する際に_役立つテクニック.pdf
Atsushi Nakatsugawa
September 04, 2019
Technology
0
8
Monacaでアプリ開発する際に_役立つテクニック.pdf
Monaca UG NAGOYA #1 〜 集まれMonaca ユーザー! 〜
https://monacaug.connpass.com/event/141829/
の発表資料です。
Atsushi Nakatsugawa
September 04, 2019
Tweet
Share
More Decks by Atsushi Nakatsugawa
See All by Atsushi Nakatsugawa
moongift
0
16
moongift
0
1
moongift
0
1
moongift
0
1
moongift
0
1
moongift
0
160
moongift
5
3.6k
moongift
2
910
moongift
4
3.4k
Other Decks in Technology
See All in Technology
awsbelaraby
4
1k
line_developers
PRO
2
1.2k
line_developers
PRO
0
140
ytaka23
0
420
toshinoritakai
1
190
line_developers
PRO
3
470
clustervr
0
190
soachr
0
150
ocise
0
110
kappa4
4
2k
pinboro
1
1.4k
caori_t
0
150
Featured
See All Featured
pedronauck
652
110k
philnash
8
480
swwweet
206
6.8k
dougneiner
119
7.8k
hursman
106
9.2k
hannesfritz
27
930
ammeep
656
54k
akmur
252
19k
denniskardys
220
120k
paulrobertlloyd
71
1.4k
lynnandtonic
270
16k
philhawksworth
192
8.8k
Transcript
PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaでアプリ開発する際に 役立つ !
つのヒント 中津川篤司, MOONGIFT 1
PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint
fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
PAGE # MOONGIFT / 50 DAY 2019/02/14 もくもく会やってます •Monaca ×
NCMBなもくもく会です •実体は駆け込み寺になっています •そんなサポートの経験からMonacaアプリ開発のヒントを お送りします 3 IUUQTODNCDPOOQBTTDPN
PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント1 4
PAGE DAY 2017/11/01 # MOONGIFT / 12 プラグインを使う場合はカスタム デバッガービルドを使う •Monacaデバッガーと変わらない使い勝手
•コード修正がその場で反映される •任意のプラグインも使える 5
PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaのデバッグ方法は5つ 6 Monacaデバッガー
アプリストアで配布。標準的なプラグインが組み込み済み。 デバッグビルド アプリのコード、プラグインを含めてビルド。クラウド IDEでコード を編集しても反映されない。 プレビュー Web IDEのコード反映をすぐに反映。Webブラウザ上で(HTTPSで) 動作。 カスタムデバッガービルド Monacaデバッガーに任意のプラグインを含めてビルド。クラウド IDEでコード修正してすぐに反映。 ローカルのプレビュー LocalKit、CLI用。ローカルでの修正をすぐに反映。Webブラウザ上 で(HTTPで)動作。
PAGE DAY 2017/11/01 # MOONGIFT / 12 カスタムデバッガービルド 7
PAGE DAY 2017/11/01 # MOONGIFT / 12 使えるプラグインの確認法 8
PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント2 9
PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIの使い方を覚える •標準でサポートされているので楽
•Angular/React/Vue.js/jQuery/Pure JSどれでも使え るので楽 •テーマローラー見ると何ができるのかだいたい分かる 10 IUUQTKBPOTFOJPUIFNFSPMMFS
PAGE # MOONGIFT / 50 DAY 2019/02/14 ϒϥβ ϑϨʔϜϫʔΫ 0OTFO6*
*POJD 'SBNFXPSL
PAGE # MOONGIFT / 50 DAY 2019/02/14 Onsen UIはモバイル専用 •デスクトップWebブラウザにも対応したい場合
はVuetify、Bootstrapなどを使いましょう •Firefox、IE、Edgeが対象の場合は特に 12
PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント3 13
PAGE # MOONGIFT / 50 DAY 2019/02/14 Webプレビューはコンテナ 14
PAGE # MOONGIFT / 50 DAY 2019/02/14 コンテナは1ユーザ1つ •プロジェクトをまたがって共有されます(ホーム ディレクトリの内容など)
•基本的なLinuxコマンドが自由に使えます(プロプ ラン以上) •npmパッケージを使えばコマンドが色々使えて便利 •外向けのポート公開(外部からアクセスするなど) はできないので注意 15
PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント4 16
PAGE # MOONGIFT / 50 DAY 2019/02/14 MonacaアプリはローカルHTML •プレビューはHTTPSで動作している •ローカルHTMLとはセキュリティ制約が異
なるので注意 17
PAGE # MOONGIFT / 50 DAY 2019/02/14 違い 18 クラウド
IDE アプリ
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:;">
PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント5 20
PAGE # MOONGIFT / 50 DAY 2019/02/14 PWAビルドではプラグインは使えない •PWA(Progressive Web
App)はWebアプリです •プラグイン(Objective-C/Swift/Javaなど)は使えません 21
PAGE # MOONGIFT / 50 DAY 2019/02/14 Monacaアプリ vs PWA
22 URLスキーマ Cordovaプラグイン プッシュ通知 審査 デスクトップ Monacaアプリ file:// ◦ iOS/Android 必要 × PWA https:// × Webプッシュ、 Androidのみ 不要 ◦
PAGE # MOONGIFT / 50 DAY 2019/02/14 実はクラウドIDEはPWA 23
PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント6 24
PAGE DAY 2017/11/01 # MOONGIFT / 12 MonacaのWeb IDEはMonaco MonacoはVisual
Studio Codeでも使われています 25
PAGE DAY 2017/11/01 # MOONGIFT / 12 設定で使いやすく フォント、フォントサイズ、テーマ、タブ、自動インデントな どが設定できます(設定メニューのワークスペース設定)
26
PAGE DAY 2017/11/01 # MOONGIFT / 12 ヒント7 27
PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaデバッガーのあれ、動かせます 28 あれ
PAGE DAY 2017/11/01 # MOONGIFT / 12 ドラッグできます 29
PAGE DAY 2017/11/01 # MOONGIFT / 12 おまけ 30
PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaで何ができるのか知りたい 31 Monaca
サンプルアプリ 検索
PAGE DAY 2017/11/01 # MOONGIFT / 12 Monacaアプリの開発スタイル 32 エディタ
バージョン管理 オフライン 必須ソフトウェア クラウド IDE Webブラウザ ◦ × × ローカル 任意のエディタ ◎ ◦ Node.js または LocalKit
PAGE DAY 2017/11/01 # MOONGIFT / 12 プッシュ通知送りたい、データ保存したい 33 IUUQTNCBBTOJGDMPVEDPN
PAGE DAY 2017/11/01 # MOONGIFT / 12 まとめ • Monacaは多数の機能があるので、それらを学ぶと生産性アップ!
• ハイブリッドアプリ(Web)はセキュリティ重視な設定が多いので注意 • 困ったことがあればMonaca UG、Teratailで質問を! 34
PAGE # MOONGIFT / 50 DAY 2019/02/14 " Thanks! @goofmint
fb.me/goofmint ご感想お待ちします!