WebComponentsとPolymerを使ってみた
•
0 likes•1,329 views
GEEKLAB.NAGANOのイベント「HTML5時代のフロントエンド開発入門」でLTした内容です。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to WebComponentsとPolymerを使ってみた
Similar to WebComponentsとPolymerを使ってみた (20)
WebComponentsとPolymerを使ってみた
- 1. WebComponentsと Polymerを使ってみた 中澤 祐一 @y_nakazawa1220
- 2. 自己紹介 • Python + Djangoでスマホアプリのバックエンド 開発 • ぎーらぼ管理人 • フロントが苦手(汗) • イングレスやりましょう！
- 4. Google I/O 2014 報告会
- 5. これヤバイんじゃね！
- 6. WebComponents • 自分で好きなタグが作れる • UIのコンポーネント化をして再利用できる • なにより便利そう（楽できそう・・）
- 7. 「購入ボタン」を同一サイト で使い回したい • 外観 HTML/CSSで書いて • ボタンクリック後の操作 をjsで書いて • 冗長なコードを書くことになる
- 8. 解決！！
- 9. 仕様 1. HTML Template 2. Shadow DOM 3. Custom Elements 4. HTML imports
- 10. それぞれの絡み 1. HTML Template > コンポーネント化する処理 2. Shadow DOM > 1.のカプセル化 3. Custom Elements > 1.を使用する仕組み (タグの定義) 4. HTML imports > 1.を呼び出す仕組み
- 12. HTML template x-youtube.htmlのようなTemplate用のHTMLファイルを作る <template id="x-youtube-template"> <style type="text/css" media="screen"> iframe { border: 0; } </style> <iframe width="" height="" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> </template> <script type="text/javascript" src=“js/x-youtube.js"></script>
- 13. Shadow DOM styleの隠蔽化 <template id="x-youtube-template"> <style type="text/css" media="screen"> iframe { border: 0; } </style> <iframe width="" height="" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> </template> <script type="text/javascript" src=“js/x-youtube.js"></script>
- 14. Custom Elements // x-youtube タグを作る var XYoutubeProtoType = Object.create(HTMLElement.prototype, { createdCallback: { value: function() {} } } # registerElement()でCustom Elementを登録する var XYoutube = document.registerElement('x-youtube', {prototype: XYoutubeProtoType});
- 15. HTML imports <!DOCTYPE html> <html lang="ja"> <head> <link rel="import" href="/x-youtube.html"> </head> <body></body> ! <x-youtube video-id="XXXXXXXX"></x-youtube> <x-youtube video-id="YYYYYYYY"></x-youtube> ! </html>
- 16. こんな感じw
- 17. 注意点 • Chrome か Chrome Canaryで • chrome://flagsにアクセスして、「試験運用版の ウェブ プラットフォームの機能を有効にする。」 を有効にする
- 18. Polymer
- 19. ああ、これか！！
- 20. What is a Polymer? • Web Conponentsを包んだライブラリ (Polymer.js) • Polyfillがブラウザの未サポートを補ってくれる • 既にCustom Elementsが用意されている • Templateが作れるDesignerツールがある
- 21. Custom Elements I/O http://customelements.io
- 23. こんなコードを吐いてくれる <link rel="import" href="../core-icon-button/core-icon-button.html"> <link rel="import" href="../core-toolbar/core-toolbar.html"> <polymer-element name="my-element"> <template> <style> :host { position: absolute; width: 100%; height: 100%; box-sizing: border-box; } ・・・ </style> <core-toolbar id="core_toolbar"> <core-icon-button id="core_icon_button" icon="menu"></core-icon-button> <div id="div" flex>Toolbar</div> </core-toolbar> </template> <script> Polymer('my-element', { }); </script> !
- 24. 感想・・
- 26. • 使えるコンポーネントが増えてくれば生産性上がり そう • 自分で作る分には、ちゃんと基本を抑えてないとやっ ぱ厳しい • まだリファレンス捨てちゃいけないｗ。
- 27. ご清聴ありがとう ございました！