Embed Size (px)
DESCRIPTION
GEEKLAB.NAGANOのイベント「HTML5時代のフロントエンド開発入門」でLTした内容です。
Citation preview
WebComponentsとPolymerを使ってみた
中澤 祐一 @y_nakazawa1220
自己紹介• Python + Djangoでスマホアプリのバックエンド開発
• ぎーらぼ管理人
• フロントが苦手(汗)
• イングレスやりましょう！
WebComponentsと Polymer
Google I/O 2014 報告会
これヤバイんじゃね！
WebComponents
• 自分で好きなタグが作れる
• UIのコンポーネント化をして再利用できる
• なにより便利そう（楽できそう・・）
「購入ボタン」を同一サイトで使い回したい
• 外観 HTML/CSSで書いて
• ボタンクリック後の操作 をjsで書いて
• 冗長なコードを書くことになる
解決！！
仕様
1. HTML Template
2. Shadow DOM
3. Custom Elements
4. HTML imports
それぞれの絡み1. HTML Template > コンポーネント化する処理
2. Shadow DOM > 1.のカプセル化
3. Custom Elements > 1.を使用する仕組み (タグの定義)
4. HTML imports > 1.を呼び出す仕組み
youtubeタグ を作ってみた
（写経してみた・・）
HTML templatex-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>
Shadow DOMstyleの隠蔽化<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>
Custom Elements// x-youtube タグを作る var XYoutubeProtoType = Object.create(HTMLElement.prototype, { createdCallback: { value: function() {} } } # registerElement()でCustom Elementを登録する var XYoutube = document.registerElement('x-youtube', {prototype: XYoutubeProtoType});
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>
こんな感じw
注意点
• Chrome か Chrome Canaryで
• chrome://flagsにアクセスして、「試験運用版のウェブ プラットフォームの機能を有効にする。」を有効にする
Polymer
ああ、これか！！
What is a Polymer?• Web Conponentsを包んだライブラリ (Polymer.js)
• Polyfillがブラウザの未サポートを補ってくれる
• 既にCustom Elementsが用意されている
• Templateが作れるDesignerツールがある
Polymer Designerhttp://www.polymer-project.org/tools/designer/
こんなコードを吐いてくれる<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> !
感想・・
自分のフロント嫌い （もとい苦手）は直るのか！？
• 使えるコンポーネントが増えてくれば生産性上がりそう
• 自分で作る分には、ちゃんと基本を抑えてないとやっぱ厳しい
• まだリファレンス捨てちゃいけないｗ。
ご清聴ありがとう ございました！
