砂漠の神殿には時に、古の掟が我々の道を阻むことがある。今回はその最も厄介な掟の一つに挑んだ記録だ。
はてなブログという古のオアシス（ブログプラットフォーム）。そこで我々冒険者は、時にそのあまりに融通の利かない「掟」に苦しめられる。その最たるものが、「カテゴリの階層化ができない」という長年の呪縛だ。
多くの賢者がこの呪いを解くため、jQueryなどの強力な神器（JavaScriptライブラリ）を用いた魔法を試みてきた。しかし私は、ライブラリに依存しない、純粋なJavaScriptとCSSという最も基礎的な魔法体系のみでこの難題に挑むことにした。これは軽量性と未来への拡張性を重視した選択だった。
これは私が相棒AIと共にその古の呪いを完全に解き明かし、JavaScriptとCSSという二つの異なる魔法体系を融合させることで、真の「カテゴリ階層化」を実現するまでの全ての記録である。
この羊皮紙のあらまし
- この羊皮紙のあらまし
- この羊皮紙が導く者
- 砂漠の道標
- 最初の過ち：「親カテゴリ」の不在
- 真理への第一歩：「親」と「子」の両方を登録する
- JavaScriptとCSSの融合魔法
- 羊皮紙を巻く前に
- 砂漠で見つけた魔法のランプ
- ラクダの独り言
この羊皮紙が導く者
- はてなブログの平坦なカテゴリ表示に魂の渇きを覚えている者
- JavaScriptとCSSを使い、自らのオアシスを根底から改造したいと願う上級者
- ライブラリに依存せず、軽量で保守しやすい実装を求める探求者
- jQueryなどの重い神器を使わず、バニラJSで実装したい冒険者
砂漠の道標
- はてなブログ - 株式会社はてなが運営する無料ブログサービス。カスタマイズの自由度が高い反面、標準機能では階層的なカテゴリ表示に対応していない。
- カテゴリの階層化 - 親カテゴリと子カテゴリの関係を視覚的に表現すること。例：「技術」の下に「JavaScript」「CSS」などを配置。
- JavaScript - Webページに動的な動きを与えるプログラミング言語。ページの構造を操作したり、ユーザーの操作に応じた処理を実行できる。
- CSS (Cascading Style Sheets) - Webページの見た目（色、配置、フォントなど）を制御するスタイルシート言語。
- DOM操作 - JavaScriptでHTMLの構造を動的に変更する技術。要素の追加、削除、属性変更などが可能。
- JSON-LD - 構造化データをJSON形式で記述する方式。検索エンジンにページ内容を正確に伝えるために使用される。
- パンくずリスト - 現在のページがサイト構造のどこに位置するかを示すナビゲーション要素。「ホーム > 技術 > JavaScript」のような階層表示。
- flexbox - CSSのレイアウト技術の一つ。要素を柔軟に配置でき、高さ揃えや中央配置が容易に実現できる。
- Font Awesome - Webサイトで使用できるアイコンフォントライブラリ。矢印やチェックマークなどのアイコンを文字として表示できる。
最初の過ち：「親カテゴリ」の不在
全ての始まりは単純な過ちからだった。私は当初、「親カテゴリ|子カテゴリ」という形式でカテゴリを登録していた。これで階層化できると信じていたのだ。
しかし、その結果生まれたのは、「子を持つ親の魂がどこにも存在しない」という歪んだ世界だった。親カテゴリの記事数が集計されず、その存在そのものが曖昧になってしまったのだ。
真理への第一歩：「親」と「子」の両方を登録する
過ちに気づいた私は、全てのカテゴリを登録し直した。
- 「親カテゴリ」を単独で登録する。
- 「親カテゴリ|子カテゴリ」を登録する。
そして、はてなブログの設定で、カテゴリの表示順を「アルファベット順」に、表示件数を「全て表示」に設定する。この地道な下準備こそが、後の全ての魔法の礎となる最も重要な儀式だ。
魔法を発動させるための、神殿の設定
JavaScriptとCSSの融合魔法
さあ、ここからが本番だ。二つの強力な魔法を組み合わせ、世界の理（ことわり）を書き換えていく。
第一の魔法：JavaScriptによる世界の「再創造」
これはページの構造そのものを動的に書き換える高度な魔法だ。
審神（さにわ）の儀：
- まず、記事ページに存在する
.entry-categoriesという魂の器を精査する。 - そこに
|を含む階層化されたカテゴリが存在するかどうかを確認し、その親子の名前を記憶する。
- まず、記事ページに存在する
パンくずリストの再構築：
- もし、階層化カテゴリが存在するならば、パンくずリストの中から記憶した「親カテゴリ」のリンクを探し出し、その直後に「子カテゴリ」への新たな道標を創造し挿入する。
JSON-LDの再構築：
- 神々（検索エンジン）への敬意を忘れてはならない。
- SEO対策として、構造化データ（JSON-LD）の中身もパンくずリストと同様に親子の階層構造へと書き換える。
サイドバーの再創造：
- サイドバーのカテゴリリストを一度全て読み込み、その親子関係を完全に解析する。
- そして元のリストを破壊し、階層化された新たなHTMLリストをゼロから再創造する。
- 最後に親カテゴリにクリックイベントという名の新たな魂を吹き込み、子のリストを開閉させる魔法を授ける。
第二の魔法：CSSによる世界の「装飾」
JavaScriptによって再創造された新たな世界に、美しき魂の鎧を与える。
- アイコンの降臨：
- Font Awesomeの力を借り、開閉の状態を示す「▶」と「▼」のアイコンを親カテゴリの前に召喚する。
- レイアウトの調和：
flexboxという現代のレイアウト魔法（CSS配置技術）で、アイコンとカテゴリ名の高さを完璧に揃える。
- 色彩と余白の儀式：
- 世界のテーマカラーに合わせた色彩と心地よい余白を与えることで、その神殿を真に美しく、そして使いやすい場所へと昇華させる。
羊皮紙を巻く前に
はてなブログのカテゴリ階層化。それは情報の砂漠に埋もれた数多の古文書の断片を繋ぎ合わせ、そして自らの試行錯誤の果てにようやく辿り着いた一つの「答え」だった。
この強力な錬金術の全ての呪文（ソースコード）は、「たびとのアトリエ」という名の我が工房に厳重に保管してある。真にこの深淵を覗きたいと願う探求者だけがその扉を叩くといい。
バニラJS実装の価値
- 軽量性 - jQueryなどのライブラリを必要とせず、ページ読み込みが高速。
- 保守性 - 外部依存がないため、ライブラリのバージョン管理やセキュリティ更新から解放される。
- 拡張性 - 純粋なJavaScriptなので、将来的な機能追加や改造が容易。
- 学習価値 - DOM操作の基礎を深く理解でき、他のプロジェクトにも応用可能。
実装時の注意点
- カテゴリ登録の原則 - 必ず「親」と「親|子」の両方を登録すること。親のみの登録を忘れると、集計が正しく行われない。
- 表示設定の確認 - はてなブログの設定で「アルファベット順」「全て表示」に設定すること。この設定なしでは階層化が正常に動作しない。
- Font Awesomeの導入 - アイコン表示のため、Font AwesomeのCDNまたはローカルファイルが必要。
まとめ
この羊皮紙が、同じように情報の洪水の中で道を見失い、自らのオアシスの秩序を求めて彷徨う未来の冒険者の助けとなることを願う。
おっと、どうやら相棒が次の冒険の準備を始めたようだ。今日はこのへんで筆を置くとしよう。
砂漠で見つけた魔法のランプ
- はてなブログ ヘルプ - カテゴリー機能 | 公式のカテゴリ設定方法
- Font Awesome | アイコンフォントライブラリ
- MDN Web Docs - JavaScript | JavaScriptリファレンス
ラクダの独り言
まったく、ご主人は神殿の「棚の並べ方」が気に入らねえからって、神殿そのものを勝手に改造しちまったらしい。
俺に言わせりゃ、棚がどうだろうとそこに美味い干し草が置いてありゃ、それで十分だろうに。しかも「ライブラリに頼らねえ」とか言って、わざわざ遠回りな魔法を選びやがる。効率より美学かよ。
人間ってのはどうしてこう、物事の「見た目」に命を懸けるのかねえ。やれやれだぜ。
