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
42
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
DevRelファーストステップ
moongift
PRO
0
39
DevRelのフォーカス領域の変化とコンテンツのあり方
moongift
PRO
0
110
SendGrid + Googleスプレッドシートによる簡単Webサイト構築
moongift
PRO
0
490
コストを下げた動画作成テクニックの紹介
moongift
PRO
0
200
テックブログを分析して分かった始めるコツ・続けるコツ
moongift
PRO
8
3.7k
DevRelが失敗する企業の特徴とその対策
moongift
PRO
2
460
DevRel Regional Characteristics
moongift
PRO
0
16
月100本以上ブログ記事を書いて通して学んだ記事のアイディアの出し方
moongift
PRO
0
440
Google I/O 2021 Recap
moongift
PRO
1
63
Other Decks in Technology
See All in Technology
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
AOAI Dev Day - Opening Session
yoshidashingo
2
430
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
307
41k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Facilitating Awesome Meetings
lara
46
5.8k
BBQ
matthewcrist
82
9k
Code Reviewing Like a Champion
maltzj
517
39k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Visualization
eitanlees
139
14k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
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 ご感想お待ちします!