Shadow DOM - Web Components を構成する技術
この記事は webcomponents.org の記 事とのクロスポス トです。 Shadow DOM を利用すると、DOM 要素に、ウェブページの他の部分とは切り離された、 ノード内だけで有効なスタイルやマークアップを含んだ DOM ツリーを追加することがで きます。この記事と動画では、この Shadow DOM について解説します。 Shadow DOM とはなにか？ # こちらは HTML5 の video タグで表示された動画です。ご覧頂けるとお分かりのように、 コードは video タグのみという単純さでありながら、動画そのものだけでなく、制御用 の UI も表示することができています。 <video src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" controls></video>
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
Web Components(+Virtual DOM)ラッパー書いてみた
Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所から人様のライブラリを借りてツギハギして習作してみた次第。借りてきたライブラリ（HTML String パーサと Virtual DOM）は独自実装しても楽しそうなので、やる気があればやる。 もちろん実験品なので、実用には耐えない Files claylump.polyfill.js（webcomponents.js + window.fetch + es6promise） claylump.run
Polymer と Web Components の違い9選（もとい Polymer の便利機能）
違い、または付加機能 色々な周辺事情で、勢力を広げつつある Polymer さん。（つい最近、それに加担したような気もする） 「どこまでが Web Components で、どこからが Polymer なのか」を理解するためにもPolymerの機能をメモる。Polymer は色々なことを便利にしてくれるライブラリであり、差分を言い出すとキリがないので主要なポイントだけ。 <template> が自動で Shadow DOM に放り込まれる Shadow DOM内の <link> をインラインの <style> に展開 repeat のサポート {{interpolate}} のサポート <element> のかわりを <polymer-element> としてサポート on-click とかイベントハンドラの宣言 this.$ による idが付加された要素のコレクション observe に
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう 佐藤歩（株式会社サイバーエージェント） この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。 Material Designという視覚的言語 Material Designの目的は、ひとつの視覚的な言語（Visual Language）によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。 それを実現するため、伝統的なグラフィックデザインとテク
Web Componentsについて、いま思うこと - console.blog(self);
第49回 HTML5とか勉強会に行ってきた。テーマは「HTML5最新情報 @Google I/O」だけど、Web Components祭りだったと思う。スタッフなので受付の案内したり、ピザやビールを並べたり、ピザやビールを食べたり飲んだりした。 第49回 HTML5とか勉強会 : ATND 第49回 HTML5とか勉強会 - Togetterまとめ 動画が上がってる。はやい！ セッションはこんな感じ。 第49回HTML5勉強会 Google I/O 2014サマリー from Takuya Oikawa Google I/O サマリー @takoratta Web Componentsが変えるWeb開発の未来 泉水翔吾 @1000ch Material Design + Polymer 佐藤歩 @ahomu Material Design と Polymer - HTML5とか勉強会に登壇
Web Componentsが変えるWeb開発の未来
Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか
2014-07-22のJS: Chrome36、Web ComponentsとPolyfillとCustom Element | JSer.info
JSer.info #184 - Chrome 36.0がリリースされました。 同じくChromium 36ベースのOpera23もリリースされています。 Operaのリリースノートの方が変更内容が分かりやすいかもしれません。 Dev.Opera — Opera 23 released Chromium Blog: Chrome 36 Beta: element.animate(), HTML Imports, and Object.observe() 何故かWeb Components(主にPolymer)に関する記事が色々出ていたのでまとめて紹介します。 Web Componentsの概要について知りたい方はまずTender Surrender: なぜ Web Components はウェブ開発に革命を起こすのかを見るといいでしょう。 The roles of AngularJS an
Web ComponentsのWebブラウザ別動作を調べてみた
Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか？Polyfillとして適用するのは、もちろん platform.jsです。これを使って、複数のWebブラウザで動作検証をちょっとしてみようと思います。試してみたのは、以下の3つです。 基本的なWeb Componentsの動作確認 HTMLElement#createShadowRoot()の動作確認 Shadow DOMのCSSスコープ それぞれ見ていきましょう。 基本的
HTML5DevConf May 2014: Steve Souders, Fastly : High Performance Web Components
How many photo carousels have you built? Date pickers? Dynamic tables and charts? Wouldn't it be great if there was a way to make these custom elements encapsulated and reusable? Welcome to Web Components! The building blocks are well known: HTML templates, custom elements, HTML imports, and shadow DOM. It's fairly easy to build simple examples. But what happens when performance degrades? Join thi
でも、それでも、Web Components with Polymerに全力で投資する - nekovaの日記
エモくない話はQiitaに書きました http://qiita.com/nekova/items/30f1e11d6adfa1ff1ba9 WebComponentsって何なの agektmrさんがWeb Componentsについて詳しくは知らない人に向けて、素晴らしい記事 を書いてくれているので読まない手はありません。 agektmrさんの記事読んだ後はWeb Componentsを使ってみよう！を読むのが良いと思います。 Polymerって何なの Polymerとは、一部のモダンブラウザが対応しているWeb Componentsの機能を、未対応ブラウザに提供するためのPolyfillライブラリです。 一部のモダンブラウザとはChromeとOperaを指します。つまり、それら以外のブラウザのためにはPolymerが必要です。 先日のGoogle I/Oで発表されたMaterial De
Web Components and concepts ShadowDOM imports templates custom elements - Ultimate Courses
Web Components, the future of the web, inspired from attending Google I/O I decided to pick up Web Components and actually build something. Since learning the basics around a year ago, it’s changed and advanced a lot! Thought I’d write a post on it and share my first web component yesterday (built with Polymer). Before I get into Polymer, we’ll look at Web Components in this post, what it means fo
表現のコンポーネントとエレメント指向 - fragmentary
Google I/Oに行ってきたのでそれ関連の話題を。 Paper Elementsのエフェクト要素 Material Designというデザイン言語が出て、そのWebへの適用手段としてPolymerのPaper elementsが発表された。 CodeLabsでもPolymerとPaper ElementsでTodoリストアプリをPolymerとPaper Elementsで作るというコースがあった。この中に、エフェクトを指定するステップがある。ここでほーと思ったのが、影をキャストする際にはpaper-shadowを、波紋の効果を出すpaper-rippleを使うこと。エフェクトが要素になっているのだ。 表現が必ず要素化されているわけでもない。固定化されたツールバーがあって、スクロールし始めた際に下のコンテンツから浮き出るような表現をMaterial Designではwaterfallと
Web Components を支えるPolyfillライブラリ
Hello 生成されるJSそのものはピュアな感じなので、たしかにbosonicを捨ててもWeb Componentsとして成り立ちそうではある。 瑣末だが、この記事を書いてる時点で試したらWeb Platform featuresのフラグをEnableにしたCanaryで、bosonic-pollyfillsがエラー吐いてる... 余談、実はえらいかも Polymerコンポーネントって、結局Polymer入れないと使えないなら、BackboneJSで使えないAngularディレクティブみたいなもんな気がしてきた。Bosonicのコンセプト、実は偉いかも。（出来る範囲は制限されるかもしれないけど） — あほむバーガー (@ahomu) June 30, 2014 結論 個人的にはふつうのPolyfillとして動いてくれるものを精査したかったのだけど、結果的に Polymer/platform
日本一手抜きなWeb Compornents入門
Polymerを使ってWeb compornentsのShadowDOMを使い独自タグを作ってみます。 Polymerのサンプルをあさっていたのですが、わりとどれも多機能で大変だったので、機能をごっそり削り、どうやって使うかのわかりやすさを優先しました。 環境構築を含めて極力シンプルな手段によってmy-elementタグを作ってみようとおもいます。 Polymerのダウンロード公式のチュートリアルではPolymerを取得するのにBowerを使っています。 しかしBowerを使っていない人も多いと思うので今回はgit-hubから直接ダウンロードします。 もちろん、GitやBowerを使ったほうが後々は楽なので、ちゃんとやりたい人はGitなりBowerなりを使って下さい。 Polymerをダウンロードするには https://github.com/polymer/polymerにアクセスしDo
HTML Imports: ウェブのための #include - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Polymer!
Addy Osmani Senior Developer Relations Engineer, google.com/+AddyOsmani @addyosmani addyosmani.com "Learning JavaScript Design Patterns" "Developing Backbone.js Applications" Today's agenda
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Six technologies that will change the web platform
webcomponents.org - Discuss & share web components
webcomponents.org - Discuss & share web components