サイトマップページを作る

見に来た人がサイトのコンテンツを把握するためのサイトマップを作る。
googleに送る奴じゃないやつ。
googleにはもうすでにrobots.txtでフィードをサイトマップとして送ってるから、
それほど意味はないような気がするけど、見る人にとっては一覧を把握できるし、
意味ないこともなくはないし、ブログのコンテンツにもなるし、とにかく作る。

どんな感じか見たい人は→のサイトマップから。

サイトマップの作り方

投稿＞ページを編集＞新しいページを作ってサイトマップにする。
ページを作成。タイトルは「サイトマップ」とか「sitemap」とか適当に。

/feeds/posts/summaryのrssを取得して、jQueryを使ってあれこれ加工してサイトマップを表示する。
投稿月別のコンテンツと、ラベル別のコンテンツの一覧を表示。

サイトマップの構成

構成は下のようになるので、色とかレイアウトを変えたい場合は参考にして。

<div id="sitemap_area">
  <div id="sitemap_archive">
    <div class="archive_title">アーカイブのウィジットのタイトルor「アーカイブ」</div>
    <ul class="archive_year">
      <li>
        <a href="年のアーカイブへのリンク">年</a>
        <ul class="archive_mon">
          <li>
            <a href="月のアーカイブへのリンク">月</a>
            <ul class="archive_lists">
              <li>
                <a href="記事へのリンク">記事のタイトル</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="sitemap_label">
    <div class="label_title">ラベルのウィジットのタイトルor「ラベル」</div>
    <ul class="label_names">
      <li>
        <a href="/search/label/ラベル名">ラベル名</a>
        <ul class="label_lists">
          <li>
            <a href="記事へのリンク">記事のタイトル</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

サイトマップのコード

いつものようにjQueryを使ってるので、bloggerでjQueryを使えるようにする
を参考に、インクルードしとく。
って言いたいところだが、サイドメニューは全ページに関係するけど、
サイトマップは1ページでしか使わないので、
他でjQueryを使う必要がなければ↓のコードの、
「ここにjQueryを差し込む」のところにjQueryのコードを
突っ込めばいいんじゃないかな。

<script type="text/javascript"><!--
/*
ここにjQueryを差し込む。
*/
jQuery.noConflict()(function($){
 $.get("http://"+location.hostname+"/feeds/posts/summary",
  null,
  function(data){
   var label = {};
   var archive = {};
   $(data).find("entry").each(function(){
    var item = {title:$(this).find("title").text(),
       date:$(this).find("updated").text(),
       link:$(this).find("link[rel=alternate]").attr("href")};
    if ($(this).find("category").length){
     $(this).find("category").each(function(){
      if (!label[$(this).attr("term")]) label[$(this).attr("term")] = {link:"/search/label/"+escape($(this).attr("term")),list:new Array()};
      label[$(this).attr("term")].list.push(item);
     });
    }else{
     label["home"] = {"link":"/",
          "list":item
          };
    }
    
    if ($(this).find("published").length){
     var date = $(this).find("published").text().split("-");
     var year = date[0];
     var mon = date[1];
     if (!archive[year]) archive[year] = {link:"/search?updated-min="+year+"-01-01T00%3A00%3A00%2B09%3A00&updated-max="+Number(year)+1+"-01-01T00%3A00%3A00%2B09%3A00&max-results=5",mon:{}};
     if (!archive[year].mon[mon]) archive[year].mon[mon] = {link:"/"+year+"_"+mon+"_01_archive.html",list:new Array};
     archive[year].mon[mon].list.push(item);
    }
   });
   
   if (label){
    var label_title = ($("#Label1 h2").length)? $("#Label1 h2").text() : "ラベル" ;
    $("#sitemap_label").append("<div class='label_title'>"+label_title+"</div><ul class='label_names'></ul>");
    for (var key in label){
     $("#sitemap_label ul.label_names").append("<li><a href='"+label[key].link+"'>"+key+"</a></li>");
     if (label[key].list.length) $("#sitemap_label ul.label_names>li:last").append("<ul class='label_lists'></ul>");
     for (var i=0;i<label[key].list.length;i++){
      $("#sitemap_label ul.label_lists:last").append("<li><a href='"+label[key].list[i].link+"'>"+label[key].list[i].title+"</a></li>");
     }
    }
   }
   if (archive){
    var archive_title = ($("#BlogArchive1 h2").length)? $("#BlogArchive1 h2").text() : "アーカイブ" ;
    $("#sitemap_archive").append("<div class='archive_title'>"+archive_title+"</div><ul class='archive_year'></ul>");
    for (var key in archive){
     $("#sitemap_archive ul.archive_year").append("<li><a href='"+archive[key].link+"'>"+key+"</a></li>");
     $("#sitemap_archive ul.archive_year>li:last").append("<ul class='archive_mon'></ul>");
     for (var key2 in archive[key].mon){
      $("#sitemap_archive ul.archive_mon").append("<li><a href='"+archive[key].mon[key2].link+"'>"+key2+"</a></li>");
      if (archive[key].mon[key2].list.length) $("#sitemap_archive ul.archive_mon>li:last").append("<ul class='archive_lists'></ul>");
      for (var i=0;i<archive[key].mon[key2].list.length;i++){
       $("#sitemap_archive ul.archive_lists").append("<li><a href='"+archive[key].mon[key2].list[i].link+"'>"+archive[key].mon[key2].list[i].title+"</a></li>");
      }
     }
    }
   }

  },
  "xml"
 );
})
--></script>
<div id="sitemap_area">
 <div id="sitemap_archive">
</div>
<div id="sitemap_label">
</div>
</div>

以上。

個人的な好みかもしれないが、コンテンツを小分けしてページ移動させるより、
表示は多少遅くなっても、でかい一覧で見たほうがわかりやすい。
ページ移動ってどうやっても微妙に待たされるからストレスが溜まる。
googleの検索結果の件数もまず100件にするしなぁ。

特に、技術的なことを書いてるブログは、
こういう一覧ページを作っといてほしいもんだ。
ブログってそういうとこが情報を探してる人にとって使いにくいんだよなぁ。