ナユ・コンポーネント

この記事は ナユコロニー2 Advent Calendar 2018 の7日目の記事です。

TL;DR

ナユさんの NAYUCOLONY のロゴの Web Components を作りました。
見た目のサンプルはこちら。

できること
・他のスタイリングに影響されることなくロゴを表示する
・好きな大きさでロゴを表示する
...それだけ

（これ、作り終わったあとで svg 使えばよくない...？って思ったんですけど、みんなはそんな寂しいこと言わないでね）

Nayu Components Inside

全部のソースコードは読んでも楽しくなさそうなのでここに置いておきます。見たい人だけ見てみてね。

Web Components をやってみたかったので、やりました。
だから、ブラウザや環境によってはちゃんと polyfill しないと表示されないかもしれない。

Web Components については色んなところで色んなひとが説明しているので省きますが、僕の感じている特徴/メリットだけ以下に挙げます。

・Shadow DOM に CSS や JavaScript のスコープを閉じ込めることが出来るので、無関係なスタイルの影響や名前空間の汚染がなくなる
・Web の標準仕様になっているので、ライブラリに依存することなくコンポーネントを定義できる。これにより、任意の UI ライブラリ（例えば React や Vue.js など）からコンポーネントを使用できる

もう1年前の記事ですが、『Web Componentsについて気になること、泉水さんに全部聞いてきました！』がとても分かりやすくてよかったので紹介しておきます。

template を書くのに lit-html を使ってみたけど、VSCode の拡張機能を入れたら syntax highlight してくれて書きやすかったです。機能や記法もシンプルで、普段 JSX を書いている身としてはすんなり書けて良かった。公式ドキュメントがわかりやすくてよい。

見た目に関しては、ひたすら div を積みまくり、CSS をガリガリ書きました。気合いゲー。

内部では 2 つのコンポーネントで構成されていて、ひとつが NayuComponent というやつで、中身はこんな感じ👇。ここに一文字ずつ要素（seven-seg）が並べられていて、後ろにはロゴを横断する横棒が置いてある。

<div class="w">
    <div class="inner">
        <seven-seg segs="bc,ef,i"></seven-seg>
        <seven-seg segs="bc,ef,a,g"></seven-seg>
        <seven-seg segs="b,f,g,h"></seven-seg>
        <seven-seg segs="bc,ef,d"></seven-seg>
        <seven-seg segs="ef,a,d"></seven-seg>
        <seven-seg segs="bc,ef,a,d"></seven-seg>
        <seven-seg segs="ef,d"></seven-seg>
        <seven-seg segs="bc,ef,a,d"></seven-seg>
        <seven-seg segs="bc,ef,i"></seven-seg>
        <seven-seg segs="bc,d,f,g"></seven-seg>
        <div class="horizon">
            <div class="upper"></div>
            <div class="middle"></div>
            <div class="lower"></div>
        </div>
    </div>
</div>

<style>
...
</style>

もうひとつのコンポーネントが、さっき出てきた SevenSeg というやつで、"一文字" を定義しているやつ。名前は 7セグメントディスプレイ から持ってきてる。中身はこんな感じ👇

<div class="w">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="bc"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
    <div class="ef"></div>
    <div class="g"></div>
    <div class="h"></div>
    <div class="i"></div>
</div>

<style>
...
</style>

あとはこれを html から import してきて、Custom Element を定義する。

<script type="module">
    import NayuComponent from "./index.js";
    window.customElements.define("nayu-component", NayuComponent);
</script>

これで html の中で <nayu-component></nayu-component> が使えるようになった！

あと、好きな大きさで表示できるように basefontsize っていう attribute を受け付けていて、<nayu-component basefontsize=80></nayu-component> と書くとロゴの文字の大きさが 80px になるようにしてあります。

描画されたものを見ると中身はこんな感じ。#shadow-root ってありますね。

あとがき

結局 svg 使えばよいじゃん、と気づいてちょっとヘコんだ。
で、それなら好きな文字列を NAYUCOLONY ロゴ風味で出せるようにしようとかおもって頑張ったけどまだ途中。。

ナユコロニーのアドベントカレンダーでこんなに頑張ると思わなかった。。

ていうかナユコロニーのアドベントカレンダーってなんだよ。。