EagleLand

ブラウザのNotification APIをWeb Components化した

Published at 2014-07-15

巷で話題のWeb Componentsですが、コンポーネント化していくのは所謂UIパーツだけに留まりません。 XMLHttpRequest部分を抽象化しているcore-ajaxとか、core-localstorageとか。 そんなわけで試しにNotification API周りをラップしたx-notificationを作ってみた。 これを使えば、今までJavaScriptから実行していた部分を、HTML内で宣言的に記述することが可能になる。有意義かどうかは、さておき。

ダウンロード

npmbowerでどうぞ。もちろんリポジトリをクローンでも。

$ npm install x-notification
$ bower install x-notification

使い方

使いたいページで、x-notification.htmlをインポートする。

<link rel='import' href='x-notification.html'>

あとは<x-notification>タグを記述する。

<x-notification autoshow title='バルーンのタイトル'>バルーンの本文</x-notification>

自動で表示したい場合はautoshow属性を付与することで自動で表示されて、 JavaScript側でコントロールしたい場合は対象の<x-notification>要素を取得し、show()を実行する。

document.querySelector('x-notification').show();

属性等の詳細はリポジトリを参照して下さい。

環境とか

NotificationのAPIが実装されていないとダメなのはもちろんのこと、 HTMLImportやらDocument#registerElement()やら、Web Components周りのAPIが無いと動きません。 ただ、Web Components側のAPI群に関してはPolymer/platform等でPolyfillすれば動きます。

x-notification自体はピュアなWeb Componentsだけど、デモ用にx-notification-editorというPolymerを使ったWeb Componentsを作った。 x-notification-editor内にx-notificationを内包し、PaperElementsを駆使して動的にx-notificationの属性値をいじれるようにしている。

Customize Example の所にソースコードを表示するようにしてあって、 そこはPolymerが提供している2-way bindingをたっぷり使っている。これは便利だと思った。

CustomElements.io

CustomElements.ioはBowerで登録されているWeb Componentsのギャラリーサイト。 サイトの上部にあたかも登録フォームがあるのでここから申請するのかと思ったら、 bower.jsonkeywordsweb-components が含まれていると自動で追加されるそう。

参考資料

タイトルと URL をコピーしました