Twitter Badgesをカスタマイズして、もう少しブログパーツっぽくしました。カスタマイズした後のコードと素材を紹介しています。よろしかったら使ってください。それからTwitter気軽にaddしてくださいな。
気楽につながりが作れて、リアルタイムにちょっとした情報交換やおしゃべりができるのが魅力のTwitter、もっと自分に近い仲間を増やしてゆくには、今使っているブログにも情報を表示するようにすれば、もう少し早くネットワークが広がって行くのではないかと思ってTwitterのbadgeをカスタマイズし、提供されているAPIを使ってもう少しリアルに、そしてコンパクトに表示できるようブログパーツとしてカスタマイズしました。
今回は、そのカスタマイズの仕方と使っている素材を紹介・提供します。実際にこのブログにて表示しているTwitterブログパーツです。
情報取得には、JSONフォーマットを使って情報を表示します。
今回紹介するブログパーツはCSS設定ができる。javascriptライブラリーjQueryが導入・設定できることが必要となってきます。
表示する情報について
API Documentation - Twitter Development Talk | Google グループにTwitterAPIの情報が提供されています。最近では、[観] Twitter API 仕様書 (勝手に日本語訳シリーズ)が公開されているので把握しやすいかと思います。
このAPIを読んで見ると、XML,JSON,RSS,Atomのフォーマットで情報を取得することができ、タイプはいろいろとあって実際にブログパーツとして使えそうなものは、
- friends_timeline（自分の友達の発言最新20件取得）
- user_timeline(自分の発言最新1件から20件取得）
- friends(addしているユーザーリスト）
- followers(あなたをfollowしいるユーザーリスト）
といった感じです。
今回は、friends_timeline（自分の友達の発言最新20件取得）もしくはuser_timeline(自分の発言最新1件から20件取得）の情報を表示することを紹介します。この二つの情報の方がリアルタイムにコンテンツが変わるのでブログに表示するにはいいかと思います。
Twitter ブログパーツ表示に必要なもの
今回コンパクトに表示するために、javascriptライブラリーjQuery: The Write Less, Do More, JavaScript LibraryとプラグインのInnerFade with jqueryを使っています。
- jQueryDownload jQuery (compressed)19kb
- InnerFade with jqueryjquery.innerfade.zip (118kb)
上記サイトで配布されている2つのファイルが必要です。
jqueryスクリプト実装のためのコード
<head></head>内に上記スクリプトを読み込むためのコードを追加
無料ブログサービスで<head></head>内がカスタマイズできるなら、イメージ画像として上記二つのファイルをアップロードしてそのアドレスを指定すればいいかと思います。
プラグインInnerFadeの表示設定を指定するために同じく<head></head>内に以下のコードを追加します。
上記の設定は8秒間隔でフェードインフェードアウトで情報が切り替わります。
元のコードを覗いてみると、いろんな設定ができます。
- animationtypeは、'fade'か'slide'デフォルト時（設定なしで'fade'）
- speedは"slow", "normal", "fast"と3段階で設定可能
- timeoutは、1000で1秒として換算
- typeは、'sequence'（順序通り）'random'(ランダム）
ブログパーツコード
ちょっとTwitterのbadgeをカスタマイズしています。以下のコードを表示したい部分に貼り付けます。あなたのユーザーネームに書き換えてもらうところが2箇所あります。以下のコードはfriendsタイムラインを表示するコードです。
実際のブログパーツは、このブログで実装してるものと同じタイプです。
変更箇所
上記の14行目のコードの中であなたのユーザーネームに変更する部分が2箇所あります。
http://twitter.com/statuses/friends_timeline/あなたのユーザー名.json?callback=twitterCallback
<a href="http://twitter.com/あなたのユーザー名/">my profile</a>
friends_timelineかuser_timeline
14行目のスクリプトのアドレスでfriends_timeline（自分の友達の発言最新20件取得）を表示するには以下のアドレスでOK
http://twitter.com/statuses/friends_timeline/あなたのユーザー名.json?callback=twitterCallback
14行目のスクリプトのアドレスでuser_timeline(自分の発言最新1件から20件取得）を表示するには以下のアドレスでOK
http://twitter.com/statuses/user_timeline/あなたのユーザー名.json?callback=twitterCallback
CSS
以下のCSSを追加してください。表示がおかしくなる場合は、適宜ご自分にて修正願います。IE7.0/Firefox2.0/Opera9.0表示確認済みです。
CSSコード背景
背景もいくつか用意してあります。お好きな色を選んでそれにあったコードを追加してください。尚、ブログパーツコード14行目の3つのdiv要素のクラス指定を各カラーに変更する必要があります。今回の上部コードはskyblueで表示しています。その部分を画像と同じカラー名に書き換えることで変更でします。
PNGとGIF
一応上記のコードはgif指定してあります。透過png用のイメージも用意してあります。pngを使いたい方は、拡張子をpngに変更してください。
IE透過PNGに対応するためにXHTML & CSS - TwinHelixで紹介されているファイルかこちらのユンサンの／YungSang's: 透過PNG と IE と IE7 まとめでIE5.5+ PNG Alpha Fix v1.0RC4をスクリプトにして紹介されているiepngfix.jsを取得して、アップしてください。それから紹介されているコードを<head></head>内に追加してください。一応、<head></head>内に記述するスクリプトだけを表示させておきます。
個人的には、これから夏の季節へと移って行くので涼しげな演出ができる透過PNGがいいかと。
そのほかのタイプ
w468px×h60pxタイプもこちらから取得できるようにしています。twitter blog widget wide
遊びでiPhone版も作ってみました。あとは、スクリプト書ける方の協力があっれば、もっとリアルに演出できるといったところです。iPhone version twitter blog widget
ブログパーツ素材
ZIP圧縮しています。ウイルス等いれていませんが、一応解凍する前に検索かけてくださいね。
Twitterの国内サービスができないものかと
このTwitterかなりひろまっていますね。早く国内サービスが登場しませんかね。もちろん手軽に参加、利用できるタイプのものですけど。
携帯電話メーカーとのタイアップでシステムだけでも導入すると毎月ランニングだけでもいい収益が見込めそうな気がするんですけど。もちろん今回お遊びで作ったiPhone version twitter blog widgetと同じ感じで各携帯電話メーカーのモックタイプのブログパーツを用意して、各ユーザーの持っているタイプが表示できるようにする。
Going My Way: 携帯から Twitter のダイレクトメッセージ機能が利用可能になった モバトゥイッターでも紹介されていますが、携帯からもリアルタイムにポストやダイレクトメッセージが取得できるようにする。もちろんパケットは無料にしてみる。
私は、Firefoxでmike demers dot net ? tweetbarを導入しています。これでリアルタイムにみんなの発言やポストができています。これと似たようにカスタマイズに特化したブラウザ Sleipnir。上級者のために。あたりと提携して、ブラウザにも実装できるようにすれば、かなりコミュニケーションもとりやすくなるんではないでしょか？
いろんなマーケティングがここから発生してくるような気がします。
kizasi.jp:ブログから、話題を知る、きざしを見つけるみたいに、みんなポストの中からのキーワードを抽出してみてリサーチなんかにも使えそうな気がします。
どうでしょう？この携帯大国といわれている日本でマーケティング・リサーチ・SNSへ発展させる、それらから付随するデータ提供など。考えればいろんな展開が考えれるかと。素人案ですが、今よりもっとリーチが見込めるマーケティングができそうな。そしていい安定収益になりそうなシステムのような気がします。メンバさえ揃っていれば企画だけであっという間に売れそうなシステムになるとも思えます。
どこかのユーザーを多く持っているところがが乗り出していそうな。早くできませんかね（とってもシンプルなの←コレ大事）。
最後に
気軽にaddしてくださいな。＞Twitter My Profile
コメントする