Blogger Help Blogger Status Blog Search

Feed2JS の使い方

Feed2JS というサービスを使うと、ATOM や RSS などのフィードの内容を JavaScript でブログ内に表示させることが出来ます。

Blogger のレイアウトテンプレートだとフィードウィジェットも標準機能として使えますが、ウィジェットが利用できないエリア(投稿内など)にフィードを表示したい場合には、この Feed2JS が便利です。

クラシックテンプレートの場合は、フィードウィジェットそのものが使えないので、ウィジェットの代わりにもこの Feed2JS が重宝すると思います。

このページでは、Feed2JS の導入方法についてまとめておきます。


1.設定方法
Feed2JS サイトを開き、ページ上部の Build というタブをクリックして、コード作成ページに移動します。

URL
表示させたい RSSフィードの URL を記入します。Atom も可。
Show channel?
チャンネル情報(ブログ等のタイトルと説明文)の表示切替。yes …タイトルと説明文を両方表示、title …タイトルのみ表示、no …どちらも表示しない。
Number of items to display
記事を何件表示させるか。0 なら RSS に記述されている分全てを表示。
Show/Hide item descriptions? How much?
各記事の内容を何文字表示するか。0 …内容を表示しない、1 …内容を全て表示、2 以上 …その文字数分表示、-1 …内容を表示せずタイトルにリンクもつけない。
Use HTML in item display?
内容中の HTML の処理の仕方。yes … HTML を有効にする、no …テキストのみ表示する、paragraphs …HTML は無効だが改行は <br> に変換する。
Show item posting date?
日付表示の有無。yes …日付を表示する、no …日付を表示しない。
Time Zone Offset
タイムゾーンを設定。日本なら +9 を入力。RSS に記述されている時刻を使う場合は feed と記入。
Target links in the new window?
リンク先ページを表示するウィンドウを設定。n …そのまま同じウィンドウに、y …新しいウィンドウを開いて表示、popup … JavaScript を使ったポップアップウィンドウに表示。任意の文字列 …その名前のついたウィンドウに表示。
UTF-8 Character Encoding
データを UTF-8 でエンコードするかどうか。日本語の場合は必ずチェック
Custom CSS Class
スタイルシートを適用するためのクラス名設定。表示される div 要素が rss-box-XXXX というクラスになる。指定できるのは XXXX の部分。

上記の項目を確認して「Preview Feed」ボタンをクリックすると、RSS が実際にどのように表示されるかを確認することが出来ます。色々設定を変えてみて、お好みの表示設定を見つけてください。

「Generate JavaScript」ボタンを押すとコードが表示されるので、それをブログのテンプレートやサイトの HTML の、フィードの内容を表示させたい位置に貼り付けてください。


2.見栄えの変更
Feed2JS で作成するパーツには、スタイルシートを使って見栄えを細かく設定することが可能です。
スタイルを設定するには、ページ上部の Style タブから、スタイル設定ページに移動します。「Style Selector」のセレクトボックスを使って、スタイルのセットを確認することができます。表示されるコードを <style type="text/css"></style> とではさんで、RSS の内容を表示させたいページの HTML の head 要素内に貼り付けてください。
自分でスタイルシートを書いて、一からスタイルを設定したいという場合には、「CSS Classes」欄のクラス名を参考にしてスタイルを設定します。
この方法だと、一つのページにいくつものフィードを貼り付けて、それぞれ別々のスタイルを適用するということも可能です。その場合には1で「Custom CSS Class」を設定し、クラス名に対応するスタイルシートを書くようにして下さい。


おまけ.自分のサーバーに Feed2JS
以上の手順で、Feed2JS を使ったブログやサイトへのフィード表示が可能になるんですが、PHP が動作するサーバーであれば、この Feed2JS 自体を自分のサーバーに設置することも可能です。Feed2JS サイト上部の「Download」タブからファイルをダウンロードし、サーバーにアップロードください。本家サイトを利用していて時々表示が止まってしまうという場合には、導入を考えてもいいかも知れませんね。

Blogger でもカテゴリー

このページでは、旧 Blogger 向けにカテゴリーの導入方法を解説しています。新 Blogger(クラシックテンプレート含む)の場合は、標準のラベル機能(ヘルプ:投稿にラベルを付けるにはどうすればよいですか)をご利用下さい。

旧 Blogger にカテゴリー 今回は、こちらのページを参考にします。

ここで紹介されているカテゴリ表示は Google Blog Search の検索結果を RSS で出力し、それを Feed2JS でページ内に書き出すという方法をとっています。

おもしろいなと思ったのは、検索すべき単語(カテゴリ)をカテゴリ表示ページの URL 末尾のパラメータで飛ばし JavaScript で受け取り、それをソースにした Feed2JS の呼び出しスクリプト自体をスクリプトで書き出すという仕組み。そのおかげで同一ページで色んな結果を表示できるようにしているのです。

なかなか技ありの方法なんですが、ここで紹介されているスクリプトだと文字エンコードの関係で日本語のサイトでは使えないため、クリボウが少し改良しました。変更点は次のとおり。

変更点
  • ブログ URL の変数もパラメータで渡すように。
    (スクリプト内の変数を変更しなくてもいい、つまり JS ファイルを各自でアップロードしなくていい)
  • Feed2JS の設定を変更し、Unicode(UTF-8)で書き出すように。
  • Feed2JS メインはサーバーが落ちやすいので、ミラーを使用。
  • Unicode 以外のブログでも文字化けしないように。
  • 投稿日時順に結果が表示されるように。
  • 結果表示数の上限を 20 件から 100 件に。
  • RSS のチャンネルデータを非表示に。
  • スクリプトで書き込まれる div 要素に rss_box_category というクラス名を。
    (CSS で見栄えを変更することができます。)
…技術的な説明ばかりですみません。実は仕組みがどうなっているのかわからなくても別に問題ないのです。ので、次に使い方の方を。

利用方法 1.カテゴリ表示ページを用意する
新規投稿として、内容(ソース)に
<script type="text/javascript" charset="UTF-8" src="http://tools.kuribo.info/js/category.js"></script>
というコードを書き入れ、適当なタイトルをつけて公開します。<script> タグが承認できない旨の警告が出ますが、「この投稿に対してエラーを表示しない」という項目にチェックを入れると公開することができます。

2.カテゴリ表示ページを呼び出すリンクを作る
公開したカテゴリ表示ページ(記事単独ページ)の URL の末尾に、たとえば ?url=www.kuribo.info&tag=search というパラメータをつけたものをリンク先として、リンクを作成します。赤字部分は自分のサイト URL に、青字部分には表示させたいカテゴリ名にそれぞれ書き換えて使ってください。

3.エントリにカテゴリ名をつける
検索対象になるのは基本的にエントリ本文ですので、それぞれのエントリ本文にカテゴリ名を含めて下さい。記号や日本語をカテゴリ名にしたときには、2のリンクの青字部分にはその文字列を URL エンコードしたものを入れてください。ちなみに URL エンコードをするにはこのツールが便利です。UTF-8 で変換してください。
キーワードの検索対象をエントリ本文でなくエントリのタイトル内にする場合は、?url=www.kuribo.info&tag=intitle%3Asearch のようにキーワードの前に intitle%3A をつけてリンクを作成してください。


お願い
BlogSpot の方はしょうがないんですが、独自にサーバーを借りて利用している方は、できるだけご自分のサーバースペースに以下の JS ファイルを置いてご利用ください。http://tools.kuribo.info/js/category.js
その場合、利用方法1の script 要素、src 属性を JS ファイルを設置した URL に書き換えて下さいませ。

リンク作成ツール
カテゴリ表示ページを呼び出すリンクを、簡単に作成するためのツールも用意しています。ぜひご利用下さい。
カテゴリ表示ページ:
検索対象サイト:
検索語:
 

Blogger にもカレンダー

Blogger にはカレンダー機能が用意されていないため、カレンダーをブログに貼り付けたいという場合には、自分でウィジェットを追加したり(新 Blogger)、テンプレートをカスタマイズしたりする(旧 Blogger)必要があります。
※色々な部分を変更するので、テンプレートは必ずメモ帳などにバックアップしておいてください。


新 Blogger で JavaScriptCalendar を利用する 今回参考にしたのがこちら。

素晴らしいアイデアが満載のカレンダーです。(′З`)さんのアイデアに便乗して、クリボウもウィジェットを作成しました。こちらは JavaScriptCalendar ベース(オリジナルは Bloglendar ベース)のカレンダーです。

1.Blogger 管理画面「設定 > フォーマット」より、「Date ヘッダーフォーマット」を「2006-02-10」形式にして「設定を保存」ボタンを押します。

2.下のボタンのどちらかを押してください。上が日本語表記のカレンダー、下が英語表記のカレンダーになっています。

3.追加するブログやタイトルを確認した後、「ウィジットを追加」ボタンを押してください。これで導入は終了です。

このカレンダーには、いくつかオプションを用意しています。こちらのページでご確認下さい。


旧 Blogger で Bloglendar を利用する 旧 Blogger 用カレンダーのひとつめは、Bloglendar を利用する方法です。Blogger に導入するのに参考にするのはこちらのページ。

では導入の方法を見ていきます。

1.Blogger 管理画面「設定 > フォーマット」より、「Date ヘッダー フォーマット」を「Friday, February 10, 2006」形式にします。

2.このファイルをダウンロード、解凍し、できた3つのファイルを任意のサーバーにアップロードします。サーバーが用意できない場合も次に進んでください。

3.Blogger 管理画面「テンプレート」より、テンプレート head 要素内に、次のコードを貼り付けます。
<script type="text/javascript" charset="<$BlogEncoding$>" src="http://tools.kuribo.info/bloglendar/bloglendar.js">
</script><script type="text/javascript" charset="<$BlogEncoding$>" src="http://tools.kuribo.info/bloglendar/bloglendar-main.js">
</script><link rel="stylesheet" type="text/css" href="http://tools.kuribo.info/bloglendar/bloglendar.css" />
赤字の部分には、ファイルをアップロードしたディレクトリを入力します。サーバーが用意できない場合は、そのままで結構です。

4.テンプレートタグ <BlogDateHeader> を見つけ出し、直下に blogDate クラスの div 要素を挿入します。元々 <BlogDateHeader> 内に書いてあるコードはそのままにしておきます。
<BlogDateHeader>
<div class="blogDate" title="<$BlogDateHeaderDate$>"></div>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

5.テンプレート中、カレンダーを表示させたい位置に次のコードを書き入れて、ブログ全体を再構築します。
<div id="bloglendar"><!-- Bloglendar here --></div>
以上で Bloglendar の導入完了です。


旧 Blogger で JavaScriptCalendar を利用する 旧 Blogger 用カレンダーのふたつめは、JavaScriptCalendar(JSCalendar)を使用する方法。Blogger に導入するのに参考にするのは、こちらのページ。

このカレンダーを導入すると、カレンダーから全てのページにアクセスできるようになる代わりに、月別アーカイブページが利用できなくなります。最初に知っておいてください。
それでは導入の方法を見ていきます。手順がたいへん多かったので、少し内容をまとめて手順を減らしています。

1.Blogger 管理画面「設定 > フォーマット」から、「Date ヘッダー フォーマット」を「2006-02-10」形式にします。また、管理画面「設定 > アーカイブ中」から、「アーカイブの頻度」を「日別」にします。

2.このページ右下の「1.0(download)」というリンクをクリック、ミラーサーバーを選んで JSCalendar をダウンロードし、解凍、出来たファイルを全て任意のサーバーにアップロードします。サーバーが用意できない場合も次に進んでください。

3.Blogger 管理画面「テンプレート」より、テンプレート head 要素内に、次のコードを貼り付けます。
<style type="text/css">@import url("http://tools.kuribo.info/jscalendar-1.0/skins/aqua/theme.css");</style>
<script type="text/javascript" src="http://tools.kuribo.info/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="http://tools.kuribo.info/jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="http://tools.kuribo.info/jscalendar-1.0/calendar-setup.js"></script>
<script type="text/javascript"><!--
function calendar()
{
  var archive = document.getElementById( 'archive' );
  if( archive )
  {
    archive.style.display = 'none';
    var notes = {};
    var links = archive.getElementsByTagName( 'a' );
    if( !links.length ) return;
    var i, j, node, date, y, m, d;
    for( i=0; i<links.length; i++ )
    {
      node = links[i];
      date = node.innerHTML.split('-'); // YYYY-MM-DD
      y = parseInt( date[0], 10 ); if(!notes[y]) notes[y] = {};
      m = parseInt( date[1], 10 ); if(!notes[y][m]) notes[y][m] = {};
      d = parseInt( date[2], 10 ); notes[y][m][d] = node.href;
    }
    var dates = document.getElementsByTagName( 'h2' ), thisDate;
    for( i=0; i<dates.length; i++ )
      if( dates[i].className == 'date-header' )
      {
        var ymd = dates[i].innerHTML.split('-'); // YYYY-MM-DD
        thisDate = new Date( parseInt( ymd[0], 10 ),
                             parseInt( ymd[1], 10 )-1,
                             parseInt( ymd[2], 10 ) );
        break;
      }
    top.notes = notes;
    Calendar.setup(
    {
      weekNumbers : false,
      step : 1, // show every year in the year menus
      date : thisDate, // selected by default
      flat : 'calendar-container', // div element
      range : [ parseInt(links[0].innerHTML), y ],
      showOthers : true, // show whole first/last week of month
      flatCallback : dateChanged, // what to do on date selection
      dateStatusFunc: disableDateP // which dates to show/hide how
    });
  }
}

// Returns true for all dates lacking a note, false or a css style for those having one.
// Exception: today does not return true, even if it lacks a note. (improves navigation)
function disableDateP( date, y, m, d )
{
  var now = new Date;
  if( (y == now.getFullYear()) &&
      (m == now.getMonth()) &&
      (d == now.getDate()) )
    return false;
  return noteFromDate( date ) ? false : true;
}

function noteFromDate( date )
{
  var note = top.notes[date.getFullYear()] || {};
  note = note[date.getMonth()+1] || {};
  return note[date.getDate()];
}

function dateChanged( calendar )
{
  if( calendar.dateClicked )
  {
    var note = noteFromDate( calendar.date );
    if( note )
      window.location = note;
  }
}//--></script>
<style type="text/css"><!--
#archive {display: none;}
#calendar-container {width:200px;}
--></style>
赤字の部分には、ファイルをアップロードしたディレクトリを入力します。サーバーが用意できない場合は、そのままでも結構です。

4.body 要素の開始タグを次のコードに変えます。
<body onload="calendar()">

5.現在アーカイブを表示している部分(archive-list クラスの div 要素もしくは ul 要素)を、次のコードに差し替え、設定を保存、ブログ全体を再構築します。
<div id="archive">
  <ul class="archive-list">
    <BloggerArchives>
    <li><a href="<$BlogArchiveUrl$>"><$BlogArchiveName$></a></li>
    </BloggerArchives>
  </ul>
</div>
<div id="calendar-container"></div>
これで、JSCalendar の導入が完了です。

Blogger にも「続きを読む」機能

トップページやアーカイブページに、各記事の冒頭部分だけを載せ、記事の全文は記事単独ページで読んでもらうという、いわゆる「続きを読む」「Read More」機能について、このページで説明します。
この機能は Blogger 標準のものにはなっていませんが、Blogger Help にちゃんとその導入の仕方が書いてあります。
そこで、今回は以下のページを参考にします。

テンプレートタグを用いて、トップページやアーカイブページと、記事単独ページとで、スタイルシートを書き分けることで、それぞれのページに表示される内容の見栄えを変化させるというのが、この「続きを読む」機能の仕組みです。導入方法と記事の投稿の仕方を下に示します。


テンプレートのカスタマイズ
レイアウトテンプレートとクラシックテンプレートとで、テンプレートの変更箇所が異なります。

レイアウトテンプレートの場合、
1.管理画面「テンプレート > HTML の編集」ページを開き、「ウィジットのテンプレートを展開」のチェックボックスにチェックを入れます。
2.テキストエリアの中から次のコードを見つけ出し(青字部分は各ブログで異なります)、
<b:widget id='Header1' locked='false' title='BLOG NAME (Header)' type='Header'>
<b:includable id='main'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <data:title/>
      <b:else/>
        <a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
      </b:if>
    </h1>
  </div>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
下の赤字で示したコードを挿入して、「テンプレートを保存」ボタンをクリックしてください。
<b:widget id='Header1' locked='false' title='BLOG NAME (Header)' type='Header'>
<b:includable id='main'>
  <style type='text/css'>
    <b:if cond='data:blog.pageType == "item"'>
      .fullpost {display:block;}
      .readmore {display:none;}
    <b:else/>
      .fullpost {display:none;}
      .readmore {display:block;}
    </b:if>
  </style>

  <div class='titlewrapper'>
    <h1 class='title'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <data:title/>
      <b:else/>
        <a href='http://blogger-beta-widgets.blogspot.com/'><data:title/></a>
      </b:if>
    </h1>
  </div>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>

クラシックテンプレートの場合には、管理画面「テンプレート」から、テンプレート head 要素内(<head></head> の間)に次のコードを貼り付けます。貼り付ける位置は </head> の直前がいいと思います。テンプレート編集後には、ブログを再構築してください。
<style type="text/css">
  <MainOrArchivePage>
  div.fullpost {
    display: none;
  }
  div.readmore {
    display: block;
  }
  </MainOrArchivePage>
  <ItemPage>
  div.fullpost {
    display: block;
  }
  div.readmore {
    display: none;
  }
  </ItemPage>
</style>


記事を投稿するときにすること
・記事本文を省略する場合
投稿本文中の、トップやアーカイブページで省略したい部分を <div class="fullpost"></div> ではさみます。
「続きを読む」リンクは <div class="readmore"></div> ではさんで投稿してください。投稿する本文は下のようになると思います。
ここには記事冒頭の、トップやアーカイブページでも表示される文章を書きます。
<div class="fullpost">
  ここにはトップやアーカイブページで省略される(記事単独ページでだけ表示される)文章を書きます。
</div>
<div class="readmore">
  <a href="この投稿自体の URL">[続きを読む]</a>
</div>
リンクする URL は、記事を一度投稿して、記事の URL を確かめてからあらためて書き入れるのが一番確実です。

・記事本文を省略しない場合
前項の fullpost および readmore クラスの div 要素を使わずに、普通に投稿すれば全文が表示されます。


ちなみに
この「続きを読む」機能を導入すると、以降投稿の際に省略する部分を意識する必要が出てくると思います。そこでお勧めなのが投稿フォーマットの編集です。
新記事を投稿する際に最初から上記のコードが書いてあれば、省略部分の設定を忘れることもないし、コード入力の手間も省けるというわけです。
投稿テンプレートの設定は Blogger 管理画面「設定 > フォーマット」の「投稿テンプレート」欄で行えるので、上記のコードを入力しておくといいと思います。

Blogger に「翻訳」リンク

Blogger の Navbar にある NEXT BLOG というリンクをクリックすると、世界中の Blogger ブログの中で最近更新されたものに、ランダムで移動することが出来ます。逆に言えば、日本人だけでなく、外国の人たちも自分のブログを見に来る可能性があるということです。

そこで今回紹介するのは、日本語の投稿を英語に翻訳する Translate リンク。このリンクをクリックすると Google の 言語ツール が働いて、自動的にテキストが英語に翻訳されます。

Translate リンクのコードは

旧 Blogger の場合
<a href="http://translate.google.com/translate?hl=en&sl=ja&u=<$BlogItemPermalinkUrl$>">Translate</a>

新 Blogger の場合
<a expr:href='"http://translate.google.com/translate?hl=en&amp;sl=ja&amp;u=" + data:post.url'>Translate</a>

となります。

テンプレートのコードに <div class="post-body-footer"> もしくは <div class="post-footer"> というタグがあれば、</div> との間にこのリンクのコードを挿入するのがいいと思います。

この Translate 機能、何分機械が自動的にやっていることなので、正確な英語が出てこない場合があります。ヘンテコな英語が出てくるのもまたご愛嬌、あまり翻訳機能に期待しすぎないのがよさそうです。

Blogger にも「最近のコメント」

Blogger では、「コメントフィード」というブログ全体のコメントを記載したフィードを配信しています。このフィードを、フィードウィジェットや Feed2JS を使ってブログ内に表示すれば、Blogger ブログにも「最近のコメント」欄を設置することができます。


レイアウトテンプレートの場合
レイアウトテンプレート使用のブログの場合、Blogger 標準のフィードウィジェットを使うのが一番簡単です。@aka さんが詳しい記事を書かれているので、ぜひご覧下さい。


クラシックテンプレートの場合
クラシックテンプレートの場合、フィードを表示するためのウィジェットが使えないので、その代わりに Feed2JS を利用します。

1.まず、コメントフィードの URL を見つけます。
BlogSpot ユーザーは
http://YOUR-BLOG.blogspot.com/feeds/comments/summary
カスタムドメインユーザーは
http://YOUR-BLOG-URL/feeds/comments/summary
FTP 公開ユーザーは
http://www.blogger.com/feeds/YOUR-BLOG-ID/comments/summary
という感じ。赤字部分はそれぞれのブログのものに書き換えてください。

2.次に Feed2JS のコードを手に入れます。
Feed2JSBuild ページ を開きます。
・「URL」欄に手順1のフィード URL を入力、
・「Show channel?」に「no」を選択、
・「Number of items to display」に表示させたいコメント数(未指定だと 25 件)を入力、
・「Show/Hide item descriptions? How much?」に「0」を入力、
・「UTF-8 Character Encoding」のチェックボックスにチェックを入れて
「Generate JavaScript」ボタンを押します。すると「Get Your Code Here」という項目が出るので、そのテキストエリア内のコードをコピーしてください。

3.最後にコードをブログに貼り付けます。
Blogger 管理画面「テンプレート > HTML の編集」から、手順2のコードを貼り付けます。やっぱりサイドバー内が良さそうです。貼り付け後、「テンプレートの変更内容を保存」ボタンを押し「今すぐ投稿を公開」リンクをクリックすると、テンプレートの編集が反映されます。


ぜひお試し下さい。Blogger のフィード URL や、Feed2JS のオプションについてもっと知りたい方は、以下のページを参考にしてくださいね。

© 2006-2007 kuribo