前に、アルペジオの練習用のページを投稿したわけですが、その中で脚注があったことに気が付きまして、急遽プラグインか何か良さげなものはなかろうかと探していたのですが、探すのが逆に面倒になって自分で作ってみました。

簡単なのは、何かしらのクラスをつけたタグで脚注の中身を入れておいて非表示にしたりして、ページ下部にリンクを作り、行ったり来たりと参照できるようにするのが簡単だと思うんですが、そうすると投稿する際にいちいちタグで囲まねばならず面倒くさいなぁと思ってたんです。

wikiとかで、カッコで囲むとそれが脚注になるのがあったなと思い出して、スクロールで行ったり来たりを当初想定していたわけですが、そう思いながらも、タップしたら内容が近くに見えるようにしようと思いついたんで、本編の移行作業そっちのけで色々と作業していました。

該当の箇所はこの画像の[注:1]の部分です。

まず、

  • 脚注へのリンクはBloggerの投稿画面で文章中に二重カッコで包んだ部分となって、その中身をリンクに変換し、参照用に記事最下部にも置く
  • テキスト中のリンクに変換された脚注は、画面の半分より上でタップ(クリック)されたらリンクの下に、半分より下でタップされたら上に表示されるように
  • スクロールして、タップした対象が画面から消えたら非表示、表示されたものをタップしても消えるようにしました。
  • 画面最下部の参照用の中身もリンクになっていて、タップすると元の文章のリンクに移動するように

こういう感じでやってみました。下の画像は、[注:1]の位置が違う時にどこに表示されるかの見本です。

別にこんな事しなくても、段落(Pタグ)の下にメモ書きみたいな感じで新たに載せても良いんですが、なんせ面倒くさいわけですよ。

元のmarkdownのファイルではそういうメモ書きみたいのがhtmlに変換されなかったので、別で投稿時にhtmlをいじるとなると元のファイルと投稿した時に差異がでてしまうので、そういった参照事項が少なければまだしも増えると大変ということで、今回の仕様のようになりました。

markdownは標準語のような部分と方言みたいのがあって、あっちでは対応してるけどこっちでは対応していないと言うものがいくつかあります。多少、サイトの重さを犠牲にしても面倒くさいことを何とか対応していこうと言う感じなので今回のようになりました。

一応ここでも出来上がったもののサンプルとして載せておくとこんな((ここをタップすると閉じます。元のリンクが画面外に消えても閉じます))感じになります。記事下のfootnote部分が見えてるかと思います。

ただ問題はもっと簡潔にスクリプト自体をいい感じに書けるはずなんですが、まだそこまでは着手しておらず、きっとこう書いた方が見直すのも楽とか、拡張するのももっと何かしらできるはずと思うんですが、とりあえず機能だけ実装しておいて、そういうのは後々していこうかと思っています。