jTweetsAnywhereはjQueryでTwitterの@anywhereを実現するためのプラグインですよ。タイムラインを表示したり、投稿フォームをいれたり、といったことがさくっと出来てすごく便利。
jQueryはJavaScript。ほんでもってこのプラグインもJavaScript。
だったら、無料ブログでもjsファイルをアップロードできれば、ブログパーツみたいに簡単にイケるんじゃないの？っちゅーわけで試してみましたよ。
結果はめでたく成功！
「jTweetsAnywhere」のDemoページのSample6を利用してできたブログパーツは、ここのサイドバーに飾ってます。
これでtwitterかSeesaaブログがオチない限り、このブログパーツは表示されるはず！
続きでは、Demoページの中でも、比較的簡単に設置できるものをご紹介。
キャプチャー画像はないので、Demoページは開いたままでご覧下さい。
まずはSample 1の「Some tweets from around Paris, France ...」
ええと貼りたい場所のgeocode（緯度と経度）を指定して、周りでツイートした人を表示させましょうってな感じ？
具体的には「東京タワーの周り5kmでつぶやいた人を表示させる」なんてことが実現できます。
いじる部分はココ。（以下さわる必要がありそうな部分だけを抜粋してお届けします）
searchParams: ['geocode=48.856667,2.350833,30km'],
count: 5
- 「searchParams」は、値が「緯度」,「経度」,「何キロ範囲」３つに分かれてます。
- 「count」はTLをいくつ表示させるか（つぶやきの件数）。
緯度と経度については、ジオコーディング(geocoding)で調べると便利。「東京タワー」とかざっくりした感じでも結果を返してくれます。
お次はSample 2の「Some recent tweets and a Follow Button」
Demoページを見るとわかりますが、特定の1人のつぶやきとフォローボタンを表示させるもの。
アイコンは表示されないタイプです。
username: 'tbillenstein',
count: 5,
showFollowButton: true
- 「username」は、表示させたいtwitterID。
- 「count」は、TLをいくつ表示させるか。
- 「showFollowButton」は、多分twitterのAPIキーを取得してサイトに組み込んでおかないと表示されません。が、特にエラーがでるわけじゃないからそのままでもよさげ。（どうかな？）
Sample3、4は、APIキーを取得せずに貼りつけても表示されないので省略。
Sample 5の「Supplying your own Decorator」
検索結果を表示させるっぽい何か？
日本語だけの表示は可能ですが、検索語句には日本語を入れるとエラーになります。
searchParams: ['q=twitterapi', 'lang=en'],
- 検索語句の指定は、q=のあとに入力。「q=twitterapi」となってる箇所を「q=blogparts」などなど。
- 日本語だけを表示させたい場合は「lang=en」を「lang=ja」に。
タイムスタンプは、きちんと日本の時刻で表示できたので変更しなくてもよさげ。
Sample 6の「Tweets from selected users」
このブログのサイドバーで使ってるタイプ。実は一人だけじゃなく、何人ものつぶやきをアイコン付きで表示させることができます。
username: ['twitterapi', 'ChromiumDev'],
count: 10
- 「username」は、表示させたいtwitterID。
カンマ区切りで複数人表示可能。自分だけなど、1人にしたい場合は「username: ['satokoto'],」ってな具合にしちゃえばOK。 - 「count」は、TLをいくつ表示させるか。
Sample7、8は、APIキーを取得せずに貼りつけても表示されないので省略。
順番逆だけど、jTweetsAnywhereのブログへの貼りつけ方
サイトの「Usage」で順を追って説明してあるので英語が読める方は、ぜひそっちで。（わたしはGoogle翻訳のお世話になりっぱなしレベルなので）
(1)準備するもの
- 無料ブログでjsファイルをアップロードできるのは、知ってる限りではここSeesaaブログとFC2ブログなので、そのどちらか。（他に無料であれば教えてください）
- jsファイルとcssファイル。
jTweetsAnywhereの「DOWNLOAD」と書かれたリンクの先にあるファイルの中の２つのファイル「jquery.jtweetsanywhere-1.0.0.min.js」「jquery.jtweetsanywhere-1.0.0.css」。（圧縮されてるので解凍が必要です） - jQuery library。サイトで３つ並んだjQueryのリンクのうちのどれか１つを、右クリックして保存。
(2)ブログへアップロード
Seesaaブログの場合は、jsファイルのアップロードも組み込みも問題なく、設置もさくっとできるわけですが、FC2ブログの場合は、スラッシュやピリオドが入ったファイル名はブログにアップロードできません。
よって、２つのjsファイルとcssのファイル名を変更の上、アップロードしなきゃならないところがちょっとめんどい。
- ブログにアップロードした、２つのjsファイルとcssのファイル、計３つのファイル名はメモしておこう。
(3)アップロードしたファイルをブログに組み込み
- サイトの「Usage」の「2. Include the Javascript and CSS resources in your page's<head>section」参照。
<head>から</head>で囲まれた中のタグを、ブログの同じくヘッダー内に貼付け。【注意】前述の「ブログへアップロード」でメモした３つのファイル名に変更して貼り付けます。
(4)サイドバーに貼り付け
ここからはDemoページの出番。
この記事の最初にずらずら書いた、sampleページの解説みたいな何かを見ながら、変更したいところは変更して、貼りたいところにコードをペタッと貼り付けるだけで表示されます。
アイコンサイズなど、見た目をカスタマイズしたい場合はCSSを変更する必要あり。うまく表示ができたら、あとは見た目をゆっくりカスタマイズしよう。
解説書かないのに奥の手の話
jsファイルはアップロードできなくても、普通のブログパーツ（JavaScriptやiframe）を貼れるブログだったら、jTweetsAnywhereのjsファイルをアップロードするためにSeesaaブログかFC2ブログを借りて、メインのブログにtwitterブログパーツとして表示させるという奥の手も。
その場合、メインのブログがiframeを貼れる場合は比較的簡単だけど、JavaScriptしか貼れない場合は、奥の手だけあって、ある程度の覚悟が必要です。
- jTweetsAnywhereからダウンロードした２つのjsファイルとcssのファイル、計３つのファイルを、FC2ブログかSeesaaブログにアップロード
- ブログパーツが表示できるよう記述したHTMLファイルを、FC2ブログかSeesaaブログにアップロード
- iframeを表示できるよう記述したjsファイルを、FC2ブログかSeesaaブログにアップロード
- 普段使ってるブログに3で記述したJavaScriptを貼り付け
これは、無料ブログでjTweetsAnywhereをtwitterのAPIキー取得せずにどこまでできるか試してみたよ的な記事です。
英語はもっぱらGoogle翻訳、JavaScriptに関しても表示できなかったら「これはきっとAPIキーを取得しないとダメなのね」と勝手に解釈したので、大きな間違いは教えてくれると嬉しいです。
「Twitterの@anywhereを実現するためのプラグイン」って書いてあるのに anywhere使わない方向ってどゆこと。
後日ふんばります。