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

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

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

Tomohiko Himura

March 03, 2017
Tweet

More Decks by Tomohiko Himura

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. 独自タグが作れる

    View Slide

  5. Hello, World

    View Slide

  6. 簡単

    View Slide

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

    View Slide

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

    View Slide

  9. 簡単

    View Slide

  10. 書かなくても動く

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide



  14. ࿈བྷா
    [email protected]


    ड৴ശ
    2016-01-02 hogehoge
    2016-01-03 hogehoge


    View Slide

  15. 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;
    }

    View Slide

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

    View Slide

  17. View Slide

  18. https://playcode.io/6719

    View Slide

  19. 無意味なdivの代わりに

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide



  23. View Slide

  24. IUUQTBGSBNFJP

    View Slide


  25. <





    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. まだ標準化されてない

    View Slide

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

    View Slide

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

    View Slide

  32. ·ͱΊ

    View Slide

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

    View Slide

  34. NEXT STEP

    View Slide

  35. Shadow DOM
    Web Component

    View Slide