目次を自動生成するJavaScriptを導入してみた！

どうも、かげさんです(^^)/
あなたがこの記事を読んでいるのは何回目でしょうか？
初めての方、いらっしゃい！
複数回目の方、再訪問ありがとです(・∀・)

今週に入り、今更ながら記事に目次をつけることにしました。

JavaScript を使って目次を自動生成している関係で対象となるのは PC 版のブログだけで、モバイル版の方は変わらず目次はありません。

ココログだと HTML や CSS を変更できるプロ版の契約でもモバイル版の HTML は変更できないため、何とかしたくても制限が多いのです…

実は、18年続いているブログのため、ブログの引っ越しも大変…(;^_^A

余談が長くなったので本題に入りましょう。

目次

目次を生成する JavaScript

参考にさせていただいたのは、CookBook というサイトの記事「見出しから目次を自動で作成」です。

サイトの右側にある目次の「プログラムの完成」のところにある JavaScript のプログラムをベースにしました。

導入時に上記サイトの JavaScript の40行目が間違っていることに気付いたので問い合わせメールを使って連絡させていただいたところ、CookBook の管理者さんがすぐに修正してくれました。(*^^*)

プログラムの解説も上の記事内に書かれており、とても分かりやすかったです。

かげさんは、解説をもとにコメント分を追加し、エラーをキャッチした時にどの関数でエラーが発生したか alert メッセージを出すように修正しました。

今後のメンテナンスをしやすくするためです。

エラーをキャッチした時 alert メッセージを表示するようにしたのは、参考にしたプログラムで40行目が間違っていたため、目次が自動生成されなかったためです(;^_^A

逆にこの alert メッセージを入れたことで、目次挿入場所となる部分の HTML が記載されていないときにもエラーをキャッチしてメッセージが表示されてしまうことになりました。

このため、目次挿入場所となる部分の HTML が記載されていないときにエラーが発生しなくなるように if 文を１つ追加しました。

では、うちのブログでの導入例を書いていきます。

目次挿入場所となる部分の HTML

<div class="contents-toc" id="toc"><span class="box-title">目次</span></div>

目次を入れたいところに、上記のHTMLを埋め込む。

この記述がないと目次は生成されない。

目次に関する CSS

/* ◆記事の目次 */

.contents-toc {

    position: relative;

    margin: 2em 0;

    padding: 25px 10px 7px;

    border: solid 2px #72CCF4;

}

.contents-toc .box-title {

    position: absolute;

    display: inline-block;

    top: -2px;

    left: -2px;

    padding: 0 9px;

    height: 25px;

    line-height: 25px;

    font-size: 17px;

    background: #72CCF4;

    color: #FFFFFF;

    font-weight: bold;

}

目次部分のスタイルシートは、サルワカくんのサイトの「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」を参考にしました。

サルワカくんのサイトは、以前「CSS を決めるときに参考にしているサイト「サルワカくん」と Web アイコンフォント FontAwesome」という記事でも紹介しています。

HTML の body 部最後に導入した JavaScript

先にも書いたように参考にした変更したのは、 下記の通り

• コメントの追加
• 関数の最初でfuncnameという変数に関数名を格納
• エラーをキャッチしたところで「funname:エラー内容」という Alert メッセージを表示するようにした
• 83行目の if 文を追加し、目次を挿入する場所の html がなかった時にエラーにならないようにする

特に83行目の if 文は、重要です。

これがないと、既存のブログ記事を開くたびにエラーになるんで。

うちみたいに 2000 を超える記事がある状態でこの JavaScript を導入すると、html が埋め込まれていない記事が大半なので、大変なことになる…(;^_^A

具体的には、エラーが出ないページを探す＝ウォーリーを探せ　みたいな感じになっちゃう（笑）

まとめ

この記事にある html、CSS、JavaScript を使うと今まで目次がなかった記事でも目次を自動生成できるようになります。

ただし、一通り、ブログの html を読み込んでから JavaScript が動くので、ページを開いたときに目次生成されるまで若干タイムラグがあるという難点もあります。

また、最初に書いたように JavaScript を使って目次を自動生成している関係で対象となるのは PC 版のブログだけで、モバイル版の方は変わらず目次はありません。

ココログだと HTML や CSS を変更できるプロ版の契約でもモバイル版の HTML は変更できないため、何とかしたくても制限が多いためです…

それでも目次がないより、あった方が良いと思ったので実装してみました。

ここまではOKだ