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

メールアドレスが公開されることはありません。

関連記事

JavaScriptでSLを走らせる「SL.JS」を作りました

開発に関わっていて、UNIX(Linux)を触った事のある人は「SLコマンド」をご存知の方が多いのではないでしょうか? lsを間違えてslと打つとこんなのが煙を吹きながら走る sl(1) コマンドを作 …

YouTube Downloader の大幅アップデート(2009-03-22)

YouTube HD Suiteを公開してから、更新する予定はなかったYoutube Downloaderですが、久しぶりにアップデートしました。 前バージョンをインストールされている方は微妙な変化に …

AmaQuick v2.0.2公開(表示不具合対応)

ブロガー・アフィリエイター必須のAmazonアソシエイト補助ツール「AmaQuick」の不具合修正対応を行いました。 インストールはChromeウェブストアから拡張機能を追加してください。 Chrom …

祝!「SL.JS」ホッテントリ記念にバナー各種作りました

はてなブックマークでのホッテントリ御礼。 ・JavaScriptでSLを走らせる「SL.JS」を作りました 今までのブログエントリーで一番ブクマされた やまざきメソッドの紹介エントリー をあっさりと抜 …

no image

SBM Common API (ver1.1) ブックマーク表示画面、追加画面のURLリダイレクターを追加

先日公開した、SBM Common APIに機能追加を行いました。 追加したのは、下記2つのURLリダイレクターになります。 3)各SBMのブックマーク表示画面のURLにリダイレクトするURL 4)各 …

スポンサードリンク

スポンサードリンク