文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

Youtubeの新UIにPolymerが使われ、Web Componentsが本格始動するのか!?

Web ComponentsとPolymerは数年前から話がありましたが、仕様が未定だったりして表立った動きがあまり見られませんでしたが、YoutubeのPolymer実装を機に本格始動するかもしれませんね。

f:id:treeapps:20170817135400p:plain

去年ニコニコ動画のプレミアムアカウントを退会して以来、私は完全にYoutubeに移行しました。

そのYoutubeですが、世界第3位で22.6ビリオン(22.6億)PVを誇る(SimilarWeb調べ)Youtubeに新UIが導入されます。

まだ正式に導入されておらず、先行導入の形となっています。

youtube-jp.googleblog.com

ここで注目なのは以下ですね。

サイトデザインは、Polymer と呼ばれる、迅速な機能開発を可能にする新しい高速フレームワークで構築されています。そして本日から提供するのは、Polymer で開発された新機能のひとつである Dark Theme です。YouTube 全体の背景が暗くなることで「グレア」を減らしながら、動画の色をより正確に再現することができます。今後も新機能が登場する予定ですので、ご期待ください。

WebComponentsのポリフィルであるGoogleのPolymerが使われているとのことです。

ちょっと確認してみましょう。

f:id:treeapps:20170818210341p:plain

うおー、マジですね。ちなみにモバイルサイト側は新UIの導入は無しで、Polymerではありませんでした。


私が知る限り、GoogleがPolymerを導入しているサイトはもう1つあります。

以下です。

f:id:treeapps:20170818210747p:plain

サイトというか、Google Chromeブラウザの設定画面が既にPolymerで作られています。


Youtubeというトップサイトに導入される事を考えると、Googleごそろそろ本腰入れてWebComponentsの標準化に取り組むのかと想像しちゃいますね。

一応ですが、WebComponentsとは、以下のようです。

Web componentsは、WebページやWebアプリケーションの中で新たに、再利用可能でカプセル化された独自のHTMLタグを作成するためのWebプラットフォームのAPIです。独自に作成したコンポーネントやウィジェットは、Web componentsの標準をベースに構築されているので、あらゆるモダンブラウザ上で動作するでしょう。また、HTMLと連動して動作するどんなJavascriptライブラリやフレームワークとも併用できます。

Web componentsは、既存のWeb標準をベースにしています。 Web componentsのサポート機能は現在HTMLやDOMの仕様に追加されており、Web開発者はカプセル化されたスタイリングとカスタムの動作を使い新たな要素で簡単にHTMLを拡張できます。

http://qiita.com/jtakiguchi/items/b1315f53b3726ff11b61#web-componentsとは何か

ここ数年で「WEB標準」というものが非常に重要視されてきているので、間違いなく世界的に流行していく事が予想されますね。Polymerでの実装例を見ると、React・Angular・Vueのようなコンポーネントの概念があるFW経験者にとっては(ぱっと見)似たような実装になるっぽいので、入りやすい可能性はあります。

中には「iron-ajax」などの「ん?これって使い易いのだろうか?」と思ってしまうものもありそうですが。。。

https://www.webcomponents.org/element/PolymerElements/iron-ajax

<iron-ajax
    auto
    url="https://www.googleapis.com/youtube/v3/search"
    params='{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
    handle-as="json"
    on-response="handleResponse"
    debounce-duration="300"></iron-ajax>


Youtubeという巨大サイトにPolymerを投入してくるGoogleの真意はどうなのか?Chromeの設定画面に導入して良い感触があったから導入したのか?色々疑問は湧いてきますが、なんにせよ、WEB標準は追って損は無い(多分・・・)と思われるので、エンジニアの方々はそろそろ素振りをしていった方がいいかもしれませんね。