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
690
簡単にわかる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
開発スピードとスキル向上を両立する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
740
Other Decks in Technology
See All in Technology
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
130
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.7k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
3
120
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
A2Aのクライアントを自作する
rynsuke
1
180
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
フィンテック養成勉強会#54
finengine
0
180
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
210
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
330
Github Copilot エージェントモードで試してみた
ochtum
0
110
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Into the Great Unknown - MozCon
thekraken
39
1.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Embracing the Ebb and Flow
colly
86
4.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
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