AmazonとTwitterの吹き出しコンポーネントの実装方法を調査してみた

吹き出しコンポーネントとは

吹き出しコンポーネントは会話などを表示するために方向を表示する三角のアローとボーダーのある四角いボックスを組み合わせたUIコンポーネントを意味します。英語ではSpeech Balloonと言うそうです。会話のほかに、ボタンの機能説明やメニューの拡張などにも使います。

この記事の目的

この記事では吹き出しコンポーネントの実装・拡張しやすいベストプラクティスを探します。

Amazonパターン

Amazonではトップナビゲーションバーのログインボタンをホバーしている間にログインと新規登録を促す吹き出しが出てきます。

吹き出し部分のHTML構造は下のように、

<header>
    <div id="nav-belt">
        <div class="nav-left"></div>
        <div class="nav-fill"></div>
        <div class="nav-right">
            <div id="nav-tools">
                <a class="nav-a nav-a-2 nav-truncate" id="nav-link-accountList">
                    <div class="nav-line-1-container"></div>
                    <span class="nav-line-2 nav-long-width"></span>
                    <span class="nav-line-2 nav-short-width"></span>
                </a>
            </div>
        </div>
    </div>
    <div id="nav-flyout-anchor">
        <div id="nav-signin-tt nav-flyout">
            <div class="nav-arrow">
                <div class="nav-arrow-inner">
            </div>
            <div id="nav-signin-tooltip"></div>
            <div class="nav-flyout-buffer-left"></div>  
            <div class="nav-flyout-buffer-right"></div> 
            <div class="nav-flyout-buffer-top"></div>   
            <div class="nav-flyout-buffer-bottom"></div>    
        </div>
    </div>
</header>

なります。

ポイント解説

<div id="nav-belt">はナビバーを指します。そして、吹き出しの部分はnav-flyoutと名付けている。このネーミングから、吹き出しはナビバーに専属していることが分かり、さらにログインボタンの吹き出し以外にもほかのナビバー項目も吹き出しが存在することが推測できます。実際に、ログインボタンの左隣のリージョンアイコンの吹き出しも用意されています。

ログインボタンとログインボタンの吹き出しの間は直接なネストではなく、ナビバー全体（<div id="nav-belt">）の下にナビバー用の吹き出しセクション（<div id="nav-flyout-anchor">）を入れることで、ナビバー項目と吹き出しの上下位置は確定されます。そして、後からに他項目の吹き出しを追加したい時に<div id="nav-flyout-anchor">に新しい<div>を追加するだけで済むようになります。ナビバーの実装をいじる必要がなくなり、拡張性はよくなります。

吹き出しコンポーネントの表示は<div id="nav-signin-tt nav-flyout">に対してdisplay: none;指定の有無によってコントロールしています。

吹き出しの左右位置はJSを使って、<div id="nav-signin-tt nav-flyout" style="left: 120px;">のように動的に設定します。このために吹き出しdivをposition: absolute;にする必要があり、同時にその親コンポーネント<div id="nav-flyout-anchor">はposition: relative;にする必要があります。

style="left: 120px;"の中は数値はElement.getBoundingClientRect()を使ってログインボタンのウインドーに対する位置を取得できます。ウインドーサイズが変わるにつれて、吹き出しの位置も動くとしたいなら、イベントトリガーwindow.resizeを追加するといいでしょう。

三角アローはCSSのボータートリックを利用して作られています。上向きのアローならば、

div.arrow-up {
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid white;
}

によって作れます。

三角アローと吹き出し本体の位置調整はleft: 50%; top: -11px;のように指定しています。当然、三角アローのpositionをabsoluteに指定する必要があります。left: 50%;は三角アローを吹き出しの真ん中に持っていくため、top: -11px;は三角アラーを吹き出しの外に突っ張るようにするための指定です。同じロジックで、三角アラーを下向きにする時はbottomをマイナスの数値に指定すればいいでしょう。

Twitterパターン

Twitterではログイン後、サードバーの下にある自分のアイコンをクリックした時にアカウントスイッチとログアウトを促す吹き出しが出てきます。

吹き出し部分のHTML構造は下のように、

<div id="layers">
    ...
    <div class="css-idbjc4n r-1xcajam" style="bottom: 79px; left: 21px;">
        <div class="css-idbjc4n">
            <svg class="r-uoibet r-9uutrm r-lrsllp" style="left: calc(138px);"></svg>
            <div class="css-1dbjc4n r-1azx6h r-7mdpej r-1vsu8ta r-ek4qxl r-1dqxon3 r-1ipicw7">
                <div class="css-1dbjc4n r-1w50u8q">
                    <li></li>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>

なります。

ポイント解説

Twitterの場合、scopedスタイルではなく、1種類のスタイルを1クラス名に集約するようにスタイルを定義しています。例えば、上の例に何度も出てきたclass="css-idbjc4n"はFlexboxのスタイルを指定するクラスとなっており、このクラスのスタイルをいじると、クラス名にcss-idbjc4nが入っている全divが影響を受けます。そのため、HTMLのDOMツリーを見る時の可読性は非常に低くなっています。一方的に、スタイル共通化によって、画面全体のスタイルの統一感が向上します。

<div id="layers">で分かるように、Twitterでは吹き出しのために画面全体に新しいレイヤーを追加しています。

三行目の<div class="css-idbjc4n r-1xcajam" style="bottom: 79px; left: 21px;">は吹き出しのルートノードとなっています。positon: fixed;にすることで、画面（Viewport）に対する位置を設定することが可能となります。style="bottom: 79px; left: 21px;"はその位置の指定となります。具体的な数値はAmazonパターンと同様、JSを使って、実際のログインアイコン（上のスクリーンショットの一番下）の位置から計算している可能性が高いでしょう。ただ、画面全体に対して位置を指定しているから、水平位置leftのほかに、垂直位置のbottomも指定しなくてはなりません。

吹き出しコンポーネントの表示は、上の吹き出しルートノードの生成と削除によってコントロールしています。実際、ログインボタンをホバーすると、吹き出しのDOMノードは生成されます。

<svg class="r-uoibet r-9uutrm r-lrsllp" style="left: calc(138px);"></svg>は三角アローを指しています。TwitterではSVGで三角を描画しています。SVGで描画した三角はデフォルトで上向きとなっており、三角アローの向き先の調整はtransform: rotate(180deg);によって実現しています。

水平位置ではstyle="left: calc(138px);のように調整していて、138pxという数値はおそらく吹き出しのサイズと三角アローのサイズから計算した値と考えられます。CSSを確認したところ、吹き出しボックスはwidth: 300px;で、三角アローのサイズはwidth: 24px;となっているから、leftからは300/2 - 24/2 = 138pxを移動すれば、三角アローは吹き出しの真ん中に行くでしょう。

比較

参考

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
https://www.amazon.co.jp/
https://www.twitter.com/