TOCはJavaScriptを使ってフローティングの目次を生成するソフトウェアです。

TOCとはTable of Contentsの頭文字を抜き出したもので、日本語で言えば目次になります。HTML上の構造を解析してTOCを生成してくれるライブラリがTOC(jQuery Table of Contents Plugin)になります。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-07 10.55.21_thumb.1357561369.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-07 10.55.21.1357561369.png)
右と左両方に目次が表示されています。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-07 10.55.26_thumb.1357561373.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-07 10.55.26.1357561373.png)
スクロールで自動的に太字になります。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-07 10.55.30_thumb.1357561377.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-07 10.55.30.1357561377.png)
クリックでスクロールももちろん可能です。

TOCはh1をはじめとするヘッダータグを指定して使うのが基本になります。そうするとフローティングで目次を生成してくれ、クリックやスクロールによる目次の変更にも追従してくれます。説明書やヘルプなどに使うと便利ではないでしょうか。

TOCはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

筆者が個人的に開発しているプロジェクトでもh1〜h6のタグを抽出して目次を生成しています。テキストをサーバサイドで解析して目次を生成するのに対して、HTMLタグを解析する方法は構造さえ整っていればずっと容易に目次が生成できるようになります。

サーバサイドで全てのコンテンツを生成する時代は終わりつつあります。JavaScriptの得意な部分を見つけてうまく当てはめていくのが大事です。サーバサイドとクライアントサイドの使い分けこそが今後求められる技術になるでしょう。

TOC | jQuery Table of Contents Plugin

jgallen23/toc · GitHub