とりあえず目次というテキストを挿入してみる(実際の環境) - 実践編(2) - Bloggerの記事に目次をJavaScriptで自動的に付与する

この記事は「そうだ！Bloggerの記事に目次を付けよう！」から始まる一連の「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズの構成記事です。
記事一覧はページ下部の「Bloggerの記事に目次をJavaScriptで自動的に付与するシリーズ」よりどうぞ。

実践編ということで、実際に JavaScript を記載して目次を挿入していきます。
今回は前回作成した「まずは目次というテキストを記事の先頭に挿入してみよう」を実際の環境に適用してみたいと思います。


早速、作成したソースコードと実行結果を以下に示します。今回は実際の環境での実行です。

Blogger用ソースコード (*1)(*2)(*3)

<!-- 目次の自動生成 START -->


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 投稿ページにのみ目次を表示する -->
<script type='text/javascript'>
//<![CDATA[
<!--


    /* ページ読み込み時に目次の生成・挿入処理を実行 */
    generateIndex();
    /* 
     目次の生成・挿入処理 
    */
    function generateIndex() {
        /* 投稿本文が格納されている div 要素を発見し、目次を挿入する */
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
            if (divs[i].id.lastIndexOf("post-body-", 0) == 0) {     /* 先頭一致 */
                /* 投稿本文が格納されている div 要素発見時の処理 */
                generateIndexForObj(divs[i]);
                break;
            }
        }
    }


    /* 
     目次の生成・挿入処理
      obj : 目次の挿入先
    */
    function generateIndexForObj(obj) {


        /* 目次のHTML */
        var html_index = "<div id=\"auto-generated-index\"><div id=\"auto-generated-index_title\">目次</div><div id=\"auto-generated-index_content\">- 目次生成処理実装中です -</div></div>";
        obj.innerHTML = html_index + obj.innerHTML;


    }


//-->
//]]>
</script>

スタイルシート：

スタイルシートはカスタム CSS として追加します。

#auto-generated-index_title 
{
    border-style:solid;
    border-width:1px;
    border-color:#999999;
    background-color:#eeeeee;
    font-weight:bold;
}
#auto-generated-index_content
{
    border-style:solid;
    border-width:1px;
    border-color:#999999;
    background-color:#ffffff;
    font-weight:normal;
}

実行結果：

下図のように実際の Blogger においてテキストの挿入処理が実現できました。




*1
Blogger でカスタマイズした HTML を保存しようとしたところ、以下のエラーが発生したため「--- 目次生成処理実装中です ---」 を 「- 目次生成処理実装中です -」に変更しました。

テンプレート プレビューを読み込めませんでした: XML の解析中にエラーが発生しました。行 1988、列 150: The string "--" is not permitted within comments.

*2
javascript のコメントを // で記載していたら、Blogger が吐き出したソースコードでは改行が削除されており、実行したい行も含めてすべてがコメントになっていたので、コメントを /* … */ で書き直しています。

テンプレート上は改行が反映されているが

↓

改行が削除され、一行になってしまっている。

（但し、*3 の対策を行った結果、*2 の問題は対処する必要がなくなりました。

*3
<!-- に連続して JavaScript のコードが続いてしまうと、JavaScript が実行されないようです。

<!-- に続いて、JavaScript のソースコードが同じ行に続いてしまっているため JavaScript が実行されない

しかしながら、Blogger の HTML のカスタマイズにて、

<!--

/* JavaScript */

// –>

と記載すると、中に記載されたものが全て一行で出力されてしまうようです。

いろいろと試しましたが、唯一うまく改行を維持して カスタマイズした HTML を保存できた形式が、

<script type='text/javascript'>
//<![CDATA[
<!--

/* JavaScript */
//-->
//]]>
</script>

という形式で JavaScript を記載した場合です。

以下のパターンではテンプレートとして保存できなかったり、JavaScriptが実行できませんでした。

ダメだったパターン1

<![CDATA[
<!--


/* JavaScript */


//—>
]]>

ダメだったパターン2

<![CDATA[


/* JavaScript */
]]>

ダメだったパターン3

<!-- 


/* JavaScript */


-->

今回は結構苦戦しました。
JavaScript を Blogger に設置する場合には、独特のコツがあるようです。


次は、とりあえず見出しを列挙してみます。

参考文献

44attack: Blogger のテンプレートに JavaScript を記載するには

「Bloggerの記事に目次をJavaScriptで自動的に付与する」シリーズ

• そうだ！Bloggerの記事に目次を付けよう！
• 記事の要素の調査 - 準備編(1) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• ページを開いたときに自動的に目次を付与する - 準備編(2) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• 記事のページにのみ目次を付与する - 準備編(3) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• とりあえず目次というテキストを挿入してみる(テスト環境) - 実践編(1) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• とりあえず目次というテキストを挿入してみる(実際の環境) - 実践編(2) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• とりあえず見出しを列挙してみる(テスト環境) - 実践編(3) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• とりあえず見出しを列挙してみる(実際の環境) - 実践編(4) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• 見出しにアンカーを付与し、目次から見出しへジャンプできるようにする(テスト環境) - 実践編(5) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• 見出しにアンカーを付与し、目次から見出しへジャンプできるようにする(実際の環境) - 実践編(6) - Bloggerの記事に目次をJavaScriptで自動的に付与する
• シリーズ完結 - 最適化済みサンプル配布 - Bloggerの記事に目次をJavaScriptで自動的に付与する