Slide 1
Slide 1 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Onsen UIで知っておくと便利なコト
Slide 2
Slide 2 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
自己紹介
@goofmint
fb.me/goofmint
中津川 篤司
株式会社MOONGIFT 代表取締役
NCMB エヴァンジェリスト
2004年1月よりオープンソース・ソフトウェアを毎
日紹介するブログ MOONGIFT を運営。
http://www.moongift.jp/
Monaca Pressの執筆/Monaca UGサポート
Slide 3
Slide 3 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Onsen UI？
• Monacaを提供しているアシアル社がメインで開発しているモ
バイル向けHTML5 UIフレームワーク
• ネイティブアプリっぽいUI、インタラクションを簡単に実現
• Monacaとの相性よし
Slide 4
Slide 4 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Onsen UI vs Ionic framework
0OTFO6* *POJDGSBNFXPSL
ϑϨʔϜϫʔΫ
+BWB4DSJQU"OHVMBS3FBDU7VF
K2VFSZ
"OHVMBS
ωΠςΟϒײ ˓ ˕
υΩϡϝϯτ ຊޠӳޠ ӳޠ
2" 5FSBUBJM 4UBDLPWFSqPX
【Angular2】 そろそろ Onsen UI 2 と Ionic2 を開発面からみて比較しようと思う。
Slide 5
Slide 5 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Onsen UIの注意点
• モバイル、タブレット向けです。デスクトップブラウザはサ
ポート外なので注意しましょう（デスクトップも対象なら
Vuetifyがいいらしい）
• textareaがない
• 色々やってくれる反面、無理をしようと思うと大変に…
（Onsen流に慣れる必要あり）
Slide 6
Slide 6 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
ドキュメント
Slide 7
Slide 7 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
ドキュメント
Slide 8
Slide 8 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Page 1
This is the first page.
Push pagePage 1
This is the second page.
Slide 9
Slide 9 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
document.addEventListener('init', function(event) {
var page = event.target;
if (page.id === 'page1') {
page.querySelector('#push-button').onclick = function() {
document.querySelector(‘#myNavigator').pushPage('page2.html',
{data: {title: 'Page 2'}});
};
} else if (page.id === 'page2') {
page.querySelector('ons-toolbar .center’)
.innerHTML = page.data.title;
}
});
Slide 10
Slide 10 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
よく分からない…
Slide 11
Slide 11 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
最近掴んできたコツ
Slide 12
Slide 12 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
素で使う場合
Slide 13
Slide 13 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
タブバーを使わない場合
• とりあえず を使う
最初に表示するページ
タブバー
Slide 14
Slide 14 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
main.html
• で囲む。bodyタグの中だけを書く
Hello World!
別ページに移動Slide 15
Slide 15 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Slide 16
Slide 16 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
main.htmlが表示された時に処理実行
• main.htmlの下にタグで記述
<ons-page>
<p>Hello World!</p>
<ons-button id="move" modifier=“large--quiet">
別ページに移動
</ons-button>
</ons-page>
<script>
alert(true);
Slide 17
Slide 17 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Onsen UIのイベント処理
• ons.ready(() => {})
アプリが立ち上がった時に一回だけ実行
DOMContentLoaded + DeviceReady が合わさったようなもの
• document.addEventListener(‘init’, (e) => {})
画面が構成された時に実行
同じ画面を使い回す場合は1回だけ。別な画面の情報も。
e.target.id で に割り当てたidで判別
• document.addEventListener(‘show’, (e) => {})
画面が表示される時に実行
e.target.id で に割り当てたidで判別
Slide 18
Slide 18 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
main.htmlで次のように記述
• ons.getScriptPage().onInit = function() {}
画面が構成された時に呼ばれる
その画面の時にしか呼ばれない
• ons.getScriptPage().onShow = function() {}
画面が表示された時に呼ばれる
その画面の時にしか呼ばれない
Slide 19
Slide 19 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
違い
EPDVNFOUBEE&WFOU-JTUFOFS POTHFU4DSJQU1BHF
ϖʔδఆ FUBSHFU UIJT
ଞͷϖʔδಡΈࠐΈ࣌ ݺΕΔ ݺΕͳ͍
ɾׅހ
&4 ˓ º
POTQBHFJE ඞཁ ෆཁ
QPQ࣌ Πϕϯτ͕Δ Πϕϯτফ͑Δ
Slide 20
Slide 20 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
コード
ons.getScriptPage().onInit = function() {
// 処理を書く
}
document.addEventListener('init', (e) => {
const page = e.target;
if (page.id !== 'AAA') return;
// 処理を書く
});
Slide 21
Slide 21 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
つまりこう
Hello World!
別ページに移動 ons.getScriptPage().onShow = function() { console.log('Show') } ons.getScriptPage().onInit = function() { console.log('Init') }Slide 22
Slide 22 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
イベント処理
•HTML中でのonclick
•document.querySelector
Slide 23
Slide 23 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Hello World!
別ページに移動 ons.getScriptPage().onShow = function() { console.log('Show') } ons.getScriptPage().onInit = function() { document.querySelector('#move').onclick = (e) => { document.querySelector('#nav').pushPage('detail.html'); } } const move = () => { document.querySelector('#nav').pushPage('detail.html'); }Slide 24
Slide 24 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
navigatorで戻る処理
• ons-back-button がよしなにやってくれる
• document.querySelector(‘#nav').popPage();
Back
Slide 25
Slide 25 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
HTML操作
• Onsen UIが適当に変換してくれる
const result = document.querySelector('#result')
result.innerHTML = `${result.innerHTML}
${new Date}`;
Slide 26
Slide 26 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
画面遷移する時にデータを渡す
DPOTUNFTTBHFEPDVNFOU
HFU&MFNFOU#Z*E NFTTBHF
WBMVF
EPDVNFOURVFSZ4FMFDUPS OBW
QVTI1BHF EFUBJMIUNM
\
EBUB\NFTTBHF^
^
Slide 27
Slide 27 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
データを受け取る
ons.getScriptPage().onInit = function() {
document.getElementById('receive')
.innerHTML = this.data.message;
}
Slide 28
Slide 28 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Vue.jsで使う場合
Slide 29
Slide 29 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Monaca CLIを使いましょう
$ npm i monaca-cli -g
Slide 30
Slide 30 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
ベースを作る
$ monaca create YOUR_PROJECT_NAME
Slide 31
Slide 31 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
大事なのはsrc以下
$ tree src/
src/
├── App.vue
├── CustomToolbar.vue
├── Page1.vue
├── Page2.vue
├── main.js
└── public
└── index.html.ejs
1 directory, 6 files
Slide 32
Slide 32 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
App.vue
import page1 from './Page1';
import page2 from './Page2';
export default {
data() {
return {
pageStack: [page1]
}
}
}
Slide 33
Slide 33 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
App.vue
import page1 from './Page1';
import page2 from './Page2';
export default {
data() {
return {
pageStack: [page1]
}
}
}
Slide 34
Slide 34 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
App.vue
import page1 from './Page1';
import page2 from './Page2';
export default {
data() {
return {
pageStack: [page1]
}
}
}
Slide 35
Slide 35 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
Page1.vue
Page 1
This is the first page Push Page 2
import customToolbar from './CustomToolbar';Slide 36
Slide 36 text
PAGE
DAY 2017/11/01
# MOONGIFT X / 12
まとめ
• Onsen UIを使えばネイティブライクなUIのハイブリッドアプ
リが簡単に作れます
• Web Componentをマスターしましょう！
• イベントハンドリングの方法を覚えれば分かりやすく、すっ
きり書けます！