Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Atsushi Nakatsugawa

April 02, 2020
Tweet

More Decks by Atsushi Nakatsugawa

Other Decks in Technology

Transcript

  1. PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint

    fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
  2. PAGE DAY 2017/11/01 # MOONGIFT / 12   とは? • ハイブリッドアプリ用UIフレームワーク

    • Android / iOS対応 • ネイティブアプリのようなUIをHTML5/JavaScript/CSSで再現 • アシアル社がメインで開発 • オープンソース・ソフトウェア 4
  3. 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>
  4. 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>
  5. 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>
  6. 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;
  7. 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>
  8. 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>
  9. PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIで覚えるべきイベント 19

    Πϕϯτ໊ ൃՐ͢ΔλΠϛϯά JOJU ΞϓϦ্ཱ͕͕ͪΔ࣌ TIPX ը໘͕දࣔ͞Εͨ࣌ EFTUSPZ σΞλον͞ΕΔ࣌ IJEF ද͕ࣔফ͑Δ࣌
  10. 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>
  11. 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>
  12. 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>
  13. PAGE DAY 2017/11/01 # MOONGIFT / 12 initとshowの使い分け • init

    • 動的でないDOMのイベント処理はinitで showで行うとクリックイベントが2回、3回と追加されてしまう • show • 動的なDOMのイベント処理はshowで initではそのDOMが存在していない可能性がある • 前画面から情報を受け取って表示する initで表示すると、画面遷移しても表示が更新されない 23
  14. 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
  15. 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’); });
  16. PAGE DAY 2017/11/01 # MOONGIFT / 12 おまけ Web IDEのプレビューでもデバイスでも動かすには

    27 var event = window.cordova ? 'deviceready' : 'DOMContentLoaded'; document.addEventListener(event, function() { alert('DOMContentLoaded'); }, false);
  17. 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>
  18. PAGE DAY 2017/11/01 # MOONGIFT / 12 31 Tips 7

    色合いを変更しよう
  19. PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIを学ぼう •

    進化する中で機能が追加されてきているので、最新テクニッ クを学ぶと開発が効率的になります! • ネイティブっぽいUIを実現する際の面倒ごとはOnsen UIに任 せましょう! 34