カテゴリ「Technology」のエントリ

Twitterのタイムラインを可聴化するChirp sound playerを作った

皆さん、Chirp していますか!ボクは相変わらず Chirp のある日々を楽しんでいます。Chirp がなければ出会わなかったであろう tweet ってのがけっこうあって、API の設計ひとつでユーザの行動にも影響があるなぁと考えると面白いです。

このまま Chirp がまっとうに進化していけば、あらゆる Twitter クライアントが既存の API から Chirp に移行し、誰もが即座に自分の tweet に対する反応等を知れるようになるでしょう。これに対してボクは何か働きかけようとは思いませんでした。

他に Chirp の可能性はないだろうか。模索していました。タイムラインに流れる tweet を数十秒遅れではなくリアルタイムに受け取れるようになったとき、何が変わるでしょうか。考えてたどりついたひとつの答えが「音」です。「つぶやき」とも呼ばれる tweet が人々の「おしゃべり」だとしたら、数十秒おきにまとめて、ではなく、リアルタイムに感じられるべきでしょう。

というわけで、Twitter のタイムラインを可聴化する Chirp sound player を作ってみました。

ChirpUserStreams => WebSocket にリンクがあります。

JavaScript で audio タグを生成して音を鳴らしている実装の都合から、Firefox の上でしか動きません。前回のエントリで ChirpUsersStream を WebSocket で閲覧するアプリを紹介したときには「Google Chrome でしか動かない」と書きましたが、今回は swf を間に噛ませて Firefox でも WebSocket が動くようにしています。

Chirp を毎日眺めていると、ユーザの行動習慣のようなものが見えてくるときがあります。「また○○○さんのハイパー follow タイムが始まった」「□□□選手の fav 無双だー!!」といった具合です。しかし、これを見つけるためには訓練が必要です。もっというと「目」が必要です。ところがボクの目はふたつしかなく、そのふたつを常に Chirp に割り当てていては職を失ってしまうでしょう。そこで「耳」を使います。

Chirp sound player では、Twitter ユーザの screen_name を用いて音階を決めています。screen_name が変わらない限り、ユーザの音階は固定となります。これにより、優れた耳があれば、ある程度、音だけでタイムラインの様子を知ることができるようになります。screen_name から単一の音階ではなくメロディを作るようにすれば、ユニーク性が増してもっと楽しくなるかも知れませんね。

そもそも「可聴化」という言葉は @negipo さんの2年前のエントリで出会い、書かれていることにも大きく納得させられたのでした。今になって読み返してみてもやはり面白い。

LDR上ではてブ数を可聴化するgreasemonkey、LDRHatebuCountListenableを書いた (polog)

実装について少し

JavaScriptで波をつくろう。リアルタイム波形生成&再生 - Yanagi Entertainment

@yanagia さんの上記エントリが素晴らしくて、刺激を受けた背景があります。今回は「JavaScript から任意の音階の任意の長さの音を出したい」が要望だったので、公開されているソースコードを大いに参考にして関数を作りました。

june29’s jsaudio at master - GitHub

HTML5 に触れたい!と思い、WebSocket と audio タグで遊んでみる、というところまできました。どんな工夫を取り入れたらもっと可愛らしく面白くなるだろうかなー。

今回分かったこと

音を扱う作業をしていると、作業中に BGM をかけることができなくて悲しい。

TwitterのChirpUserStreamsをWebSocketで垂れ流す

Twitter の ChirpUserStreams を WebSocket で垂れ流して閲覧できるアプリを作りました!WebSocket 対応ブラウザ(Chrome 等)でお楽しみください!WebSocket すごい!ユーザ体験が変わる!

ChirpUserStreams => WebSocket

Tweets and Events

ボク @june29@kei_s から見た世界を体験できるようにしてあります。ChirpUserStreams については、以前にエントリを書きました。

TwitterのChirpUserStreamsをごくごくしてみた

本家の API がベータ版であり、まだまだ不安定なので、たまにスクリプトの再起動をかけたりしながら動かしています。見てみたいけど「なんにも表示されないよ?」って方がいたら、@june29@kei_s に話しかけてみてください。対応できるかもしれません。

ご自身のアカウントで試したいという方は、Ruby で書いたソースコードならありますので、よかったらご利用ください。

ソースコード: june29’s chirp2websocket at master - GitHub

ChirpUserStreams を WebSocket に流すまで

システムの基本構成は以下の通りです。

基本構成

Twitter の ChirpUserStreams が「水道の蛇口」だとしたら、Ruby でつくったホースを蛇口につなぎ、ホースのもう一端に WebSocket のアタッチメントをつけました、というところ。protected な対象はホースに仕掛けたフィルタで除去します。Chrome 等の WebSocket 対応ブラウザでアクセスすると、まるで水のように tweet と event が流れてきます。面白いのは、すべてのデータは「フロー」であって、システム内に一切の「ストック」を持たない点です。ユーザが自由に蛇口とホースとアタッチメントを選べるようになったら本当に面白いことになりそう。

さてさて、せっかくなので ChirpUserStreams で遊びたい放題しようと思い、以下のような構成のシステムを動かしています。

全体構成

Ruby でフェッチした ChirpUserStreams のデータは、RabbitMQ に突っ込むと同時に mongoDB にも投げつけました。あとから好きなようにデータを解析できます。JSON 形式そのままで投げつけることができるので保存はとても楽です。自分用 buzztter や自分用ふぁぼったー、自分用twitter検索を作ったら面白そう!

RabbitMQ に突っ込むと、ここから分岐させて stream データを活用できるようになります。本家 Twitter からのフェッチは1本にしておいて(制限もあるので)、利用は何本でも自由に、ってのが良いですよね。

今回は、自分の tweet が favorite されたり retweet されたり、reply をもらったり follow されたときに、iPhone にプッシュ通知を送り、MacBook に Growl で通知するように仕掛けてみました。favorite/retweet/reply から5秒以内に iPhone が「ティロリン」と鳴る体験は、なかなか刺激的で面白いものです。im.kayac.com は、HTTP リクエストを iPhone のプッシュ通知に変換してくれるもので、今回のようなソーシャルアプリ以外にも、システム運用や様々な場面で活用できます!

メモ

ただただ ChirpUserStreams を curl で取ってきてコンソールに出力してキャッキャと騒ぎ始めてから、気が付いたらデータで遊び放題できるところまでシステムを組んでいました。ここ数日間で知った要素技術、それを実装したソフトウェア、利用したアプリケーション等のメモです。

いろんな場面で EventMachine が登場して驚いた。これからますます活用されるようになりそうだ。

まとめ

WebSocket って、正直なところ、あまりピンときていませんでした。恐らく「垂れ流してみたいデータ」がなかったからだと思います。それが、Twitter の ChirpUserStreams の登場によって「これで勝つる!」とシビれるに至りました。キラーアプリケーションというか、キラーデータ、キラーストリームといったところです。

ChirpUserStreams 面白い!どうか公式 API になってほしい!WebSocket 面白い!もっといろんなストリームを垂れ流したい!みんなも遊んでみよう!

TwitterのChirpUserStreamsをごくごくしてみた

Twitter API Wiki / ChirpUserStreams

例によって @kei_s@darashi が「わー」「たのしー」「きゃーきゃー」と騒いでいて感化されました。身近に新しいもの好きのハイセンスな人がいると日常が刺激的で楽しいなー。

ChirpUserStreamsってなーに

小池さんの説明が詳しいです。

高密度小池 / User Stream 時代の Twitter の過し方

followings の tweets がリアルタイムで流れてくる、ってのも確かに刺激的で面白いんですが、小池さんが言うように、受信時刻がせいぜい数十秒違うくらいです。ただ、この数十秒がユーザ体験にどういった変化を与えるか考えるのは有益だと思います。

それよりも面白いのは、followings の favorite や follow や retweet といったイベントが流れてくることです。将来的にこの API が標準化されて、クライアントアプリケーションでもこの辺りのイベントを扱えるようになると、ユーザ体験がリッチになるでしょう。

お遊び

@kei_sgist: 373523 を参考に、10行くらいのスクリプトを書いて流れてくるものをすべて保存してみた。4月27日と4月28日の分を漏らさず取得できたので、さっくりチャートを作ってみたよ。1時間ごとの tweets 数と event 数です。Google Chart Tools はなかなか使いこなせないのだけれど、こういうときに気軽に使えて重宝しています。

4月29日分を追加した。

Number of tweets (27, April)

Number of tweets (28, April)

Number of tweets (29, April)

Number of events

Number of events

Number of events

一応の考察。

  • tweet 数は、日本人の活動時間を反映しているように見える。昼休みもちょっと見える
  • favorite 数は、だいたい tweet 数と同じ推移の形に見える
  • follow 数は、時間帯に関係が薄いように見える
  • retweet 数は、総じて少ない。ちなみにこれは、いわゆる公式 ReTweet の数。非公式が愛用されているのだろう

ほいで、全体を貫いて最も重要だと思っていることは「これは、あくまでも @june29 の見ているタイムラインのお話にすぎない」ということ。Web エンジニアや技術好き、新しいもの好きのユーザを中心に、1500人ほどを follow しているボクの見ている世界は、こんな形をしている。それ以上のことは言えない。きっと、他の人のタイムライン、ユーザストリームは、また違った形をしていて、ユーザ間で比較したときにようやく本格的な考察ができるのだろう。

まとめ

ChirpUserStreams をごくごく飲んで遊んでみたよ。いついなくなるか分からない子だけれど、もうちょっと遊ばせておいてほしいな。他のユーザさんから見えるタイムラインがどんな形をしているか見てみたい。楽しそう。

SakuraPicsでタイムラインを舞い散る「さくら」を集める

SakuraPics という Web アプリケーションをつくりました!

SakuraPics

SakuraPics

この週末なんかは、本州の色んなところからポストされる桜の写真をめいいっぱい楽しむことができると思います!ボクの地元、北海道の桜の写真が流れてくるのは、もう少し先のことかなー。

桜ソングを口ずさみながら

ある日、自転車をこぎこぎしていたら @darashi さんから連絡があって、とってもいいテンションでアイディアを話してくれて、ボクは「いま、時間は大丈夫ですか」と返した。2人が恋に落ちるまでに、そう長い時間は必要なかった。

春の訪れを目前に感じる、3月のことでした。

それから丸半日くらいかけて、アイディアのブラッシュアップ、技術調査、周辺情報調査、関連情報調査、実態調査、プロトタイピングをこなした。実は、出来上がった SakuraPics のプロトタイプは当初描いていたものから大きく外れていて(これについては別途)、作業が一段落したところで「どうしたもんかねー」な状況に陥った。

そんな状況を変えてくれたのが、あとから合流してくれた @kei_s さんと @maicos ちゃんです。@kei_s さんは、ボクらが表現しようとしていたことを、ボクらとは別の方法で実現してくれて、行き止まりかと思っていたところに道を拓いてくれた。「蝶のようにmai蜂のようにcos」でおなじみの @maicos ちゃんは、本当に「蝶のように Haml 蜂のように Sass」を操り、まるで魔法のように SakuraPics の愛され力を一気に高めてくれた。

たったひとつのコミットが、力を失いかけていたリポジトリに、つまりプロジェクトに、生命を吹き込んでくれることがあるのだなあ。

メンバーが増えてからは、桜ソングを口ずさみながら、みんなノリノリで作業していた。Skype のボイスチャットでやり取りしながら、コミットしてプッシュしたときにサウンドロップを鳴らしたりなんかして、リズミカルな開発環境だった。

運用サウンドロップ

それと、Pivotal Tracker に今回初めて触れたのだけれど、第一印象として「すごくよかった」です。ボクが気付くに至っていない良さがまだまだありそう… 向き合ってみたい。

Pivotal Tracker

Skype で会話してアイディアを固めて、Pivotal Tracker で管理する。GitHub にリポジトリを置いて、Heroku にデプロイ。これが全部、無料で提供されているんですよ、そんなこと知識としては知っていたけれど、改めて恩恵を受けてみて、やー、ありがたいことですね。札幌と東京という距離の問題をこえてプロジェクトをドライヴするに当たり、これらの助けは大きかった。大感謝。

花びら舞い散る!

そんなこんなで、SakuraPics をリリースできました。日本各地から寄せられる桜の写真を、どうぞお楽しみください!

SakuraPics

にんじんバーグ

「高専カンファレンス 2009秋 in 東京」を終えて

先に書いたエントリでは,自分の発表については言及しなかったので,エントリを改めて書く.ボクがこの「釣り」発表で伝えたかったこと.

高専カンファレンスを通じてやりたいこと

「高専在学中の自分を救うこと」です.ボクは心の中では高専カンファレンスを私物化していて,あの頃の,技術の勉強をしたところで自分の将来がどうなるかまったく分からなかった自分を救いたい想いで活動している.

そんな自分に向けてのメッセージがあって,でもそれを例えば文章にして箇条書きにしてしまうと,5分もの間,会場にいる皆さんを退屈させずにアテンションを集め続けることはできない.だからボクは,いくつかの「キャッチーなフレーズ」と「魅力的な写真」,そして楽しいプログラミング言語である「Ruby」とそのライブラリたち,の力を借りて,5分間を乗り切ることにした.

言葉にはしないながらも,あの5分間にはメッセージを込めてある.それは,子供たちが大好きなお肉たっぷりのハンバーグに,なんとかして食べさせたいにんじんを混ぜ込むようなものだ.

ハンバーグとスタミナ焼き

とはいえ,高専カンファレンスに積極的に参加してくれているような感度の高い子たちは,自分の中で音を立てている「技術に対する何か」にすでに気付いているんだろうな.羨ましいやら,悔しいやらで,高専カンファレンスで出会える若い子たちが大好きです.

技術を楽しんで,自分の人生を楽しくすればよい

特に,若くしてその力を認められている人たちには,ときに「日本の将来のために」なんて言葉が贈られることがある.それ自体はとても名誉なことだから,素直に喜んでいい.

だけれど,そんなことはまったく考えなくていいと思っている.殊更,情報系を専門にして,インターネットや Web が生活の中に溶け込んでいる人たちにとっては,国境なんてものを意識することはあまりなくて,「日本のために」と言われてもピンとこないんじゃないだろうか.

何より自分のために,ときには自分の大切な人のために,技術を楽しんでいられたらそれでいいと思う.そうして素晴らしい成果が生まれたとき,それをどうやって国のために役立てるかは,そういうことを考えたい人が考えればいいじゃないか.

まとめ

あちゃー,やっぱり言葉にしてしまうと説教臭くなるなー.これからもにんじんバーグを心掛けて,メッセージを楽しく伝えられるようにありたい.