2011年10月4日火曜日

Twitter widgetに似たものをつくってみた

twitter widgetについては↓こちら
Twitter/Widgets
http://twitter.com/about/resources/widgets/widget_profile
ブログパーツをさがせ : Twitter公式ウィジェット4種
http://satokoto.blog10.fc2.com/blog-entry-2296.html

こんなやつです。

このパーツは見ていて退屈しない。おもしろい。
自分のサービスでも こんなのあったら夢広がるよねー。
ということで似たようなものを作ってみました。


で、できたのは↓こちら

情報ひとつずつ下にスライドダウンしながら、表示していきます。

詳細は↓こちら
[用途]
継続的に登録される情報を、すべてのユーザーに対して見せたいようなコミュニティサービス向けのガジェットです。


[実装]
javascriptでjsonファイルを読み込んで、
jsonファイルに記載されている情報をタイムラインに一つずつ表示しています。
jsonファイルの中身をすべて表示したら、再びjsonを読み込んで、画面を閉じるまでループします。

[jsonイメージ]
{"nick_name": "hoge",
"user_attr":"(男性/20代/東京都)",
"user_url":"http://hogehogehoge.co.jp/",
"user_image":"img/image_bigger.jpg",
"message":"神奈川で資材運搬のヘリが墜落・炎上 機長が死亡 - テレビ朝日"
},
{"nick_name": "hoge♪",
"user_attr":"(女性/30代/愛知県)",
    ・
    ・
    ・


[利用ライブラリ]
本家はjqueryなど使わず独自のjsでやっていると思いますが、私はjqueryで実装しました。

jquery-1.4.2.min.js
jquery.jsonp-2.1.4.min.js


[利点]
全ユーザーに同じ情報を見せるので、キャッシュやDBにリクエスト単位でアクセスしないという利点があります。
バッチで静的なjsonを生成すれば、全ブラウザは静的なjsonをロードできます。
そのためリクエスト数に対する耐性が高くAPI展開しやすい利点がありますね。
属性ごとにjsonを出しわけてjsで読み込むjsonを切り替えても面白いですね。


[ソース]
github


0 件のコメント:

コメントを投稿