検索機能追加ほか

サイト内検索の実装

サイト内検索ではこのサイト上のあらゆる記事の本文とタイトルを検索できます。そんなに記事もなかったので特別の工夫を要することもなかったです。

これはどのようにしているかというと，全記事のテキストデータをあらかじめja.index.jsonに保存しておき，これを読み込んでブラウザ側で動的に検索結果を描画（DOMを構築）するということをしています。つまり検索した内容は一切サーバーに送信されません。プライバシー最優先な方法であるのに加え，サーバー側の考慮しなければならない事項もほとんどないので最もお手軽な方法でもあります。

ちなみに現在時点でのJSONファイルは200kBくらいありますが，これはpng板のイラスト0.5枚分（webp板なら6枚分）程度に相当します。普通にブラウジングするよりもよっぽど軽いですね。今後記事が増えても問題はほとんどないかと思いますが，また新しい方法を試したくなったら変更するかもしれません。

サイト上部のナビゲーション

「サイトマップ」と「サイト内検索」へのリンクをページ上部に追加しました。これは常にページ下部のナビゲーションまでスクロールされるわけではないことへの対応に加え，スクリーンリーダー（ページの読み上げ機能）利用者のためでもあります。上の方にあると読み上げ開始直後にナビゲーションに到達するので，より早くその存在に気がつくことができます。

JSON-LDによる構造化メタデータ

これは主に人間の利用者ではなくクローラー向けの改良です。

このサイトでは適切なHTMLタグを使用したりOGP(Open Graph Protocol)に基づいたメタタグを挿入したりと人並みにメタデータは記述してきたと思います。ただHTMLは順序立てられた文書のマークアップを，OGPはSNSにおける共有をそれぞれ目的としており，現実のウェブページが持つ潜在的なメタデータを網羅できるものではありませんでした¹。

そういう意味でschema.orgの仕様に基づいたJSON-LDはきわめて厳密かつ網羅的であり，様々な事物に対するメタデータを記述できます（全てというわけではないのですが……）。このサイトではやり過ぎ感のあるくらい記述してみたので興味のある方はブラウザの右クリックメニューにある「ソースを表示」からご覧ください。

記事の構造化

あらゆる記事の<article>要素内が<section>要素によって構造化されるようになりました。これもモダンブラウザにおいてはまったく必須なものではないのですが，「できるならやってみよう」と思いついて実現してみました。

一体何をしているかというと，もとのHTML文書内に対して見出し要素<h2> ~ <h6>に出くわしたら次の同じレベルの見出し要素に到達するまでを<section>要素の子要素にするという手順を見出しレベルの低い順（数字の小さい順）に行っているだけです。PureBuilder SimplyのHooks機能を利用したものでそんなに難しいことではありませんでした。

厳密な公開日時・更新日時

言うまでもなく何時何秒に何をしたかという記録を管理するのは自動化すべきです。これまで記事を「いつ公開したか」という情報だけを手動でかつ日付ベースで管理し，「いつ更新したか」は自動で管理していたので些細な変更でも更新日がコロコロ変わってしまうのが悩みでした。人間にとってはどうでもいいことかもしれませんが，このサイトのAtomを購読しているフィードリーダーにとっては問題になります。なぜならフィードリーダーの多くは更新日時順にエントリーを並べるので，同じ記事の頻回な更新は購読者に直接的なストレスを与えうるためです。

しかしながら「厳密な日時」の管理自体はそれほど難しいことではなく，本当の問題は管理者として「時間を好きに操る」必要があったことでした。というのもこのサイトで公開しているファイルには「コピーにコピーを重ねて作成日時のわからなくなったファイル」はもちろん「更新はしたけど更新してないことにしたいファイル」とか「ウェブサイト開設以前の日を公開日にしておきたいファイル」とか，様々な個別の事情があり一様に対処することができませんでした。

結局自分が書いたもとのファイル（Markdown）の冒頭メタデータ部分（frontmatter）に「HTMLを初めて生成した日時」と「最後に更新した日時」の2つを自動で追記するという力技によってこれを解決しました。これは本文と同じファイルにテキスト形式で書かれているので編集も直感的に行える上に，同じメタデータ内に「更新日時を追記しない」というフラグを設定することも容易です。時刻のわからない過去の日付については，よくある方法にならって00:00:00を付与しています。

これによってAtomやJSON-LDとも相性バツグンなメタデータを扱えるようになりました。

サイドバーを表示言語に最適化

これまで英語，日本語ページで共通のサイドバー（作者の情報と連絡先）を表示していましたが，紛らわしかったようなので言語別に出し分けることにしました。ページ上部の英語，日本語切り替えリンクのないページ，あるいは気が付かなかった利用者のためにページ下部のナビゲーションは共通のままにしてあります。

コードブロックのキャプションをCSSで表示することを廃止

これまでコードブロックのキャプションは<div class="sourceCode">要素にdata-caption="テキスト"というような属性を設定しCSSの::beforeセレクタを使って表示していましたが，テキストの選択ができず不便をおかけしてきました。これをスッパリやめて<span class="caption">テキスト</span>という方法に変更しました。

コマンドプロンプトを分離してターミナル画面の表現を改善

ウェブページ上でターミナルを表現するときはコードブロックとして扱うのが一般的です。このとき先頭にコマンドプロンプト（$など）があったほうがよりわかりやすく感じると思いますが，コードの内容にコマンドプロンプトを含めてしまうとシンタックスハイライトがおかしなことになってしまうという問題があります。

これを.consoleクラスの付与されたコードブロックに対して自動でコマンドプロンプトを挿入するという方法で改善しました。

ちょっと何を言っているのかわからないと思いますが，違いをお見せします。

$ sudo pacman -Syu

<div class="sourceCode" id="cb1"><pre class="sourceCode sh"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">$</span> sudo pacman <span class="at">-Syu</span></span></code></pre></div>

$ sudo pacman -Syu

<div class="sourceCode" id="cb3"><pre class="sourceCode sh console"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="prompt">$ </span><span class="fu">sudo</span> pacman <span class="at">-Syu</span></span></code></pre></div>