あーさーの備忘録

ゆっくり自由に生きてます

Youtubeのデザイン変更とCustom Elements

Youtubeのデザインが変わった

静岡からこんばんは。あーさーです。ところで、誰もが知っている動画サイトYoutube(https://www.youtube.com/?gl=JP&hl=ja)のデザインが変わったのをご存知でしょうか。マテリアルデザインを取り入れ、スッキリしたレイアウトになりました。また、グレーテーマに変更できるようになりました。ドロワーメニューを開いたときに、スクロールバーの有無でレイアウトが若干ズレるのが気になりますが、とてもスタイリッシュなデザインだなぁと思います。

せっかくなのでコードの中身を見てみたのですが、<app-drawer><yt-icon>などという見慣れない要素を見かけました。要素名に-を使っていることからCustom Elementsで間違いなさそうですね。

Custom Elementsとは?

独自の要素を定義して、よりセマンティックなマークアップができるようにする、Web Componentsの仕様の1つです。Web Componentsには他にもTemplatesやShadow DOMなど、あらゆる部品をコンポーネント化して再利用しやすく、かつ外部を汚染しないようにする仕様が含まれています。詳しくは、このあたりの記事が分かりやすいので参考にしてください。

qiita.com

liginc.co.jp

Custom Elementsを使うと、今まで

<div class="error">
    <h3 class="error_headline">エラー</h3>
    <ul class="error_list">
        <li>「名前」は必須事項です。</li>
        <li>「年齢」は半角数字で入力してください。</li>
    </ul>
</div>

と、既存のタグにBEMなどの命名規則を利用してエセコンポーネント化していたものが、

<error-box>
    <error-headline>エラー</error-headline>
    <error-list>
        <error-element>「名前」は必須事項です。</error-element>
        <error-element>「年齢」は半角数字で入力してください。</error-element>
    </error-list>
</error-box>

のようにマークアップできるようになります。syntax highlightが上手く対応してくれていませんが……。見ただけで何の部品化分かりやすいですし、いちいちクラスをつけなくても良いし、マークアップしてる感がすごいです。

Custom Elementsの使い方

勝手に独自要素を作るだけではレイアウトするのにブラウザが困ってしまうので、Javascriptでちゃんと定義してあげる必要があります。

document.regisiterElement()というメソッドを使用します。Custom Elementsで作る要素の名前には必ず-を含む必要があります。そうしないと既存のタグとの住み分けができませんからね。

var errorBox = document.registerElement('error-box');

他にも既存のタグを継承して……など細かいところがいろいろあるのですが、自分で説明するよりほかのサイトを見たほうが分かりやすいので、前述のリンクをご参照ください。

Custom Elementsサポート状況

いつもお世話になっているcaniuse(http://caniuse.com)で確認したところ、ChromeOperaでは対応しているようなのですが、Firefoxではin-development、EdgeではUnder Considerationということで、まだまだ本格的に利用できるわけではなさそうです。あれ、じゃあYoutubeはどうやって他ブラウザ対応しているんだろう。IEの開発者ツールで見たら普通にdivとかbuttonとかのタグに置き換わっていました。

どのように要素を作るのか、ShadowDOMの使い方、非対応ブラウザの対応方法、いろいろ調べてみたかったのですが眠いので今日はここまでにしようと思います。