Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Monacaでアプリ開発する際に_役立つテクニック.pdf
Search
Atsushi Nakatsugawa
PRO
September 04, 2019
Technology
0
59
Monacaでアプリ開発する際に_役立つテクニック.pdf
Monaca UG NAGOYA #1 〜 集まれMonaca ユーザー! 〜
https://monacaug.connpass.com/event/141829/
の発表資料です。
Atsushi Nakatsugawa
PRO
September 04, 2019
Tweet
Share
More Decks by Atsushi Nakatsugawa
See All by Atsushi Nakatsugawa
開発スピードとスキル向上を両立するAIコードレビューの活かし方
moongift
PRO
0
43
個人開発にAIレビューを導入しよう
moongift
PRO
0
32
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
610
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
1.2k
開発スピードとスキル向上を両立するAIコードレビューの活かし方
moongift
PRO
0
54
Let's speed up personal development with AI code reviews
moongift
PRO
0
22
DevRelに活かせるAIツールの紹介とレビュー
moongift
PRO
0
110
DevRelの基礎と戦略
moongift
PRO
0
58
DevRelの始め方
moongift
PRO
3
730
Other Decks in Technology
See All in Technology
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
A2Aのクライアントを自作する
rynsuke
1
170
エンジニア向け技術スタック情報
kauche
1
250
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
340
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
740
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Facilitating Awesome Meetings
lara
54
6.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to train your dragon (web standard)
notwaldorf
93
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Unsuck your backbone
ammeep
671
58k
We Have a Design System, Now What?
morganepeng
53
7.7k
Code Reviewing Like a Champion
maltzj
524
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
The Pragmatic Product Professional
lauravandoore
35
6.7k
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 ご感想お待ちします!