※にマウスオーバーで脚注を表示する

これは何?

HTMLの末尾で読み込むことで、DOMをいじって各種機能を提供するJavaScriptであるpostprocess.jsの一部です。

GitHubにも置いてあります。リポジトリは「<pre>要素内のコードブロックに行番号を表示する」と共有しています。

https://github.com/kmaebashi/postprocess

(前略)
<script src="./postprocess.js"></script>
</body>
</html>

postprocess.jsは、上記<script>要素を読み込んだ時点で実行され、かつ、その時点で本文のDOMが構築済みであることを想定しているため、必ずページの末尾で読み込まなければいけません。

使い方

このプログラムが提供するのは、ページの末尾に脚注を記述し、それを参照する「※1」のようなリンクを文中に付けて、その「※1」にマウスオーバーすることで脚注の内容を読むことができる、という機能です。はてなブログの脚注(たとえばこの記事でも使っています)と同様の機能です。

まず、脚注は、footnoteクラスを付与した<ul>要素の子要素の<li>要素として、(ふつうは)ページの末尾に記述します。

このように、<li>の冒頭では、本文中の「※1」等をクリックしたときにジャンプするための<a name="...">で「※1」を囲んでおきます。

その上で、参照する箇所には、たとえば以下のように書きます。

こう書いておけば、JavaScriptが動かなくても、※1部分をクリックすることでページ下部の脚注にジャンプできますが、postprocess.jsを読み込むことで、※1にマウスオーバーするだけで脚注の内容を読むことができます。

以下の文で、実際にこのページに脚注を付けてみました。「※1」にマウスオーバーすれば脚注が読めると思います。

ではここで、アドレス演算子&を使用して、変数hoge^※1のアドレスを取得してみます。

この脚注の中にはリンクが含まれますが、リンク用のタグがなくなった状態で表示されています。

ソース

postprocess.js(この機能分だけ抜粋)

"use strict;"

const footnoteUlArray = document.querySelectorAll("ul.footnote");

for (ul of footnoteUlArray) {
  const liArray = ul.getElementsByTagName("li");

  for (li of liArray) {
    const toAnchor = li.getElementsByTagName("a")[0];
    const name = toAnchor.getAttribute("name");
    const fromAnchor = document.querySelector('[href="' + "#" + name + '"]');
    let titleText = "";
    const textNodes = toAnchor.parentNode.childNodes;
    for (let i = 1; i < textNodes.length; i++) {
      titleText += textNodes[i].textContent;
    }
    fromAnchor.setAttribute("title", titleText);
  }
}

3行目でfootnoteクラスの<ul>をかき集め、それらすべてについて(5行目のループ)その中の<li>要素をかき集め(6行目)、それぞれのについて(8行目のループ)<a>要素のname属性を引っ張り出してそれを指している<a href=...>を探し出し(11行目)、そのtitle属性に脚注の内容を設定しています(17行目)。

脚注の内容を組み立てるところでは<a>要素の親の子どものテキストをループを組んで貼り合わせていますが、このループを1から始めることで冒頭の「※1」を除外しています。

公開日: 2024/01/06

• ※1 「hoge」というのは、サンプルプログラム等で「何の意味もない名前」であることを示すために使われる名前のひとつです。詳細はほげを考えるページを参照してください。

不具合等ありましたら、掲示板にご連絡願います。

ひとつ上のページに戻る