今日のPython: Bloggerで「もっと読む」を自動化する

今回は番外編です。Bloggerの「もっと読む」　「続きを読む」、つまり「追記機能」　について書きます。

Bloggerで標準で提供されている追記機能について

Blogger の追記機能は、記事内で「追記の区切り設定」ボタンを押すか、投稿テキスト内に次のように more を記述することにより設定する。

<!-- more -->

Blogger ヘルプ - 「追記機能」の概要を作成する

この方法は自由度が高く便利なのだが、ホームページ（メインページ）を表示させた時に、記事ごとに要約の長さがバラバラになることになる（下イメージ）。

※ 画面イメージの追記機能はカスタマイズしてある。「もっと読む」ではなく「続きを読む」と表記を変えてあるし、標準ではアンカーリンク・タグで控えめな表示だが、ダイダイ色のボタン風デザインになっている。

長さがまちまちの要約一覧は見ていて汚い。また more を記述する方法は記事をそのまま表示するため、余分な改行や空白が表示されることになる。もちろん長さを手動で合わせるのは可能だが、こんな機械的作業はコンピュータに任せられないだろうか？。他に、できれば記事中の画像はサムネイルとして格好良く表示させたら見栄えが良くなる。

そんな機能は無いだろうか？。それが今回紹介する、自動追記（要約）機能だ。

自動追記（要約）機能

自動追記機能をBloggerに追加する手法は、随分と前からあるようだ。機能追加は Bloggerのテンプレートをカスタマイズする方法を取る。
自動追記には大きく分けて二種類ある。Javascriptを使用する方法と、使用しない方法だ。これらについて簡単に解説してみる。

Javascript を利用する自動追記機能

Javascriptを利用する方法は、かなり以前からある。古いだけあっていろいろなコードがあるようだ。私もネットで１０種類以上見た。ただコードはほとんど同じだ。カスタマイズは、テンプレートのheadタグにコード追加するのと、<data:post.body/> を別のコードに置き換える。中にはheadタグ内にはコードを追加せず、<data:post.body/> のコード置き換えだけで実行可能なコードもあった（参考：ehowstuff.com）。Javascriptコードは、ホスティングを利用もしくはアップロードをすることが必要だ。
次にメリット・デメリットを挙げてみたい。
メリット

要約の長さやサムネイル画像の大きさをカスタマイズできる
Picasaウェブアルバム以外の画像もサムネイルできる

デメリット

テンプレートカスタマイズがやや複雑（修正２箇所）
標準の追記機能(more)と共存できない
　→　「もっと読む」が２箇所表示される
　→　デザインで設定する「投稿ページのリンクテキスト」の文字列が利用できない

Javascript を利用しない自動追記機能

Javascriptを利用しない方法は最近出てきたようだ。あまり詳しくはないのだが、Bloggerのフィード（feed）の機能のようだ。この方法もネット上では幾つか違ったコードはあるものの、ほぼ同一コードのようだ。テンプレート中の　<data:post.body/> を置き換えるコードとなっている。

メリット

標準の追記機能と共存できる
　→　記事中に more があった場合、記事の指定箇所を使う。
　　　無い場合、フィードの要約を使う。
　→　「投稿ページのリンクテキスト」の文字列を利用して表示する。
テンプレートカスタマイズがやや簡単（修正１箇所）
動作が速い（・・・と思われる）

デメリット

要約の長さやサムネイルの大きさはカスタマイズできない
Picasaウェブアルバム以外のサムネイルはできない

自動追記機能のコードについて

コードについてはネット上で盛んに紹介されているので、そちらを参照して欲しい。特に次のサイトは、Javascriptを使用した方と使用しない方を両方紹介している。
iBlogNet - Automatic Read More For Bloggers With Thumbnail
簡潔に書かれており、わかりやすい。私はJavascriptを利用しない方法を採用しているのだが、他のサイトで紹介しているコードの中には静的ページを開くと、なぜか「もっと読む」が表示されるものもあった。
サイトにはクリエイティブ・コモンズ・ライセンスの表記があるため、最後に簡単に Javascriptを使わない方の設定方法を書いておく。原作者は iBlogNet の Sahil さんです。

「デザイン」→「HTMLの編集」を開き、「ウィジェットのテンプレートを展開」にチェックを入れる。
ソース中から </b:skin> を探し、</b:skin> の直前に次のコードを挿入する。（もしくは「テンプレートデザイナー」→「アドバンス」→「CSSを追加」で挿入する）
```
.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}
```

さらにソースから <data:post.body/> を探し、次のコードと入れ替える。

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

「テンプレートを保存」ボタンを押して保存する。さらに表示の確認を行う。

日本のサイトでは Blogger の自動追記を紹介しているサイトは少ないようだ、私が発見したのは次のサイトだ。もしかしたら他にもあるかもしれない。

参考
ASP.NET@自作専科 - Bloggerでリストページ時に記事サマリー＆画像サムネイル表示
 I saw seashells. - Blogger Widgetで「続きを読む」を自動化（この記事はとても長いようですね）

今日のPython

ページ

2011年4月16日土曜日

Bloggerで「もっと読む」を自動化する - auto read more for blogger

Bloggerで標準で提供されている追記機能について

自動追記（要約）機能

自動追記機能のコードについて