ついてくる脚注

皆さんこんにちは。文章には、脚注が含まれることが多くあります[1]。このようにWebページの形で提供される記事においては、脚注は本文の下に記載されるのが一般的です[2]。

このように表示される脚注を読むためには、本文と脚注を行き来する必要があります。しかし、脚注は本文の内容を補足するものであるため、本文と脚注とを同時に目に入れて読めるのが理想です。多くのウェブサイトでは、本文中に表示される脚注番号はリンクになっており、クリックすると脚注が表示されます。そして、脚注を読んだら脚注の番号をクリックすると、本文に戻ります。これは結構面倒な操作です[3][4]。

筆者はもともと脚注を多用する文章を書くほうだったのですが、脚注は読むのが面倒だという考えが強くなり、最近はあまり脚注を使わなくなりました[5]。

しかし、よくよく考えれば、脚注の表示方法を工夫して脚注を読む体験を良くするほうが筋がよいのではないかと思いました。そこで、この記事では、脚注を本文と一緒に表示する方法を実践してみました。

この記事での脚注の表示方法

この記事では、脚注が常に画面の下に表示されています。こうすることで、本文中に脚注が現れたときは、視線を移動させるだけで脚注を読むことができます。これは紙の本における脚注の表示方法に近く[6]、脚注を読む体験を良くすることができます。

ただ、全ての脚注が画面の下に表示されていると邪魔です。そこで、この記事では現在画面に表示されている番号（本文中の [1] のような表示）に対応するものだけを画面の下に表示しています。スクロールするだけで画面の下がちらちらと動くのが不愉快に感じられる恐れもありますが、本文を読んでいて脚注が出てきて下を見たら対応する脚注が読めるというのは、悪くない体験なのではないかと思います。

実装方法

実はこの記事は技術記事なので[7]、ここからはこのような挙動の実装方法について説明します。

まず、本文中にある脚注番号が、画面内にあるかどうかを判定する必要があります。これに使えるのが Intersection Observer APIです。このAPIを用いて脚注番号の要素を全て監視することで、今どの脚注が画面内にあるかを判定することができます。

詳細は省略しますが[8]、Intersection Observerを用いて次のように、現在表示されている脚注番号に対応する脚注は`data-visible`属性をつけるようにします[9]。

<footer>
  <p class="footnote" id="footnote1" data-visible>脚注1</p>
  <p class="footnote" id="footnote2">脚注2</p>
  <p class="footnote" id="footnote3">脚注3</p>
  ……

実際の表示・非表示の制御はCSSで行うことができます。

footer p.footnote:not([data-visible]) {
  display: none;
}

また、画面が小さい端末においては脚注が画面を占拠しすぎないように、次のようなCSSで同時に表示される脚注を3個までに制限します[10]。

@media (width <= 640px) {
  footer p.footnote[data-visible] ~ p.footnote[data-visible] ~ p.footnote[data-visible] ~ p.footnote {
    display: none;
  }
}

インタラクションの追加

以上で基本的な機能は実装できました。ただ、単なるdisplay: noneのつけ外しだと動作が自然ではありません。ここはひとつ、マイクロインタラクションというのをやってみましょう。

ただし、今回はView Transitions APIを使ってみます。そのためGoogle Chromeでしか動作しませんが[11]、趣味でやっていることなのでご容赦ください。

このAPIを使ってインタラクションを加える場合は、DOM操作をdocument.startViewTransitionで囲むだけでOKです。

if (document.startViewTransition) {
  document.startViewTransition(updateFootnotes);
} else {
  updateFootnotes();
}