TwitterAPIを使ってマッシュアップするための知識まとめ

メモ

先日、Flash製Twitterブログパーツ「twitch」を公開しましたが、その時のエントリー（Flash製Twitterブログパーツ「twitchβ」配布開始しました。 - WoooFla@Blog）にも書いたように、僕はほぼプログラム初心者です。なので、これを作るにあたって、結構色々なことを調べたり勉強しました。

そこで、僕と同じように何か作ってみたいけど、どうすればいいか分からなくて一歩踏み出せないという人や、どうやって「twitch」が動いてるのかというのを知りたい人に向けて、参照したサイトや、twitchに使っているソースの一部を知識まとめとしてまとめておきます。僕自身まだまだ初心者の域を脱しないので、その点はご容赦くださいね！

TwitterAPIについて

TwitterAPIの仕様はここを見れば大体わかります。かなり詳しく日本語訳されているので大助かりです。

TwitterAPIをFlashで使う方法

TwitterAPIはcrossdomain.xmlのセキュリティ脆弱性を指摘され、それからFlashから直接参照できない状態にあります。

なので、FlashからTwitterAPIを読み込むためには、一旦PHPなどで読み込んで、それをFlashから参照する、という形をとらなければなりません。

上記のページは、FlickrAPIについてですが、要は同じこと。しかし戸惑うなかれ。PHP自体はかなり簡単です。

ここを参考にさせてもらって、twitchでは以下のようなスクリプトを組んでいます。

<?php

$req ="http://twitter.com/statuses/user_timeline/".$_GET['id']; 

header("Content-Type: text/xml; charset=utf-8");

echo file_get_contents($req);

?>

これだけ。あとは、idに対応したものを呼び出したいので、URLを「http://〜/***.php?id=d_forest.xml」のように指定してやればOK。つまり、?以降の「id=d_forest.xml」が、PHPソース内の「.$_GET['id']」に代入されるので、結果、「http://twitter.com/statuses/user_timeline/d_forest.xml」がリクエストされるということですね。

AS側はこんな感じ。

var twitterid = _root.id;

var requestStatus = twitterid + ".xml";

var twitterXML = new XML();
twitterXML.ignoreWhite = true;
twitterXML.load("http://ooze-flash.com/twitch/twitch.php?id=" + requestStatus);

「twitterid」という変数に「_root.id」を代入してるのは、HTMLからFlashVarsを使ってHTMLからFlashに値を渡しているため。詳しくは下記を。

また、XML解析は以下のページが分かりやすい。

HTMLからFlash内の変数に値を代入する方法

ASを使える人なら一般的なことかもしれませんが、僕はかなり苦労した点のひとつ。分かってみれば簡単なことなんですけどね。twitchに関して言えば、ブログパーツを配布するにあたって、Flashをパブリッシュした後にidを指定できるようにしないといけないという問題。これはFlashVarsをHTMLに書くことで解決します。

Flashでスクロールバーを実現する方法

twitchでもこれをカスタマイズして使わせてもらってます。めちゃくちゃカスタマイズしやすく、設置しやすい。他にも減速効果がついたスクロールバーなども配布しておられるので、状況に合わせて。

可変するテキストフィールドを実現する方法

APIから読み込んだTwitterの発言はFlashのテキストフィールドに割り当てて表示させているのですが、Twitterの発言は文字数に制限はあるものの、短かったり長かったりするので、それにあわせてテキストフィールドを可変させてやらないといけません。特に、ブログパーツは横幅を固定して、それ以上の横幅になったときには下に自動改行するようにしないといけない。それを実現する方法が紹介されています。

発言時間を「a minutes ago」のように変換する方法

TwitterAPIでは発言時間は「Sun Jun 01 13:31:13 +0000 2008」のようにしか提供されていません。これをTwitter公式のように「a minutes ago」とか「an hour ago」とかのように変換するには、twitchでは、一旦値をJavascriptに渡して変換し、それを再度Flashに読み込んで表示されるという方法をとっています。JavascriptとActionscriptを連携させるにはExternalInterfaceを使います。

日付変換のJavascriptはこちらのものを参考にさせてもらい以下のように書いています。

<script type="text/javascript">
function relative_time(time_value) {
  time_values = time_value.split(" ");
  time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset()*60);
  if(delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (45*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (90*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}
</script>

Actionscriptは以下のように書いています。

if(ExternalInterface.available){
var postTime = ExternalInterface.call("relative_time",timeValue);
dateObj.text = postTime;
}

timeValueにはTwitterAPIから取得した時間が代入されていて、dateObjはテキストフィールドのインスタンス名です。

その他Actionscriptについて参照したサイトなど

AS解説サイトとして言わずと知れたサイト。

XML解析のところでも載せましたが、その他にもFlash8の基礎から応用までが書かれているので勉強するにはもってこい。

ActionScript逆引きクイックリファレンス―5&MX&MX2004&8対応 for Windows & Macintosh

ActionScript逆引きクイックリファレンス―5&MX&MX2004&8対応 for Windows & Macintosh

Actionscript勉強用として買った本。「〜したい」という逆引きでその方法を探せるのでとても便利。

twitter公式っぽいフォント「ついってる」

最後になってしまいましたが、twichのロゴやtwitch本体に使わせてもらっているtwitterの公式っぽいフォントです。これでtwitterロゴの複製も楽々!?


ということで、勢いでまとめてみました。これらを参考にしてプログラム初心者な僕でもなんとかFlash製のブログパーツを作ることができました。初心者だからといって嘆くことはない！勉強道具は調べればそこら中に転がっています。さぁ皆もLet's try！開発楽しいよ！