HTMLとCSSでここまでできる! GAE＆Twitter API開発 (1/5)
2010年05月11日 10時00分更新
※この記事は「Twitter＆Google App Engineで始めるWebプログラミング入門」の第4回です。過去の記事もご覧ください。
みなさんこんにちは。ふむふむソフトの飯島です。
前回の記事では、Twitterのタイムラインを表示するサンプルコードの処理内容を解説しました。Pythonの処理やGAEの設定など、やや複雑な説明になってしまいましたが、今回はHTMLとCSSを使ってサンプルをカッコよく変更してみたいと思います。また、ローカルの開発環境で動かしていたプログラムを、GAEのサーバーにアップロードして公開する方法も説明します。
Twitter APIを使うと、たとえばこうなります！（その4）
さて、今回も本題に入る前に、当社が作ったTwitter APIのサンプルを紹介します。今回はマイクロソフトのSilverlightを利用した、動きのあるWebサービスです。
Twit Galaxies
http://fmfmtw03.appspot.com/
「Twit Galaxies」ログイン画面
「Twit Galaxies」実行画面
見ての通り、もはや説明の必要もないくらい元ネタが分かりやすいサンプルで、某有名映画のオープニング風にTwitterのつぶやきを表示する、というものです。余談ですが、本連載の担当編集K氏が企画段階から一番食いついていたネタでもあります。
Twit Galaxiesの操作方法について簡単に説明しましょう。本連載のサンプルと同じようにTwitterアカウントでログインし、認証が完了すると、ローディング画面が表示されます。ロードが完了すると「三角形の再生ボタン」が表示され、ボタンをクリックすると自分のつぶやき（タイムライン）が表示されます。このとき、右上のテキストボックスに「Twitterユーザー名（例：fmfmsoft）」、または「ハッシュタグ（例：#test）」を入力して「GO」ボタンを押すと、入力したユーザーアカウントまたはハッシュタグのつぶやきを表示できます。友人のつぶやきや特定の話題を見たい場合はこちらを利用してください。
残念（当然）ながら音楽は再生されませんが、タイミングは合わせてありますので、曲冒頭の「ジャーン！」という“あの音”に合わせて再生ボタンを押すと、大変いい感じにタイトルがフェードアウトしてスクロールが始まります。ぜひサウンドトラックのCDなどを用意して楽しんでください。
■Amazon.co.jpで購入
ベスト・オブ・スター・ウォーズソニー・ミュージックジャパンインターナショナル
なお、このTwit GalaxiesはSilverlightを利用していますので、これまでに紹介したサンプルとファイル構造などは大幅に変わっています。とはいえ、アニメーション処理にSilverlightを使っているだけで、Twitter APIとはGAEで通信していますから、基本的な考え方はこれまでのサンプルと変わりません。もちろん、XAMLによるアニメーション処理や、SilverlightとJavaScriptの通信などのさまざまな技術を使っているので、また機会があれば解説したいと思います。当社のブログでも解説するかもしれませんので、ぜひチェックしてください。
