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

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