御品書だよ <summary> は

Posted at 2025-09-01

HTML/JavaScript 関連のネタです．
横着者のためのウェブページ目次生成プラグインスクリプト moc-js を開発しています．

対象ユーザ

想定される対象ユーザは次のような方です．

令和の時代に，そんなアレな奴いるんかい？はい，ここに約１名いました．
（てゆーか，いらない？一応，技術系の教員・研究者の端くれです．）

そして辿り着いた先に...

<details> があるじゃないか♪<summary> は題じゃないか♫
- でも，開いた後，閉じるのが面倒じゃないか...
  ==> 閉じるボタンを自動生成でもしておくかー
- セクション間で相互参照しても開かないじゃないか...
  ==> 遷移したら自動オープンでもするかー

要するに，HTML5の <details>＆<summary> をベースとして，ちょっと便利な機能を JavaScript で追加しただけです．

まずは，スクリプト moc.js をウェブサイト内に導入・設定してください．

ウェブページの HTML 編集時の追加作業は以下の通りです．

<head> 部分等でスクリプトを読込．
```
<script src="moc.js"></script>
```
<body> 部分で自動生成関数を呼出．
```
<body onload="Init()">
```
ここまでで，全セクションの一斉開閉ボタン，トップページへのリンク，フッタのテキストが出現します．
<details> には id を付与．
```
<details id="A">
<summary>セクション A</summary>
...
</details>
```
そもそも <details> なんて使っていないページが沢山あるんだが，という方へ：
- すでに <section> とかでしたら，移行は sed 等で自動化できそうです．
  （id 問題は残るかもしれませんが，相互参照しないなら，付与は不要です．）
- セクション分割なんて <h2> だけだぜ，ワイルドだろー？という場合，頑張ってください．
同一ページ内のセクション間の相互参照では（手間だが）onclick を指定．
（別ページへの参照では指定不要．）
```
<a href="#B" onclick="Open(B)">セクション B</a> へ
```
==> クリックすると，リンク先セクションがオープンしつつ，そこへ遷移．

（あーそうか，今，この記事を書いていて，onclick の自動生成も可能な気がしてきました．その内，更新するかもしれません．）

以上，自作スクリプトのプロパガンダでした．
今どき，HTML 手打ち人口的に，需要なさそうですが，まあ一応，遺しておきます．
お役立ていただけましたら幸です．