Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

WebService 開発実績

「TwitGIF」TwitterのつぶやきをアニメーションGIF画像にしてくれるジェネレーター

投稿日:


TwitGIF
TwitGIF という Twitter Badge Generator を作りましたので公開します。
TwitGIF : Generate a GIF Animation Image Badge From Your Tweets.
※というかTwitterでつぶやいておいたら、もうブックマークされていましたね。
 ありがとうございます
TwitGIF は、Twitterのユーザー名を入力するだけであなたのつぶやきを簡単にアニメーションGIF形式のbadge(ブログパーツ)に変換してくれるジェネレーターです。
最大10件までのつぶやきを表示できますが、アニメーション形式でローテーションさせて表示させるため小さいスペースにも利用できます。また、出力されるコードはIMGタグなのでJavaScriptやFlashが使えないブログにも貼り付ける事ができます。
Twitter / yager
こんなのができます
ログインなどは不要です。最低限Twitterユーザー名を入力してボタンさえ押せば作成できますので試しにやってみて下さい。


使い方は簡単だと思うので特に細かく説明する事もないですね。
ここでは、ちょっと横道にそれた話し等を書こうかと思います。

開発の経緯

実はかなり前にtwignatureというTwitter用署名画像ジェネレーターを作っていて、更にJavaScriptのBadge(ブログパーツ)についての説明エントリーも書いていたので「Twitterのつぶやきを画像化」というアイデア自体は1年前くらいからありました。
で、実際サンプルも作ってみて最新のつぶやきを拾って画像化っていうのは簡単にできたんだけど良いデザインが思い付かなくてお蔵入りさせてました。デザインの自由度で言えばJavaScriptで何とでもなっちゃうし。
そんなこんなで完全に存在を忘れていた頃に百式にこんなエントリーがでてて(Twitsig)、「日本語化けるし、見た目が・・・」とガックリきつつ自分のサンプルを思い出したんだけど、自分のも今ひとつパンチがなく公開するまでには盛り上がらず。
更に、こんなBadgeも見つけて「やっぱり何件かのつぶやきをスライドして表示させるのはいいなぁ。でもFlashかぁ」とここでも煮え切らず。
少し、もんもんと考えてみて「省スペースに複数のつぶやきが表示できて、なるべく多くの環境に対応できる形式」を満たすのはアニメーションGIFなんじゃないかと思い付いた。
アニメーションGIFなんて、すでに枯れた技術で忘れ去られているかもしれないけど、枯れているからこそ色んな環境で有効だと思い実装に移ったというわけ。

仕組みについて

ちょっと技術的なトピックも書いてみる。たいそうな事じゃないけど。

  • JSON APIから呟きデータを取得
    • http://twitter.com/statuses/user_timeline/{ Twitter ID }.json?count=10
    • Twitterの公式JavaScript Badgeで使用されているAPIで公開されているものなので回数制限はないはず。
    • このJSON形式をパースして利用します。
  • Twitterの負荷対策とキャッシュ
    • Twitterは良く(落ちている|重い)のでJSON APIから10秒待ってもレスポンスが無い場合は処理を終了します。
    • データの取得にはcURLを使ったんだけどCURLOPT_TIMEOUTというオプションで最大実行時間を指定できます。
    • こんな感じ→curl_setopt($ch, CURLOPT_TIMEOUT, 10);
    • JSONの取得に失敗した時に、すでにBadgeが生成済みであれば使い回します。
    • データは10分間キャッシュしています。これはTwitterへのアクセスを減らすのと、レンサバの負荷を減らすのと両方が目的です。
  • PHPでアニメーションGIF生成

その他

既存のBadgeがいまいちだったので公開してみたんだけど、見た目はまだまだって感じですね。
やろうと思えばもっと細かいカスタマイズ指定ができるようにもできるんだけど、形、角、色を指定するだけでも十分かなと。入力欄に数字を直接入力するようなインターフェイスだとTwitter日本語化でようやく始めましたって人には敷居が高くなっちゃうかなと思ってやめました。
そう、一応最低限のカスタマイズ性をもちつつターゲットユーザーは「ライトユーザー」って事にしたかったんだよね。
冒頭に書いたけど、Twitterでつぶやいただけだったんだけど結構な数のBadgeが生成されているみたいです。
めずらしいのか、細長いOneLiner(横:468px、縦:30px)が人気のようです。
ブログのタイトル下にちょろっと表示するのに便利かなと思います。
背景色をブログのものと合わせれば上手い事なじむと思うのでやってみて下さい。
最後に、(ご意見|ご要望|バグ報告)などドシドシお寄せ下さい。
コメントとか、yager[ at ]creazy.netとか、@yagerまでヨロシクどうぞ。

-WebService, 開発実績

執筆者:


  1. snowWhite より:

    TwitGIFを使わせていただきます。
    Twitterも初めて使うのですが、TwitGIFのアイディアといい、使いやすさもステキだと思います。
    実はこちらを先に見つけてTwitterしました。
    ありがとうございます!

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ

久しぶりに twitter ネタです。 というかシツコク JavaScript badges のお話。 以前のエントリーで IE での日付表示がおかしい件に対応しました。 そのエントリーにフォローする …

no image

ブログのコメントに TypePad Connect をテスト中

このブログのコメント欄を TypePad Connect に切り替えてテスト中です。 ・TypePad – TypePad Connect Beta – Home 自分でも方針 …

no image

ページタイトルを取得するPipesを作りました

前に、こんなエントリーも書いているのですが、 ・PHPでWEBページのタイトルを抜き出すサンプル もっとお手軽にYahoo!Pipesで取得できるようにしてみました。 Pipes: getPageTi …

やまざきメソッド ジェネレーターに編集機能を追加しました

気がついたらやまざきメソッド ジェネレーターの公開から1ヶ月経っていました。 そこでサクサクやまざきメソッドを作れるwebサービスをつくっちゃいました。 やまざきメソッド ジェネレーターを作りました …

ツイポーートの使い方:ミイル画像を検索して食べ物テロまとめを作る

・Twitterまとめ・統計・レポートサービス : ツイポーート /twport さて、新バージョンのツイポーートで色々なまとめを試してみようと思っていますが、V3の大きな見どころである画像統計・画像 …

スポンサードリンク

スポンサードリンク