Onsen UIで知っておくと便利なコト

Monaca UG OHMIYA #2の発表資料です

Transcript

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