Web Componentsを使った部品を考えたときに、単にタグをWebページに配置する利用方法も多いと思いますが、同時に何かパラメータやコンテンツを指定することで部品の挙動が変化する、といったことができると嬉しい部品もいっぱいあると思います。Shadow DOMが適用されることになるため、Webページと部品は基本的に「隔離」されます。そのため、何か情報を渡すための仕組みが必要になってきます。 ここでは、以下の2つの方法について紹介してみたいと思います。 属性を使って情報を渡す。 本文…
Web Componentsで作られた部品は、もちろんそれを置いただけで効果があるものも多いでしょうが、その部品と他の部品の間、あるいはその部品を置いたWebページとの間でインタラクションをしたくなると思います。簡単な例であれば、画像付きボタン部品をWeb Componentsにて独自に実装した場合、そのボタンが押されたことをその利用側に伝達できなければなりません。伝達するための方法は、もちろんイベントです。 部品内でイベントを発生させ、それを部品の利用側に伝えるためのコーディング方法について…
Web Componentsでは、標準技術として幅広いWebブラウザで利用可能とすべく、Polyfillという名の「未対応Webブラウザ向け実装」が開発され、すでに利用可能です。このPolyfillを使うことで、Chromeだけでなく、Firefox、Opera、そしてIEでもWeb Componentsを動作させることができます。 では、実際どこまでPolyfillでWeb Componentsが動作するのでしょうか？Polyfillとして適用するのは、もちろん [platform.js](…
Web Componentsは、Custom elements、HTML Templates、Shadow DOM、そしてHTML Importsと言う4つの基礎技術から成り立っています。これらを組み合わせると、独自のタグセットを再利用可能な形で部品化できる、という触れ込みになってます。 その再利用可能性はどこから来るのでしょうか？その可能性を大きく引き上げてくれているのが、Shadow DOMによる「スコープの隔離」です。 Web Componentsで再利用される部品のほとんどは、見た目…
Custom elements, HTML Templates, Shadow DOM, そしてHTML Importsの組み合わせで成り立っているWeb Componentsは、開発者が独自に「部品」を作ることを可能にします。その部品とは、独自に定義された「HTMLタグ」に他なりません。決められたタグセットを使ってWebアプリケーションを作っていく時代は、そろそろ終わりに近づいています。自分で部品を作り、さらに他の開発者によって公開された再利用可能な部品を取り込んでアプリケーションを構成してい…
そのうち使うかも。 circ/package/bin/net/sslsocket.js [https://github.com/flackr/circ/blob/master/package/bin/net/sslsocket.js](https://github.com/flackr/circ/blob/master/package/bin/net/sslsocket.js) tcp-socket/src/tcp-socket.js [https://github.com/whiteo…
Chromeアプリからソケット通信を行うためのSocket APIがあるのですが、古いAPIから新しいAPIセットに変更になり、利用可能な関数も結構変わりました。特に、受信がイベント駆動方式に変更になったため、受信したデータを自分で取りに行くのではなく、イベントリスナを登録してコールバックによって受け取るようにコーディングしなければなりません。これは全般的にかなり苦痛なコーディングを強いられるので個人的には元に戻して欲しいと思ってるのですが、イベント駆動方式を使いこなすために必要となる関数がいく…
先日行われたGoogle I/Oで華々しいデビューを飾ったMaterial Design。Appleのフラットデザインをさらに推し進めて、視覚効果がリッチになったり、情報を読んでいく際のナビゲーションが規定されていたり、さらに当たり前のようにレスポンシブな仕上がりになっていましたね。個人的な印象は「とにかく派手！見た目重視フィードバック重視！」でした。操作した際の楽しさが考えられてるって感じましたが、皆さんはどう思いましたか？ 基本的なUI部品の視覚効果を見て、「あ、さっそく使ってみたい！」っ…
6月28日に、Six Apart社主催の「MovableType + Chrome Hackathon」に講師としてお呼ばれしてきました。MovableTypeにはData APIというのがあって、MTの中にある情報を取得したり更新することができます。このAPIを使ったChromeアプリや拡張機能を作ってみましょう、というのが今回のテーマです。 会場は、Six Apart社の新しいオフィスでした。  これを使わないという選択肢もとれるわけです。例えば、以下のように自分で自由に作ることができます。 ![framebymyself]…