目次作成と番号自動割り当て

2025/10/02 修正

ブログなどをしていると、章・節などの項目に自動的に番号を振ってもらいたいと誰しも考えることだろう。さらに、目次も自動的にできるとありがたい。ネットでググると、いくつか公開されているツールがあり、 CSSで自動的に番号を割り振るものとJavascriptで割り振るもの、Javascriptで目次作成を行なうものがあった。

Webブラウザで処理が行なわれ、CSSとJavascriptの実行完了後、番号と目次付きのWebページが表示される。それゆえ、ブラウザ側で初期表示にいくらか時間がかかることになる。そこで、サーバ側で目次と番号自動割り当てをしておけば、利用者PCでの表示は余計な処理が無くなり、高速化される。サーバ側での処理がいくらか増えるので少々面倒ではあるが、一般利用者のWebブラウザでサクサク表示されることは、それだけ閲覧してもらえる可能性が高くなるに違いない。

今回、公開されているツールを参考にして、html文章の章・節に番号を割り当て、目次を自動的に作成するJavascriptを作った。一度、WebブラウザでJavascriptを実行し、目的どおりに出来上がったかどうかを確認後、保存するようにした。 CSSで自動番号割り当ても可能だが、Javascriptで検知できない問題があったため、すべてJavascriptで処理することにした。

ブラウザの保存機能を使うことで章番号を付与したページを保存できるので、それをWebサーバにアップロードすればよい。（ページのソースを表示では改編前のhtmlが表示されるので要注意。）しかし、目次データのhrefで指定するページ位置が相対名ではなく、冗長な完全ドメイン名で保存される（Chrome,Edgeで確認)。理由はよくわからないが、Javascriptで抽出すると相対名になっている。将来的にJavascriptで全自動化する予定である。

( 2025/10/02 公開しているJavascriptにバグがあったため、修正しました。以前のバージョンはパラメータ省略するとJavascriptが動作しません。)

基本事項

h1からh4タグを章・節を表す項目と見なし、自動的に章・節番号を付与、目次を自動作成する。h5以上は未対応。
目次項目があまりにも長いと見にくくなるので、適度に短い文章が好ましい。
番号はアラビア数字のみで、11.2.5 ・・・のようにドット区切り。
目次のみ自動的にインデントがつくが、本文のインデントはない。
html内の目次領域のタグに「id="toc"」を追加することで、その部分に目次が自動的に作成される。例として、<div id="toc"> </div>を適切な位置に挿入する。
jQueryを使っているので、jQueryを読み込む必要がある。
class="notitle"をタグに追加すれば、目次から除外され、番号もつかなくなる。
class="nonum"をタグに追加すれば、番号はつかないが、目次には追加される
使用パラメータは以下の通り。
chapter = 0; // 章番号の初期値
section = 0; // セクション番号の初期値
subsection = 0; // サブセクション番号の初期値
subsubsection = 0; // サブサブセクション番号の初期値
chapter_class = 'h1'; // 章を'h2'に変更できる。='h2'とする。初期値='h1'
chapter_prefix = ''; // 章番号に付与する接頭辞　例　Chapter 5
chapter_suffix = ''; // 章番号に付与する接尾辞例　7章
another_suffix = ''; // 章以外の番号に付与する接尾辞　例　5.8.2項
上記パラメータ設定が省略されれば、=で示されたものが初期値になる。
注意事項：<main role="main" id="main"> .... </main>のように囲まれた部分を解析する。
id="main"があるタグ内を解析するので、mainタグでなくてもよい。

ダウンロード

Javascript(ファイル名=makeIndex.js)のダウンロードは、ここをクリック。

使い方

< html >
   <head> ............ </head>
   <body>
        ...........
      <div id="toc"> </div>   // 目次を展開する場所に記述
        ...........
        ...........
      <script type="text/javascript">
         let chapter = 1;            // 章番号の初期値
         let section = 2;            // セクション番号の初期値
         let subsection = 2;         // サブセクション番号の初期値
         let subsubsection = 0;      // サブサブセクション番号の初期値
         let chapter_class = 'h2';   // 章を'h2'に変更できる。='h2'とする。初期値='h1'
         let chapter_prefix = '';    // 章番号に付与する接頭辞　例　Chapter 5
         let chapter_suffix = '';    // 章番号に付与する接尾辞  例　7章
         let another_suffix = '';    // 章以外の番号に付与する接尾辞　例　5.8.2項	
      </script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="makeIndex.js"></script>
   </body>
< /html >

上図のように、html文書内に記述する。なお、章・節番号の初期値は、前頁の最終値を設定すること。それを基準に自動インクリメントされる。最初のページの場合、すべて0にする（もしくは記述しない）ことで1章1節からスタートする。

本文中の目次化したい項目は、
    　<h1> 章の項目 </h1>
    　<h2> 節の項目 </h2>
    　<h2 class="nonum"> 番号なしの項目 </h2>
のように記述する。

免責事項

著作権はありません。自由に使ってもらってOKです。また、改編も自由です。しかし、なんらかのバグによる不利益があっても、当方は一切の責任を負いません。自己責任でご活用ください。

目次作成データの入手

自動目次作成はブラウザでhtmlデータを読み込んだ後に動作するので、初期表示に時間がかかる問題がある。しかし、自動目次作成は便利でもあり、何とかこれを利用して目次作成後、htmlデータを修正する方法を考えることにする。

まず、JavaScriptの動作により改変されたhtmlデータを入手することにしよう。下記のボックスに新しく生成されたhtmlデータをその下のボタンで表示することができる。

ボックス

本html文書は、<nav>タグで定義された領域に目次を<main>タグで定義された領域に本文を記述するようになっている。しかし、このような使い方をしていない場合もあるので、適宜、読み替えて参考にしてもらえればありがたい。

2つのボタンは、それぞれ、目次部分を読みだすものと本文を読みだすものである。読みだしたデータをそれぞれコピーして、元のhtmlデータを修正すれば、目次付きのhtmlファイルが出来上がる。しかし、それだけでは2重に目次作成が行なわれてしまうので、</body>の直前に挿入したすべてのJavascriptを忘れずに削除する。また、不要になった目次作成データの入手に関する項目も削除する。

google chromeやEdgeなどのブラウザで名前を付けて保存しても、目次作成後のhtml文書を入手できる。しかし、ブラウザでWebサーバのWebデータを直接操作できるようにする予定なので、 WebサーバからダウンロードしたファイルをPCからWebサーバにアップロードするような面倒な操作はできるだけ避けたい。それゆえ、すべてJavascriptで完結する方法を模索中である。上記抽出作業は、そのための布石と考えている。

しかしながら、サーバに負荷をかける作業はしたくないので、ブラウザ上で処理できるものはすべてブラウザで行なうようにしたい。さらに、利用者には、まるでWebサーバのデータを直接編集しているように思わせたいと考えている。

例

以下は例。

章の項目 h2

節の項目 h3

番号なしの項目 h3 class="nonum"

番号なし＆目次なしの項目 h3 class="notitle"

項目 h2

項目 h3

項目 h4

項目 h5

項目 h3

作成日:2023.05.17 更新日:2026.01.14