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

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

2014年4月24日木曜日

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

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

今回から実践編ということで、実際に JavaScript を記載して目次を挿入していきます。
第1回目の今回はまずは目次というテキストを記事の先頭に挿入してみようと思います。


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

ソースコード

<html>
<head>
<title>test page</title>
<style type="text/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;
}
</style>
</head>
<body>
<h1>TEST.</h1>
<div id="post-body-1234">
記事本文です。
</div>


<script type="text/javascript">
<!-- 
    /* ページ読み込み時に目次の生成・挿入処理を実行 */
    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>


</body>
</html>




実行結果:

下図のように、目次というテキストを記事の先頭に挿入に成功しました。

blogger_index_insert_title_only_test



次は実際に Blogger の環境で今回の JavaScript を動作させてみます。

参考文献


        JavaScript的startsWith
        —
        ありえるえりあ
    JavaScript的startsWith — ありえるえりあ
JavaScriptでString.startsWith相当は何か、ベンチマークも - SundayHackingJavaScriptでString.startsWith相当は何か、ベンチマークも - SundayHacking


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





関連記事

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

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