見出しから目次を自動生成してくれるjQueryライブラリ「TOC」のダウンロードと使い方!

見出しから目次を自動生成してくれるJqueryライブラリ「TOC」を紹介します。

目次は、ユーザービリリティ向上のために欠かせないものとなっています。1記事ずつ手で目次を生成しているのはとても手間がかかるので、「TOC」を使って手軽に目次を作っていきましょう!

はにわまん
ちなみに「TOC」は「Table of Contents」の略で日本語に訳すと「目次」という意味になります!

TOCのダウンロード

TOCのライブラリは以下からダウンロードできます。ただし最新版は必要なファイルが揃っていないため注意が必要です。
https://github.com/jgallen23/toc

仕方ないので、バージョンを落としてダウンロードしていきましょう。

「Releases」を選択してください。

かなり古くなりますが、、「0.3.2」のバージョンのzipファイルをダウンロードします。

zipファイルを解凍してdistフォルダの中身を確認しておいてください。以下のファイルを使います。

dist/toc.min.js

TOCの読み込み

まずは、先程ダウンロードしたtoc.min.jsファイルを読み込みます。
jQueryを先に読み込んでいる必要があります。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="dist/toc.min.js"></script>

tocの設定です。いくつかの項目をオプションとして指定できますが、後ほど紹介していきます。

jQuery('#toc').toc();

目次を表示したい位置に以下のタグを挿入してください。

<div id="toc"></div>

これらのソースを読み込むと、表示されているすべての見出しを取得して表示します。現時点のわたしのページだと、以下のような感じで表示されています。

h1や、コンテンツ外の見出しも含まれてしまうので、意図したものではありません。ここからカスタマイズしていきましょう!

TOCの設定

先程に設置した以下のソースにオプションを追加していきます。

jQuery('#toc').toc();

最低限必要なのは、見出しを取得する範囲と、取得する見出しレベルの指定です。

jQuery('#toc').toc({
	'container': 'article.post', /* 見出しを取得するエリア */
	'selectors': 'h2, h3', /* 取得する見出しレベル */
});

この設定を適応させた状態で表示を確認してみると、h1タグやコンテンツ以外の余計な見出しは反映されなくなりました!

他にもオプションはあります。物足りないと感じたら公式から使えるものがないか確認してみるといいでしょう。
公式 → TOC | jQuery Table of Contents Plugi

TOCのHTML構造

表示される目次のHTMLタグを確認すると以下のようになっています。

<div id="toc">
	<ul>
		<li class="toc-h2 toc-active"><a href="#toc-h2">h2</a></li>
		<li class="toc-h2"><a href="#toc-h2-2">h2</a></li>
		<li class="toc-h3"><a href="#toc-h3">h3</a></li>
		<li class="toc-h3"><a href="#toc-h3-2">h3</a></li>
		<li class="toc-h2"><a href="#toc-h2-2">h2</a></li>
	</ul>
</div>

class="toc-active"は、見られている(表示されている)見出しエリアに自動的に付与されるクラスです。Developer toolなどでスクロールしながらクラスを見るとtoc-activeが見出しをどんどん移動しているのが分かります。

各要素にクラスが適応されているので、デザインはしやすそうです。

TOCのデザインサンプル

簡単ですが、デザインのサンプルを作りました。

目次のデザインを作る際に意識した方がいいと思うのは、「見出しの階層構造が分かりやすい」こと。人目でどのレベルのコンテンツか分かるとユーザーも選びやすいのではないかと思います。

#toc ul {
	list-style: none;
}
#toc li {
	margin-bottom: .4em;
}
#toc li.toc-h3 {
	padding-left: 1em;
}
#toc a {
	text-decoration: none;
	font-size: .95em;
	font-weight: bold;
	color: #333;
}
#toc li.toc-h2 a::before {
	content: "●";
	margin-right: .2em;
}
#toc li.toc-h3 a {
	font-size: .9em;
  color: #666;
}
#toc li.toc-h3 a::before {
	content: "-";
	margin-right: .2em;
}

適応した際の見栄えは以下のような感じです。シンプルですが、階層の違いは分かりやすくなっているかと思います。

色や、目次のタイトルなども付け加えて、みなさまのサイトに合わせてカスタマイズしていってください!

おわり


jQueryライブラリ「TOC」のダウンロードと使い方の紹介でした。

個人的には、表示されているエリアのtoc-activeクラスが用意されていることに興奮しました。サイドメニューで追尾するもよし、スマホではポップアップで目次を出してあげるもよし、いろいろやりたいことが膨らみますね。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事