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
簡単にわかるOnsen UIの 使い方
Search
Atsushi Nakatsugawa
PRO
April 02, 2020
Technology
0
560
簡単にわかるOnsen UIの 使い方
Monaca UG ONLINE #1での発表資料です。
https://monacaug.connpass.com/event/170995/
Atsushi Nakatsugawa
PRO
April 02, 2020
Tweet
Share
More Decks by Atsushi Nakatsugawa
See All by Atsushi Nakatsugawa
DevRelのフォーカス領域の変化とコンテンツのあり方
moongift
PRO
0
44
SendGrid + Googleスプレッドシートによる簡単Webサイト構築
moongift
PRO
0
330
コストを下げた動画作成テクニックの紹介
moongift
PRO
0
160
テックブログを分析して分かった始めるコツ・続けるコツ
moongift
PRO
8
3.6k
DevRelが失敗する企業の特徴とその対策
moongift
PRO
2
410
DevRel Regional Characteristics
moongift
PRO
0
9
月100本以上ブログ記事を書いて通して学んだ記事のアイディアの出し方
moongift
PRO
0
410
Google I/O 2021 Recap
moongift
PRO
1
58
Relationship in DevRel and Branding
moongift
PRO
0
180
Other Decks in Technology
See All in Technology
20240321_生成AI時代のDevOps
kzkmaeda
2
610
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
470
SREsのためのSRE定着ガイド
netmarkjp
10
1.6k
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
160
10分でわかるfreeeのQA
freee
0
230
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2k
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
830
AMLD 2024 - Build Your Own GPT
donlelef
1
260
KTC_DBRE.pdf
_awache
0
290
Introduction to Jetpack Compose
pohjus
1
110
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
520
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
RailsConf 2023
tenderlove
0
510
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Embracing the Ebb and Flow
colly
78
4.1k
What the flash - Photography Introduction
edds
64
11k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing Experiences People Love
moore
135
23k
Writing Fast Ruby
sferik
619
59k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
Automating Front-end Workflow
addyosmani
1353
200k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Transcript
PAGE DAY 2017/11/01 # MOONGIFT / 12 簡単にわかるOnsen UIの 使い方
MOONGIFT 中津川篤司 1
PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint
fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIとは? 3
PAGE DAY 2017/11/01 # MOONGIFT / 12 とは? • ハイブリッドアプリ用UIフレームワーク
• Android / iOS対応 • ネイティブアプリのようなUIをHTML5/JavaScript/CSSで再現 • アシアル社がメインで開発 • オープンソース・ソフトウェア 4
PAGE # MOONGIFT / 50 DAY 2019/02/14 ϒϥβ ϑϨʔϜϫʔΫ 0OTFO6*
*POJD 'SBNFXPSL 代替ソフトウェア
PAGE DAY 2017/11/01 # MOONGIFT / 12 6 Tips 1
はじめてみる
PAGE DAY 2017/11/01 # MOONGIFT / 12 基本は ons-page から
7 <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id=“push-button"> Push page </ons-button> </ons-page>
PAGE DAY 2017/11/01 # MOONGIFT / 12 デモページ 8 https://glitch.com/edit/#!/nice-possum-1qyw3gzf5?path=page1.html:22:55
PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 2 画面遷移はons-navigatorで
9
PAGE DAY 2017/11/01 # MOONGIFT / 12 ons-navigatorとは? Onsen UIで画面遷移(進む/戻る)を管理するコンポーネント
10 QVTI1BHF QPQ1BHF
PAGE DAY 2017/11/01 # MOONGIFT / 12 通常の使い方 11 <ons-navigator
swipeable id="myNavigator" page=“page1.html"> </ons-navigator> <template id="page1.html"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </ons-page> </template>
PAGE DAY 2017/11/01 # MOONGIFT / 12 便利な使い方 12 <ons-navigator
swipeable id="myNavigator"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </ons-page> </ons-navigator>
PAGE DAY 2017/11/01 # MOONGIFT / 12 画面遷移時にはdataでデータを送信 13 document.querySelector('#myNavigator')
.pushPage('page2.html', { data: { title: 'Page 2', message: 'こんにちは、世界!' } }); page.querySelector('ons-toolbar .center') .innerHTML = page.data.title; page.querySelector('.message') .innerHTML = page.data.message;
PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 3 ファイル分割しましょう
14
PAGE DAY 2017/11/01 # MOONGIFT / 12 通常のやり方 templateタグを使う 15
<template id="page1.html"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </ons-page> </template> <template id="page2.html"> <ons-page id="page2"> <ons-toolbar> <div class="left"><ons-back-button>Page 1</ons-back-button></div> <div class="center"></div> </ons-toolbar> <p>This is the second page.</p> </ons-page> </template>
PAGE DAY 2017/11/01 # MOONGIFT / 12 ファイルを分割する page1.html 16
<ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </ons-page> page2.html <ons-page id="page2"> <ons-toolbar> <div class="left"><ons-back-button>Page 1</ons-back-button></div> <div class="center"></div> </ons-toolbar> <p>This is the second page.</p> </ons-page>
PAGE DAY 2017/11/01 # MOONGIFT / 12 ファイル分割のメリット • index.htmlのコード量が減るので見通しがよくなる
• 画面ごとの役割分担が明確になる 17
PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 4 イベントハンドルをマスターしよう
18
PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIで覚えるべきイベント 19
Πϕϯτ໊ ൃՐ͢ΔλΠϛϯά JOJU ΞϓϦ্ཱ͕͕ͪΔ࣌ TIPX ը໘͕දࣔ͞Εͨ࣌ EFTUSPZ σΞλον͞ΕΔ࣌ IJEF ද͕ࣔফ͑Δ࣌
PAGE DAY 2017/11/01 # MOONGIFT / 12 使い方1 20 <ons-page
id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button id="push-button">Push page</ons-button> </ons-page> <script> document.addEventListener('init', function(event) { const page = event.target; if (page.id === “page1”) { // page1の時の処理 ons.notification.alert('ページ1が初期化されました'); } }, false); </script>
PAGE DAY 2017/11/01 # MOONGIFT / 12 使い方1の欠点 21 <script>
document.addEventListener('init', function(event) { const page = event.target; if (page.id === “page1”) { // page1の時の処理 ons.notification.alert('ページ1が初期化されました'); } if (page.id === “page2”) { // page2の時の処理 ons.notification.alert('ページ2が初期化されました'); } if (page.id === “page3”) { // page3の時の処理 ons.notification.alert('ページ3が初期化されました'); } if (page.id === “page4”) { // page4の時の処理 ons.notification.alert('ページ4が初期化されました'); } }, false); </script>
PAGE DAY 2017/11/01 # MOONGIFT / 12 ons-pageの中で使う 22 <ons-page
id=“page1”> <ons-toolbar> <div class="center"></div> </ons-toolbar> <script> ons.getScriptPage().onInit = function() { // ページ1の初期化処理 // this.querySelectorを使う // document.querySelectorではない // thisなのでアロー関数不可 }; ons.getScriptPage().onShow = function() { // ページ1の表示処理 }; </script> </ons-page>
PAGE DAY 2017/11/01 # MOONGIFT / 12 initとshowの使い分け • init
• 動的でないDOMのイベント処理はinitで showで行うとクリックイベントが2回、3回と追加されてしまう • show • 動的なDOMのイベント処理はshowで initではそのDOMが存在していない可能性がある • 前画面から情報を受け取って表示する initで表示すると、画面遷移しても表示が更新されない 23
PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 5 アプリ全体の初期化処理はons.readyで
24
PAGE DAY 2017/11/01 # MOONGIFT / 12 JavaScriptの初期化処理と順番 1. document.addEventListener(‘DOMContentLoaded’)
DOM構築が終わった段階で呼ばれる 2. window.onload DOM、画像、CSSを読み込み終わったタイミングで呼ばれる 3. <body onload=“hoge” /> window.onloadと同じ 4. document.addEventListener(‘deviceready’) Cordova用。プラグインの読み込みも終わったタイミングで呼ばれる 25
PAGE DAY 2017/11/01 # MOONGIFT / 12 ons.readyについて document.addEventListener(‘deviceready’) の後に呼ばれる
26 document.addEventListener('DOMContentLoaded', function() { alert('DOMContentLoaded'); }, false); window.addEventListener('load', function() { alert('load'); }, false); document.addEventListener('deviceready', function() { alert('deviceready'); }, false); // Onsen UIを使用している場合 ons.ready(function() { alert(‘Onsen UI ready’); });
PAGE DAY 2017/11/01 # MOONGIFT / 12 おまけ Web IDEのプレビューでもデバイスでも動かすには
27 var event = window.cordova ? 'deviceready' : 'DOMContentLoaded'; document.addEventListener(event, function() { alert('DOMContentLoaded'); }, false);
PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 6 CSSコンポーネントを見よう
28
PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIにはCSSだけで使えるものも多い 29
<label class="switch"> <input type="checkbox" class="switch__input"> <div class="switch__toggle"> <div class="switch__handle"></div> </div> </label> <ul class="list"> <li class="list-header"> Header </li> <li class="list-item"> <div class="list-item__center">Item</div> </li> </ul> <textarea class="textarea" rows="3" placeholder=“Textarea"> </textarea> <div class="action-sheet-mask"></div> <div class="action-sheet"> <div class="action-sheet-title">Title</div> <button class="action-sheet-button">Label</button> <button class="action-sheet-button">Cancel</button> </div>
PAGE DAY 2017/11/01 # MOONGIFT / 12 https://ja.onsen.io/v2/api/css.html
PAGE DAY 2017/11/01 # MOONGIFT / 12 31 Tips 7
色合いを変更しよう
PAGE DAY 2017/11/01 # MOONGIFT / 12 テーマローラーを使おう 32 https://ja.onsen.io/theme-roller/#
PAGE DAY 2017/11/01 # MOONGIFT / 12 まとめ 33
PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIを学ぼう •
進化する中で機能が追加されてきているので、最新テクニッ クを学ぶと開発が効率的になります! • ネイティブっぽいUIを実現する際の面倒ごとはOnsen UIに任 せましょう! 34