<ハ-ドル低めカスタムエレメントの始め方 />

Slide 1

Slide 1 text

<ϋ-υϧ௿ΊΧελϜΤϨϝϯτͷ࢝Ίํ /> 2017-03-03 ޿ౡϑϩϯτΤϯυษڧձ Vol.7

Slide 2

Slide 2 text

ͻΉΒ ͱ΋ͻ͜ • フロントエンドは人手不足のときだけ • iOSも最近仕事でやってない • プログラミングチョットデキル

Slide 3

Slide 3 text

̍ߦͰΘ͔ΔΧελϜΤϨϝϯτ

Slide 4

Slide 4 text

独自タグが作れる

Slide 5

Slide 5 text

Hello, World

Slide 6

Slide 6 text

簡単

Slide 7

Slide 7 text

2ߦͰͭ͘ΔΧελϜΤϨϝϯτ

Slide 8

Slide 8 text

class MyTag extends HTMLElement {} customElements.define('my-tag', MyTag);

Slide 9

Slide 9 text

簡単

Slide 10

Slide 10 text

書かなくても動く

Slide 11

Slide 11 text

書かなくても動くむしろ、書くと一部のブラウザで動かない

Slide 12

Slide 12 text

ؒҧͬͯͳ͘͸ͳ͍ೖ໳Ҋ

Slide 13

Slide 13 text

ウェブアプリケーションならカスタム要素でマークアップしていいのでは?

Slide 14

Slide 14 text

࿈བྷா hoge@example.com ड৴ശ 2016-01-02 hogehoge 2016-01-03 hogehoge

Slide 15

Slide 15 text

my-app { display: block; background-color: #eee; width: 300px; } my-contact { display: block; margin: 10px 10px 0 10px; background-color: white; } my-contact > my-user { padding: 4px; font-size: 10px; } my-contact > my-header { font-size: 10px; }

Slide 16

Slide 16 text

/* ͳͯ͘΋͍͍ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ class MyApp extends HTMLElement {} customElements.define('my-app', MyApp); */

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

https://playcode.io/6719

Slide 19

Slide 19 text

無意味なdivの代わりに

Slide 20

Slide 20 text

無意味なdivの代わりに要するにBEMのBlockの代わりな感じ

Slide 21

Slide 21 text

஌͓͖͍ͬͯͨ ΧελϜΤϨϝϯτͷ̏ͭ͜ͱ

Slide 22

Slide 22 text

独自タグの名前にはハイフンを含む必要がある

Slide 23

Slide 23 text

Slide 24

Slide 24 text

IUUQTBGSBNFJP

Slide 25

Slide 25 text

Slide 26

Slide 26 text

b-frameとかz-frame とったもの勝ちなのでは

Slide 27

Slide 27 text

カスタムエレメントを定義する前に利用できる

Slide 28

Slide 28 text

/* ͳͯ͘΋͍͍ɻͱ͍͏͔IEͩͱΤϥʔʹͳΔ class MyApp extends HTMLElement {} customElements.define('my-app', MyApp); */ /* ఆٛલʹͳΔͷͰΤϥʔʹͳΒͳ͍ */

Slide 29

Slide 29 text

まだ標準化されてない

Slide 30

Slide 30 text

APIが変わるかもなので注意

Slide 31

Slide 31 text

v1 apiの対応ブラウザ • Safari 10.1 以降 (未リリース?) • Google Chrome 54 以降 • Google for Android 55 以降 • Opera 41 以降 IUUQTIUNMTQFDXIBUXHPSHNVMUJQBHFTDSJQUJOHIUNMDVTUPNFMFNFOUT

Slide 32

Slide 32 text

·ͱΊ

Slide 33

Slide 33 text

カスタムエレメント • 独自タグをつくれます • 必ず名前にハイフンを含みます • 定義してない独自タグをつかうと • 後で定義されるはずの要素 • CSS当てるだけなら使える • 場所によっては使えなくはない