日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年4月24日木曜日

とりあえず目次というテキストを挿入してみる(実際の環境) - 実践編(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 においてテキストの挿入処理が実現できました。

blogger_index_insert_title_only


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

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

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

blogger_index_insert_err
テンプレート上は改行が反映されているが
blogger_index_insert_err_src
改行が削除され、一行になってしまっている。
(但し、*3 の対策を行った結果、*2 の問題は対処する必要がなくなりました。

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

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

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

/* JavaScript */

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

いろいろと試しましたが、唯一うまく改行を維持して カスタマイズした HTML を保存できた形式が、
<script type='text/javascript'>
//<![CDATA[
<!--

/* JavaScript */
//-->
//]]>
</script>
という形式で JavaScript を記載した場合です。

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

ダメだったパターン1

<![CDATA[
<!--


/* JavaScript */


//—>
]]>


ダメだったパターン2

<![CDATA[


/* JavaScript */
]]>


ダメだったパターン3

&lt;!-- 


/* JavaScript */


--&gt;


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


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

参考文献


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


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





関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...