Tweet
Tweet

Slide 1

Slide 1 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 簡単にわかるOnsen UIの 使い方 MOONGIFT 中津川篤司 1

Slide 2

Slide 2 text

PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp

Slide 3

Slide 3 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIとは？ 3

Slide 4

Slide 4 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 　　とは？ • ハイブリッドアプリ用UIフレームワーク • Android / iOS対応 • ネイティブアプリのようなUIをHTML5/JavaScript/CSSで再現 • アシアル社がメインで開発 • オープンソース・ソフトウェア 4

Slide 5

Slide 5 text

PAGE # MOONGIFT / 50 DAY 2019/02/14 ϒϥ΢β ϑϨʔϜϫʔΫ 0OTFO6* *POJD 'SBNFXPSL 代替ソフトウェア

Slide 6

Slide 6 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 6 Tips 1 はじめてみる

Slide 7

Slide 7 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 基本は ons-page から 7
Page 1

This is the first page.

Push page

Slide 8

Slide 8 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 デモページ 8 https://glitch.com/edit/#!/nice-possum-1qyw3gzf5?path=page1.html:22:55

Slide 9

Slide 9 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 2 画面遷移はons-navigatorで 9

Slide 10

Slide 10 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 ons-navigatorとは？ Onsen UIで画面遷移（進む/戻る）を管理するコンポーネント 10 QVTI1BHF QPQ1BHF

Slide 11

Slide 11 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 通常の使い方 11
Page 1

This is the first page.

Push page

Slide 12

Slide 12 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 便利な使い方 12
Page 1

This is the first page.

Push page

Slide 13

Slide 13 text

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;

Slide 14

Slide 14 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 3 ファイル分割しましょう 14

Slide 15

Slide 15 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 通常のやり方 templateタグを使う 15
Page 1

This is the first page.

Push page
Page 1

This is the second page.

Slide 16

Slide 16 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 ファイルを分割する page1.html 16
Page 1

This is the first page.

Push page page2.html
Page 1

This is the second page.

Slide 17

Slide 17 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 ファイル分割のメリット • index.htmlのコード量が減るので見通しがよくなる • 画面ごとの役割分担が明確になる 17

Slide 18

Slide 18 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 4 イベントハンドルをマスターしよう 18

Slide 19

Slide 19 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIで覚えるべきイベント 19 Πϕϯτ໊ ൃՐ͢ΔλΠϛϯά JOJU ΞϓϦ্ཱ͕͕ͪΔ࣌ TIPX ը໘͕දࣔ͞Εͨ࣌ EFTUSPZ σΞλον͞ΕΔ࣌ IJEF ද͕ࣔফ͑Δ࣌

Slide 20

Slide 20 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 使い方1 20
Page 1

This is the first page.

Push page document.addEventListener('init', function(event) { const page = event.target; if (page.id === “page1”) { // page1の時の処理 ons.notification.alert('ページ1が初期化されました'); } }, false);

Slide 21

Slide 21 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 使い方1の欠点 21 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);

Slide 22

Slide 22 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 ons-pageの中で使う 22
ons.getScriptPage().onInit = function() { // ページ1の初期化処理 // this.querySelectorを使う // document.querySelectorではない // thisなのでアロー関数不可 }; ons.getScriptPage().onShow = function() { // ページ1の表示処理 };

Slide 23

Slide 23 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 initとshowの使い分け • init • 動的でないDOMのイベント処理はinitで showで行うとクリックイベントが2回、3回と追加されてしまう • show • 動的なDOMのイベント処理はshowで initではそのDOMが存在していない可能性がある • 前画面から情報を受け取って表示する initで表示すると、画面遷移しても表示が更新されない 23

Slide 24

Slide 24 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 5 アプリ全体の初期化処理はons.readyで 24

Slide 25

Slide 25 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 JavaScriptの初期化処理と順番 1. document.addEventListener(‘DOMContentLoaded’) DOM構築が終わった段階で呼ばれる 2. window.onload DOM、画像、CSSを読み込み終わったタイミングで呼ばれる 3.

Slide 26

Slide 26 text

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’); });

Slide 27

Slide 27 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 おまけ Web IDEのプレビューでもデバイスでも動かすには 27 var event = window.cordova ? 'deviceready' : 'DOMContentLoaded'; document.addEventListener(event, function() { alert('DOMContentLoaded'); }, false);

Slide 28

Slide 28 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Tips 6 CSSコンポーネントを見よう 28

Slide 29

Slide 29 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 Onsen UIにはCSSだけで使えるものも多い 29
  • Header
  • Item
Title
Label Cancel

Slide 30

Slide 30 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 https://ja.onsen.io/v2/api/css.html

Slide 31

Slide 31 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 31 Tips 7 色合いを変更しよう

Slide 32

Slide 32 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 テーマローラーを使おう 32 https://ja.onsen.io/theme-roller/#

Slide 33

Slide 33 text

PAGE DAY 2017/11/01 # MOONGIFT / 12 まとめ 33

Slide 34

Slide 34 text

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