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
62
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
56
個人開発にAIレビューを導入しよう
moongift
PRO
0
37
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
700
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
1.2k
開発スピードとスキル向上を両立するAIコードレビューの活かし方
moongift
PRO
0
59
Let's speed up personal development with AI code reviews
moongift
PRO
0
29
DevRelに活かせるAIツールの紹介とレビュー
moongift
PRO
0
120
DevRelの基礎と戦略
moongift
PRO
0
61
DevRelの始め方
moongift
PRO
3
760
Other Decks in Technology
See All in Technology
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
500
地図と生成AI
nakasho
0
660
スプリントレビューを効果的にするために
miholovesq
9
1.6k
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
110
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
230
PHPでResult型やってみよう
higaki_program
0
180
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
本当にわかりやすいAIエージェント入門
segavvy
10
5.8k
TypeScript 上達の道
ysknsid25
0
240
AI工学特論: MLOps・継続的評価
asei
10
1.3k
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
470
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Thoughts on Productivity
jonyablonski
69
4.7k
The Cult of Friendly URLs
andyhume
79
6.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
It's Worth the Effort
3n
185
28k
Building an army of robots
kneath
306
45k
Code Reviewing Like a Champion
maltzj
524
40k
Automating Front-end Workflow
addyosmani
1370
200k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building Applications with DynamoDB
mza
95
6.5k
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 ご感想お待ちします!