juietter
juietter　http://juitter.com/

「juietter」を使えば、Twitterのタイムライン表示を簡単に自分のサイトに組込めます。検索ワードやハッシュタグ、ユーザーでの絞り込みも可能。MovableTypeなどのCSMを使えば、ページの内容に関連するつぶやきを表示することもできます。jQueryを利用したもので、現在はβ版です（2009/10/23）。

juietter_twitter_タイムライン

設定は簡単！

  1. juietterのjuietter本家サイトでダウンロード（右上の緑のボタン）。
  2. ダウンロードした圧縮ファイルを解凍すると「juietter100」というフォルダができる。「juietter」とリネーム。
  3. サイトのスクリプトを置いているディレクトリに移動。
    例）ルート/js/juietter
    すでにjQuelyを組込んでいる場合は、本体はそれを使えばいいと思います。
  4. 設置するページの<head>に下記コードを埋め込む。
    <script language="javascript" src="juietterディレクトリ/jquery-1.3.1.min.js" type="text/javascript"></script>
    <script language="javascript" src="juietterディレクトリ/jquery.juitter.js" type="text/javascript"></script>
    <script language="javascript" src="juietterディレクトリ/system.js" type="text/javascript"></script>
  5. Twitterタイムラインを表示したい箇所に以下のタグを設置。
    <div id="juitterContainer"></div>
  6. 既存のスタイルシートに、以下CSSを追加記述。
    デザイン変更も自由です。
    （本家サイトからダウンロードしたものだと４行以上の表示になったときに崩れるので修正。） 
    
/*JUITTER PLUGIN CSS
-------------------------------------------*/
#juitterContainer{margin-bottom: 20px} /*Juitter container*/
#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */
/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */
/* Bellow the CSS for the avatar image  */
#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;height:48px;}
#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/
#juitterContainer .extLink{} /*CSS for the external links*/
#juitterContainer .hashLink{} /*CSS for the hash links*/
/* clearfix */
#juitterContainer .twittLI:after{clear: both;height: 0;visibility: hidden;display: block;content: ".";}
#juitterContainer .twittLI{display: inline-block;}
* html #juitterContainer .twittLI{height: 1%;}
#juitterContainer .twittLI{display: block;}
/* */
/*end of Juitter CSS*/

以上。これだけで、とりあえず動きます。
デフォルトでは「iPhone」「apple」「iPod」で検索をかけた結果が出ます。

juietterのカスタマイズ

絞り込みや表示件数の設定は system.js 内の上の方にある行の記述を変更することで行います。
設定変更の前に、文字化けを防ぐため、system.js の文字コードを「UTF8」にします。
（※タイムラインを表示させるHTMLの文字コードが「UTF-8」であることを前提に説明しています）

  1. searchType: searchWord,
    //searchWord は語句での絞り込み、fromUser はユーザーの絞りこみ、toUser は指定ユーザー宛のリプライを表示。 //ハッシュタグを指定するときは、"#" を "%23" と記述する。（例：#web → %23web）
  2. searchObject:"iPhone,apple,ipod",
    //キーワード名、ユーザー名の指定。複数はカンマで区切ること。
  3. lang:"all",
    //言語の設定。「ja」だと、取りこぼしがあるとのことです。
  4. live:"live-60"
    //更新間隔秒の指定。デフォルトは60なので１分おきに更新。
  5. total: 15,
    //表示件数。
  6. readMore: "Read it on Twitter",
    Twitter本家サイトに飛ばすリンクのテキスト内容。
  7. nameUser:"image",
    image でアバター画像、text で名前を表示。
  8. openExternalLinks:"newWindow",
    //newWindow リンクを押したとき、新しいウインドウで開く。sameWindow 同じ画面で開く。
  9. filter:"sex->*BAD word*,porn->*BAD word*,fuck->*BAD word*,shit->*BAD word*"
    //特定の文字を、指定の文字列に置き換える。表示させたくない文字を指定。

ページの内容に合わせたつぶやきを表示させる（MovableTypeを使用した例）

MovableTypeを使用したサンプルです。

  1. キーワード（半角カンマ区切りで入力）またはタグ、もしくはカスタムフィールドでjuitter用のフィールド（半角カンマ区切りで入力）を作り、絞り込みキーワードを指定します。
  2. HTML中に、IDを付けてDOMで１つに特定できるようにした状態でHTML内に設置します。
    見せたくない場合は、CSSで「display: none;」で表示しないようにします。
    キーワードを使う場合：
<div id="juitter-words"><p><$mt:EntryKeywords></p></div>
    
タグを使う場合：
<div id="juitter-words"><p><mt:EntryTags glue=','><$mt:TagName$></mt:EntryTags></p></div>
    
カスタムフィールドを使う場合：
<div id="juitter-words"><p><mt:テンプレートタグ名></p></div>
  3. system.js で、２行目の赤字の部分を追加挿入。
    前ステップで設置したキーワード（body閉じタグの上）を変数に読み込ませます。
    そして、searchObject:＿＿＿ の部分で、その変数を指定します。
    $(document).ready(function() {
	var juitterWords = $("#juitter-words p").html();
	$.Juitter.start({
		searchType:"searchWord",
		searchObject:juitterWords, ・・・以下続く

以上の設定で、指定したキーワードで絞り込まれたTwitterタイムラインをページに表示させることができます。

参考サイト