twitterのブログパーツを作ってみたというか、Badgetのスクリプトをカスタマイズしました。jQueryを使っています。json形式のデータをリストに流し込んで、それをjQueryプラグインを使ってフェードするようにしています。
friendsタイムラインを読み込んでます。APIを見るといろんなパターンのデータを読み込むことができます。
サイズは、w468px × ｈ60ｐｘです。
classの切り替えスイッチにて設定してあります。同じリンクをクリックすることで以前の背景に戻ります。まだ、勉強中で動作がおかしい部分があります。
ちょっとTwitterのbadgeをカスタマイズしています。以下のコードを表示したい部分に貼り付けます。あなたのユーザーネームに書き換えてもらうところが2箇所あります。以下のコードはfriendsタイムラインを表示するコードです。
実際のブログパーツは、このブログで実装してるものと同じタイプです。
上記の14行目のコードの中であなたのユーザーネームに変更する部分が2箇所あります。
http://twitter.com/statuses/friends_timeline/あなたのユーザー名.json?callback=twitterCallback
<a href="http://twitter.com/あなたのユーザー名/">my profile</a>
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を追加してください。表示がおかしくなる場合は、適宜ご自分にて修正願います。IE7.0/Firefox2.0/Opera9.0表示確認済みです。
背景もいくつか用意してあります。お好きな色を選んでそれにあったコードを追加してください。尚、ブログパーツコード14行目の3つのdiv要素のクラス指定を各カラーに変更する必要があります。
一応上記のコードは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>内に記述するスクリプトだけを表示させておきます。
本当は、タブプラグインなどを使って他のタイムラインなども表示できるようにしたかったのですが、イベントハンドラーなどまだ私には、不可解なことばかりで実装できていません。noscript時にもデザインが崩れないようにリスクマネージメントができるスクリプトが書ける方に、こんな感じのものをさらに改良してもっといいものを作ってほしいです。
今回使っているプラグインはこちらです。
実装したいタブプラグインはこちらのプラグイン
このプラグインの"Custom HTML structure"を使えば、noscript時にもデザインが崩れる心配はない。ただ、タブをクリックした時にフォーカスされるcontainerに他のタイムラインやfriends_listなどの読み込みスクリプトを記述するなどといったことが、今の私のレベルでは無理なので、誰かに協力してもらいたいところ。
もし、協力していただける方が見えましたら、twitterを使って連絡くださいな。よろしくお願いします。my profile