でも、それでも、Web Components with Polymerに全力で投資する
エモくない話は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 Designも、Polymerチームお手製のコンポーネントを組み合わせて提供されています。（Polymerの普及も睨んだこの戦略には唸った）
それぞれの小さなコンポーネントはGitHubで公開されています。（リポジトリを数えたら120個くらいありました）
Material DesignとBCE
Material Designについての話をする前に、Twitter Bootstrapについて言及します。
Twitter Bootstrapを使ってクールなボタンを提供するには
<button type="button" class="btn btn-default">Play</button>
という風に、class attributesに複数の独自classを指定して、bootstrap内部のstyleを割り当てています。
Before Components Existed(BCE)まではこうすることが最適解だったこうする他無かったのです。
しかし、今はBCEではありません。僕達にはPolymerがあります。
Material Design with Polymerの場合、クールなボタンを提供するのは極めて簡単です。
<paper-button label="play"></paper-button>
styleはclassでもidでもなく、<paper-button>というタグそのものに割り当てられます。
最大の違いは、<paper-button>がカプセル化されるおかげで、名前空間が汚染されないということです。
Twitter Bootstrapの場合、Bootstrap独自のclassと自前のclassのバッティングに気をつけなければなりませんでしたが、Material Designではそんな心配は不要となりました。
さらに<paper-button>では、独自のraisebuttonというattributesを加えるだけでマウスオーバー時のイベントが変わる、というような機能も提供しています。
Keynoteで"visual language"という言葉が使われたのは、まさにこういった視覚効果までもコンポーネント化したからなのです。
Material Designの発表を受けて、「フラットデザインだ〜」という感想しか持たなかった人は、Web Componentsに関する知識が欠落しているかも知れません。
少なくとも僕にとっては、この発表は衝撃的で、これからのWebUIを支える技術となり得るものだと感じました。
時は来た？いや、ベタ書きしろ
一番初めに紹介したagektmrさんの記事では、twitterのshareボタンのコンポーネントを例に挙げ
<twitter-button></twitter-button>
だけで挿入出来る、と書いてありますが実際には、そんな簡単な話ではありません。
<twitter-button>を作った人も、それを使ってる人達もまだまだプロダクションでガンガン使ってるわけではなさそうなので、わりと初歩的なバグが起きてしまう。
これはPolymerの問題というより、Polymerを実戦投入している人が少ないのが原因です。
もし、このような問題がサービスの根や幹で生じたとしたら、解決するべき重要なバグに出くわしたと言えるでしょう。
しかし、たかがTwitterのボタンなのです。こんなことのために時間を割く必要がどこにあるんでしょうか。
<twitter-button> を捨て、 <a> をベタ書きするようにしたとしても
<a href="https://twitter.com/share" class="twitter-share-button" data-text="タイトル">Tweet</a>
たった一行、これだけなんです。シェアボタンなんかのためにCustom Elementsを使う必要なんてありません。Polymerなんて窓から放り捨てて今すぐベタ書きするべきです。
頭を空にしたままでも使えそうな<twitter-button>でさえこの有り様なので、より複雑なコンポーネントにはもっと深い闇が待っているに違いありません。
(polymer.dartの闇はもっともっと深そう。ただ、僕はDartのことが好きなので応援しています。動かなくて心が折れたけど、Polymer.dartもまた使ってみたい)
ちなみに、<twitter-button>はiframeをwrapしているだけの単純な構造なので、似たようなCustom Elementsを作るのに時間はかかりません。
多少の工夫を必要とはしましたが、<hatebu-button>も短時間で作ることが出来ました。
しかし、それらを上手く使うのは難しいということは頭の片隅に入れておいてください。
最後に
<youtube><google-signin><google-analytics><gplus-one><facebook-button><twitter-button>(forkして使ってる)<hatebu-button>(自作)<markdown-awesome>(自作)
dev環境のScastsでは、これだけの数のコンポーネントを利用しています。
現在、Material Designの導入作業中なので、ますますScastsはPolymerに支えられることになるでしょう。
「無理してPolymerなんて使う必要がない」「ベタ書きしろ」と言いながら、開発中のサービスで多用しているのは、Polymerがより進化した先、Web Componentsがウェブ標準となった先に、より良い未来が待ってるはずだと愚直に信じているからです。
Web Componentsがウェブ標準になった暁には、シェアボタンのような非公式コンポーネントは公式のそれによって駆逐されることでしょう。
その時、僕が作ったいくつかのコンポーネントの多くはゴミになります。世知辛いですね。
手を動かして、作って、使ってみたからこそ「Polymer最高だから皆も使おうぜ！」なんて口が裂けても言えないのです。
心の底では「まだ早い、もっと他にやるべきことがあるはずだ」と思っていますし、これからもっと酷い地雷を踏むことになるでしょう。
「でも、それでも」と言い続け、僕はWeb Components with Polymerに全力で投資します。
だってWeb Components最高じゃん。
