Alex Russell が Fronteers Conference 2011 で初めて発表したWeb Componentsは、長きにわたり開発者の注目を集めてきました。その概念はコミュニティに衝撃を与え、発表以来、講演や議論のテーマとして多く取り上げられています。 2013年 Google は、Web Componentsをベースとするフレームワーク、 Polymer をリリースしました。その目的は、新規APIの動作を簡易的にチェックし、コミュニティからフィードバックをもらい、さらなる資金や評価を得ることでした。 導入から4年が経った今、Web Componentsは十分に普及している はず です。ところが実際は、”あるバージョン”のWeb Componentsに対応したブラウザは Chrome しかないという現状です。Polyfillがあっても、大半のブラウザでサポートしない限り、W
我々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でイベントを伝達する部品の作り方」っていうエントリを投稿しましたが、さらに検証をしてみたのと、ちょっと勘違いしてた点があったので、再度イベント伝達について取り上げようと思います。 Shadow DOM内で発生したイベントの伝達 そもそもここから勘違いしてたのですが、最初僕は「Shadow DOM内で発生したイベントは、ホスト側には伝達されない」と思ってました。Shadow DOM内で起きたことは部品内で捕捉して、その後ホスト側にイベント伝達しなおすコードを書かなくちゃいけない、って考えてました。そのため、Polymerが提供してる部品は、イベントの伝達をどうしてるんだろう、きっとコードの中でfire()してるに違いない、って思ってたんです。 ところが、確認してみると、イベントを何か扱ってるコードは、全く見当たりません。例えば、core-icon-bu
Web Componentsを使った部品を考えたときに、単にタグをWebページに配置する利用方法も多いと思いますが、同時に何かパラメータやコンテンツを指定することで部品の挙動が変化する、といったことができると嬉しい部品もいっぱいあると思います。Shadow DOMが適用されることになるため、Webページと部品は基本的に「隔離」されます。そのため、何か情報を渡すための仕組みが必要になってきます。 ここでは、以下の2つの方法について紹介してみたいと思います。 属性を使って情報を渡す。 本文を使って情報を渡す。 属性を使って情報を渡す 最初に紹介するのは、部品が提供するタグの属性値として情報を渡す方法です。まずは、部品を使ったWebページ側のコードを見てみましょう。 <!DOCTYPE html> <html> <head> <script src="bower_components/platf
Web Componentsで作られた部品は、もちろんそれを置いただけで効果があるものも多いでしょうが、その部品と他の部品の間、あるいはその部品を置いたWebページとの間でインタラクションをしたくなると思います。簡単な例であれば、画像付きボタン部品をWeb Componentsにて独自に実装した場合、そのボタンが押されたことをその利用側に伝達できなければなりません。伝達するための方法は、もちろんイベントです。 部品内でイベントを発生させ、それを部品の利用側に伝えるためのコーディング方法について、実際にサンプルを作ってみました。ここで紹介してみたいと思います。 カスタムイベントとその捕捉の基本 JavaScriptでは既存の多くのイベント種別が定義されています。その代表例は、clickやloadでしょう。このようなイベントを開発者が独自に定義し、実際にそのイベントを配送することができます。
Web Componentsは、Custom elements、HTML Templates、Shadow DOM、そしてHTML Importsと言う4つの基礎技術から成り立っています。これらを組み合わせると、独自のタグセットを再利用可能な形で部品化できる、という触れ込みになってます。 その再利用可能性はどこから来るのでしょうか？その可能性を大きく引き上げてくれているのが、Shadow DOMによる「スコープの隔離」です。 Web Componentsで再利用される部品のほとんどは、見た目を伴うもの、つまりUI部品になるでしょう。UIにとって大事なものは、見た目です。つまり、デザインが部品を利用する側から干渉されてしまっては、再利用可能と言うことができません。CSSでのスタイル指定について、部品の中と外でそれぞれ独立している必要があります。 これを可能にしてくれるものが、Shadow D
Hello 生成されるJSそのものはピュアな感じなので、たしかにbosonicを捨ててもWeb Componentsとして成り立ちそうではある。 瑣末だが、この記事を書いてる時点で試したらWeb Platform featuresのフラグをEnableにしたCanaryで、bosonic-pollyfillsがエラー吐いてる... 余談、実はえらいかも Polymerコンポーネントって、結局Polymer入れないと使えないなら、BackboneJSで使えないAngularディレクティブみたいなもんな気がしてきた。Bosonicのコンセプト、実は偉いかも。（出来る範囲は制限されるかもしれないけど） — あほむバーガー (@ahomu) June 30, 2014 結論 個人的にはふつうのPolyfillとして動いてくれるものを精査したかったのだけど、結果的に Polymer/platform
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.
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
先週はサンフランシスコで勤務先の年次博覧会が催され、中には自分と近いプロジェクトを紹介するセッションもあった。 いい機会なので便乗して宣伝してみたい。自主会社員活動につき勤務先の見解と違っても見逃してください。 さて件の年次博覧会、ウェブ開発者向けの講演の一つで Polymer という新しい JavaScript UI フレームワークが公開された。 Closure, GWT, Angular ときて また別のフレームワークかよ…とぼやく人の気持ちもわかる。でもそれほど被るものでもないから見逃してほしい。 なるべく多くのブラウザで動かそうとする既存のフレームワークと違い、 Polymer は新しいブラウザの機能を使い倒すことで強力なフレームワークを作ろうとしている。 別に特定ブラウザでしか動かないわけじゃない。ただ将来そうした新しい機能が各種ブラウザに備わる日を見越し、 そのときベストに動く
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.
783129 - Implement the document.register interface method mozilla-central: changeset 123773:871fea464883 カスタム要素が作れるようになった。DOM要素は単にDOM APIを呼び出すだけの存在だったのが、独自のメソッドとかを追加できるようにったわけで、よりオブジェクト指向的にJavaScriptを書けますね！ 仕様 Introduction to Web Components Custom Elements サンプルコード 詳細は、テストコードを見たほうが良いかも。 http://mxr.mozilla.org/mozilla-central/source/dom/tests/mochitest/webcomponents/test_document_register.html?force
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
テンプレートとして HTML 断片または DOM 部分木を用いるには、大きく 2 種類の方法が考えられます。1 つは文字列としてテンプレート出力する方法。これは DOM API に不慣れな人にも分かりやすい反面、セキュリティ問題を引き起こしやすいデメリットがあります。例えば、次のように ul 要素を出力するコードがあるとします。 var attr = 'sample.html'; var text = 'サンプル'; document.getElementById ('result').innerHTML = '<ul>' + '<li><a href="' + attr + '">' + text + '<\/a><\/li>' + '<\/ul>'; 一見してお分かりのように、もし変数 attr に "、<、>、& が含まれていたら、あるいは変数 text に <、&、]]> が含まれ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
