ASP.NET@自作専科

C#でHtmlパースして内容を取得する

noreply@blogger.com (hyperhands) — Tue, 15 Jun 2010 12:54:00 +0000

.NETでHTMLをパースしようとすると.NetFrameworkに機能がないという事で、手作りするしかないかなぁと考えておりましたが、便利なツールがDLLとして提供されておりました。

.NET向けHTMLパーサー「Html Agility Pack(HAP)」が、Open Sorce Community「CodePlex」からダウンロード可能になっています。

MS-PLライセンスという形式で使用が許可されています。
参考サイト：.NET向けHTMLパーサー「Html Agility Pack」で簡単スクレイピング
※　↑ 広告Flashは右上の「スキップ」で飛ばすことができますよ。

このHTMLパース機能を使用して作成したのが「Wikipedia Station Search」というWebアプリです。

まずは、ダウンロードした「HtmlAgilityPack.dll」をVisualStudioで参照追加しましょう。

次に、使用したいソースで「using HtmlAgilityPack;」を入力します。

具体的なコードは、下記のようになります。

WebClient wc = new WebClient();
wc.Encoding = enc;
wc.Headers.Add("user-agent", "Wikipedia Station Search");
String html = wc.DownloadString(url);
HtmlDocument doc = new HtmlDocument();// HAP Objectを生成
doc.LoadHtml(html);// HTMLパース
String xPath = @"//table[@class='infobox bordered']//child::img[position()=1]";
HtmlNode node = doc.DocumentNode.SelectSingleNode(xPath);
if (node != null)
{
   String imageUrl = node.Attributes["src"].Value;
   Console.Writeline( imageUrl );
}

こうして作られたASP.NETのサンプルがこちらになります。
<p>読み込み中...</p>

「Wikipedia Station Search」の貼り付け方
HTMLに以下のソースを貼り付けるだけで使用できます。
※　駅の指定方法など、GETパラメータ設定となっています。（リンク先に使い方があります）

<iframe frameborder="0" marginheight="0" marginwidth="0" src="http://prg.hyperhands.com/wikistation/getPhoto.aspx?Station=鶯谷" style="height: 300px; width: 100%;">読み込み中...</iframe>

※　ハイパーハンズのサーバにホストしてあります。
　　当Webアプリは、予告なく修正・終了することがありますので貼り付けで使用の際にはご了承下さい。
　　使用料金は頂きませんが、サポートや不具合など一切の保障は出来かねます。

検索機能OFFや、写真の固定も可能です。
入谷駅などは「東京と神奈川」にありますが、入谷で検索後ラジオボタンで選択できるようになっています。

Google日本語入力beta

noreply@blogger.com (hyperhands) — Fri, 04 Jun 2010 04:47:00 +0000

日本語入力をするときに、アルファベットやひらがなを入力し変換して漢字かなまじりの日本語文章を作成していますよね。

その機能をIMEなどと言ったりします。

私のPCではVistaなのでありますが、デフォルトのMicrosoft Office IME 2007を使用しておりました。
これと言って大きな不満がある訳ではないのですが、先日Googleさんが日本語入力ツールを無償提供している事を知り、早速インストールしてみました。

使用感などの評価は、これからの事になりますが

ダウンロードサイトをご紹介したいと思います。（Windows & Mac対応）

Chrome OSの一部を担う機能なのでしょうね。きっと

サイトを訪問して頂いたユーザ層を把握しよう

noreply@blogger.com (hyperhands) — Tue, 25 May 2010 10:20:00 +0000

当サイトはBloggerを使っています。

GoogleさんはWebサイトのアクセス解析ツール「Google Anlyutics」も無料で提供されていいます。

Bloggerに限らず、HTMLの編集ができれば殆どのWebページでこのツールを使うことができます。

どんな形にせよ、Webページを公開しているならユーザの動向を知りたいのではないでしょうか。

ちなみに、ここ１ヶ月の当サイトのアクセス状況を下に示します。

ASPNET＠自作専科と銘打っている割に、BloggerTipsばかり投稿しているので当然のように上位の検索キーワードは「Blogger + 第二ワード」となっています。

記事投稿をしばらく休止していた割りに、顕著なユーザ数の落ち込みは見られないようです。

Blogger Template Designerを使ってみた

noreply@blogger.com (hyperhands) — Wed, 28 Apr 2010 11:51:00 +0000

私の使っている他のBloggerサイトで、Blogger Draftで使用可能になっている「Template Designer」を使ってレイアウトを試してみました。

現在使っているテンプレートは上書きされてしまうので、XMLファイルとしてダウンロードしバックアップしてから作業をお勧めします。

使ってみた感想として、良くできている印象です。
サイドバーの位置や数のレイアウトが簡単に変更できる他、画面幅、サイドバーの幅がタグやCSSの修正なしでスライドバーや数値で変更でき、リアルタイムに変更内容のプレビューが下部ペインに表示されるので、確認しながら変更が可能になっています。
細かな構造は、今まで通りHTMLの編集からタグ操作が必要になりますが、逆にHTMLの編集では大まかなレイアウト変更がタグの階層ズレなどが発生して厄介だったのでTemplateDesignerは嬉しい機能です。

しかし、当サイトで使っているJavascriptを実装してゆくと@IEだけレイアウトが崩れます。崩れるというよりは、サイドバーも記事も表示されないという現象が発生しました。
因みに、他のブラウザでは問題ありませんでした。

どうもJavascriptエラーが発生してブラウザのレンダリングが途中でストップしているようなのですが、当サイトでは@IEでも何ら問題なく表示出来ているスクリプトでエラーが発生するという妙な事になっています。

一部、パン屑リストの表示スクリプトでエラーが発生しているようなので当該スクリプトを排除しましたが、まだエラーを取りきれていません。

また、吐き出されたテンプレートXMLを見てみると、新しいタグが出現していてようやく理解してきた既存の構造があまり役に立ちません。

しかし、ウィジェットの中のタグ構造は変化はしていないように思います。

また、新しいレイアウトにしたら記事の評価フィールドが既定で表示されるようになりました。
テンプレートデザイナーでスクリプトがまともに動かせるようになったら、当サイトでもTemplate Designerを使用してみたいと思います。

ローディング高速化とサマリー＆ページナビゲーション機能

noreply@blogger.com (hyperhands) — Mon, 26 Apr 2010 08:49:00 +0000

Bloggerでリストページ時に記事サマリー＆画像サムネイル表示　では、Bloggerの管理ツールで投稿表示数をmaxResultsに合わせるという設定方法でした。

しかし、この状態だと一旦ブラウザに設定したページ分の文字や画像が全てロードされてから、サマリー表示用に変換されるので、不必要なローディングが多数発生してしまいます。

ローディングを極力抑えるために、投稿表示数の設定は１にしておき、Javascriptの変数maxResultsに設定した数だけフィードを取得し、必要のない画像ローディングをしないように修正してみました。

この機能は、ページナビゲーションを表示する関数内で呼び出される仕組みとなっています。
Blogger管理ツールで「レイアウト＞HTMLの編集」で、「<b:includable id='post' var='post'>」を検索し、そのタグ内を以下のソースを参考に修正して下さい。
※　重要なのは、ID＝postの子に「post-header、post-body」が存在することです。
※　また、max-resultsの関係でラベルメニューGadgetsもVer1.03にする必要があります。

<b:includable id='post' var='post'>
  <div class='post' id='post'>
    <div class='post-header' id='post-header'>
      <a expr:name='data:post.id'/>
      <b:if cond='data:post.title'>
        <h3 class='post-title' id='post-title'>
          <a expr:href='data:post.url'><data:post.title/></a>
        </h3>
      </b:if>
      
      <div class='post-body' id='post-body'>
        <data:post.body/>

        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.labels'>
            <h5 class='label-recent-post-header'>関連記事</h5>
            <b:loop values='data:post.labels' var='label'>
              <b:if cond='data:label.name'>
                <div class='label-recent-post' expr:id='data:label.name + &quot;-recent-post&quot;'>
                  <data:label.name/>
                </div>
              </b:if>
            </b:loop>
          </b:if>
        </b:if>
      </div>


      <b:if cond='data:post.hasJumpLink'>
        <div class='jump-link'>
          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
            <data:post.jumpText/>
          </a>  
        </div>
      </b:if>

      <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:includable>

次に、「レイアウト＞ページの要素」でJavascript&HTMLガジェットを追加し、以下のソース＆CSSをペーストします。
※　画像につきましてはハイパーハンズに著作権がないものも在りますので、直リンクでそのまま使わず、ご自身で作成するなどして変更して使用するようにして下さい。

<style type='text/css'>
.blog-pager{
 border: 0px solid red;
}
.blog-pager table{
 padding: 0px;
 margin-left: auto;
 margin-right: auto;
 border: 0px solid blue;
}
.blog-pager tr{
 padding: 0px;
 margin: 0px;
 border: none;
}
.blog-pager td{
 padding: 0px;
 margin: 0px;
 align: center;
 vertical-align: middle;
 border: 0px solid green;
}
.headPager{
 display: block;
 padding-right: 8px;
 border: 0px solid black;
}
.headPager a:hover{
 font-weight: bold;
 text-decoration: none;
 color: darkblue;
}

#prevPageLink,#nextPageLink{
 margin-top: 4px;
 padding: 0px;
 border: 0px solid black;
}
.pageLink ,.currentPageLink{
 text-align: center;
 padding: 0px;
 margin: 0px;
 border: 0px solid red;
}

.currentPageLink {
 text-decoration: none;
 padding: 7px 12px 7px 12px;
 margin: 0px;
 color: white;
 font-weight: bold;
 text-decoration:none;
 border: 0px solid blue;
 background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S8ay2e9Wo0I/AAAAAAAABaY/y6NRdxWJwic/s128/currentPage.png) no-repeat;
}

.currentPageLink:hover{
 color: white;
 text-decoration: none;
}
.pageLink{
 padding: 7px 12px 7px 12px;
 margin: 0px;
 color: blue;
 text-decoration: none;
 border: 0px solid blue;
 background: url(http://lh5.ggpht.com/_BdRZoJ1uqRY/S8ay2dgBFBI/AAAAAAAABag/H_nPzqdr8U8/s128/itemPage.png) no-repeat;
}

.pageLink:hover{
 color: darkblue;
 font-weight: bold;
 text-decoration: none;
 background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S8ay2T0no-I/AAAAAAAABac/yo34eSyVgYY/s128/hoverPage.png) no-repeat;
}
// ヘッドライン
.headline{
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}

.headline{
  margin:20px;
  padding: 20px;
  font-size: 15px;
  border-radius:10px;
  -webkit-border-radius: 10px; /* Safari、Google Chrome */
  -moz-border-radius: 10px; /* Firefox */
  background: beige;
  border: 1px solid #black;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}
.headline li{
 list-style: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7XhO_pFrbI/AAAAAAAABQo/MH-fwAFdODw/s128/ico_dots7_4.gif);

}
.headline abbr{
  margin-left: 5px;
}
.headline h2{
 margin-top: 0px;
 color: #ff5555;
 text-shadow: 2px 2px 3px #550000; 
}
.headline h5{
 margin-top: 0px;
 margin-left:20px;
 border-bottom:3px double #112299;
 color: #1133aa;
 font-size:18px;
 font-weight: bold;
 text-shadow: 2px 2px 2px silver; 
}
.headline .Temporary{

 line-height: 40px;
}
.headline .updated{
 color: #3355ff;
 font-size:10px;
 font-weight: bold;
}
.headline .title{
 margin-left: 5px;
 font-size:13px;
 color: #11cc33;
 //text-shadow: 1px 1px 2px #000000; 
}
.headline .commentCount{
 margin-left:5px;
 font-size:13px;
 color: #ff3355;
 font-weight: bold; 
}
.shadowImage{
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
 border:1px solid #999999;
 margin:30px;
 max-width: 500px;
}


.shadowThumbnail{
 float:left;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
border:1px solid #999999;
 max-width: 170px; 
 max-height:170px;
}

.thumbnail-span{
 float:left;
 width: 170px;
 height: 170px;
 margin: 15px;
 //background: white;
 //border:4px ridge skyblue;
}
#readmore{
 margin:50px 20px 30px;
 float: right;
}

</style>

<script type='text/javascript'>
<!--
//--------------------------------------------
// 簡単Pageナビ for Blogger Ver1.00
// ハイパーハンズへのリンク部分は
// 修正・削除をしないでご利用下さい。
// 
// License agreement with GNU LGPL
// This code Created by S.Kobayashi
// Copyright (C) 2010 Hyperhands.com
//--------------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;
var maxHeadlines = 10;
var maxLinks = 10;
var isHome=false;
var isLabel=false;
var isStatic=false;
var isItem=false;
var labelPrefix = "search/label/";

var pageNo = 0;
var feedUrl = blogUrl + "feeds/posts/summary/";
var headlineUrl = blogUrl + "feeds/posts/summary/";
var labelName = "";
var headlineID = 'headline-updated';
var blogPagerID = 'blog-pager';
var blogPager;

var nextImg = [
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Ol-f2WI/AAAAAAAABas/R53PdkxwHoE/s128/nextPage.png',
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-O57iR7I/AAAAAAAABaw/dLBx22puDqQ/s128/nextHover.png'
];
var prevImg = [
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Og6H_9I/AAAAAAAABao/LpDYqkrlmMw/s128/prevPage.png',
  'http://lh6.ggpht.com/_BdRZoJ1uqRY/S8a-OhetXMI/AAAAAAAABak/kY-k_7bcJUw/s128/prevHover.png'
];

var readmoreImg = [
  'http://lh6.ggpht.com/_BdRZoJ1uqRY/S9Hz7xppMJI/AAAAAAAABdQ/l-1nPh36B1U/s64/readmore.png',
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S9Hz7_KzMXI/AAAAAAAABdU/du6A8z8gYEg/s64/readmore-hover.png'
];

function startBlogPager(){

  if( currentUrl.indexOf("#PageNo=" ) > -1){
    var strNo = currentUrl.substring(  currentUrl.indexOf("#PageNo=" )+8);
    pageNo = parseInt( strNo )-1;
  }

  if ( currentUrl.indexOf( labelPrefix ) > -1 ){
     isLabel=true;
  } else if( currentUrl.indexOf( '.html' ) == -1 ){
     isHome=true;
  } else if( currentUrl.indexOf( '/p/' )> -1){
     isStatic=true;
  } else {
    isItem=true;
  }


  viewPager();
}

function viewPager(){
  try{
    blogPager = document.getElementById( blogPagerID );
    if( blogPager == undefined ){
      alert( 'blogPagerID = ' + blogPagerID );
    }else{
      if( isItem ){
         var div = document.getElementById( 'post-body' );
         createShadow( div );
      }else if( isLabel || isHome ){ 
        blogPager.innerHTML = '';
        var t = document.createElement( 'table' );
        var tr = document.createElement( 'tr' );
        t.appendChild( tr );
        blogPager.appendChild( t );
        blogPager = t;
        if( isLabel ){
          var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
          labelName = currentUrl.substring( st );
          if( labelName.indexOf("/") > -1){
            labelName = labelName.substring(0,labelName.indexOf("/"));
          }else if( labelName.indexOf("?") > -1 ){
            labelName = labelName.substring(0,labelName.indexOf("?"));
          }
          feedUrl += "-/" + labelName;
          headlineUrl += "-/" + labelName;
          blogUrl += labelPrefix + labelName + "?";
        }else{
          blogUrl = blogUrl + "search?";
        }

        feedUrl = feedUrl + "?orderby=published";
        headlineUrl = headlineUrl + "?orderby=updated";
        blogUrl += "orderby=published&max-results=" + '1' ;

        feedUrl += ("&max-results=" );
        headlineUrl += ("&max-results=" );
        var srcStr = (feedUrl + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
        var s = createScript( srcStr );
        blogPager.appendChild( s );

      }
    }
  }catch( e ){
    alert( e );
  }
}
function appendTD( obj , className ){
  var td = document.createElement( 'td' );
  if( className != undefined ) td.setAttribute( 'class', className );
  td.appendChild( obj );
  blogPager.appendChild( td );
}
function createScript( srcStr ){
  var s = document.createElement( 'script' );
  s.setAttribute( 'type', 'text/javascript' );
  s.setAttribute( 'src', srcStr );
  return s;
}
function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = document.createElement( 'span' );
   head.setAttribute( 'class', 'headPager' );
   var txt = 'Pages( ' + totalPage + ' )';
   var ab = document.createElement( 'abbr' );
   ab.setAttribute( 'title', 'あなたのBloggerにも簡単Pageナビを追加\r\n -- Powered by Hyperhands');
   var a = document.createElement( 'a' );
   a.setAttribute( 'href', 'http://aspnet.hyperhands.com/2010/04/blogger_14.html' );
   a.setAttribute( 'target', '_blank' );
   a.setAttribute( 'style', 'background:url(http://lh4.ggpht.com/_BdRZoJ1uqRY/S8Txk6oMcBI/AAAAAAAABZM/xSSIJDiRbBs/ico_opwin7b.gif) no-repeat;padding-left:15px;' );
   a.appendChild( document.createTextNode( txt ) );
   ab.appendChild( a );
   head.appendChild( ab );
   appendTD( head );
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      getHeadline( i );
      var className = 'pageLink';
      var srcStr = feedUrl + 1 + '&start-index=';
      var redirect = 'redirectTargetPage';
      if( pageNo == i){
        className = 'currentPageLink';
        srcStr = srcStr.replace( 'summary', 'default' );
        srcStr = srcStr.replace( 'max-results=1', 'max-results=' + maxResults );
        redirect = 'redirectCurrentPage';
      } 
      var targetIndex = ( maxResults * i );
      if( targetIndex == 0 ) targetIndex = 1; 
      srcStr += ( targetIndex + '&alt=json-in-script&callback=' + redirect );
      var script = createScript( srcStr );

      var a = document.createElement( 'a' );
      var id = 'targetPageLink' + targetIndex;
      a.setAttribute( 'id', id );
      a.setAttribute( 'class', className  );
      a.appendChild( document.createTextNode( i+1 ) );
      if( script != undefined ) blogPager.appendChild( script );
      appendTD( a );
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}


function getHeadline( i ){
  try{
   if(i==0){
    var div = document.getElementById( headlineID );
    if( div != undefined ){
      var srcStr = headlineUrl + maxHeadlines + "&alt=json-in-script&callback=viewHeadline";
      blogPager.appendChild( createScript( srcStr ) );
    }
   }
  }catch( e ){
    alert( e );
  }
}

function viewHeadline( result ){
  try{

    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var idPrefix = '.post-';
      var feed = result.feed;
      if( feed.entry.length > 0 ){
        var h5 = document.createElement( 'h5' );
        var prefix = "";
        //if( isHome ) prefix = "このサイト";
        if( isLabel ) prefix = decodeURI( labelName ) + " で";
        h5.appendChild( document.createTextNode( prefix + '最近更新のあった記事 ' + feed.entry.length+ '件' ));
        div.appendChild( h5 );

        var ul = document.createElement( 'ul' );
        div.appendChild( ul );
        for( var i=0; i< feed.entry.length; i++){
          var entry = feed.entry[i];
          var h = document.createElement( 'li' );
          h.setAttribute( 'class', 'updatedHeadline' );
          var id = entry.id.$t;
          id = id.substring( id.indexOf( idPrefix  ) + idPrefix.length );// 将来のコメントHeadline化で使用する
          h.setAttribute( 'id', 'uHeadline-' + id );
        
          var d = document.createElement( 'span' );
          d.setAttribute( 'class', 'updated' );
          var upd = entry.updated.$t;
          var monthDay = upd.substring(5,10).replace('-','/');
          var time = upd.substring(10,16).replace('T',' ');
          d.appendChild( document.createTextNode( monthDay + time ) );
          h.appendChild( d );

          var t = document.createElement( 'a' );
          t.setAttribute( 'class', 'title' );
          t.setAttribute( 'href', getLink( entry ) );
          var title = entry.title.$t;
          var abbr = document.createElement( 'abbr' );
          abbr.setAttribute( 'title', '記事を表示するリンク' );
          abbr.appendChild( document.createTextNode( title ) );
          t.appendChild( abbr );

          // コメントカウント
          for(var j=0; j< entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( '[ ' + commentCount + ' ]' ) );
                  c.appendChild( ab );
                  t.appendChild( c );
                }
              }
            }
          }// j loop

          h.appendChild( t );

          ul.appendChild( h );
        }// i loop
      }
    }
  }catch( e ){
    alert( e );
  }
}

function getPrevNext(vector){
  try{
    var startIndex = 0;

    if( vector.toLowerCase() == "prev" ){
      startIndex = ((pageNo-1) * maxResults + 1);
    }else{
      startIndex = ((pageNo+1) * maxResults);
    }

    var imgArr = prevImg;
    if( vector.toLowerCase() == 'next' ) imgArr = nextImg;
    var id = vector.toLowerCase() + 'PageLink';
    var img = createImageHover( imgArr , id );
    
    var a = document.createElement( 'a' );
    a.setAttribute( 'href', 'javascript:void();' );
    a.appendChild( img );
    appendTD( a );

    var srcStr = feedUrl + 1 + '&start-index=' + startIndex  + '&alt=json-in-script&callback=' + vector.toLowerCase() + 'RedirectPage';
    blogPager.appendChild( createScript( srcStr ) );

  }catch( e ){
    alert( e );
  }
}

function createImageHover( imgArr , id ){
  var img ;
  try{

    img = document.createElement( 'img' );
    if( id != undefined ) img.setAttribute( 'id', id );
    img.setAttribute( 'src', imgArr[0] );
    img.setAttribute( 'onMouseOver', 'this.src="' + imgArr[1] + '";' );
    img.setAttribute( 'onMouseOut', 'this.src="' + imgArr[0] + '";' );

  }catch( e ){
    alert( e );
  }
  return img;
}
function prevRedirectPage( result ){
  try{
    var targetLink = document.getElementById( 'prevPageLink' );
    var date = encodeDate( result.feed.entry[0].published.$t );
    var hrefStr;
    if( pageNo == 1) hrefStr =  blogUrl + '#PageNo=1';
    else hrefStr =  blogUrl + '&updated-max=' + date  + '#PageNo=' + pageNo ;
    addEventImage( targetLink, 'onClick', hrefStr );
  }catch( e ){
    alert( e );
  }
}

function nextRedirectPage( result ){
  try{
     var targetLink = document.getElementById( 'nextPageLink' );
     var date = encodeDate( result.feed.entry[0].published.$t );
     var hrefStr =  blogUrl + '&updated-max=' + date  + '#PageNo=' + (pageNo + 2);
    addEventImage( targetLink, 'onClick', hrefStr );
  }catch( e ){
    alert( e );
  }
}
function addEventImage( targetImage, event, hrefStr ){
  try{
    var scriptStr = 'location.href = "' + hrefStr + '";';
    targetImage.setAttribute( event, scriptStr );
  }catch( e ){
    alert( e );
  }
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById( 'targetPageLink' + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + '#PageNo=' + targetLink.innerHTML;
   else targetLink.href =  blogUrl + '&updated-max=' + date + "#PageNo=" + targetLink.innerHTML;
}
function redirectCurrentPage( result ){
  try{
    var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
    var targetLink = document.getElementById( 'targetPageLink' + startIndex );   

    if( targetLink.getAttribute( 'class' ) == 'currentPageLink' ) viewSummaries( result );
  }catch( e ){
    alert( 'redirectCurrentPage\r\n' + e );
  }
}
function viewSummaries( result ){
  try{
    var entries = result.feed.entry;
    var item;
    var items = new Array();

    for( var i=0; i< entries.length; i++){
      var entry = entries[i];
      item = getSummary( entry );
      if( item  != undefined ) items[ items.length ] = item.innerHTML;
    }
    if( items.length > 0 ){
      item = document.getElementById( 'post' );
      item.innerHTML = items.join( '');
      //alert( item.innerHTML );
    }
  }catch( e ){
    alert( 'viewSummaries\r\n' + e );
  }
}
function getSummary( entry ){
  var item;
  try{
    item = document.getElementById( 'post' );
    if( item != undefined ){
      var pHead = document.getElementById( 'post-header' );
      var pTitle = document.getElementById( 'post-title' );
      var a = document.createElement( 'a' );
      a.setAttribute( 'href', getLink( entry ) );
      a.appendChild( document.createTextNode( entry.title.$t ) );
      pTitle.innerHTML = '';
      pTitle.appendChild( a );

      var pBody = document.getElementById( 'post-body' );
      var dummy = document.createElement( 'span' );
      dummy.innerHTML = entry.content.$t;
      dummy = createSummaryAndThumb( dummy );
      pBody.innerHTML = dummy.innerHTML;
    }
  }catch( e ){
    alert( 'getSummary\r\n' + e );
  }
  return item;
}

function getLink(entry){
  var link = '';
  try{
    for(var i=0; i<entry.link.length; i++ ){
      if( entry.link[i].rel == 'alternate' ){
        link = entry.link[i].href;
      }
    }
  }catch( e ){
    alert( 'getLink()' + e );
  }  
  return link;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

//--------------------------------------------------------------------
var isMSIE = /*@cc_on!@*/false;
summary_noimg = 300;
summary_img = 200;
img_thumb_size = 144;
img_outer_size = 170;
function extractEnclosedString(st,ed,target,exclusion){
  if(target.indexOf( st )==-1)
  {
    st=st.toUpperCase();
    ed=ed.toUpperCase();
  }
  if(target.indexOf( st )>-1)
  {
    var s = target.split( st );
    for(var i=0;i<s.length;i++){
      if(s[i].indexOf( ed )!=-1){
        var execute = true;
        if( exclusion != undefined ){
          if( s[i].substring(0,exclusion.length).toLowerCase() == exclusion.toLowerCase()){
              s[i] = st + s[i];
            
            execute = false;
          }
        }
        if( execute ) s[i] = s[i].substring(s[i].indexOf( ed ) + ed.length , s[i].length);
      }
    }
    target = s.join("");
  }
  
  return target;
}

function removeHtmlTag(target, len){

  target = extractEnclosedString( "<pre ", "pre>",target);
  target = extractEnclosedString( "<", ">", target, "br");
  
  return target.substring( 0,len ) + '　≫ ．．．';
}
function changeImageSize( imgSrc , size ){
  var paths = imgSrc.split("/");
  switch( size ){
   case "s72":
   case "s144":
   case "s288":
   case "s512":
   case "s576":
   case "s640":
   case "s720":
   case "s800":
   case "s912":
   case "s1024":
   case "s1152":
   case "s1280":
   case "s1440":
   case "s1600":
     paths[ paths.length -2 ] = size ;
     break;
  }
  return paths.join("/");
}
function createSummaryAndThumb(item, summary_noimgLen, summary_imgLen , sizeOuter, size ){
  var summary;
  try{
    var div = document.getElementById( 'post-body' );
    var link = document.getElementById( 'post-title' ).getElementsByTagName( 'a' )[0].href;

    if( summary_imgLen != undefined ) summary_img= summary_imgLen ;
    if( summary_noimgLen != undefined ) summary_noimg= summary_noimgLen;
    if( sizeOuter != undefined ) img_outer_size = sizeOuter;
    if( size != undefined ) img_thumb_size = size;

    var summ = summary_noimg;
    var image;
    var imgs = item.getElementsByTagName("img");
    if(imgs.length>0){
      // FeedSummaryに含まれるGoogleトラックイメージを除外
      if( imgs[0].src.indexOf( 'https:' ) == -1){
      summ = summary_img;// イメージ有りの場合の文字列長にする
      image = document.createElement( 'a' );
      image.setAttribute( 'class', 'thumbnail-span' );
      image.setAttribute( 'href', link );

      var img = document.createElement( 'img' );
 
      var src = changeImageSize( imgs[0].src, 's' + img_thumb_size );
      img.setAttribute( 'src', src );
      img.setAttribute( 'class', 'shadowThumbnail');


      image.appendChild( img );
      }
    }

    var noTag = removeHtmlTag( item.innerHTML, summ ) ;
    //item.innerHTML = "";
    var summary = document.createElement( 'span' );
    summary.setAttribute( 'class', 'entry-body-thumbnail' );
    if( image != undefined ) summary.appendChild( image );
    var sText = document.createElement( 'span' );
    sText.innerHTML = noTag;
    sText.setAttribute( 'class', 'desc' );

    summary.appendChild( sText );

    summary.innerHTML = attachBrowser( summary.innerHTML );

    var img = createImageHover( readmoreImg, 'readmore' );   
    var readmore = document.createElement( 'a' );
    readmore.setAttribute( 'href', link );
    readmore.appendChild( img );

    summary.appendChild( readmore );

  }catch( e ){
    alert( 'createSummaryAndThumb()\r\n' + e );
  }
  return summary;
}
function createShadow(div){
  if( div == undefined ) return;

 var imgtag = "";
 var a = div.getElementsByTagName("a");

 for(var i=0;i<a.length;i++) {
  var imgs = a[i].getElementsByTagName("img");
  if( imgs.length >0){

   imgs[0].setAttribute( 'class', 'shadowImage' );


  }
  a[i].setAttribute( 'target', '_blank');
 }
 div.innerHTML = attachBrowser( div.innerHTML);

}
function attachBrowser( str ){
 str = str.replace( /@VS/g, '<abbr title="MicrosoftのVisualStudio2008やVisualWebDebelopper2008などの開発ツール"><span class="vs">DevTool</span></abbr>' );
 str = str.replace( /@Blogger/g, '<abbr title="Google無料ブログツール"><span class="blogger">Blogger</span></abbr>' );
 str = str.replace( /@Chrome/g, '<span class="chrome">Chrome</span>' );
 str = str.replace( /@Explorer/g, '<span class="explorer">Explorer</span>' );
 str = str.replace( /@IE/g, '<span class="explorer">Explorer</span>' );
 str = str.replace( /@Safari/g, '<span class="safari">Safari</span>' );
 str = str.replace( /@Firefox/g, '<span class="firefox">Firefox</span>' );
 str = str.replace( /@Opera/g, '<span class="opera">Opera</span>' );
 return str;
}
function transparentIFrame(){
    var iframes = document.getElementsByTagName('iframe');
    for(var i=0;i<iframes.length;i++) {
      var iframe = iframes[i];
      iframe.allowTransparency = true;
      try {
        // 別ドメインのiframeはアクセス不能なので高さ設定できません。
        var doc = iframe.contentWindow.document.documentElement;
        var body = iframe.contentWindow.document.body;

        var fitHeight = 0;
        if( isMSIE ) {
          if( navigator.userAgent.toLowerCase().replace( /\s/g, '' ).indexOf( 'msie6' ) > -1 ) {
            fitHeight = body.scrollHeight;
          } else {
            fitHeight = doc.scrollHeight;
          }
        } else {
          fitHeight = doc.offsetHeight;
        }
        iframe.style.height = fitHeight + 'px';
      } catch( e ) {
        /* skip process */
      }

    }
  
}
window.onload = transparentIFrame;


startBlogPager();
-->
</script>

次に、テンプレートHtml内で「'data:label.url'」として記載されている部分の修正をします。

テンプレートのデザインによって様々ですが、複数見つかると思います。
これらは、すべてあるラベルのリストを表示するためのリンクとして動作していますが、高速化コードに対応するために１とします。
'data:label.url'　を　'data:label.url + "?max-results=１"'　へと全てを置換します。

大きめな画像を張り付けてあるページでは表示速度がかなり改善されるのではないでしょうか。
どうぞお試しあれ！

Blogger用関連記事ガジェット版

noreply@blogger.com (hyperhands) — Mon, 26 Apr 2010 08:12:00 +0000

Blogger用ラベルメニューガジェット版　に機能追加することで記事に付与したラベルに該当する記事のリストを関連記事としてリンク化する事ができるようになりました。
以下のタグでID「ラベル名＋'-recent-post'」が書き出されます。
プログラムがそのラベルメニュー作成時に当該ラベルのIDを発見すると関連記事として、同様のメニューを書き出す仕組みです。
※　ページローディングの高速化（既定の投稿表示数＝１）に対応しています。

実装方法
Blogger管理ツールから「レイアウト＞HTMLの編集」で<data:post.body/>を検索し、その後ろに以下のタグをコピー＆ペーストします。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.labels'>
    <h5 class='label-recent-post-header'>関連記事</h5>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.name'>
        <div class='label-recent-post' expr:id='data:label.name + &quot;-recent-post&quot;'>
          <data:label.name/>
        </div>
      </b:if>
    </b:loop>
  </b:if>
</b:if>

次にサイドバーに表示されているメニューの「Add to Blogger」ボタンを押下して、ご自身のBloggerのガジェットとしてJavascriptのコードを実装します。

ソースコード

<div id="bloggerLabelMenuContentVer103">
 <div style='text-align: right'>
  <div style="margin-top:5px;">
   <a href="javascript:void(0)" onclick="escapeMe_bloggerLabelMenuVer103();">
    <img id="addToBlogger" src="http://www.blogger.com/img/add/add2blogger_sm_b.gif" alt="add Blogger LabelMenu to Blogger" />
   </a>
   <a href="http://aspnet.hyperhands.com/2010/04/blogger_13.html" target="_blank" alt='help'>
    <img src="http://lh5.ggpht.com/_BdRZoJ1uqRY/S63jHm8FMOI/AAAAAAAABNo/y447ThlqhKM/s128/ico_question_06.gif" alt="questionImage" />
   </a>
  </div>
 </div>

 <div class='categorymenu' id='category-menu'>Blogger LabelMenu Ver1.03</div>

 <div style="text-align:center;">
  <form method="POST" name="bloggerLabelMenuV103" action="http://www.blogger.com/add-widget">
   <input type="hidden" name="widget.title" value="Blogger LabelMenu Ver1.03" />
   <input type="hidden" name="widget.content" value="" />
   <input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
   <input type="hidden" name="infoUrl" value="http://aspnet.hyperhands.com/2010/03/html_11.html" />
   <input type="hidden" name="logoUrl" value="http://lh4.ggpht.com/_BdRZoJ1uqRY/S5i2UYVSP7I/AAAAAAAABJc/FMaHYJABhq0/s128/Hyperhands_Logo.png" />
  </form>
  <div style='text-align:right;'>
   <span>Powered by</span>
   <span style='float:right;'>
    <a href="http://www.hyperhands.com/" target="_blank">
     <img style="padding-top:5px;height:18px;" src="http://lh4.ggpht.com/_BdRZoJ1uqRY/S5i2UYVSP7I/AAAAAAAABJc/FMaHYJABhq0/s128/Hyperhands_Logo.png" alt="Hyperhands" />
    </a>
   </span>
  </div>
 </div>
<style type='text/css'>
.menu{
 width: 100%;
}

.categorymenu li{
  margin: 0 0 0 5em;
 padding-left:30px;
}
.MenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:12px;
 color: #222299;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}
.currentMenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:20px;
 color: #2222ff;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}

.MenuCategory a:hover, .currentMenuCategory a:hover{ 
 font-size:20px;
 font-weight:bold;
 color: #0000ff;
}
.MenuCategory ul{
display:none;
}
.currentMenucategory ul{
 display:block;
}
.MenuEntry a{
 font-size:0.7em;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.currentMenuCategory .MenuEntry a{
 font-size:12px;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.MenuEntry img{
 src:'http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif';
}

.MenuEntry a{
 text-decoration:none;
 line-height:10px;
}
.MenuEntry a:hover{
  font-size:15px;
  color:#0000ff;
 font-weight:bold;
}
.MenuEntry a:hover{
  color:#0000ff;
}

.label-recent-post .MenuCategory a{
 font-size:20px;
}
.label-recent-post .currentMenuCategory a{
 font-size:20px;
}
.label-recent-post .MenuEntry a{
 font-size:15px;
}

</style>
<script type='text/javascript'>
<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------

var blogHomeUrl ="/";
var categoryImage = "http://lh3.ggpht.com/_BdRZoJ1uqRY/S7WbC1HiHXI/AAAAAAAABPk/kxBW6GSQJP4/s128/ico_folderc1.gif";
var categoryImageOpen ="http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WbC9X3HMI/AAAAAAAABPo/0aOgzLb6C10/s128/ico_foldero1.gif";
var entryImage = "http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif";

var maxResults = 5;
var maxFeeds = 500;

var feedQueryUrl = blogHomeUrl + "feeds/posts/summary/";
var labelMenu = document.getElementById("category-menu");

function toggle( id , open ){
  var ul = document.getElementById( id + 'ent' );
  var img = document.getElementById( id + 'img' );
  if( ul.style.display == 'none' || open ){
    ul.style.display="block";
    img.src = categoryImageOpen;
  }else{
    ul.style.display="none";
    img.src = categoryImage;
  }
}

function startLabelMenuQuery(){
  labelMenu.innerHTML = '';
  feedQueryUrl = feedQueryUrl + "?orderby=published";
 
  feedQueryUrl += ("&max-results=");
  var srcStr = (feedQueryUrl  + maxFeeds + "&alt=json-in-script&callback=viewLabelMenu");
  var s = document.createElement( 'script' );
  s.setAttribute( 'type', 'text/javascript' );
  s.setAttribute( 'src', srcStr );
  labelMenu.innerHTML = '';
  labelMenu.appendChild( s );
}

function viewLabelMenu( result ){
    var feed = result.feed;
   
   var totalResults = parseInt( feed.openSearch$totalResults.$t, 10 );
   var startIndex = parseInt( feed.openSearch$startIndex.$t, 10 );
   var itemsPerPage  = parseInt( feed.openSearch$itemsPerPage.$t, 10 );
      
   var categories = new Categories();

   for(var i=0; i<feed.entry.length; i++ ){
    var entry = feed.entry[i];
    if( entry.category != undefined ){
      for( var j=0; j<entry.category.length; j++ ){
        var category = entry.category[j];
        var categoryName = category.term;

        categories.add( categoryName , entry ) ;
      
      }// j
     }// i
   }
   labelMenu.appendChild( categories.getUl() );
}
//--------------------------------------------------------------
function Categories(){
  var items = new Array();
  var index = new Array();

  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{ 
       index.sort();
       for( var i=0; i<index.length; i++ ){
          var categoryName = index[i];
          var li = document.createElement( 'li' );
          if( location.href.indexOf( '/search/label/' + encodeURIComponent( categoryName ) +'?' ) > -1 ){
            li.setAttribute( 'class' , 'currentMenuCategory' );
          }else{
            li.setAttribute( 'class','MenuCategory');
          }
          ul.appendChild( li );

          var id = 'MenuCategory_' + i;
          if( categoryImage != undefined ){
             var abbr = document.createElement( 'abbr' );
             abbr.setAttribute( 'title',  'Clickで開閉できます' );
             li.appendChild( abbr );
             var img = document.createElement( 'img' );
             img.setAttribute( "id" , id + "img" );
             img.setAttribute( 'onClick',  "toggle('" + id + "');" );
             img.setAttribute( 'src', categoryImage );
             abbr.appendChild( img );
          }

          var entries = items[ categoryName ];
          var entryCnt = "(" + entries.length + ")";
          var abbr2 = document.createElement( 'abbr' );
          abbr2.setAttribute( 'title',  'カテゴリーSummaryページを表示します' );
          li.appendChild( abbr2 );

          var a = document.createElement( 'a' );
          a.setAttribute( 'href',blogHomeUrl + 'search/label/' + encodeURIComponent( categoryName ) + '?orderby=published&max-results=' + '1' );
          a.setAttribute( 'onMouseOver', "toggle('" + id + "',true);" );       
          a.appendChild( document.createTextNode( categoryName + entryCnt ) );
          abbr2.appendChild( a );

          if( entries != undefined ){
            var childUl = entries.getUl();
            childUl.setAttribute( "id" , id + "ent" );
            li.appendChild( childUl );
            var label = document.getElementById( categoryName + '-recent-post' );
            if( label != undefined ){
              label.innerHTML = li.innerHTML;
            }
          }
       }
    }catch(e){
      alert( e );
    }
    return ul;  
  }
 
  this.getItem = function( key ){
    return items[key];
  };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ return index.join('\n'); };

  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( categoryName, entry ){
    var ret = false;
    try{
      if( categoryName != undefined ){
        if ( categoryName != 'Summary') {
          var entries = null;
          if( !this.contains( categoryName )){
            entries = new Entries(categoryName)
            items[ categoryName ] = entries;
            index[ index.length ] = categoryName;
            this.length = index.length;
            ret = true;
          }else{
            entries = items[ categoryName ];
          }
          entries.add( entry.title.$t, entry );
        }
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };

}
//--------------------------------------------------------------
function Entries(categoryName){
  var name = categoryName;
  var items = new Array();
  var links = new Array();
  var index = new Array();


  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{
      index.sort();
      for( var i=0; i<index.length; i++ ){
         var li = document.createElement( 'li' );
         if( entryImage != undefined ){
             var img = document.createElement( 'img' );
             img.setAttribute( 'src', entryImage );
             li.appendChild( img );
         }
         var title = index[ i ] ;
         var a = document.createElement( 'a' );
         a.setAttribute( 'href', links[ title ] );
         li.setAttribute( 'class', 'MenuEntry' );
         a.appendChild( document.createTextNode( title ) );
         var entry = items[ title ];
         var commentLink = this.getCommentLink( entry );
         if( commentLink != undefined ) a.appendChild( commentLink );
         li.appendChild( a );
         ul.appendChild( li );
      }
    }catch(e){
      alert( e );
    }
    return ul;  
  }
  this.getCommentLink = function(entry){
    var c;
    try{
      if( entry != undefined ){
          // コメントカウント
          for( var j=0; j<entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( ' [' + commentCount + ']' ) );
                  c.appendChild( ab );
                }
              }
            }
          }// j loop
        }
    }catch( e ){
        alert( e );
    }
    return c;
  }
  this.getLink = function(entry){
   
    for(var i=0; i<entry.link.length; i++ ){
      if( entry.link[i].rel == 'alternate' ){
        return entry.link[i].href;
      }
    }
    return '';
  };

  this.getName = function(){ return name; };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ index.sort(); return index.join('\n'); };
  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( key, entry ){
    var ret = false;
    try{
      if( !this.contains( key )){
        items[ key ] = entry;
        links[ key ] = this.getLink( entry );
        index[ index.length ] = entry.title.$t;
        this.length = index.length;
        ret = true;
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };
  this.get = function( key ){
    var ret = null;
    if( isInt( key ) ){
      ret = index[ key ];
    }else{
      ret = items[ key ];
    }
    return ret;
  };
}


startLabelMenuQuery();

-->
</script>
<script type="text/javascript"><!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------

function htmlTagEscape_bloggerLabelMenuVer103(html,reverse)
{
  var s;
  if( html != undefined ) s = html;
  if( reverse ){
   s = s.replace( /&amp;/g, '&' );
   s = s.replace( /&quot;/g, '"');
   s = s.replace( /&lt;/g, '<' );
   s = s.replace( /&gt;/g, '>' );
   s = s.replace( /&apos;/g, "'" );
   s = s.replace( /&#39;/g, "'" );
  }else{
   s = s.replace( /&/g, '&amp;' );
   s = s.replace( /"/g, '&quot;');
   s = s.replace( /</g, '&lt;' );
   s = s.replace( />/g, '&gt;' );
   s = s.replace( /'/g, '&#39;' );
  }
  if( html != undefined ) return s;
};

function escapeMe_bloggerLabelMenuVer103()
{
  labelMenu.innerHTML = "";
  var s = document.getElementById('bloggerLabelMenuContentVer103').outerHTML;
  document.bloggerLabelMenuV103.elements[1].value = s;
  document.bloggerLabelMenuV103.submit();
};
// --></script>
</div>

Yahooの検索エンジンにインデックスされない件

noreply@blogger.com (hyperhands) — Tue, 20 Apr 2010 05:07:00 +0000

Yahooの検索エンジンにも登録しよう | ASP.NET@自作専科でRSSフィードを登録し、いくら待ってもインデックスされる気配がありません。

FeedBurnerとの相性が悪く、Yahooにインデックスされないとの記事が色々なサイトで散見されたので、
RSSアイコンのリンク先はFeedBurnerのままにして、Bloggerのフィード設定項目からFeedBurnerのURLを排除し、Blogger既定のままのフィードを使う設定にした。

次に、headタグ内に以下のリンクを作成した。

<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&amp;redirect=false&amp;max-results=500&quot;' rel='alternate' title='RSS 2.0' type='application/rss+xml'/>

登録したRSSフィードが、自身のブログのドメイン配下でないと認められないとの事。本来、redirect=falseのパラメータ設定でFeedBurnerにリダイレクトされる事はないハズなのだが…

恐らく、このリンクTagを書き込むのを忘れていたためにインデックスされなかったのだろう。
※　FeedBurnerの設定排除は必要ないかもしれない。

ちなみに、このリンクタグはBloggerURLを参照するようにしてあるので汎用性があり、どのBloggerでも共通して使用出来ます。

これでインデックスしてくれると良いのですが、サイトの内容がGoogle好きを匂わせているのが原因で弾かれているとも思えないのですが、Yahooのサイト内検索ページも作成しYahooにも多少貢献する事にしてみました（＾＾；

他に、Microsoftの検索エンジンBingにも、まったくといって良いほどインデックスされていませんでした。両者ともに、ネットリテラシーがビギナーな人々の利用シェアは、特に日本では高いと思われるのでインデックスされないのは痛いところです。

是非クリアしておきたい問題です。

Bloggerでサマリー表示をタイル形式（ネットショップ風）にする②

noreply@blogger.com (hyperhands) — Sun, 18 Apr 2010 01:19:00 +0000

適用方法

Blogger管理ツールで「レイアウト＞Htmlの編集」メニューから、テンプレートのHTMLを編集します。
※　ウィジェットのテンプレートを展開をチェックしておきます。

「</head>」を検索し、その前に下記コードをコピー＆ペーストします。

<style type='text/css'>
/*Post*/
.entry-body-thumbnail{
 margin: 5px;
 border:1px solid gray;
 width: 200px;
 height: 300px;
 overflow: hidden;
 float: left;
}

.entry-body{
 margin: 0;
 border:0px solid gray;
 width: 100%;
 height: 100%;
 overflow: visible;
 float: left;
}

.post-header{
 height: 45px;
 padding: 3px;
 border-left: 5px solid #999999;
 border-right: 5px solid #999999;
 background-color:#aaaaaa;
 /* For WebKit (Safari, Google Chrome etc) */
 background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#aaaaaa));
 /* For Mozilla/Gecko (Firefox etc) */
 background: -moz-linear-gradient(top, #eeeeee, #dddddd);
 /* For Internet Explorer 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee, endColorstr=#aaaaaa);
 /* For Internet Explorer 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee, endColorstr=#aaaaaa)";
}

.post-header h3 {
 padding-left: 10px;
 margin: 5px;
}

.post-header h3 a, .post-header h3 a:visited, .post-header h3 strong {
 display:block;
 text-decoration:none;
 color: white;
 text-shadow: 1px 1px 3px #000000; 

 font-size: 15px;
 font-family: Times New Roman, Georgia, Trebuchet MS;
 font-weight: bold;
}
/*枠あり&#65286;影つき*/

.shadowImage{
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
 border:1px solid #999999;
 margin:30px;
 max-width: 500px;
}


.shadowThumbnail{
 display: block;
 margin: 10px;
 margin-left: auto;
 margin-right: auto;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
border:1px solid #999999;
 max-width: 170px; 
 max-height:170px;
}

.thumbnail-span{
 width: 100%;
 border:1px solid blure;
}

.desc{
 margin: 10px;
 border:1px solid skyblure;
}

</style>
<script type='text/javascript'>
<!--
var isMSIE = /*@cc_on!@*/false;
summary_noimg = 350;
summary_img = 250;
img_thumb_size = 144;
img_outer_size = 170;
function extractEnclosedString(st,ed,target,exclusion){
  if(target.indexOf( st )==-1)
  {
    st=st.toUpperCase();
    ed=ed.toUpperCase();
  }
  if(target.indexOf( st )>-1)
  {
    var s = target.split( st );
    for(var i=0;i<s.length;i++){
      if(s[i].indexOf( ed )!=-1){
        var execute = true;
        if( exclusion != undefined ){
          if( s[i].substring(0,exclusion.length).toLowerCase() == exclusion.toLowerCase()){
              s[i] = st + s[i];
            
            execute = false;
          }
        }
        if( execute ) s[i] = s[i].substring(s[i].indexOf( ed ) + ed.length , s[i].length);
      }
    }
    target = s.join("");
  }
  
  return target;
}

function removeHtmlTag(target, len){

  target = extractEnclosedString( "<pre ", "pre>",target);
  target = extractEnclosedString( "<", ">", target, "br");
  
  return target.substring( 0,len ) + '...';
}
function changeImageSize( imgSrc , size ){
  var paths = imgSrc.split("/");
  switch( size ){
   case "s72":
   case "s144":
   case "s288":
   case "s512":
   case "s576":
   case "s640":
   case "s720":
   case "s800":
   case "s912":
   case "s1024":
   case "s1152":
   case "s1280":
   case "s1440":
   case "s1600":
     paths[ paths.length -2 ] = size ;
     break;
  }
  return paths.join("/");
}

function createSummaryAndThumb(pID, summary_noimgLen, summary_imgLen , sizeOuter, size ){

 try{
  var post = document.getElementById(pID);
  var div;
  var link;

  var children = post.getElementsByTagName( 'div' );
  for( var i=0; i < children.length; i++){
    var className = children[ i ].getAttribute( 'class' );
    switch( className ){
      case 'post-body':
        div = children[ i ];
        break;
      case 'post-header':
        link = children[ i ].getElementsByTagName( 'h3' )[0].getElementsByTagName( 'a' )[0].href;
        break;
    }
  }
  if( div == undefined ) return;

  if( summary_imgLen != undefined ) summary_img= summary_imgLen ;
  if( summary_noimgLen != undefined ) summary_noimg= summary_noimgLen;
  if( sizeOuter != undefined ) img_outer_size = sizeOuter;
  if( size != undefined ) img_thumb_size = size;

  var summ = summary_noimg;
  var image;
  var imgs = div.getElementsByTagName("img");
  if(imgs.length>0){
    summ = summary_img;// イメージ有りの場合の文字列長にする
    image = document.createElement( 'a' );
    image.setAttribute( 'class', 'thumbnail-span' );
    image.setAttribute( 'href', link );

    var img = document.createElement( 'img' );
 
    var src = changeImageSize( imgs[0].src, 's' + img_thumb_size );
    img.setAttribute( 'src', src );
    img.setAttribute( 'class', 'shadowThumbnail');

    image.appendChild( img );
  }

  var noTag = removeHtmlTag(div.innerHTML, summ ) +"..." ;
  div.innerHTML ="";
  var summary = document.createElement( 'div' );
  post.setAttribute( 'class', 'entry-body-thumbnail' );
  if( image != undefined ) summary.appendChild( image );
  var sText = document.createElement( 'div' );
  sText.innerHTML = noTag;
  sText.setAttribute( 'class', 'desc' );

  summary.appendChild( sText );
  div.appendChild( summary );
  
 }catch( e ){
  alert( e );
 }
}

function createShadow(pID){
  var post = document.getElementById(pID);
  var div;
  var children = post.getElementsByTagName( 'div' );
  for( var i=0; i < children.length; i++){
    if( children[ i ].getAttribute( 'class' ) == 'post-body' ){
      div = children[ i ];
      break;
    }
  }
  if( div == undefined ) return;
  post.setAttribute( 'class', 'entry-body' );

 var imgtag = "";
 var a = div.getElementsByTagName("a");

 for(var i=0;i<a.length;i++) {
  var imgs = a[i].getElementsByTagName("img");
  if( imgs.length >0){
   imgs[0].setAttribute( 'class', 'shadowImage' );
  }
  a[i].setAttribute( 'target', '_blank');
 }
}

-->
</script>

次に、タイトルと記事ボディ、フッターの階層構造を変えるために、「<b:includable id='post' var='post'>」を検索し、このタグの中身を以下のコードを参考に構造を書き換えます。
※　関連記事のコードは除外してありますので、他のサイトを参照して下さい。

  
<b:includable id='post' var='post'>
  <div class='post' expr:id='&quot;summary&quot; + data:post.id'>
    <div class='post-header' name='post-header'>
      <b:if cond='data:post.title'>
        <h3 class='post-title' name='post-title'>
          <b:if cond='data:post.url'>
            <a expr:href='data:post.url' name='post-link'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        </h3>
      </b:if>
    </div>

    <div class='post-body'><data:post.body/></div>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <script type='text/javascript'>
           createSummaryAndThumb(&quot;summary<data:post.id/>&quot;, 150,60, 170, 144);
        </script>
      </b:if>
    <b:else/>
       <script type='text/javascript'>
         createShadow(&quot;summary<data:post.id/>&quot;);
       </script>
    </b:if>

    <div class='post-footer'>
      <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
            <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
            </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>
    </div>

    <div style='clear: both;'/> <!-- clear for photos floats -->
    
  </div>
</b:include>

ちなみに、個別記事ページ(item)の画像は枠付きになります。

Bloggerでサマリー表示をタイル形式（ネットショップ風）にする①

noreply@blogger.com (hyperhands) — Fri, 16 Apr 2010 12:55:00 +0000

Bloggerでタイル構造サマリーを構築することも可能です。

サマリー幅を記事の投稿枠の幅の約３分の１程度にしてやり、以前記載したサマリーで設定したmax-resultsをタイル数（３列ｘ３行＝９）に修正します。
同様に、サイドバーのラベルメニューやページナビゲーションでも使用していれば適宜修正し、新しいスクリプトを実装することで動作します。

新機能と注意点

タイトルクリック以外に、サムネイル画像をクリックしても記事ページへジャンプするようになっています。
createSummary関数の呼出し時に、引数でサムネイル画像枠とサイズ、記事文字数（＆画像なし時）を指定可能
サマリー化した時の属性classの名称を区別し、タイトル部を含めたので記事とサマリーでCSSを個別指定可能
サムネイル画像とサマリー文章は縦配置を想定していますので、横配置ではレイアウトが崩れる場合があります。

ネットショップImage

参考サイト：ハイパーハンズWebショップのサイトイメージは下に示します。

ハイパーハンズWebショップ

実際にご覧になって動作を確かめてみるには、こちら

Webショップ以外にもタイル形式でサマリー表示に合いそうな、写真や画像メインのサイトも同様に作れます。
※　カテゴリー（ラベル）のタイル表示部は、手作業で作った部分なのでサマリースクリプトに関連はありません。

ソースコードは、次回に公開致します。

Blogger用ページナビゲーション　ガジェット版

noreply@blogger.com (hyperhands) — Tue, 13 Apr 2010 23:42:00 +0000

記事が多い時にリストページに表示される記事数を制限し、ページに分けて各ページへのリンクを作成することで、１ページの表示が無駄に長くなることがなくなり、読みやすくなります。
以前、スクリプトをテンプレート内に張り付けるバージョン、そして外部ファイル化するバージョンと公開してきましたが、今回は、ガジェット版の「簡単Pageナビ for Blogger Ver1.00」の公開です。
※　Blogger（＆Picasa）以外にホスティングサーバを必要としません。

使用方法

左側の「add to Blogger」ボタンを押下してガジェットを追加します。
次に、テンプレートHtml内で「'data:label.url'」として記載されている
「data:label.url」　を　「data:label.url + "?max-results=5"」　へと全て置換します。

テンプレートのデザインによって様々ですが、複数見つかるかもしれません。
これらは、すべて特定のラベルのリスト先頭ページを表示するためのリンクとして動作していますので、「設定＞フォーマット」メニューに設定した表示投稿数に合わせた数だけ表示するように変更します。

表示位置は、テンプレートに「id='blog-pager'」のタグが記載されていると思います。
リスト表示になるページでは、その中身をクリアして簡単Pageナビが表示されるようになります。

また「id='headline-updated'」があれば、その中身に最近更新した記事のヘッドラインを表示するようになっています。
※　通常のテンプレートにはヘッドライン用のIDは記載されていませんので、適宜このタグ「<div id='headline-updated'/>」をテンプレート内に記載すると動作するようになります。

好みに応じて、コード内のスタイルを調整してやれば完成です。
※　アーカイブページではページング動作しませんので、必要に応じて改造してご使用下さい。

ご注意

追加したガジェットは、「ブログの投稿」ウィジェットより後に読みこまれる位置に配置する。
ハイパーハンズへのリンク表示部は修正・削除をしないでご利用下さい。
ウィジェットのタイトルは無しにする。

※　リンク表記なしでのご利用をご希望の方は、有料にてお受け致します。

マウスオーバーで説明が表示されます。

ソースコード

<style type='text/css'>
.pageLink ,.currentPageLink, .prevNaviLink, .nextNaviLink{
line-height: 2.1em;
}
.pageLink a, .currentPageLink a, .prevNaviLink a, .nextNaviLink a{
color: #333 !important;
text-decoration:none !important;

margin: 0 3px;
padding: 3px;
}
.pageLink, .prevNaviLink, .nextNaviLink{
color: blue !important;
text-decoration:none !important;
margin: 0 3px;
padding: 3px;
}
.pageLink:hover, .prevNaviLink:hover, .nextNaviLink:hover{
background-color: skyblue;
}
.pageLink , .prevNaviLink, .nextNaviLink{
color: #333;
text-decoration: none;
border: 1px solid #ccc;
margin: 0 3px;
padding: 3px;
}
.currentPageLink {
color: #333;
text-decoration: none;
border: 1px solid #ccc;
background-color: #ccc;
margin: 0 3px;
padding: 3px;
}
.currentPageLink .headPager{
margin: 0 3px 0 0;
padding: 3px;
}


.headline{
  margin:20px;
  padding: 20px;
  font-size: 15px;
  border-radius:10px;
  -webkit-border-radius: 10px; /* Safari、Google Chrome */
  -moz-border-radius: 10px; /* Firefox */
  background: beige;
  border: 1px solid #black;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}
.headline li{
 list-style: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7XhO_pFrbI/AAAAAAAABQo/MH-fwAFdODw/s128/ico_dots7_4.gif);

}
.headline abbr{
  margin-left: 5px;
}
.headline h2{
 margin-top: 0px;
 color: #ff5555;
 text-shadow: 2px 2px 3px #550000; 
}
.headline h5{
 margin-top: 0px;
 margin-left:20px;
 border-bottom:3px double #112299;
 color: #1133aa;
 font-size:18px;
 font-weight: bold;
 text-shadow: 2px 2px 2px #silver; 
}
.headline .Temporary{
 margin: 20px;
 line-height: 40px;
}
.headline .updated{
 color: #3355ff;
 font-size:10px;
 font-weight: bold;
}
.headline .title{
 margin-left: 5px;
 font-size:13px;
 color: #11cc33;
 //text-shadow: 1px 1px 2px #000000; 
}
.headline .commentCount{
 margin-left:5px;
 font-size:13px;
 color: #ff3355;
 font-weight: bold; 
}

</style>

<script type='text/javascript'>
<!--
//--------------------------------------------
// 簡単Pageナビ for Blogger Ver1.00
// ハイパーハンズへのリンク部分は
// 修正・削除をしないでご利用下さい。
// 
// License agreement with GNU LGPL
// This code Created by S.Kobayashi
// Copyright (C) 2010 Hyperhands.com
//--------------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;
var maxHeadlines = 10;
var maxLinks = 10;
var isHome=false;
var isLabel=false;
var isStatic=false;
var isItem=false;
var labelPrefix = "search/label/";

var pageNo = 0;
var feedUrl = blogUrl + "feeds/posts/summary/";
var headlineUrl = blogUrl + "feeds/posts/summary/";
var labelName = "";
var headlineID = 'headline-updated';
var blogPagerID = 'blog-pager';
var blogPager;


function startBlogPager(){
  if( currentUrl.indexOf("#PageNo=" ) > -1){
    var strNo = currentUrl.substring(  currentUrl.indexOf("#PageNo=" )+8);
    pageNo = parseInt( strNo )-1;
  }

  if ( currentUrl.indexOf( labelPrefix ) > -1 ){
     isLabel=true;
  } else if( currentUrl.indexOf( '.html' ) == -1 ){
     isHome=true;
  } else if( currentUrl.indexOf( '/p/' )> -1){
     isStatic=true;
  } else {
    isItem=true;
  }


  viewPager();
}

function viewPager(){
  try{
    blogPager = document.getElementById( blogPagerID );
    if( blogPager != undefined ){
          

    if( isLabel || isHome ){ 
      if( isLabel ){
        blogPager.innerHTML = '';
        var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
        labelName = currentUrl.substring( st );
        if( labelName.indexOf("/") > -1){
          labelName = labelName.substring(0,labelName.indexOf("/"));
        }else if( labelName.indexOf("?") > -1 ){
          labelName = labelName.substring(0,labelName.indexOf("?"));
        }
        feedUrl += "-/" + labelName;
        headlineUrl += "-/" + labelName;
        blogUrl += labelPrefix + labelName + "?";
      }else{
        blogUrl = blogUrl + "search?";
      }

      feedUrl = feedUrl + "?orderby=published";
      headlineUrl = headlineUrl + "?orderby=updated";
      blogUrl += "orderby=published&max-results=" + maxResults ;

      feedUrl += ("&max-results=" );
      headlineUrl += ("&max-results=" );
      var srcStr = (feedUrl + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
      var s = createScript( srcStr );
      //blogPager.innerHTML = srcStr
      blogPager.appendChild( s );

    }
    }else{
      alert( 'blogPagerID = ' + blogPagerID );
    }
  }catch( e ){
    alert( e );
  }

}
function createScript( srcStr ){
  var s = document.createElement( 'script' );
  s.setAttribute( 'type', 'text/javascript' );
  s.setAttribute( 'src', srcStr );
  return s;
}
function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = document.createElement( 'span' );
   head.setAttribute( 'class', 'headPager' );
   var txt = 'Pages( ' + totalPage + ' )';
   var ab = document.createElement( 'abbr' );
   ab.setAttribute( 'title', 'あなたのBloggerにも簡単Pageナビを追加\r\n -- Powered by Hyperhands');
   var a = document.createElement( 'a' );
   a.setAttribute( 'href', 'http://aspnet.hyperhands.com/2010/04/blogger_14.html' );
   a.setAttribute( 'target', '_blank' );
   a.setAttribute( 'style', 'background:url(http://lh4.ggpht.com/_BdRZoJ1uqRY/S8Txk6oMcBI/AAAAAAAABZM/xSSIJDiRbBs/ico_opwin7b.gif) no-repeat;padding-left:15px;' );
   a.appendChild( document.createTextNode( txt ) );
   ab.appendChild( a );
   head.appendChild( ab );
   blogPager.appendChild( head );
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      getHeadline( i );
      var className = 'pageLink';
      if( pageNo == i) className = 'currentPageLink';

      var p = document.createElement( 'span' );
      p.setAttribute( 'class', className );
      var targetIndex=0;
      var srcStr = '';
      if( className != 'currentPageLink' ){
         srcStr = feedUrl + 1 + '&start-index=';
         targetIndex =  (maxResults*i);
         if( targetIndex == 0 ) targetIndex = 1; 
         srcStr += (targetIndex + '&alt=json-in-script&callback=redirectTargetPage');
         p.appendChild( createScript( srcStr ) );
      }
      var a = document.createElement( 'a' );
      var id = 'targetPageLink' + targetIndex;
      a.setAttribute( 'id', id );
      a.appendChild( document.createTextNode( i+1 ) );
      p.appendChild( a );
      blogPager.appendChild( p );
      
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}


function getHeadline( i ){
  try{
   if(i==0){
    var div = document.getElementById( headlineID );
    if( div != undefined ){
      var srcStr = headlineUrl + maxHeadlines + "&alt=json-in-script&callback=viewHeadline";
      blogPager.appendChild( createScript( srcStr ) );
    }
   }
  }catch( e ){
    alert( e );
  }
}

function viewHeadline( result ){
  try{

    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var idPrefix = '.post-';
      var feed = result.feed;
      if( feed.entry.length > 0 ){
        var h5 = document.createElement( 'h5' );
        var prefix = "";
        //if( isHome ) prefix = "このサイト";
        if( isLabel ) prefix = decodeURI( labelName ) + " で";
        h5.appendChild( document.createTextNode( prefix + '最近更新のあった記事 ' + feed.entry.length+ '件' ));
        div.appendChild( h5 );

        var ul = document.createElement( 'ul' );
        div.appendChild( ul );
        for( var i=0; i< feed.entry.length; i++){
          var entry = feed.entry[i];
          var h = document.createElement( 'li' );
          h.setAttribute( 'class', 'updatedHeadline' );
          var id = entry.id.$t;
          id = id.substring( id.indexOf( idPrefix  ) + idPrefix.length );// 将来のコメントHeadline化で使用する
          h.setAttribute( 'id', 'uHeadline-' + id );
        
          var d = document.createElement( 'span' );
          d.setAttribute( 'class', 'updated' );
          var upd = entry.updated.$t;
          var monthDay = upd.substring(5,10).replace('-','/');
          var time = upd.substring(10,16).replace('T',' ');
          d.appendChild( document.createTextNode( monthDay + time ) );
          h.appendChild( d );

          var t = document.createElement( 'a' );
          t.setAttribute( 'class', 'title' );
          t.setAttribute( 'href', getLink( entry ) );
          var title = entry.title.$t;
          var abbr = document.createElement( 'abbr' );
          abbr.setAttribute( 'title', '記事を表示するリンク' );
          abbr.appendChild( document.createTextNode( title ) );
          t.appendChild( abbr );

          // コメントカウント
          for(var j=0; j< entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( '【' + commentCount + '】' ) );
                  c.appendChild( ab );
                  t.appendChild( c );
                }
              }
            }
          }// j loop

          h.appendChild( t );

          ul.appendChild( h );
        }// i loop
      }
    }
  }catch( e ){
    alert( e );
  }
}


function getLink(entry){
   var retLink = ''
    for(var i=0; i< entry.link.length; i++ ){
      if( entry.link[i].rel == 'alternate' ){
        retLink = entry.link[i].href;
      }
    }
    return retLink;
}


function getPrevNext(vector){
   var startIndex = 0;

   if( vector.toLowerCase() == "prev" ){
     startIndex = ((pageNo-1) * maxResults + 1);
   }else{
     startIndex = ((pageNo+1) * maxResults);
   }

   var span = document.createElement( 'span' );
   span.setAttribute( 'class', vector.toLowerCase() + 'NaviLink' );
   var a = document.createElement( 'a' );
   a.setAttribute( 'href', 'javascript:void();' );
   a.setAttribute( 'id', vector.toLowerCase() + 'PageLink' );
   a.appendChild( document.createTextNode( vector ) );
   span.appendChild( a );


   var srcStr = feedUrl + 1 + '&start-index=' + startIndex  + '&alt=json-in-script&callback=' + vector.toLowerCase() + 'RedirectPage';
   span.appendChild( createScript( srcStr ) );
   blogPager.appendChild( span );
}


function prevRedirectPage( result ){
   var targetLink = document.getElementById( 'prevPageLink' );
   var date = encodeDate( result.feed.entry[0].published.$t );
   if( pageNo == 1) targetLink.href =  blogUrl + '#PageNo=1';
   else targetLink.href =  blogUrl + '&updated-max=' + date  + '#PageNo=' + pageNo ;
}

function nextRedirectPage( result ){
   var targetLink = document.getElementById( 'nextPageLink' );
   var date = encodeDate( result.feed.entry[0].published.$t );
   
   targetLink.href =  blogUrl + '&updated-max=' + date  + '#PageNo=' + (pageNo + 2);
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById( 'targetPageLink' + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + '#PageNo=' + targetLink.innerHTML;
   else targetLink.href =  blogUrl + '&updated-max=' + date + "#PageNo=" + targetLink.innerHTML;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

function addLoadEvent( func ) {

}

startBlogPager();
-->
</script>

グラフィック使用のCSS

背景に画像を使用したバージョンのCSSです。
@IEに対応するために、スクリプトも修正しました。

<style type='text/css'>
.blog-pager{
 border: 0px solid red;
}
.blog-pager table{
 padding: 0px;
 margin-left: auto;
 margin-right: auto;
 border: 0px solid blue;
}
.blog-pager tr{
 padding: 0px;
 margin: 0px;
 border: none;
}
.blog-pager td{
 padding: 0px;
 margin: 0px;
 align: center;
 vertical-align: middle;
 border: 0px solid green;
}
.headPager{
 display: block;
 padding-right: 8px;
 border: 0px solid black;
}
.headPager a:hover{
 font-weight: bold;
 text-decoration: none;
 color: darkblue;
}

#prevPageLink,#nextPageLink{
 margin-top: 4px;
 padding: 0px;
 border: 0px solid black;
}
.pageLink ,.currentPageLink{
 text-align: center;
 padding: 0px;
 margin: 0px;
 border: 0px solid red;
}

.currentPageLink {
 text-decoration: none;
 padding: 7px 12px 7px 12px;
 margin: 0px;
 color: white;
 font-weight: bold;
 text-decoration:none;
 border: 0px solid blue;
 background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S8ay2e9Wo0I/AAAAAAAABaY/y6NRdxWJwic/s128/currentPage.png) no-repeat;
}

.currentPageLink:hover{
 color: white;
 text-decoration: none;
}
.pageLink{
 padding: 7px 12px 7px 12px;
 margin: 0px;
 color: blue;
 text-decoration: none;
 border: 0px solid blue;
 background: url(http://lh5.ggpht.com/_BdRZoJ1uqRY/S8ay2dgBFBI/AAAAAAAABag/H_nPzqdr8U8/s128/itemPage.png) no-repeat;
}

.pageLink:hover{
 color: darkblue;
 font-weight: bold;
 text-decoration: none;
 background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S8ay2T0no-I/AAAAAAAABac/yo34eSyVgYY/s128/hoverPage.png) no-repeat;
}
// ヘッドライン
.headline{
  margin:20px;
  padding: 20px;
  font-size: 15px;
  border-radius:10px;
  -webkit-border-radius: 10px; /* Safari、Google Chrome */
  -moz-border-radius: 10px; /* Firefox */
  background: beige;
  border: 1px solid #black;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}
.headline li{
 list-style: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7XhO_pFrbI/AAAAAAAABQo/MH-fwAFdODw/s128/ico_dots7_4.gif);

}
.headline abbr{
  margin-left: 5px;
}
.headline h2{
 margin-top: 0px;
 color: #ff5555;
 text-shadow: 2px 2px 3px #550000; 
}
.headline h5{
 margin-top: 0px;
 margin-left:20px;
 border-bottom:3px double #112299;
 color: #1133aa;
 font-size:18px;
 font-weight: bold;
 text-shadow: 2px 2px 2px #silver; 
}
.headline .Temporary{
 margin: 20px;
 line-height: 40px;
}
.headline .updated{
 color: #3355ff;
 font-size:10px;
 font-weight: bold;
}
.headline .title{
 margin-left: 5px;
 font-size:13px;
 color: #11cc33;
 //text-shadow: 1px 1px 2px #000000; 
}
.headline .commentCount{
 margin-left:5px;
 font-size:13px;
 color: #ff3355;
 font-weight: bold; 
}

</style>

<script type='text/javascript'>
<!--
//--------------------------------------------
// 簡単Pageナビ for Blogger Ver1.00
// ハイパーハンズへのリンク部分は
// 修正・削除をしないでご利用下さい。
// 
// License agreement with GNU LGPL
// This code Created by S.Kobayashi
// Copyright (C) 2010 Hyperhands.com
//--------------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;
var maxHeadlines = 10;
var maxLinks = 10;
var isHome=false;
var isLabel=false;
var isStatic=false;
var isItem=false;
var labelPrefix = "search/label/";

var pageNo = 0;
var feedUrl = blogUrl + "feeds/posts/summary/";
var headlineUrl = blogUrl + "feeds/posts/summary/";
var labelName = "";
var headlineID = 'headline-updated';
var blogPagerID = 'blog-pager';
var blogPager;

var nextImg = [
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Ol-f2WI/AAAAAAAABas/R53PdkxwHoE/s128/nextPage.png',
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-O57iR7I/AAAAAAAABaw/dLBx22puDqQ/s128/nextHover.png'
];
var prevImg = [
  'http://lh4.ggpht.com/_BdRZoJ1uqRY/S8a-Og6H_9I/AAAAAAAABao/LpDYqkrlmMw/s128/prevPage.png',
  'http://lh6.ggpht.com/_BdRZoJ1uqRY/S8a-OhetXMI/AAAAAAAABak/kY-k_7bcJUw/s128/prevHover.png'
];


function startBlogPager(){

  if( currentUrl.indexOf("#PageNo=" ) > -1){
    var strNo = currentUrl.substring(  currentUrl.indexOf("#PageNo=" )+8);
    pageNo = parseInt( strNo )-1;
  }

  if ( currentUrl.indexOf( labelPrefix ) > -1 ){
     isLabel=true;
  } else if( currentUrl.indexOf( '.html' ) == -1 ){
     isHome=true;
  } else if( currentUrl.indexOf( '/p/' )> -1){
     isStatic=true;
  } else {
    isItem=true;
  }


  viewPager();
}

function viewPager(){
  try{
    blogPager = document.getElementById( blogPagerID );
    if( blogPager != undefined ){
    if( isLabel || isHome ){ 
      if( isLabel ){
      blogPager.innerHTML = '';
      var t = document.createElement( 'table' );
      var tr = document.createElement( 'tr' );
      t.appendChild( tr );
      blogPager.appendChild( t );
      blogPager = t;
        var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
        labelName = currentUrl.substring( st );
        if( labelName.indexOf("/") > -1){
          labelName = labelName.substring(0,labelName.indexOf("/"));
        }else if( labelName.indexOf("?") > -1 ){
          labelName = labelName.substring(0,labelName.indexOf("?"));
        }
        feedUrl += "-/" + labelName;
        headlineUrl += "-/" + labelName;
        blogUrl += labelPrefix + labelName + "?";
      }else{
        blogUrl = blogUrl + "search?";
      }

      feedUrl = feedUrl + "?orderby=published";
      headlineUrl = headlineUrl + "?orderby=updated";
      blogUrl += "orderby=published&max-results=" + maxResults ;

      feedUrl += ("&max-results=" );
      headlineUrl += ("&max-results=" );
      var srcStr = (feedUrl + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
      var s = createScript( srcStr );
      blogPager.appendChild( s );

    }
    }else{
      alert( 'blogPagerID = ' + blogPagerID );
    }
  }catch( e ){
    alert( e );
  }
}
function appendTD( obj , className ){
  var td = document.createElement( 'td' );
  if( className != undefined ) td.setAttribute( 'class', className );
  td.appendChild( obj );
  blogPager.appendChild( td );
}
function createScript( srcStr ){
  var s = document.createElement( 'script' );
  s.setAttribute( 'type', 'text/javascript' );
  s.setAttribute( 'src', srcStr );
  return s;
}
function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = document.createElement( 'span' );
   head.setAttribute( 'class', 'headPager' );
   var txt = 'Pages( ' + totalPage + ' )';
   var ab = document.createElement( 'abbr' );
   ab.setAttribute( 'title', 'あなたのBloggerにも簡単Pageナビを追加\r\n -- Powered by Hyperhands');
   var a = document.createElement( 'a' );
   a.setAttribute( 'href', 'http://aspnet.hyperhands.com/2010/04/blogger_14.html' );
   a.setAttribute( 'target', '_blank' );
   a.setAttribute( 'style', 'background:url(http://lh4.ggpht.com/_BdRZoJ1uqRY/S8Txk6oMcBI/AAAAAAAABZM/xSSIJDiRbBs/ico_opwin7b.gif) no-repeat;padding-left:15px;' );
   a.appendChild( document.createTextNode( txt ) );
   ab.appendChild( a );
   head.appendChild( ab );
   appendTD( head );
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      getHeadline( i );
      var className = 'pageLink';
      if( pageNo == i) className = 'currentPageLink';

      var targetIndex = 0;
      var script;
      if( className != 'currentPageLink' ){
         var srcStr = feedUrl + 1 + '&start-index=';
         targetIndex = ( maxResults * i );
         if( targetIndex == 0 ) targetIndex = 1; 
         srcStr += ( targetIndex + '&alt=json-in-script&callback=redirectTargetPage' );
         script = createScript( srcStr );
      }
      var a = document.createElement( 'a' );
      var id = 'targetPageLink' + targetIndex;
      a.setAttribute( 'id', id );
      a.setAttribute( 'class', className  );
      a.appendChild( document.createTextNode( i+1 ) );
      if( script != undefined ) blogPager.appendChild( script );
      appendTD( a );
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}


function getHeadline( i ){
  try{
   if(i==0){
    var div = document.getElementById( headlineID );
    if( div != undefined ){
      var srcStr = headlineUrl + maxHeadlines + "&alt=json-in-script&callback=viewHeadline";
      blogPager.appendChild( createScript( srcStr ) );
    }
   }
  }catch( e ){
    alert( e );
  }
}

function viewHeadline( result ){
  try{

    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var idPrefix = '.post-';
      var feed = result.feed;
      if( feed.entry.length > 0 ){
        var h5 = document.createElement( 'h5' );
        var prefix = "";
        //if( isHome ) prefix = "このサイト";
        if( isLabel ) prefix = decodeURI( labelName ) + " で";
        h5.appendChild( document.createTextNode( prefix + '最近更新のあった記事 ' + feed.entry.length+ '件' ));
        div.appendChild( h5 );

        var ul = document.createElement( 'ul' );
        div.appendChild( ul );
        for( var i=0; i< feed.entry.length; i++){
          var entry = feed.entry[i];
          var h = document.createElement( 'li' );
          h.setAttribute( 'class', 'updatedHeadline' );
          var id = entry.id.$t;
          id = id.substring( id.indexOf( idPrefix  ) + idPrefix.length );// 将来のコメントHeadline化で使用する
          h.setAttribute( 'id', 'uHeadline-' + id );
        
          var d = document.createElement( 'span' );
          d.setAttribute( 'class', 'updated' );
          var upd = entry.updated.$t;
          var monthDay = upd.substring(5,10).replace('-','/');
          var time = upd.substring(10,16).replace('T',' ');
          d.appendChild( document.createTextNode( monthDay + time ) );
          h.appendChild( d );

          var t = document.createElement( 'a' );
          t.setAttribute( 'class', 'title' );
          t.setAttribute( 'href', getLink( entry ) );
          var title = entry.title.$t;
          var abbr = document.createElement( 'abbr' );
          abbr.setAttribute( 'title', '記事を表示するリンク' );
          abbr.appendChild( document.createTextNode( title ) );
          t.appendChild( abbr );

          // コメントカウント
          for(var j=0; j< entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( '[ ' + commentCount + ' ]' ) );
                  c.appendChild( ab );
                  t.appendChild( c );
                }
              }
            }
          }// j loop

          h.appendChild( t );

          ul.appendChild( h );
        }// i loop
      }
    }
  }catch( e ){
    alert( e );
  }
}


function getLink(entry){
   var retLink = ''
    for(var i=0; i< entry.link.length; i++ ){
      if( entry.link[i].rel == 'alternate' ){
        retLink = entry.link[i].href;
      }
    }
    return retLink;
}


function getPrevNext(vector){
  try{
    var startIndex = 0;

    if( vector.toLowerCase() == "prev" ){
      startIndex = ((pageNo-1) * maxResults + 1);
    }else{
      startIndex = ((pageNo+1) * maxResults);
    }

    var imgArr = prevImg;
    if( vector.toLowerCase() == 'next' ) imgArr = nextImg;
    var id = vector.toLowerCase() + 'PageLink';
    var img = createImageHover( id, imgArr );
    
    var a = document.createElement( 'a' );
    a.setAttribute( 'href', 'javascript:void();' );
    a.appendChild( img );
    appendTD( a );

    var srcStr = feedUrl + 1 + '&start-index=' + startIndex  + '&alt=json-in-script&callback=' + vector.toLowerCase() + 'RedirectPage';
    blogPager.appendChild( createScript( srcStr ) );

  }catch( e ){
    alert( e );
  }
}

function createImageHover( id, imgArr ){
  var img ;
  try{

    img = document.createElement( 'img' );
    img.setAttribute( 'id', id );
    img.setAttribute( 'src', imgArr[0] );
    img.setAttribute( 'onMouseOver', 'this.src="' + imgArr[1] + '";' );
    img.setAttribute( 'onMouseOut', 'this.src="' + imgArr[0] + '";' );

  }catch( e ){
    alert( e );
  }
  return img;
}
function prevRedirectPage( result ){
  try{
    var targetLink = document.getElementById( 'prevPageLink' );
    var date = encodeDate( result.feed.entry[0].published.$t );
    var hrefStr;
    if( pageNo == 1) hrefStr =  blogUrl + '#PageNo=1';
    else hrefStr =  blogUrl + '&updated-max=' + date  + '#PageNo=' + pageNo ;
    addEventImage( targetLink, 'onClick', hrefStr );
  }catch( e ){
    alert( e );
  }
}

function nextRedirectPage( result ){
  try{
     var targetLink = document.getElementById( 'nextPageLink' );
     var date = encodeDate( result.feed.entry[0].published.$t );
     var hrefStr =  blogUrl + '&updated-max=' + date  + '#PageNo=' + (pageNo + 2);
    addEventImage( targetLink, 'onClick', hrefStr );
  }catch( e ){
    alert( e );
  }
}
function addEventImage( targetImage, event, hrefStr ){
  try{
    var scriptStr = 'location.href = "' + hrefStr + '";';
    targetImage.setAttribute( event, scriptStr );
  }catch( e ){
    alert( e );
  }
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById( 'targetPageLink' + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + '#PageNo=' + targetLink.innerHTML;
   else targetLink.href =  blogUrl + '&updated-max=' + date + "#PageNo=" + targetLink.innerHTML;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

function addLoadEvent( func ) {

}

startBlogPager();
-->
</script>

Blogger用ラベルメニューガジェット版

noreply@blogger.com (hyperhands) — Mon, 12 Apr 2010 19:14:00 +0000

@Bloggerで記事に付けたラベルをカテゴリーとして扱いツリー形式のメニューとして表示するガジェットです。

Javascriptのソース版を公開しておりましたが、それをガジェットとして簡単にご自身のBloggerへ追加する事ができるように改造したバージョンです。
　※　@Blogger（＆Picasa）以外にホスティングサーバを必要としません。

Blogger LabelMenu Ver1.02

背景は指定していませんので、ご自身のサイドバーウィジェットのCSSに従い表示されます。

また、追加したガジェットは、その他のガジェットと同様Bloggerのレイアウト画面で、ドラッグ＆ドロップによる移動が可能です。

ご注意

フォルダアイコンと記事アイコンは、ハイパーハンズの画像になっていますので、そのまま使用しますと直リンクとなってしまいますので、ガジェット追加後なるべく早めにご自身の所有アイコンに修正してご使用下さい。
※　アイコン画像の著作権は、ハイパーハンズに御座いません。

ガジェットのソース

<div id="bloggerLabelMenuContentVer102">
 <div style='text-align: right'>
  <div style="margin-top:5px;">
   <a href="javascript:void(0)" onclick="escapeMe_bloggerLabelMenuVer102();">
    <img id="addToBlogger" src="http://www.blogger.com/img/add/add2blogger_sm_b.gif" alt="add Blogger LabelMenu to Blogger" />
   </a>
   <a href="http://aspnet.hyperhands.com/2010/04/blogger_13.html" target="_blank" alt='help'>
    <img src="http://lh5.ggpht.com/_BdRZoJ1uqRY/S63jHm8FMOI/AAAAAAAABNo/y447ThlqhKM/s128/ico_question_06.gif" alt="questionImage" />
   </a>
  </div>
 </div>

 <div class='categorymenu' id='category-menu'>Blogger LabelMenu Ver1.00</div>



 <div style="text-align:center;">
  <form method="POST" name="bloggerLabelMenuV102" action="http://www.blogger.com/add-widget">
   <input type="hidden" name="widget.title" value="Blogger LabelMenu Ver1.02" />
   <input type="hidden" name="widget.content" value="" />
   <input type="hidden" name="widget.template" value="&lt;data:content/&gt;" />
   <input type="hidden" name="infoUrl" value="http://aspnet.hyperhands.com/2010/03/html_11.html" />
   <input type="hidden" name="logoUrl" value="http://lh4.ggpht.com/_BdRZoJ1uqRY/S5i2UYVSP7I/AAAAAAAABJc/FMaHYJABhq0/s128/Hyperhands_Logo.png" />
  </form>
  <div style='text-align:right;'>
   <span>Powered by</span>
   <span style='float:right;'>
    <a href="http://www.hyperhands.com/" target="_blank">
     <img style="padding-top:5px;height:18px;" src="http://lh4.ggpht.com/_BdRZoJ1uqRY/S5i2UYVSP7I/AAAAAAAABJc/FMaHYJABhq0/s128/Hyperhands_Logo.png" alt="Hyperhands" />
    </a>
   </span>
  </div>
 </div>
<style type='text/css'>
.menu{
 width: 100%;
}

.categorymenu li{
  margin: 0 0 0 5em;
 padding-left:30px;
}
.MenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:12px;
 color: #222299;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}
.currentMenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:20px;
 color: #2222ff;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}
.MenuCategory a:hover, .currentMenuCategory a:hover{ 
 font-size:20px;
 font-weight:bold;
 color: #0000ff;
}
.MenuCategory ul{
display:none;
}
.currentMenucategory ul{
 display:block;
}
.MenuEntry a{
 font-size:0.7em;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.currentMenuCategory .MenuEntry a{
 font-size:12px;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.MenuEntry img{
 src:'http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif';
}

.MenuEntry a{
 text-decoration:none;
 line-height:10px;
}
.MenuEntry a:hover{
  font-size:15px;
  color:#0000ff;
 font-weight:bold;
}
.MenuEntry a:hover{
  color:#0000ff;
}
</style>
<script type='text/javascript'>
<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------

var blogHomeUrl ="/";
var categoryImage = "http://lh3.ggpht.com/_BdRZoJ1uqRY/S7WbC1HiHXI/AAAAAAAABPk/kxBW6GSQJP4/s128/ico_folderc1.gif";
var categoryImageOpen ="http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WbC9X3HMI/AAAAAAAABPo/0aOgzLb6C10/s128/ico_foldero1.gif";
var entryImage = "http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif";

var maxResults = 5;
var maxFeeds = 500;

var feedQueryUrl = blogHomeUrl + "feeds/posts/summary/";
var labelMenu = document.getElementById("category-menu");

function toggle( id , open ){
  var ul = document.getElementById( id + 'ent' );
  var img = document.getElementById( id + 'img' );
  if( ul.style.display == 'none' || open ){
    ul.style.display="block";
    img.src = categoryImageOpen;
  }else{
    ul.style.display="none";
    img.src = categoryImage;
  }
}

function startLabelMenuQuery(){
  labelMenu.innerHTML = '';
  feedQueryUrl = feedQueryUrl + "?orderby=published";
 
  feedQueryUrl += ("&max-results=");
  var srcStr = (feedQueryUrl  + maxFeeds + "&alt=json-in-script&callback=viewLabelMenu");
  var s = document.createElement( 'script' );
  s.setAttribute( 'type', 'text/javascript' );
  s.setAttribute( 'src', srcStr );
  //labelMenu.innerHTML = srcStr
  labelMenu.appendChild( s );
}

function viewLabelMenu( result ){
    var feed = result.feed;
   
   var totalResults = parseInt( feed.openSearch$totalResults.$t, 10 );
   var startIndex = parseInt( feed.openSearch$startIndex.$t, 10 );
   var itemsPerPage  = parseInt( feed.openSearch$itemsPerPage.$t, 10 );
      
   var categories = new Categories();

   for(var i=0; i<feed.entry.length; i++ ){
    var entry = feed.entry[i];
    if( entry.category != undefined ){
      for( var j=0; j<entry.category.length; j++ ){
        var category = entry.category[j];
        var categoryName = category.term;

        categories.add( categoryName , entry ) ;
      
      }// j
     }// i
   }
   labelMenu.appendChild( categories.getUl() );
}
//--------------------------------------------------------------
function Categories(){
  var items = new Array();
  var index = new Array();

  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{ 
       index.sort();
       for( var i=0; i<index.length; i++ ){
          var categoryName = index[i];
          var li = document.createElement( 'li' );
          if( location.href.indexOf( '/search/label/' + encodeURIComponent( categoryName ) +'?' ) > -1 ){
            li.setAttribute( 'class' , 'currentMenuCategory' );
          }else{
            li.setAttribute( 'class','MenuCategory');
          }
          ul.appendChild( li );

          var id = 'MenuCategory_' + i;
          if( categoryImage != undefined ){
             var abbr = document.createElement( 'abbr' );
             abbr.setAttribute( 'title',  'Clickで開閉できます' );
             li.appendChild( abbr );
             var img = document.createElement( 'img' );
             img.setAttribute( "id" , id + "img" );
             img.setAttribute( 'onClick',  "toggle('" + id + "');" );
             img.setAttribute( 'src', categoryImage );
             abbr.appendChild( img );
          }

          var entries = items[ categoryName ];
          var entryCnt = "(" + entries.length + ")";
          var abbr2 = document.createElement( 'abbr' );
          abbr2.setAttribute( 'title',  'カテゴリーSummaryページを表示します' );
          li.appendChild( abbr2 );

          var a = document.createElement( 'a' );
          a.setAttribute( 'href',blogHomeUrl + 'search/label/' + encodeURIComponent( categoryName ) + '?orderby=published&max-results=' + maxResults );
          a.setAttribute( 'onMouseOver', "toggle('" + id + "',true);" );       
          a.appendChild( document.createTextNode( categoryName + entryCnt ) );
          abbr2.appendChild( a );

          if( entries != undefined ){
            var childUl = entries.getUl();
            childUl.setAttribute( "id" , id + "ent" );
            li.appendChild( childUl );
          }
       }
    }catch(e){
      alert( e );
    }
    return ul;  
  }
 
  this.getItem = function( key ){
    return items[key];
  };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ return index.join('\n'); };

  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( categoryName, entry ){
    var ret = false;
    try{
      if( categoryName != undefined ){
        if ( categoryName != 'Summary') {
          var entries = null;
          if( !this.contains( categoryName )){
            entries = new Entries(categoryName)
            items[ categoryName ] = entries;
            index[ index.length ] = categoryName;
            this.length = index.length;
            ret = true;
          }else{
            entries = items[ categoryName ];
          }
          entries.add( entry.title.$t, entry );
        }
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };

}
//--------------------------------------------------------------
function Entries(categoryName){
  var name = categoryName;
  var items = new Array();
  var links = new Array();
  var index = new Array();


  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{
      index.sort();
      for( var i=0; i<index.length; i++ ){
         var li = document.createElement( 'li' );
         if( entryImage != undefined ){
             var img = document.createElement( 'img' );
             img.setAttribute( 'src', entryImage );
             li.appendChild( img );
         }
         var title = index[ i ] ;
         var a = document.createElement( 'a' );
         a.setAttribute( 'href', links[ title ] );
         li.setAttribute( 'class', 'MenuEntry' );
         a.appendChild( document.createTextNode( title ) );
         var entry = items[ title ];
         var commentLink = this.getCommentLink( entry );
         if( commentLink != undefined ) a.appendChild( commentLink );
         li.appendChild( a );
         ul.appendChild( li );
      }
    }catch(e){
      alert( e );
    }
    return ul;  
  }
  this.getCommentLink = function(entry){
    var c;
    try{
      if( entry != undefined ){
          // コメントカウント
          for( var j=0; j<entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( '【' + commentCount + '】' ) );
                  c.appendChild( ab );
                }
              }
            }
          }// j loop
        }
    }catch( e ){
        alert( e );
    }
    return c;
  }
  this.getLink = function(entry){
   
    for(var i=0; i<entry.link.length; i++ ){
      if( entry.link[i].rel == 'alternate' ){
        return entry.link[i].href;
      }
    }
    return '';
  };

  this.getName = function(){ return name; };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ index.sort(); return index.join('\n'); };
  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( key, entry ){
    var ret = false;
    try{
      if( !this.contains( key )){
        items[ key ] = entry;
        links[ key ] = this.getLink( entry );
        index[ index.length ] = entry.title.$t;
        this.length = index.length;
        ret = true;
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };
  this.get = function( key ){
    var ret = null;
    if( isInt( key ) ){
      ret = index[ key ];
    }else{
      ret = items[ key ];
    }
    return ret;
  };
}


startLabelMenuQuery();

-->
</script>
<script type="text/javascript"><!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------

function htmlTagEscape_bloggerLabelMenuVer102(html,reverse)
{
  var s;
  if( html != undefined ) s = html;
  if( reverse ){
   s = s.replace( /&amp;/g, '&' );
   s = s.replace( /&quot;/g, '"');
   s = s.replace( /&lt;/g, '<' );
   s = s.replace( /&gt;/g, '>' );
   s = s.replace( /&apos;/g, "'" );
   s = s.replace( /&#39;/g, "'" );
  }else{
   s = s.replace( /&/g, '&amp;' );
   s = s.replace( /"/g, '&quot;');
   s = s.replace( /</g, '&lt;' );
   s = s.replace( />/g, '&gt;' );
   s = s.replace( /'/g, '&#39;' );
  }
  if( html != undefined ) return s;
};

function escapeMe_bloggerLabelMenuVer102()
{
  labelMenu.innerHTML = "";
  var s = document.getElementById('bloggerLabelMenuContentVer102').outerHTML;
  document.bloggerLabelMenuV102.elements[1].value = s;
  document.bloggerLabelMenuV102.submit();
};
// --></script>
</div>

JavascriptやCSSファイルのホスティングを安価に

noreply@blogger.com (hyperhands) — Mon, 12 Apr 2010 15:21:00 +0000

@BloggerでJavascriptやCSSファイルを外部ファイル化して管理したいと思った時に、自身でサーバを保持していれば何の問題もないのですが、新たにホスティング先を探さなければならない時にどうしたらいいかを探していました。

第一に考えたのが、無料のGoogle Sitesサービスのファイルキャビネット機能を使えば、ファイルをアップロードしておき、ユーザへダウンロードさせることも出来るではないか！？

実際は、保存したキャビネットページを表示させていないとダウンロード出来ない仕組みになっているとの事でNGでした。
Googleのヘルプページ

以前、ASP.NET可で￥５００/月額という安価に提供されているレンタルサーバをご紹介いたしましたが、今回はASPを動作させる必要もなく、JavascriptやCSSファイルを外部置きしたいだけの場合という設定なので、さらに安価なサービスは無いものかと思っておりました。

なんと、￥１２５/月額というサービスが、「さくらインターネット株式会社」さんから提供されているのを発見しましたのでご紹介致します。

BloggerのテンプレートXML内に収まりきれないJavascriptやCSSは、このようなサービスの利用を検討してみても良いかもしれません。

記事更新情報やコメント情報をヘッドラインとして表示する

noreply@blogger.com (hyperhands) — Sun, 11 Apr 2010 03:13:00 +0000

これまで、サマリーのリスト表示ページでは最新の投稿記事を表示できますので、これを「What's New」としていました。

これは、記事の公開日時を元にしていますので記事の修正があっても分からないのが難点でした。

そこで、更新日時でソートした記事フィードをJSONP呼び出しして、コールバック関数で受け取り後に更新日時とタイトル、そしてコメント数をリスト表示する事としました。

リストは各記事へのリンク、そしてコメント数の表示部は記事の当該コメントへのリンクとして動作します。

なお、カテゴリーのリストページでも当該カテゴリー内の更新内容を表示しますので、ユーザビリティの向上が期待できます。

ソースコード

以前書いたリストのページング表示のスクリプト内でオブジェクト「ID:headline-updated」があれば動作するようプログラムされています。
※　関連関数は「getHeadline、viewHeadline」となっています。

<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;
var maxHeadlines = 10;
var maxLinks = 10;
var isHome=false;
var isLabel=false;
var isStatic=false;
var isItem=false;
var labelPrefix = "search/label/";

var pageNo = 0;

if( currentUrl.indexOf("#PageNo=" ) > -1){
   var strNo = currentUrl.substring( currentUrl.indexOf("#PageNo=" )+8);
   pageNo = parseInt( strNo )-1;

}

if ( currentUrl.indexOf( labelPrefix ) > -1 ){
   isLabel=true;
} else if( currentUrl.indexOf( '.html' ) == -1 ){
   isHome=true;
} else if( currentUrl.indexOf( '/p/' )> -1){
   isStatic=true;
} else {
 isItem=true;
}
var feedUrl = blogUrl + "feeds/posts/summary/";
var headlineUrl = blogUrl + "feeds/posts/summary/";
var blogPager = document.getElementById("blog-pager");
var labelName = "";

function viewPager(){
  try{
    if( isLabel || isHome ){ 
      if( isLabel ){
        var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
        labelName = currentUrl.substring( st );
        if( labelName.indexOf("/") > -1){
          labelName = labelName.substring(0,labelName.indexOf("/"));
        }else if( labelName.indexOf("?") > -1 ){
          labelName = labelName.substring(0,labelName.indexOf("?"));
        }
        feedUrl += "-/" + labelName;
        headlineUrl += "-/" + labelName;
        blogUrl += labelPrefix + labelName + "?";
      }else{
        blogUrl = blogUrl + "search?";
      }
      feedUrl = feedUrl + "?orderby=published";
      headlineUrl = headlineUrl + "?orderby=updated";
      blogUrl += "orderby=published&max-results=" + maxResults ;

      feedUrl += ("&max-results=" );
      headlineUrl += ("&max-results=" );
      var srcStr = (feedUrl + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
      var scriptStr = ("<script src='"
                 + srcStr
                 + "' type='text/javascript'>"
                 + "</script>");
      //blogPager.innerHTML = srcStr;
      document.write( scriptStr );
    }
  }catch( e ){
    alert( e );
  }
}

function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = "<span class='headPager'>Pages( " + totalPage + " )</span>";
   
   blogPager.innerHTML = head;
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      getHeadline( i );
      var pager="";
      var className = "pageLink";
      if( pageNo == i) className = "currentPageLink";

      pager += "<span class='" + className + "'>";
      var targetIndex=0;
      var scriptStr ="";
      var srcStr ="";
      if( className != "currentPageLink" ){
         scriptStr = "<script src='" ;
         srcStr = feedUrl + 1 + "&start-index=";
         targetIndex =  (maxResults*i); //+ startIndex -1;
         if( targetIndex ==0) targetIndex =1; 
         srcStr += (targetIndex + "&alt=json-in-script&callback=redirectTargetPage");
         scriptStr += (srcStr + "' type='text/javascript'></script>");
      }
      pager += ("<a id='targetPageLink" + targetIndex + "'>" +( i+1 ) + "</a></span>");
      blogPager.innerHTML += pager;
      if( className != "currentPageLink" ) document.write( scriptStr );
      
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}

function getHeadline( i ){
  try{
   if(i==0){
    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var srcStr = headlineUrl + maxHeadlines + "&alt=json-in-script&callback=viewHeadline";
      var scriptStr = "<script src='" + srcStr + "' type='text/javascript'></script>";
      //div.innerHTML = srcStr;
      document.write( scriptStr );
    }
   }
  }catch( e ){
    alert( e );
  }
}

function viewHeadline( result ){
  try{

    var div = document.getElementById( 'headline-updated');
    if( div != undefined ){
      var idPrefix = '.post-';
      var feed = result.feed;
      if( feed.entry.length > 0 ){
        var h5 = document.createElement( 'h5' );
        var prefix = "";
        //if( isHome ) prefix = "このサイト";
        if( isLabel ) prefix = decodeURI( labelName ) + " で";
        h5.appendChild( document.createTextNode( prefix + '最近更新のあった記事 ' + feed.entry.length+ '件' ));
        div.appendChild( h5 );

        var ul = document.createElement( 'ul' );
        div.appendChild( ul );
        for( var i=0; i< feed.entry.length; i++){
          var entry = feed.entry[i];
          var h = document.createElement( 'li' );
          h.setAttribute( 'class', 'updatedHeadline' );
          var id = entry.id.$t;
          id = id.substring( id.indexOf( idPrefix  ) + idPrefix.length );// 将来のコメントHeadline化で使用する
          h.setAttribute( 'id', 'uHeadline-' + id );
        
          var d = document.createElement( 'span' );
          d.setAttribute( 'class', 'updated' );
          var upd = entry.updated.$t;
          var monthDay = upd.substring(5,10).replace('-','/');
          var time = upd.substring(10,16).replace('T',' ');
          d.appendChild( document.createTextNode( monthDay + time ) );
          h.appendChild( d );

          var t = document.createElement( 'a' );
          t.setAttribute( 'class', 'title' );
          t.setAttribute( 'href', getLink( entry ) );
          var title = entry.title.$t;
          var abbr = document.createElement( 'abbr' );
          abbr.setAttribute( 'title', '記事を表示するリンク' );
          abbr.appendChild( document.createTextNode( title ) );
          t.appendChild( abbr );

          // コメントカウント
          for(var j=0; j< entry.link.length; j++){
            var link = entry.link[j];
            if( link.rel == 'replies' ){
              if( link.title.indexOf( ' 件のコメント' ) > -1){
                var commentCount = link.title.substring( 0, link.title.indexOf( ' ' ) );
                if( commentCount != '0' ){
                  var c = document.createElement( 'a' );
                  c.setAttribute( 'class', 'commentCount' );
                  c.setAttribute( 'href', link.href );
                  var ab = document.createElement( 'abbr' );
                  ab.setAttribute( 'title', 'コメントを表示するリンク' );
                  ab.appendChild( document.createTextNode( '【' + commentCount + '】' ) );
                  c.appendChild( ab );
                  t.appendChild( c );
                }
              }
            }
          }// j loop

          h.appendChild( t );

          ul.appendChild( h );
        }// i loop
      }
    }
  }catch( e ){
    alert( e );
  }
}
function getLink(entry){
   
    for(var i=0;i<entry.link.length;i++){
      if( entry.link[i].rel == 'alternate' ){
        return entry.link[i].href;
      }
    }
    return '';
}
function getPrevNext(vector){
   var startIndex = 0;
   var scriptStr = "<script src='";
   var srcStr = (feedUrl + 1 + "&start-index=");
   var span = "<span class='";

   if( vector.toLowerCase() == "prev" ){
      srcStr += ((pageNo-1) * maxResults + 1)
              + "&alt=json-in-script"
              + "&callback=redirectPrevPage";
      span += "naviLinkPrev'>"
           + "<a href='javascript:void();' id='prevPageLink'>" + vector + "</a></span>";
   }else{
      srcStr += ((pageNo+1) * maxResults)
           + "&alt=json-in-script"
           + "&callback=redirectNextPage";
      span += "naviLinkNext'>"
           + "<a href='javascript:void();' id='nextPageLink'>" + vector + "</a></span>";  
   }
   blogPager.innerHTML += span;
   scriptStr += (srcStr + "' type='text/javascript'></script>");
   document.write(scriptStr);
}

function redirectPrevPage( result ){
   var targetLink = document.getElementById("prevPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   if( pageNo == 1) targetLink.href =  blogUrl + "#PageNo=1";
   else targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + pageNo ;
}

function redirectNextPage( result ){
   var targetLink = document.getElementById("nextPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   
   targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + (pageNo + 2);
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById("targetPageLink" + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + "#PageNo=" + targetLink.innerHTML;
   else targetLink.href =  blogUrl + "&updated-max=" + date + "#PageNo=" + targetLink.innerHTML;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

viewPager();

-->

ヘッドラインを表示するタイミングを制御するコード

@Bloggerの管理ツールで「レイアウト＞Htmlの編集」で「<data:post.body/>」の記載されているセクション内に以下のコードをコピー＆ペーストし、「<b:include data='top' name='status-message'/>」の後ろへ「<b:include data='posts' name='wellcomeItem'/>」を記載します。
※　ウィジェットのテンプレートを展開をチェックして挿入箇所を検索します。

<b:includable id='wellcomeItem' var='posts'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <div class='headline'>  
        <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <h2>What&#39;s New</h2>
        </b:if>
        <div id='headline-updated'/>
      </div>
    </b:if>
  </b:if> 
</b:includable>

ヘッドライン用のCSS

「]]></b:skin>」の前に以下のスタイルシートをコピー＆ペーストして適用します。

.headline{
  margin:20px;
  padding: 20px;
  font-size: 15px;
  border-radius:10px;
  -webkit-border-radius: 10px; /* Safari、Google Chrome */
  -moz-border-radius: 10px; /* Firefox */
  background: beige;
  border: 1px solid #black;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}
.headline abbr{
  margin-left: 5px;
}
.headline h2{
 margin-top: 0px;
 color: #ff5555;
 text-shadow: 2px 2px 3px #550000; 
}
.headline h5{
 margin-top: 0px;
 margin-left:20px;
 border-bottom:3px double #112299;
 color: #1133aa;
 font-size:18px;
 font-weight: bold;
 text-shadow: 2px 2px 2px #silver; 
}
.headline .updated{
 color: #3355ff;
 font-size:10px;
 font-weight: bold;
}
.headline .title{
 margin-left: 5px;
 font-size:8px;
 color: #11cc33;
}
.headline .commentCount{
 margin-left:5px;
 font-size:8px;
 color: #ff3355;
 font-weight: bold; 
}

登録したキーワードをCSSコントロールする方法

noreply@blogger.com (hyperhands) — Sat, 10 Apr 2010 04:33:00 +0000

あるジャンルの記事を複数投稿してゆくと常用するキーワードが結構あることに気づく事があります。

そのキーワードが長くて入力を省略したい場合やスペルミスを減らす事ができる方法を紹介しようと思います。
当サイトでは、Javascriptコードを公開したりしているので、対応するブラウザを表示したりしているのですが、ブラウザの名称を省略して「Explorer」と書いたときに「Internet Explorer」と表示し、下図のようにアイコン表示させます。

他にも、「IE」も略語で同様の処理にしました。

IEだけだと他の単語内に混入しているIEすべてが変換されてしまうこともあるかもしれないキーワードなので、あえてIEの前に「＠」を付加してある時だけ変換対象としています。

この例では、省略したキーワードを省略前の単語へと変換していますが、省略したままにしておきマウスをキーワードに合わせた時にツールチップ情報として、省略前の単語を表示させることも可能です。

キーワードが増えてきたら動作が重くなると思いますので、データベースへキーワード登録しておいてJSONPで非同期処理させたりする必要が出てくると思いますが、現状では埋め込みのJavascriptで十分です。

※　スペルミスがあれば、意図したように動作しませんので投稿画面を見れば間違いに気付き易くなるメリットもあります。

var div = document.getElementById("post-body");
div.innerHTML = attachBrowser( div.innerHTML);

function attachBrowser( str ){
 str = str.replace( /@VS/g, '<abbr title="MicrosoftのVisualStudio2008やVisualWebDebelopper2008などの開発ツール"><span class="vs">DevTool</span></abbr>' );
 str = str.replace( /@Blogger/g, '<abbr title="Google無料ブログツール"><span class="blogger">Blogger</span></abbr>' );
 str = str.replace( /@Chrome/g, '<span class="chrome">Chrome</span>' );
 str = str.replace( /@Explorer/g, '<span class="explorer">Explorer</span>' );
 str = str.replace( /@IE/g, '<span class="explorer">Explorer</span>' );
 str = str.replace( /@Safari/g, '<span class="safari">Safari</span>' );
 str = str.replace( /@Firefox/g, '<span class="firefox">Firefox</span>' );
 str = str.replace( /@Opera/g, '<span class="opera">Opera</span>' );
 return str;
}

対応するCSS

アイコン画像は、直リンクはご遠慮下さい。
また、ハイパーハンズで使用している画像をダウンロードして使わずに、ご自身で作成したものを使用するかフリー素材サイトなどで取得し、ご自身のサーバへ配置したものをご使用下さい。
※ これらのアイコンの著作権はハイパーハンズにありません。


.blogger{
  color:#3333ff;
  font-weight: bold;
  background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S76K9ET01OI/AAAAAAAABW0/JGBGklLOCG4/s128/blogger.png) no-repeat;
  padding-left:18px;
  color:#3333ff;
  font-weight: bold;
}

.chrome{
  color:#ff3333;
  font-weight: bold;
}
.chrome:before{
  content:'Google ';
  background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S7552k0yyiI/AAAAAAAABWY/vL22X7HVM_w/ico_browser1_4.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}

.firefox{
  color:#ff3333;
  font-weight: bold;
}
.firefox:before{
  content:'Mozilla ';
  background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7552oYpIxI/AAAAAAAABWQ/t4ALFzAgotY/ico_browser1_2.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}


.explorer{
  color:#ff3333;
  font-weight: bold;
}
.explorer:before{
  content:'Internet ';
  background: url(http://lh6.ggpht.com/_BdRZoJ1uqRY/S7552RfSnKI/AAAAAAAABWM/vgF8gKs60mI/ico_browser1_1.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}
.safari{
  color:#ff3333;
  font-weight: bold;
}
.safari:before{
  content:'Apple ';
  background: url(http://lh5.ggpht.com/_BdRZoJ1uqRY/S7552s5Y0rI/AAAAAAAABWU/rn4QIbm00TQ/ico_browser1_3.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}
.opera{
  color:#ff3333;
  font-weight: bold;
background: url(http://lh3.ggpht.com/_BdRZoJ1uqRY/S7552oamxaI/AAAAAAAABWc/u853aFH4q6Y/ico_browser1_5.gif) no-repeat;
  padding-left:18px;
  color:#ff3333;
  font-weight: bold;
}

BloggerへASP.NETで作った問合せ画面を埋め込む②

noreply@blogger.com (hyperhands) — Sat, 10 Apr 2010 03:02:00 +0000

前回提示したデザインソースのコントロール「btnSubmit」の属性「onClick」にメソッド「btnSubmit_Click」が割り当ててあったと思います。

ASP.NETはサーバサイドのプログラムで、ブラウザサイドで動作するJavascriptとは言語も異なるのですが、デザインソースは殆ど普通のHtmlと同一です。

ユーザが「送信」ボタンをクリックすると、そのイベントがサーバへ伝えられC#で作成されたメソッドへと通知される仕組みとなっています。

「btnSubmit_Click」メソッド内で、メールアドレスの形式に誤りがないかなどを各コントロールの内容を検証してから、問題ない場合にのみメールを送信するようにします。
Javascriptで入力内容の検証をするプログラムを組み込むのはユーザビリティの点で重要ですが、その検証プログラムを必ず通ったメッセージがポストされてくるとは限りません。

通常の使い方では検証されるハズですが、メッセージを送信するサーバのアドレスを知っていればメッセージを偽装するなど悪意あるプログラムを作ることは可能なので、トラブル回避のためにサーバ側での検証は必ず実装しなければなりません。

C#ソースコード

デザイン画面にて「送信」ボタンをダブルクリックすることで、属性「onClick」に割り当てられたメソッドを@VSが検索し、存在しなければ中身が空の関数を作成してくれます。
存在していれば、そのメソッドを表示してくれますので、その内部にメールを送信するプログラムを書いてやればいい訳です。
メールを送信する機能を使用するには「System.Net.Mail, System.Net」コンポーネントネームスペースを参照設定しておきます。
C#ソースファイルの先頭に「using （コンポーネントネームスペース）」といった形式で何行か既定で記載されていますので、追加してやります。
また、検証用に「System.Text.RegularExpressions」ネームスペースも使いますので同様に追記して下さい。


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

using System.Text.RegularExpressions;
using System.Net.Mail;
using System.Net;


public partial class FormMail : System.Web.UI.Page
{

   protected void btnSubmit_Click(object sender, EventArgs e)
   {
       // 入力エラーの表示欄をクリアして初期化
       this.labMsgMail.Text = "";
       this.labMsgName.Text = "";
       this.labMsgSubject.Text = "";

       // 名前が空か未定義でないかを検査
       if (string.IsNullOrEmpty(this.txtName.Text))
       {
         this.labMsgName.Text = "※ お名前が入力されていまません";
         return;
       }

       // 正規表現で正しいメールアドレスの形式であるかを検査
       Regex regex = new Regex(@"^[-_\.a-zA-Z0-9]+\@[-_\.a-zA-Z0-9]+$");
       Match m = regex.Match(this.txtMail.Text);
       if (!m.Success)
       {
         this.labMsgMail.Text = "※ メールアドレスが不正です";
         return;
       }
       if (string.IsNullOrEmpty(this.txtSubject.Text))
       {
         this.labMsgSubject.Text = "※ 内容が入力されていまません";
         return;
       }


       String smtpServer = "smtp.gmail.com";// gmailアカウントの場合のMailサーバ
       String account = "sender-account@your-domain.com";// システムが使用するアカウント
       String bccAccount = "recieve-account@your-domain.com";// 自分の受信用アカウント
       String password = "●●●●"; // 送信ユーザ「account」のパスワード

       MailMessage mail = new MailMessage();
       mail.BodyEncoding = System.Text.Encoding.GetEncoding("UTF-8");
       mail.From = new MailAddress(account , "お問合せフォーム");
       mail.Bcc.Add(bccAccount);
       mail.To.Add(new MailAddress(this.txtMail.Text, this.txtName.Text));
       mail.Subject = "お問合せ受付メール";
       mail.Body = "【" + this.txtName.Text + "<" + this.txtMail.Text
         + ">】 さんからお問合せです。\r\n"
         + "\r\n【　お問合せ内容　】\r\n■このメールは、自動送信されています。■\r\n"
         + "\r\n\r\n" + "".PadRight(60, &#39;-&#39;) + "\r\n"
         + Server.HtmlEncode(this.txtSubject.Text)
         + "\r\n\r\n" + "".PadRight(60, &#39;-&#39;)
         + "\r\n身に覚えのない場合は、お手数ですが破棄して下さい。";

       try
       {
      
         SmtpClient smtp = new SmtpClient(smtpServer, 25);
         smtp.EnableSsl = true;
         smtp.Credentials = new NetworkCredential(account, password);
         smtp.Send(mail);

         // 正しく送信されました。

         Server.Transfer("MailComplete.aspx");

       }
       catch
       {
         this.labMsgMail.Text = "SMTPエラーでメール送信出来ませんでした。";
       }

   }

}

正しくメールが送信されるとFormMail.aspxと同じ階層に別途作成した「MailComplete.aspx」ページの内容をユーザに送信して完了しています。
下図のようなユーザにメールが正しく送信された事を示すメッセージ画面にしておくと良いでしょう。

これで、ASP.NETのプログラムは完成です。

@Bloggerの静的ページ（記事でも構いませんが）のHtml編集画面で以下の例のように「iframe」タグを張り付けて、サーバに配置したFromMail.aspxのURLにしてやればOKです。

<iframe frameborder="0" height="500px" marginheight="0" marginwidth="0" src="http://your-domain.com/formmail.aspx" width="80%">読み込み中...</iframe>

BloggerへASP.NETで作った問合せ画面を埋め込む①

noreply@blogger.com (hyperhands) — Wed, 07 Apr 2010 14:39:00 +0000

サイト名がASP.NET自作専科となっているのに、しばらくASP.NET関連の情報は公開しておりませんでしたが、元来私の得意分野はASP.NET(C#)による開発です。

BloggerTipsの方で、ざっくりとサイトの体を成す程度にはなったと思うので、そろそろASP.NETのTipsの記事を書こうと思います。

なぜ全てをASPで作らないか？

Bloggerを使わずにすべてをASP.NETで作り上げることも可能ですが、かなりの労力と時間的コストが掛かる事になります。
何より、ASP.NETを動作させるためのホスティング環境の構築・運用・維持・拡張コストまでを考え併せると、無料ブログツールをメインホストに採用する方が、ASP側の各種サーバスペック・ネットワーク帯域ともに抑える事が可能になりコスト削減に繋がります。

もしかすると、Google AppEngineを使ってASP.NETの置き換えが出来るのではないかと考えているところではありますが、現状では調査が進んでおりませんので、ひとまずBloggerに足りない機能はASP.NET(C#)で作りこみ、Blogger記事やStaticページなどにiFrameタグで埋め込む事とします。

ハイパーハンズで作成したShoppingCartシステムは膨大なソースコードで構築されており、参考例としては相応しくないと思いますので、簡単な１ページものの問合せ画面で説明したいと思います。
私はVisualStudio2008 Stdで開発しましたが、所有していない場合は無料の開発ツールVisual WebDevelopper2008 ExpressEditionをマイクロソフトのWebサイトから、インストールすると良いでしょう。

インストールが完了したらDevToolを起動し、ファイルメニューから「新規作成＞Webサイト」でソリューションを作成します。

左側に表示されるソリューションエクスプローラに表示されているプロジェクトを右クリックして、メニューから「追加＞新しい項目」と選択し、Webフォームが選択されている事を確認し、WebForm1.aspxとなっているファイル名を「FormMail.aspx」と変更します。

Webフォームの拡張子は「aspx」と決められています。

作成されたFormMail.aspxをソリューションエクスプローラでダブルクリックすると、左側の画面にFormMail.aspxのソース画面が表示されますので、画面左下のボタンから「デザイン」を選択し、画面のデザインモードへ変更し、ツールボックスから以下のコントロールを画面にドラッグ＆ドロップで配置し、プロパティ画面の（ID)欄にオブジェクトのユニークな名前を設定します。

コントロール	ID
TextBox	txtName
TextBox	txtMail
TextArea	txtSubject
Button	btnSubmit

以下のコードをソース画面の「head」タグ以下と置き換えてやれば一発でデザインは完了です。
※　当サイトで適用している画像認証コード機能（CAPTCHA）は含まれていません。
項目名などの表示用にいくつかラベルコントロールを使って文字列を表示させていますが、説明は省略させて頂きます。

<head runat="server">
    <title>お問合せ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width="100%"><tr><td width="50px"><asp:Label ID="labName" runat="server" Text="お名前"></asp:Label></td>
    <td><asp:TextBox ID="txtName" runat="server" MaxLength="20" Width="95%"></asp:TextBox>
    <asp:Label ID="labMsgName" runat="server" ForeColor="Red"></asp:Label></td></tr>
    <tr><td><asp:Label ID="labMail" runat="server" Text="E-Mail"></asp:Label></td>
    <td><asp:TextBox ID="txtMail" runat="server" MaxLength="50" Width="95%"></asp:TextBox>
    <asp:Label ID="labMsgMail" runat="server" ForeColor="Red"></asp:Label></td></tr>
    <tr valign="top"><td><asp:Label ID="Label2" runat="server" Text="内容"></asp:Label></td>
    <td><asp:TextBox ID="txtSubject" runat="server" Height="300px" TextMode="MultiLine" 
            Width="95%" MaxLength="1000"></asp:TextBox><asp:Label ID="labMsgSubject" runat="server" ForeColor="Red"></asp:Label></td>
    </tr>
    <tr><td colspan="2" align="right">
    <asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" 
            Text="送信" style="margin-right:40px;"/></td></tr>
    </table>
    </div>
    </form>
</body>

※　CSSをあまり使っていない少し古い書き方なのはご愛敬という事で…

続きは、また次の記事に記載します。

Bloggerでアンケートや問合せ画面を表示

noreply@blogger.com (hyperhands) — Tue, 06 Apr 2010 08:20:00 +0000

Bloggerに限った事ではないですが、Googleドキュメントを使えばプログラム出来なくてもアンケートや問合せ画面を作ることができます。
もちろん、このサービスもGoogleから無料で提供されている機能ですので、安心して使い始められます。
フォーム作成機能以外にも、Excelのようなスプレッドシート機能も提供されています。
フォーム機能で受け付けた内容は、スプレッドシートへ保存されますので、様々なグラフや表にして利用することも可能ですし、フォームで受付データが登録される度に登録した管理者へメールで通知することも可能です。
この機能を使えば、アンケート画面や問合せ画面を簡単に作成することが可能です。
※　簡易的な商品注文画面も可能ですね。

フォームの作成

まず、新規作成ドロップダウンメニューからフォームを選択

すると、以下の画面が表示されます。

このフォームの表題と説明文を入力し、質問内容を順次登録してゆきテーマを設定してやれば完成という簡単さです。

完成したフォームをBloggerへ表示させるには「その他の操作＞埋め込み」メニューで表示されるタグ（iFrame）をコピーし、Htmlの編集時画面（Bloggerの記事）にペーストしてやればページ内に埋め込めます。

フィールドの種類

質問の形式で変更出来る形式は、テキスト・段落テキスト・ラジオボタン・チェックボックス・リストから選択・スケール・グリッドの７種類から選択します。
形式を選択すると、それぞれに合った設定画面に変化します。

段落テキスト

ラジオボタン

チェックボックス

リストから選択

スケール

グリッド

埋め込みサンプル

Bloggerで全ラベルの記事リストをメニュー表示する②

noreply@blogger.com (hyperhands) — Sun, 04 Apr 2010 18:20:00 +0000

使い方

Blogger管理ツールの「レイアウト＞Htmlの編集」で、ガジェットを追加から「Html/Javascript」ガジェットを追加します。適宜タイトルを決め、コードに以下のコードを張り付けます。

<style type="text/css">
.categorymenu li{
  margin: 0 0 0 5em;
 padding-left:30px;
}
.MenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:12px;
 color: #222299;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}
.currentMenuCategory a{
line-height:15px;
 text-shadow: 0px 1px 1px #ddddff; 
 font-size:20px;
 color: #2222ff;
 text-decoration:none;
 margin: 0 5px 0 0;
 padding:0px;
}
.MenuCategory a:hover, .currentMenuCategory a:hover{ 
 font-size:20px;
 font-weight:bold;
 color: #0000ff;
}
.MenuCategory ul{
display:none;
}
.currentMenucategory ul{
 display:block;
}
.MenuEntry a{
 font-size:0.7em;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.currentMenuCategory .MenuEntry a{
 font-size:12px;
 color: #992222;
 text-shadow: 0px 0px 0px;
 margin: 0 0 0 0em;
 padding:0px;
 
}
.MenuEntry img{
 src:'http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif';
}

.MenuEntry a{
 text-decoration:none;
 line-height:10px;
}
.MenuEntry a:hover{
  font-size:15px;
  color:#0000ff;
 font-weight:bold;
}
.MenuEntry a:hover{
  color:#0000ff;
}
</style>


<br />
<div class="menu">
<div class="categorymenu" id="category-menu">
</div>
<script src="http://prg.hyperhands.com/scripts/lebelmenu2.js" type="text/javascript">
</script>
</div>

このままだと、私のサーバに配置したJavascriptのソースとイメージ画像を使うことになってしまいます。
「http://prg.hyperhands.com/scripts/lebelmenu2.js」のファイルをダウンロードし、ご自身のサーバへアップロードして上記コードの「src」属性を修正してご使用下さい。
※　サーバへの負荷が掛かりますので、直リンクでの使用はご遠慮下さい。

スクリプトファイルの内容

カテゴリーとエントリーのアイコン画像は、以下のJavascript内に記載してあります。
これも、ご自身のサーバの画像URLへ変更するか、必要ない場合はカットして未定義にして下さい。
※　画像の著作権は私にありませんので、フリー素材サイトなどで入手すると良いでしょう。


<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------

var blogHomeUrl ="/";
var categoryImage = "http://lh3.ggpht.com/_BdRZoJ1uqRY/S7WbC1HiHXI/AAAAAAAABPk/kxBW6GSQJP4/s128/ico_folderc1.gif";
var categoryImageOpen ="http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WbC9X3HMI/AAAAAAAABPo/0aOgzLb6C10/s128/ico_foldero1.gif";
var entryImage = "http://lh4.ggpht.com/_BdRZoJ1uqRY/S7WIGJDus6I/AAAAAAAABPU/OYizDeJZID0/s128/ico_star1.gif";

var maxResults = 5;
var maxFeeds = 500;

var feedQueryUrl = blogHomeUrl + "feeds/posts/summary/";
var labelMenu = document.getElementById("category-menu");
function toggle( id , open ){

    var ul = document.getElementById( id + 'ent' );
    var img = document.getElementById( id + 'img' );
    if( ul.style.display == 'none' || open ){
      ul.style.display="block";
      img.src = categoryImageOpen;
    }else{
      ul.style.display="none";
      img.src = categoryImage;
    }
  }
function startLabelMenuQuery(){
   
  feedQueryUrl = feedQueryUrl + "?orderby=published";
 
  feedQueryUrl += ("&max-results=");
  var srcStr = (feedQueryUrl  + maxFeeds + "&alt=json-in-script&callback=viewLabelMenu");
  var scriptStr = ("<script src='"
                 + srcStr
                 + "' type='text/javascript'>"
                 + "</script>");
   //labelMenu.innerHTML = srcStr
   document.write( scriptStr );

}


function viewLabelMenu( result ){
    var feed = result.feed;
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
      
   var categories = new Categories();

   for(var i=0;i<feed.entry.length;i++){
    var entry = feed.entry[i];
    if( entry.category != undefined ){
      for( var j=0;j<entry.category.length;j++){
        var category = entry.category[j];
        var categoryName = category.term;

        categories.add( categoryName , entry ) ;
      
      }// j
     }// i
   }
   labelMenu.appendChild( categories.getUl() );
}
function Categories(){
  var items = new Array();
  var index = new Array();

  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{ 
       index.sort();
       for( var i=0;i<index.length;i++){
          var categoryName = index[i];
          var li = document.createElement( 'li' );
          if( location.href.indexOf( '/search/label/' + encodeURIComponent( categoryName ) +'?' ) > -1 ){
            li.setAttribute( 'class' , 'currentMenuCategory' );
          }else{
            li.setAttribute( 'class','MenuCategory');
          }
          ul.appendChild( li );

          var id = 'MenuCategory_' + i;
          if( categoryImage != undefined ){
             var img = document.createElement( 'img' );
             img.setAttribute( "id" , id + "img" );
             img.setAttribute( 'onClick',  "toggle('" + id + "');" );
             img.setAttribute( 'src', categoryImage );
             li.appendChild( img );
          }

          var entries = items[ categoryName ];
          var entryCnt = "(" + entries.length + ")";
          var a = document.createElement( 'a' );
          a.setAttribute( 'href',blogHomeUrl + 'search/label/' + encodeURIComponent( categoryName ) + '?orderby=published&max-results=' + maxResults );
 
          a.setAttribute( 'onMouseOver', "toggle('" + id + "',true);" );       
          a.appendChild( document.createTextNode( categoryName + entryCnt ) );
          li.appendChild( a );

          if( entries != undefined ){
            var childUl = entries.getUl();
            childUl.setAttribute( "id" , id + "ent" );
            li.appendChild( childUl );
          }
       }
    }catch(e){
      alert( e );
    }
    return ul;  
  }
 
  this.getItem = function( key ){
    return items[key];
  };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ return index.join('\n'); };

  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( categoryName, entry ){
    var ret = false;
    try{
      if( categoryName != undefined ){
        if ( categoryName != 'Summary') {
          var entries = null;
          if( !this.contains( categoryName )){
            entries = new Entries(categoryName)
            items[ categoryName ] = entries;
            index[ index.length ] = categoryName;
            this.length = index.length;
            ret = true;
          }else{
            entries = items[ categoryName ];
          }
          entries.add( entry.title.$t, entry );
        }
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };

}
//--------------------------------------------------------------------------
function Entries(categoryName){
  var name = categoryName;
  var items = new Array();
  var links = new Array();
  var index = new Array();


  this.getUl = function(){
    var ul = document.createElement( 'ul' );
    try{
      index.sort();
      for( var i=0;i<index.length;i++){
         var li = document.createElement( 'li' );
         if( entryImage != undefined ){
             var img = document.createElement( 'img' );
             img.setAttribute( 'src', entryImage );
             li.appendChild( img );
         }
         var a = document.createElement( 'a' );
         a.setAttribute( 'href', links[ index[ i ] ] );
         li.setAttribute( 'class', 'MenuEntry' );
         a.appendChild( document.createTextNode( index[ i ] ) );
         li.appendChild( a );
         ul.appendChild( li );
      }
    }catch(e){
      alert( e );
    }
    return ul;  
  }

  this.getLink = function(entry){
   
    for(var i=0;i<entry.link.length;i++){
      if( entry.link[i].rel == 'alternate' ){
        return entry.link[i].href;
      }
    }
    return '';
  };

  this.getName = function(){ return name; };
  this.getList = function(){
    var list = index;
    list.sort();
    return list;
  };

  this.lists = function(){ index.sort(); return index.join('\n'); };
  this.contains = function( key ){
    var ret = (items[ key ] != undefined );
    return ret;
  };

  this.add = function( key, entry ){
    var ret = false;
    try{
      if( !this.contains( key )){
        items[ key ] = entry;
        links[ key ] = this.getLink( entry );
        index[ index.length ] = entry.title.$t;
        this.length = index.length;
        ret = true;
      }
    }catch(e){
      alert( e );
    }
    return ret;
  };
  this.get = function( key ){
    var ret = null;
    if( isNumber( key ) ){
      ret = index[ key ];
    }else{
      ret = items[ key ];
    }
    return ret;
  };
}

startLabelMenuQuery();

-->

Bloggerで全ラベルの記事リストをメニュー表示する①

noreply@blogger.com (hyperhands) — Thu, 01 Apr 2010 00:56:00 +0000

ガジェットを追加で「フィード」を追加して自身のブログのフィードURLを指定してやれば、最大５件の記事のリンクが作成されます。

この表示では満足できず、全てのラベル名のリンクをラベルのサマリーページへのリンクとし、ラベルに該当する記事のタイトルを当該記事ページへのリンクとしたツリー形式のメニューがガジェットとしてないものかと探してみました。

表示イメージ

「ブログアーカイブ」や「RecentPosts」等、便利なガジェットがあるにはあるのですが、当サイトで表示したいメニューのイメージとは異なる表示結果しか得られません。

ページナビゲーション作成時に習得したフィード取得パラメータとJASOP＆Javascriptを駆使して、全ラベルの該当記事へのリンクをツリー形式のリンクリスト（ul,liタグの階層構造）として作成しました。

今後の課題

ラベルなしの記事は表示されない。
ラベル名でのソート機能がない。（記事タイトルのソートは組込済み）
関連記事のリスト作成機能も内包したい。
グローバル変数を排除してオブジェクト化したい。（変数・関数名重複での不具合対処）
カレント処理（固定ページ・個別記事表示時を除くカテゴリーサマリー表示の時）

サイドバーへ表示するメニュー

同じスクリプトで、サイドバーのArticlesメニューとアーカイブページのサイトマップの表示をCSSを多少修正するだけで適用できました。
※　アーカイブページでは、サイドバーは表示させていないので問題なし。

アーカイブページのSitemap表示

ソースコードは、次の記事でアップします。

機能追加・・・2010/04/02

デフォルトで閉じた状態とし、ラベル内の記事数を表示。
マウスをラベル名に乗せるとオープン、フォルダIconをクリックでOpen/Closeを繰り返す動作とし、各記事のアイコンも付加しました。

機能追加・・・2010/04/04

カテゴリー（Label）表示時に、カレントカテゴリーのメニューをデフォルトで展開しておけるようにクラス名をcurrentMenuCategoryへと修正したので、スタイルシート側でデフォルトの状態を決められます。

【スタイル記載例】

.carentMenuCategory{
 display:block;
}
.MenuCategory{
 display: none;
}

機能追加・・・2010/04/05

カテゴリー（Label）名でソートに対応

Bloggerでリストページ時に記事サマリー＆画像サムネイル表示

noreply@blogger.com (hyperhands) — Wed, 24 Mar 2010 14:20:00 +0000

ホーム（Home）やラベルページでは複数記事がリストされ、無駄にページが伸びて読みずらい事があります。

@Bloggerの設定で1ページに表示する記事数を１件に設定してしまえば、個別ページをラベルやHomeなどのリストページの意味がなくなってしまいます。
リストページ表示時には、サマリーとして記事内容の先頭何文字かだけ抜粋し簡素化して表示にした方がターゲットの記事が探しやすいでしょう。

という事で、サマリー表示のコードをGoogle検索で探しだして導入しておりました。
しかし、適用したコードでは以下の問題が気になりました。

改行タグまで消去されてしまい読みづらい。
サムネイル画像の縦横比によってサマリー位置のズレが気になる。

この問題を解決するために、コードを改良して適用すると以下の表示のようになります。

サムネイル画像が縦長・横長でも位置ズレしない

対応ブラウザ

@IE
@Chrome
@Safari
@Firefox
@Opera

※　~~残念ながら、「@IE・Opera」ブラウザでは改行が残らない不具合があります。~~
※　ブラウザによって改行タグが大文字に変換されていたようでコードを修正して対応しました。（2010/03/27）

改良コード

<style type="text/css">
/*枠あり＆影つき*/
.shadow{
 border: 0px;
}

.shadow img{
 max-width: 520px; 
 border: 1px solid #a9a9a9!important; /* 画像の枠線 */
 position: relative;
 left: -5px; /* 画像を左へ移動 */
 top: -5px; /* 画像を上へ移動 */
 padding: 5px; /* 画像枠 （枠あり）*/
  margin: 15px; /* 余白*/
 background-color: #E0E0E0; /* paddingを設定した場合の背景色 */
}

.thumbnail{
  margin: 15px; /* 余白*/
 max-width: 300px; 
}
</style>

<script type="text/javascript">
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------
summary_noimg = 350;
summary_img = 250;
img_thumb_size = 144;

function extractEnclosedString(st,ed,target,exclusion){
  if(target.indexOf( st )==-1)
  {
    st=st.toUpperCase();
    ed=ed.toUpperCase();
  }
  if(target.indexOf( st )!=-1)
  {
    var s = target.split( st );
    for(var i=0;i<s.length;i++){
      if(s[i].indexOf( ed )!=-1){
        var execute = true;
        if( exclusion != undefined ){
          if( s[i].substring(0,exclusion.length).toLowerCase() == exclusion.toLowerCase()){
              s[i] = st + s[i];
            
            execute = false;
          }
        }
        if( execute ) s[i] = s[i].substring(s[i].indexOf( ed ) + ed.length , s[i].length);
      }
    }
    target = s.join("");
  }
  
  return target;
}

function removeHtmlTag(target, len){

  target = extractEnclosedString( "<pre ", "pre>",target);
  target = extractEnclosedString( "<", ">", target, "br");
  
  return target.substring( 0,len ) + '...';
}
function changeImageSize( imgSrc , size ){
  var paths = imgSrc.split("/");
  switch( size ){
   case "s72":
   case "s144":
   case "s288":
   case "s512":
   case "s576":
   case "s640":
   case "s720":
   case "s800":
   case "s912":
   case "s1024":
   case "s1152":
   case "s1280":
   case "s1440":
   case "s1600":
     paths[ paths.length -2 ] = size ;
     break;
  }
  return paths.join("/");
}

function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);
  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = summary_noimg;
  if(img.length>0) {
    imgtag =  "<span style='float:left;'><table style='border:0px'>"
           + "<tr style='border:0px'><td style='"
           + "height:" + img_thumb_size  +"px;"
           + "width:" + img_thumb_size *1.5 + "px;"
           + "align:center;valign:middle;border:0px;text-align:center;'>"
           + "<span class='shadow'>"
           + "<img class='thumbnail' src='"
           + changeImageSize( img[0].src , ("s" + img_thumb_size) )
           + "' /></span></td></tr></table></span>";
    summ = summary_img;
  }
  var noTag = removeHtmlTag(div.innerHTML, summ ) +"..." ;
  //noTag += noTag.length;
  var summary = "<div class='entry-body'>" + imgtag + "<div>" + noTag +"</div></div>";
  div.innerHTML = summary;

}

function createShadow(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var a = div.getElementsByTagName("a");

 for(var i=0;i<a.length;i++) {
  var img = a[i].getElementsByTagName("img");
  if( img.length >0){
   a[i].outerHTML = "<span class='shadow'>"
                  + "<a href='" + a[i].href + "' target='_blank'><img src='"
                  + img[0].src + "' /></a></span>";

  }
 }
}
</script>

適用の方法は、Blogger管理ツールで「レイアウト＞Htmlの編集」メニューから、テンプレートのHTMLを編集します。
※　ウィジェットのテンプレートを展開をチェックしておきます。

「</head>」を検索し、その前に上記コードをコピー＆ペーストします。

そして、「<data:post.body/>」を検索し、以下のコードに書き換えれば動作します。

  
  <div expr:id="&quot;summary&quot; + data:post.id">
    <data:post.body/>
  </div>
  <b:if cond="data:blog.pageType != &quot;item&quot;">
    <b:if cond="data:blog.pageType != &quot;static_page&quot;">
      <script type="text/javascript">
        createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
      </script>
    </b:if>
  <b:else/>
    <script type="text/javascript">
      createShadow(&quot;summary<data:post.id/>&quot;);
    </script>
  </b:if>

ちなみに、個別記事ページ(item)の画像は枠付きになります。

関数バージョンUp・・・2010/04/10

画像の枠表示から、影表示に切り替えるため以下の２つの関数だけバージョンUpしました。
ちなみに、サムネイル画像の位置合わせはテーブル方式から画像サイズをJavascriptで取得し縦横比とサムネイル画像サイズで算出した４方向のPaddingを自動設定する方式に変更してあります。


function createSummaryAndThumb(pID){

  var div = document.getElementById(pID);
  var summ = summary_noimg;
  var image;
  var imgs = div.getElementsByTagName("img");
  if(imgs.length>0){
    summ = summary_img;// イメージ有りの場合の文字列長にする
    image = document.createElement( 'span' );
    image.setAttribute( 'class', 'thumbnail-span' );

    var img = document.createElement( 'img' );
    var height = parseInt(imgs[0].height * img_thumb_size /imgs[0].width);
    var width = parseInt(imgs[0].width * img_thumb_size /imgs[0].width);
    var vPadding = parseInt((img_outer_size - height )/2);
    var hPadding = parseInt((img_outer_size - width )/2);
    img.setAttribute( 'style', 'background: #e0e0e0;margin-top:' + vPadding + 'px;margin-bottom:' + vPadding  + 'px;'
          + 'margin-left:' + hPadding + 'px;margin-right:' + hPadding  + 'px;height:' + (height ) + 'px;width:' + (width) + 'px;');
 
    var src = changeImageSize( imgs[0].src, 's' + img_thumb_size );
    img.setAttribute( 'src', src );
    img.setAttribute( 'class', 'shadowThumbnail');

    image.appendChild( img );
  }

  var noTag = removeHtmlTag(div.innerHTML, summ ) +"..." ;
  div.innerHTML ="";
  var summary = document.createElement( 'div' );
  summary.setAttribute( 'class', 'entry-body' );
  if( image != undefined ) summary.appendChild( image );
  var sText = document.createElement( 'div' );
  sText.innerHTML = noTag;
  summary.appendChild( sText );
  div.appendChild( summary );

}

function createShadow(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var a = div.getElementsByTagName("a");

 for(var i=0;i<a.length;i++) {
  var imgs = a[i].getElementsByTagName("img");
  if( imgs.length >0){
   imgs[0].setAttribute( 'class', 'shadowImage' );
  }
  a[i].setAttribute( 'target', '_blank');
 }

}

対応CSS

スクリプトをバージョンUpしたら、CSSも以下の内容にアップデートして影設定を適用すると良いと思います。

<style type='text/css'>
/*枠あり&#65286;影つき*/

.shadowImage{
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
 border:1px solid #999999;
 margin:30px;
 max-width: 500px;
}

.shadowThumbnail{
 float:left;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
border:1px solid #999999;
 max-width: 170px; 
 max-height:170px;
}

.thumbnail-span{
 float:left;
 width: 170px;
 height: 170px;
 margin: 15px;
 //background: white;
 //border:4px ridge skyblue;
}

</style>

BloggerをGoogle検索結果風にページングする④

noreply@blogger.com (hyperhands) — Tue, 23 Mar 2010 09:53:00 +0000

残りの関数は、以下で全てです。

//--------------------------------------------------
// 前・後方リンク生成とコールバックScriptの書き出し
//--------------------------------------------------
function getPrevNext(vector){
   var startIndex = 0;
   var scriptStr = '<script &alt="json-in-script'" &callback="redirectPrevPage';" ){="" *="" +="(pageNo-1)" 1="" ;="" if(="" maxresults="" prev"="" span="" src="';
   var srcStr = feedUrl + 1 + '&amp;start-index=';
   var span = '&lt;span class=" srcstr="" vector="=">
<a href="javascript:void();" id="prevPageLink">' + vector + '</a></span>';
   }else{
      srcStr += (pageNo+1) * maxResults 
           + '&alt=json-in-script'
           + '&callback=redirectNextPage';
      span += 'naviLinkNext">'
           + '<a href="javascript:void();" id="nextPageLink">' + vector + '</a></span>';  
   }
   blogPager.innerHTML += span;
   scriptStr += srcStr + '" type="text/javascript">
</script>';
   document.write(scriptStr);
}
//-------------------------------
// 前方リンク用コールバック関数
//-------------------------------
function redirectPrevPage( result ){
   var targetLink = document.getElementById("prevPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );// 記事公開日付
   if( pageNo == 1) targetLink.href =  blogUrl + '#PageNo=1';
   else targetLink.href =  blogUrl + '&amp;updated-max=' + date  + '#PageNo=' + pageNo ;
}
//-------------------------------
// 後方リンク用コールバック関数
//-------------------------------
function redirectNextPage( result ){
   var targetLink = document.getElementById("nextPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );// 記事公開日付
   
   targetLink.href =  blogUrl + '&amp;updated-max=' + date  + '#PageNo=' + (pageNo + 2);
}
//-------------------------------
// 各ページリンク用コールバック関数
//-------------------------------
function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById("targetPageLink" + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );// 記事公開日付
   if( startIndex == 1) targetLink.href =  blogUrl + '#PageNo=' + targetLink.innerHTML;
   else targetLink.href =  blogUrl + '&amp;updated-max=' + date + '#PageNo=' + targetLink.innerHTML;
}
//---------------------------------------
// 日時文字列をURIエンコードして返します
//--------------------------------------
function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}

コードの実装方法

Bloggerの管理ツールからテンプレートHtmlの編集で「</body>」を検索し、その直前に以下の全コードをコピー＆ペーストして下さい。
~~次に、ページナビゲーションを表示するためのタグ「~~~~<div id="blogPager"><span class="blogPager"/></div>~~

~~」を適宜表示したい場所へ配置します。~~
既にテンプレートに「id='blog-pager'」のタグが記載されていると思います。
リスト表示になるページでは、その中身をクリアしてページナビゲーションが表示されます。

好みに応じて、全コード内のスタイルを調整してやれば完成です。
※　アーカイブページではページング動作しませんので、必要に応じて改造してご使用下さい。

対応ブラウザ

@Explorer
@Chrome
@Safari
@Firefox（スクリプト外部ファイル化により動作確認できました）
@Opera

全コード

※　最大リンク表示数で範囲制限とカレントページをセンタリングする機能を付加しました。(2010/03/28)

<style type='text/css'>
.pageLink ,.currentPageLink, .naviLinkPrev, .naviLinkNext{
line-height: 2.1em;
}
.pageLink a, .currentPageLink a, .naviLinkPrev a, .naviLinkNext a{
color: #333 !important;
text-decoration:none !important;

margin: 0 3px;
padding: 3px;
}
.pageLink, .naviLinkPrev, .naviLinkNext{
color: blue !important;
text-decoration:none !important;
margin: 0 3px;
padding: 3px;
}
.pageLink:hover, .naviLinkPrev:hover, .naviLinkNext:hover{
background-color: skyblue;
}
.pageLink , .naviLinkPrev, .naviLinkNext{
color: #333;
text-decoration: none;
border: 1px solid #ccc;
margin: 0 3px;
padding: 3px;
}
.currentPageLink {
color: #333;
text-decoration: none;
border: 1px solid #ccc;
background-color: #ccc;
margin: 0 3px;
padding: 3px;
}
.currentPageLink .headPager{
margin: 0 3px 0 0;
padding: 3px;
}
</style>

<script type='text/javascript'>
<!--
//-------------------------------------
// Copyright (C) 2010 Hyperhands.com
// This code Created by S.Kobayashi
// License agreement with GNU LGPL
//-------------------------------------
var blogUrl = "/";
var currentUrl = location.href;

var maxResults = 5;// ページ内サマリー数
var maxLinks=10;// 最大リンク表示数
var isHome=false;// ホームページ
var isLabel=false;// ラベルページ
var isStatic=false;// 静的ページ
var isItem=false;// 記事ページ
var labelPrefix = "search/label/";

var pageNo = 0;

if( currentUrl.indexOf("#PageNo=" ) > -1){
   var strNo = currentUrl.substring( currentUrl.indexOf("#PageNo=" )+8);
   pageNo = parseInt( strNo )-1;

}

if ( currentUrl.indexOf( labelPrefix ) > -1 ){
   isLabel=true;
} else if( currentUrl.indexOf( '.html' ) == -1 ){
   isHome=true;
} else if( currentUrl.indexOf( '/p/' )> -1){
   isStatic=true;
} else {
 isItem=true;
}
var feedUrl = blogUrl + "feeds/posts/summary/"; // フィードサマリー取得クエリー
var blogPager = document.getElementById("blog-pager");//既定のページナビのオブジェクトを検索
if( isLabel || isHome ){ 
   if( isLabel ){
      var st = currentUrl.indexOf( labelPrefix ) + labelPrefix.length;
      var labelName = currentUrl.substring( st );
      if( labelName.indexOf("/") > -1){
         labelName = labelName.substring(0,labelName.indexOf("/"));
      }else if( labelName.indexOf("?") > -1 ){
         labelName = labelName.substring(0,labelName.indexOf("?"));
      }
      feedUrl += "-/" + labelName;
      blogUrl += labelPrefix + labelName + "?";
   }else{
      blogUrl = blogUrl + "search?";
   }
   feedUrl = feedUrl + "?orderby=published";
   blogUrl += "orderby=published&max-results=" + maxResults ;

   feedUrl += "&max-results=";
   var srcStr = (feedUrl  + maxResults + "&alt=json-in-script&callback=viewPageNavigation");
   var scriptStr = "<script src='" + srcStr + "' type='text/javascript'></script>";

   //blogPager.innerHTML = srcStr ;// JSONP動作しない場合リクエスト文字列が残ります&#12290;
   document.write( scriptStr );


}

function viewPageNavigation( result ){

   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = "<span class='headPager'>Pages( " + totalPage + " )</span>";
   
   blogPager.innerHTML = head;
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   for(i=startPage; i < endPage; i++){
      var pager="";
      var className = "pageLink";
      if( pageNo == i) className = "currentPageLink";

      pager += "<span class='" + className + "'>";
      var targetIndex=0;
      var scriptStr ="";
      var srcStr ="";
      if( className != "currentPageLink" ){
         scriptStr = "<script src='" ;
         srcStr = feedUrl + 1 + "&start-index=";
         targetIndex =  (maxResults*i); //+ startIndex -1;
         if( targetIndex ==0) targetIndex =1; 
         srcStr += (targetIndex + "&alt=json-in-script&callback=redirectTargetPage");
         scriptStr += (srcStr + "' type='text/javascript'></script>");
      }
      pager += ("<a id='targetPageLink" + targetIndex + "'>" +( i+1 ) + "</a></span>");
      blogPager.innerHTML += pager;
      if( className != "currentPageLink" ) document.write( scriptStr );
      
   }
   
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}

function getPrevNext(vector){
   var startIndex = 0;
   var scriptStr = "<script src='";
   var srcStr = (feedUrl + 1 + "&start-index=");
   var span = "<span class='";

   if( vector.toLowerCase() == "prev" ){
      srcStr += ((pageNo-1) * maxResults + 1)
              + "&alt=json-in-script"
              + "&callback=redirectPrevPage";
      span += "naviLinkPrev'>"
           + "<a href='javascript:void();' id='prevPageLink'>" + vector + "</a></span>";
   }else{
      srcStr += ((pageNo+1) * maxResults)
           + "&alt=json-in-script"
           + "&callback=redirectNextPage";
      span += "naviLinkNext'>"
           + "<a href='javascript:void();' id='nextPageLink'>" + vector + "</a></span>";  
   }
   blogPager.innerHTML += span;
   scriptStr += (srcStr + "' type='text/javascript'></script>");
   document.write(scriptStr);
}

function redirectPrevPage( result ){
   var targetLink = document.getElementById("prevPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   if( pageNo == 1) targetLink.href =  blogUrl + "#PageNo=1";
   else targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + pageNo ;
}

function redirectNextPage( result ){
   var targetLink = document.getElementById("nextPageLink");
   var date = encodeDate( result.feed.entry[0].published.$t );
   
   targetLink.href =  blogUrl + "&updated-max=" + date  + "#PageNo=" + (pageNo + 2);
}

function redirectTargetPage( result ){
   var startIndex = parseInt(result.feed.openSearch$startIndex.$t, 10);
   var targetPage = parseInt( startIndex / maxResults );
   var targetLink = document.getElementById("targetPageLink" + startIndex );   
   var feed = result.feed;   
   var date = encodeDate( feed.entry[0].published.$t );
   if( startIndex == 1) targetLink.href =  blogUrl + "#PageNo=" + targetLink.innerHTML;
   else targetLink.href =  blogUrl + "&updated-max=" + date + "#PageNo=" + targetLink.innerHTML;
}

function encodeDate(dateStr){
   dateStr = dateStr.substring(0, 19) + dateStr.substring(23, 29);
   return encodeURIComponent( dateStr );
}
-->
</script>

BloggerをGoogle検索結果風にページングする③

noreply@blogger.com (hyperhands) — Sun, 21 Mar 2010 22:47:00 +0000

さて、ラベルページ・ホームページの判断ができるようになったら、フィード問合せスクリプトを仕込んで、後の処理はコールバック関数（viewPageNavigation）を後に作成して任せる事としています。

var feedUrl = blogUrl + 'feeds/posts/summary/'; // フィードサマリー取得クエリー
var blogPager = document.getElementById("blogPager");// PageNavigationを配置するSpanオブジェクトを取得
if( isLabel || isHome ){ 
   if( isLabel ){
      // ラベルページの場合、ラベル名を取得
      var labelPrefix = 'search/label/';
      var st = currentUrl.indexOf( labelPrefix  ) + labelPrefix.length;
      var labelName = currentUrl.substring( st );
      if( labelName.indexOf('/') &gt; -1){
         labelName = labelName.substring(0,labelName.indexOf('/'));
      }else if( labelName.indexOf('?') &gt; -1 ){
         labelName = labelName.substring(0,labelName.indexOf('?'));
      }
      feedUrl += '-/' + labelName;
      blogUrl += labelPrefix + labelName + "?";
   }else{
      blogUrl = blogUrl + 'search?';
   }
   feedUrl = feedUrl + '?orderby=published';
   blogUrl += 'orderby=published&amp;max-results=' + maxResults ;

   feedUrl += '&amp;max-results=';
   // JSONPでフィードを呼び出すスクリプトを生成
   var srcStr = feedUrl  + maxResults + '&amp;alt=json-in-script&amp;callback=viewPageNavigation';
   var scriptStr = "<script src="&quot; + srcStr + &quot;" type="text/javascript">
</script>";

   document.write( scriptStr );// スクリプトを書き出してコールバック関数に引き渡す
   // blogPager.innerHTML = srcStr ;テストコード
}

これで、ページが表示された直後にフィードサマリーを１件取得するクエリーを投げて、非同期でコールバック関数が回答を受け取るまで待ちとなる訳です。
※　非同期なので、回答が来るまでブラウザが固まるといったことはありません。

ところで、取得できる回答の形式とはどんなものかと言うと、Json形式オブジェクトとXMLオブジェクトの説明ページを参照して下さい。
個人的にはXMLの方が判読し易いですが、構造は同じだと思います。
YouTube要素の説明も、参考になると思います。

これらを参考にコールバック関数を作成してみましょう。
※　最大リンク表示数で範囲制限とカレントページをセンタリングする機能を付加しました。(2010/03/28)

//-------------------------------------------------
// フィードクエリの回答を受け取るコールバック関数
// 全体数とカレント位置の把握で分かる範囲の
// Object[数前方・各ページ・後方のリンク]を
// 空リンクとして作成し、具体的なリンク先を調べる
// ためのフィードクエリをコールバックScript３種に
// 分けて書き出しJSONP呼び出しします。
//-------------------------------------------------
function viewPageNavigation( result ){
   // JSON結果セットからフィード情報を取得
   var feed = result.feed;   
   
   var totalResults = parseInt(feed.openSearch$totalResults.$t, 10);
   var startIndex = parseInt(feed.openSearch$startIndex.$t, 10);
   var itemsPerPage  = parseInt(feed.openSearch$itemsPerPage.$t, 10);
   // 全リンク数を算出
   var totalPage = parseInt(totalResults / maxResults );
   if( (totalResults % maxResults ) > 0){
      totalPage += 1;
   }
   var head = "<span class='headPager'>Pages( " + totalPage + " )</span>";
   
   blogPager.innerHTML = head;
   
   if( pageNo > 0 ){
      getPrevNext("Prev");
   }
   // カレントを中央表示位置へ移動、及び最大リンク表示数でリンクの範囲を算出
   var startPage = pageNo;
   var endPage= pageNo + maxLinks;
   var offset = parseInt( maxLinks / 2 );
   if( endPage > totalPage){
     if( endPage - totalPage > offset ) offset = endPage - totalPage;
     for(i=0; i < offset; i++ ){
       if( endPage == totalPage ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }else{
     for(i=0; i < offset; i++ ){
       if( startPage == 0 ) break;
       if( startPage > 0) startPage--;
       endPage--;
     }
   }
   // ページナンバーリンクの作成とスクリプト書き出し
   for(i=startPage; i < endPage; i++){
      var pager="";
      var className = "pageLink";
      if( pageNo == i) className = "currentPageLink";

      pager += "<span class='" + className + "'>";
      var targetIndex=0;
      var scriptStr ="";
      var srcStr ="";
      if( className != "currentPageLink" ){
         scriptStr = "<script src='" ;
         srcStr = feedUrl + 1 + "&start-index=";
         targetIndex =  (maxResults*i); //+ startIndex -1;
         if( targetIndex ==0) targetIndex =1; 
         srcStr += (targetIndex + "&alt=json-in-script&callback=redirectTargetPage");
         scriptStr += (srcStr + "' type='text/javascript'></script>");
      }
      pager += ("<a id='targetPageLink" + targetIndex + "'>" +( i+1 ) + "</a></span>");
      blogPager.innerHTML += pager;
      if( className != "currentPageLink" ) document.write( scriptStr );
      
   }
   // 後方リンクの作成とスクリプト書き出し
   if( pageNo<(totalPage-1)){
      getPrevNext("Next");
   }
   
}

上記関数内では、さらに外部関数が呼び出されていますが、それは続きに記載しますので大まかな流れを掴んで下さい。

予めコールバック関数内で対象を判別できるようユニークなIDを割り当てた空リンク（aタグ）を生成し、結果を受け取ったあとで、フィードの結果情報から対象ページへの適正なURLを生成して空リンクを動作するように、href属性へ設定する仕組みとしています。

BloggerをGoogle検索結果風にページングする②

noreply@blogger.com (hyperhands) — Sat, 20 Mar 2010 15:27:00 +0000

ラベルのリストページ（当サイトではサマリー表示）へのリンクは、テンプレートHtml内で「'data:label.url'」として記載されています。

テンプレートのデザインによって様々ですが、複数見つかると思います。
これらは、すべてあるラベルのリストを表示するためのリンクとして動作していますので、「設定＞フォーマット」メニューに設定した表示投稿数に合わせた数だけ表示するように変更します。
'data:label.url'　を　'data:label.url + "?max-results=5"'　へと全てを置換します。

これだけで、各ラベルの先頭５件のリストが表示されるリンクへと変更された事になります。

次に、ページングを表示すべき場合の検査ですが、以下に該当する場合と考えます。
ラベルのリスト
サイトのホーム

ラベルのリストページであれば、アクティブなページのURL内に「/search/label/」が含まれています。
記事ページや静的ページであれば「.html」が含まれますので、上記以外で「.html」が含まれていなければ、ホームであると判断できます。
これらをJavascript化すると以下のようになります。

var maxResults=5;// 最大サマリー表示数
var maxLinks=10;// 最大リンク表示数
var isHome=false;// ホームページ
var isLabel=false;// ラベルページ
var isStatic=false;// 静的ページ
var isItem=false;// 記事ページ

var currentPage = location.href;

if ( currentPage.indexOf( '/search/label/' ) > -1 ){
   isLabel=true;
} else if( currentPage.indeOf( '.html' ) == -1 ){
   isHome=true;
} else if( currentPage.indexOf( '/p/' )> -1){
   isStatic=true;
} else {
 isItem=true;
}

これで、ページングすべきか判断できるようになりました。続きはまた。。。

BloggerをGoogle検索結果風にページングする①

noreply@blogger.com (hyperhands) — Sat, 20 Mar 2010 12:02:00 +0000

Bloggerで作成したサイトのホーム（Home）にアクセスすると、管理ツールの「設定＞フォーマット」メニューで表示される設定ページの『Show at most』項目に設定した項目数の記事がデフォルトで表示されます。

また、ラベルを表示させようとすると規定では以下のようなリンクURLになっており、該当する全件がリストされます。

http://yourblogURL/search/label/labelName

投稿記事が多くなると、これらのリストページでページングして表示した方が表示自体も早くなる上、各記事へのアクセスも容易になるハズです。

ページNavigation表示例

因みに、記事ページ（item）や静的ページ(static_page)ではページングの必要はないものとします。

JavaScriptでページングをコントロールするには、まず記事リストの習得方法を知る必要があります。

Bloggerのフィード機能を利用して記事リストを取得してGoogleウェブマスターのサイトマップ登録ができる事を以前の記事で書きましたが、ページング処理をつくるのにも此れを利用します。

http://yourblogURL/feeds/posts/default?alt=rss&redirect=false&max-results=500

サイトマップとして利用したURLは上記のようになっていますが、このURL内の「？」以降の文字列は、「＆」毎に分割された問合せのパラメータとして処理されています。
このパラメータの指定方法が、上記の他にもいくつかありますので、それらのパラメータを適宜指定することで、表示するページングのリンクを作成して表示するって訳です。

【パラメータの種類】
①フォーマット「alt」
atom　・・・　Atom1.0形式（省略時の既定）
rss　・・・　RSS2.0形式
json　・・・　JavaScript Object Notation形式で、Javascriptで操作しやすい形式ですが異なるドメイン間でのやりとりは不可能です。
json-in-script　・・・　先のJSON形式のオブジェクト内にスクリプトが内包された形式で、異なるドメイン間でもOKな形式。
※　後述のコールバックパラメータを併用します。

②期間
更新日付（updated-min～updated-max）
公開日付（published-min～published-max）」
それぞれ個別に日時指定が可能で、各パラメータを組み合わせることで期間指定が可能です。
　日付形式　2010-03-01T00:00:00+09:00
この日付の形式にはURLとして相応しくない文字が含まれていますので、URLエンコードして指定する必要があります。
ex. 2010-03-01T00%3A00%3A00%2B09%3A00

③並び順「orderby」
updated　・・・　リストを更新日付の新しい記事順に取得します。（省略時の既定）
published 　・・・　リストを公開日付の新しい記事順に取得します。

④記事数「max-results」
数値を指定しますが、最大５００までしか取得できず、省略時は既定で２５となります。

⑤開始番号「start-index」
先の記事数が最大５００件までしか設定できないので、すべてのリストを取得するには何回かに分けて取得しなければならない場合があります。そんな時にこの項目に値を設定して、それ以降のリストを取得することができます。

⑥リダイレクトの有無「redirect」・・・FeedBunnerなどへリダイレクトするように管理ツールで設定されている場合に有効な項目です。
true　・・・　設定に従いリダイレクトさせます。（省略時の既定）
false　・・・　リダイレクト設定を無視してBlogger既定のフィードを取得します。

⑦コールバック「callback」
functionName　・・・　リスト取得後の動作を関数に記載して、取得後に自動実行させる関数名を記載ます。

これらのパラメータをJavaｓcriptでコントロールしてページングする訳ですが、続きはまた。。。

404エラー時にリダイレクトを制御するには

noreply@blogger.com (hyperhands) — Thu, 18 Mar 2010 08:22:00 +0000

Bloggerでサイトを作成した場合、記事を削除した時や存在しないURLへユーザがアクセスしてきた時に４０４エラー（Page Not Found）を検知するとBloggerが既定のエラーページを表示してしまいます。

この表示をカスタムエラーページに変更したいと思った場合、Bloggerではその設定機能が用意されておりません。

他にWebサーバを持っている方は、そのサーバへリダイレクトしてしまえば疑似的にカスタムエラーページを表示することが可能です。

※　カスタムドメインが設定されている場合に限定

Bloggerの管理ツール「設定＞公開」ページに以下の項目があります。

「はい」を選択すると以下の設定項目が表示されます。

「不足しているファイルのホストを使用しますか。」と、若干意味不明な項目ですが、これは４０４エラーが発生した時に、別ドメインの同じ位置（URL）でファイルを表示しようと試みるという設定です。

ここで設定できるのは、カスタムドメインで設定したドメインのサブドメインのみを変更できるだけなので、直接カスタムエラーのHtmlアドレスを設定できるわけではありません。

なので、Bloggerの他にカスタムエラーページを設定できるサーバを用意できなければ、ただの転送なのですが、所有しているのであれば、指定したサブドメインで運営されているWebサーバ側（IISやApache）でカスタムエラーページを設定してやれば良い訳です。

※　ここで用意するサーバは、さほどスペックを要求されるものではないので￥５００／月額のレンタルサーバなどで十分でしょう。

そのカスタムエラーページ内で、クエリ文字列を取得して、Googleカスタム検索機能を作って埋め込んでやり、当初ユーザがアクセスしたドメイン（サイト）内の検索結果でも表示するようにしてあげればユーザビリティも向上すると思います。

ASP.NET@自作専科

C#でHtmlパースして内容を取得する

Google日本語入力beta

サイトを訪問して頂いたユーザ層を把握しよう

Blogger Template Designerを使ってみた

ローディング高速化とサマリー＆ページナビゲーション機能

Blogger用 関連記事 ガジェット版

ソースコード

Yahooの検索エンジンにインデックスされない件

Bloggerでサマリー表示をタイル形式（ネットショップ風）にする②

適用方法

Bloggerでサマリー表示をタイル形式（ネットショップ風）にする①

新機能と注意点

ネットショップImage

Blogger用 ページナビゲーション ガジェット版

使用方法

ご注意

ソースコード

グラフィック使用のCSS

Blogger用 ラベルメニュー ガジェット版

Blogger LabelMenu Ver1.02

ご注意

ガジェットのソース

JavascriptやCSSファイルのホスティングを安価に

記事更新情報やコメント情報をヘッドラインとして表示する

ソースコード

ヘッドラインを表示するタイミングを制御するコード

ヘッドライン用のCSS

登録したキーワードをCSSコントロールする方法

対応するCSS

BloggerへASP.NETで作った問合せ画面を埋め込む②

C#ソースコード

BloggerへASP.NETで作った問合せ画面を埋め込む①

なぜ全てをASPで作らないか？

Bloggerでアンケートや問合せ画面を表示

フォームの作成

フィールドの種類

埋め込みサンプル

Bloggerで全ラベルの記事リストをメニュー表示する②

使い方

スクリプトファイルの内容

Bloggerで全ラベルの記事リストをメニュー表示する①

今後の課題

機能追加・・・2010/04/02

機能追加・・・2010/04/04

機能追加・・・2010/04/05

Bloggerでリストページ時に記事サマリー＆画像サムネイル表示

対応ブラウザ

改良コード

関数バージョンUp・・・2010/04/10

対応CSS

BloggerをGoogle検索結果風にページングする④

コードの実装方法

対応ブラウザ

全コード

BloggerをGoogle検索結果風にページングする③

BloggerをGoogle検索結果風にページングする②

BloggerをGoogle検索結果風にページングする①

404エラー時にリダイレクトを制御するには

Blogger用関連記事ガジェット版

Blogger用ページナビゲーション　ガジェット版

Blogger用ラベルメニューガジェット版