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
660
簡単にわかる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に活かせるAIツールの紹介とレビュー
moongift
PRO
0
81
DevRelの基礎と戦略
moongift
PRO
0
46
DevRelの始め方
moongift
PRO
3
640
マンガで分かるDevRelオンライン
moongift
PRO
0
160
DevRel Online with Manga
moongift
PRO
0
88
DevRel 4コマ
moongift
PRO
0
140
DevRel 4 panel Manga
moongift
PRO
0
86
DevRelの基礎〜開発者マーケティング〜
moongift
PRO
0
41
DevRelの基礎〜DevX(開発者体験)〜
moongift
PRO
0
54
Other Decks in Technology
See All in Technology
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
900
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
170
What's new in Go 1.24?
ciarana
1
110
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
380
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Optimizing for Happiness
mojombo
376
70k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Six Lessons from altMBA
skipperchong
27
3.6k
Done Done
chrislema
182
16k
Docker and Python
trallard
44
3.3k
Making Projects Easy
brettharned
116
6k
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