簡単にわかるOnsen UIの 使い方

Monaca UG ONLINE #1での発表資料です。

https://monacaug.connpass.com/event/170995/

Transcript

1. PAGE DAY 2017/11/01 # MOONGIFT / 12 簡単にわかるOnsen UIの 使い方 MOONGIFT 中津川篤司 1
2. PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
3. PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIとは？ 3
4. PAGE DAY 2017/11/01 # MOONGIFT / 12 　　とは？ • ハイブリッドアプリ用UIフレームワーク • Android / iOS対応 • ネイティブアプリのようなUIをHTML5/JavaScript/CSSで再現 • アシアル社がメインで開発 • オープンソース・ソフトウェア 4
5. PAGE # MOONGIFT / 50 DAY 2019/02/14 ϒϥ΢β ϑϨʔϜϫʔΫ 0OTFO
   6* *POJD 'SBNFXPSL 代替ソフトウェア
6. PAGE DAY 2017/11/01 # MOONGIFT / 12 6 Tips 1 はじめてみる
7. 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>
8. PAGE DAY 2017/11/01 # MOONGIFT / 12 デモページ 8 https://glitch.com/edit/#!/nice-possum-1qyw3gzf5?path=page1.html:22:55
9. PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 2 画面遷移はons-navigatorで 9
10. PAGE DAY 2017/11/01 # MOONGIFT / 12 ons-navigatorとは？ Onsen UIで画面遷移（進む/戻る）を管理するコンポーネント 10 QVTI1BHF QPQ1BHF
11. 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>
12. 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>
13. 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;
14. PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 3 ファイル分割しましょう 14
15. 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>
16. 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>
17. PAGE DAY 2017/11/01 # MOONGIFT / 12 ファイル分割のメリット • index.htmlのコード量が減るので見通しがよくなる • 画面ごとの役割分担が明確になる 17
18. PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 4 イベントハンドルをマスターしよう 18
19. PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIで覚えるべきイベント 19 Πϕϯτ໊ ൃՐ͢ΔλΠϛϯά JOJU ΞϓϦ্ཱ͕͕ͪΔ࣌ TIPX ը໘͕දࣔ͞Εͨ࣌ EFTUSPZ σΞλον͞ΕΔ࣌ IJEF ද͕ࣔফ͑Δ࣌
20. 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>
21. 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>
22. 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>
23. PAGE DAY 2017/11/01 # MOONGIFT / 12 initとshowの使い分け • init • 動的でないDOMのイベント処理はinitで showで行うとクリックイベントが2回、3回と追加されてしまう • show • 動的なDOMのイベント処理はshowで initではそのDOMが存在していない可能性がある • 前画面から情報を受け取って表示する initで表示すると、画面遷移しても表示が更新されない 23
24. PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 5 アプリ全体の初期化処理はons.readyで 24
25. 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
26. 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’); });
27. PAGE DAY 2017/11/01 # MOONGIFT / 12 おまけ Web IDEのプレビューでもデバイスでも動かすには 27 var event = window.cordova ? 'deviceready' : 'DOMContentLoaded'; document.addEventListener(event, function() { alert('DOMContentLoaded'); }, false);
28. PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 6 CSSコンポーネントを見よう 28
29. 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>
30. PAGE DAY 2017/11/01 # MOONGIFT / 12 https://ja.onsen.io/v2/api/css.html
31. PAGE DAY 2017/11/01 # MOONGIFT / 12 31 Tips 7 色合いを変更しよう
32. PAGE DAY 2017/11/01 # MOONGIFT / 12 テーマローラーを使おう 32 https://ja.onsen.io/theme-roller/#
33. PAGE DAY 2017/11/01 # MOONGIFT / 12 まとめ 33
34. PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIを学ぼう • 進化する中で機能が追加されてきているので、最新テクニッ クを学ぶと開発が効率的になります！ • ネイティブっぽいUIを実現する際の面倒ごとはOnsen UIに任 せましょう！ 34