変なスイッチが入ってしまい、1月6日迄に古いルールで書かれた記事の修正を終えました。
2009年から書き続けてきた105件のブログ記事は、全て2017年以降に更新されています。2017年は現在のものと同系列のデザインが稼働した年で、これ以降に書かれたり修正された HTML は閲覧に支障をきたすことは無いはずです。
ちなみに古いルールというのは HTML4.01 や XHTML1.0 という意味ではありません。デザイナーが独自に定義した Web サイトに固有のルールのことになります。この場合ではPBロッキーが定義したPB-100の宇宙のサイト群に固有のルールです。
画像の拡大表示が出来ない不具合が解決した
LightBox を使って拡大表示していた際の <img> 周りのマークアップは、現在の CSS と Javascript では画像の拡大表示に不具合がありアクセシビリティに支障をきたしていました。これが最大の問題でこの度ようやく解消しました。
この件は流石にマズイという思いが強く2017年からコツコツと手作業で書き換えていました。
<br>タグで改行していたのを<p>タグに書き換える
2009年の最初期のブログは <br> タグで改行し <p> タグはほぼ使っていません。現在はその真逆な上に <p> でマークアップしないとスマートフォンなどのシングルカラム表示時に、余白が無くなり表示が残念になる CSS 設計になっています。
このような設計は僕以外の者が記事を書く際の足かせとなっています。しかし、タブレット表示時に拡大した画像を画面幅一杯に表示する、そこを譲れないラインに現在の設計となりました。<p> タグを正しく使うことは SEO でも重要とされていますので頑張ります。
本文の見出しが<h3>からなのを<h2>からに
以前はブログタイトルを <h1>、記事タイトルを <h2> でマークアップして、本文の見出しタグは <h3> からでした。これは Blogger を利用開始した2009年当時の Blogger のテンプレートに倣っていたと思います。
現在はページ毎にユニークな <h1> タグの内容が SEO でも重要という情報を小耳にはさみ、記事ページでは記事タイトルを <h1> でマークアップし、この際にブログタイトルは <div class="h1"> でマークアップしています。もちろん本文は <h2> からです。
以上の書き換えを半自動化する
以上の書き換え作業は今回から、cheerio という jQuery ライクに文書を操作出来る Node.js 用ライブラリを使って半自動化しました。今まで手作業でこなしてきた、古いルールの HTML から新しいルールの HTML への書き換えをスクリプトのサポートを受けながら出来るのは至福で、隔世の感がありました。
React や Vue といった Javascript ライブラリの出現によって、かつてデファクトスタンダードだった jQuery の影が薄くなって久しいです。
しかし、こうして10年以上に渡って書き続けられた、その間に様々にコーディングルールが変遷してカオス化した HTML 文書を書き換えるには jQuery 的ライブラリが大きな力になってくれました。
インターネット元年やそれ以前から大量に生み出した何千、何万というテキストを再び資産化するには jQuery 的なものが大きな力になると思います。
良質な文書を未来のワールドワイドウェブに遺していくにあたって、またひとつ必要な技術を獲得できました。幸先が良いスタートでございます。ではでは、2020年代もどうぞよろしくお願い申し上げます。