見出しを抽出して目次を自動生成するjavascript
今回は珍しくWeb系のお話です。
最近、wordpressに頼らずに自作のwebページを作成しているのですが、その際にページの見出しタグ（h1,h2など）を自動的に収集してきて勝手に目次を作ってくれるものが作れないかなと思い、自作してみましたので共有します。
目指すもの
このように、そのページ内にある見出しの文字列を収集して箇条書きにします。
そしてその箇条書きにした文字列をページ内リンクにし、クリックするとその見出しの箇所まで移動してくれるような目次を作成していきます。
筆者が作成したこちらのサイトのような見出しを目指します。
サンプルページ
サンプルとして、このようなhtmlのページがあったとします。この見出し１、見出し２、見出し３を収集して目次にしてみたいと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>このページのタイトル</title>
</head>
<body>
<h3>見出し１</h3>
<p>本文</p>
<h3>見出し２</h3>
<p>本文</p>
<h3>見出し３</h3>
<p>本文</p>
</body>
</html>目次を作成するための箱(div)を用意
まずは、<body>内の頭に目次を生成するための箱を用意します。
<h3>目次</h3>
<div id="toc"></div>idは何でも良いですが、ここではtoc（Table of Contentsの略）としておきます。
お好みですが、この目次自体にも見出しをつけておきます。
見出しを自動収集するjavascriptを書く
document.addEventListener('DOMContentLoaded', function () {
var target_toc_id = 'toc';
var target_headline = 'h3';
var toc_contents = document.getElementById( target_toc_id );
var matches = document.querySelectorAll( target_headline );
var ul = document.createElement('ul');
matches.forEach( function (value, i) {
if ( value.id === '' ) { // if tag has no id, add id
value.id = i;
}
var li = document.createElement('li');
var a = document.createElement('a');
a.innerHTML = value.innerHTML;
a.href = '#' + value.id;
li.appendChild(a);
ul.appendChild(li);
});
toc_contents.appendChild(ul);
});このようなjsを作成します。わからない方はコピペで大丈夫です。
ここではとりあえず、toc_auto_generator.jsという名前で保存しておきました。
作成したjsを、目次を生成したいページのhead内で呼び出す
これを対象ページの<head>~</head>の中で読み込みます。
<script type="text/javascript" src="./auto_toc_generator.js" charset="utf-8"></script>src=””の部分はどこにこのjavascriptを置くかによって変わりますので各自読み替えてください。
webページを自作している方でしたら、コードを読んだだけで何をしているかは大体わかると思いますので、多くは語りませんが、少し補足しておきます。
document.addEventListener(‘DOMContentLoaded’, function () {
目次の自動生成はDOMContentLoadedのタイミングで行われます。
これは、最初のHTMLドキュメントの読み込みと解析が完了した時に、スタイルシートや画像、サブフレームの読み込みが終わるのを待たずに発火します。
var target_toc_id = ‘toc’;
先ほど作成した目次を格納するdivタグのidをここで指定します。
var target_headline = ‘h3’;
収集するタグの種類を指定します。
ここではh3となっているが、h2やh4といったタグを使用している人は書き換えが必要です。
if ( value.id === ” ) {
目次はもちろんaタグによるページ内リンクとなります。
ページ内リンクはidを用いて行います。もし、その見出しにidがついていなかった場合には、for文のindex iを見出しのidとして設定しています。
以上、見出しを自動生成するjavascriptについてでした。
関連記事
chromedriverとgoogle chromeのバージョン合わせ
python×selenium×chromedriverでwebスクレイピングを行う機会があり、chromedriverとgoogle chromeのバージョン合わせをすることに。chromedriverを使う際には、google chromeとバーションをうまく合わせないとエラーが吐か […]
WebVRフレームワークA-Frameを用いて全天球画像ビューアを作る
最近、友人がRICOHの360度カメラTHETAを購入したとかで、全天球画像が送られてきたので、その画像を料理しようと思いました。 「天球画像 ビューア」とかで検索すると、WebVRフレームワークA-Frameという面白そうなものを発見したので、サクッと全天球画像ビューアを作ってみました […]
webページでドラッグ操作。jquery-uiを使う。
web開発において、ドラッグ操作したい場面に遭遇しました。その際に、jquery-uiというドラッグ操作に対応したライブラリがあることを知ったので、使い方をここに書き留めていこうと思います。 どういうことがしたいのか。。。 webページにおいて、ドラッグ&ドロップでリストに順次追 […]