ブラウザのNotification APIをWeb Components化した
Published at 2014-07-15
巷で話題のWeb Componentsですが、コンポーネント化していくのは所謂UIパーツだけに留まりません。
XMLHttpRequest部分を抽象化しているcore-ajaxとか、core-localstorageとか。
そんなわけで試しにNotification API周りをラップしたx-notificationを作ってみた。
これを使えば、今までJavaScriptから実行していた部分を、HTML内で宣言的に記述することが可能になる。有意義かどうかは、さておき。
ダウンロード
npmかbowerでどうぞ。もちろんリポジトリをクローンでも。
$ 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すれば動きます。
Re-designed x-notification landing page with Polymer including Paper Elements. http://1000ch.github.io/x-notification #Polymer #WebComponents #PaperElements
— 1000ch (@1000ch_en) 2014, 7月 2x-notification自体はピュアなWeb Componentsだけど、デモ用にx-notification-editorというPolymerを使ったWeb Componentsを作った。
x-notification-editor内にx-notificationを内包し、PaperElementsを駆使して動的にx-notificationの属性値をいじれるようにしている。
- http://1000ch.github.io/x-notification/ - デモページ
- https://github.com/1000ch/x-notification/blob/master/x-notification-editor.html - x-notification-editor要素
Customize Example の所にソースコードを表示するようにしてあって、 そこはPolymerが提供している2-way bindingをたっぷり使っている。これは便利だと思った。
CustomElements.io
You can find x-notification on http://t.co/PbWp0Gxp0a #WebComponents #Notification #CustomElements
— 1000ch (@1000ch_en) 2014, 7月 5CustomElements.ioはBowerで登録されているWeb Componentsのギャラリーサイト。
サイトの上部にあたかも登録フォームがあるのでここから申請するのかと思ったら、
bower.jsonのkeywordsに web-components が含まれていると自動で追加されるそう。