JSON+COMETでリアルタイム・ページビュー・カウンターを作ってみた

Fire 最近Linuxの勉強もかねて作っているのが、超シンプルなアーキテクチャーのHTTPサーバー。そこそこ動き始めたのだが、それだけでは面白くないので、サーバー側からイベントに応じてデータをPushできるCometの機能を足してみた。

 ストレステストのために、昨日からこのブログにこっそりとテスト用のIFRAMEを貼り付けてあったのだが(そのおかげで、バグを三つばかり見つけることができた―感謝、感謝^^)、安定して動き始めたので、見栄えを整えてこのブログの右上に貼り付けてみた。

 題して、「リアルタイム・ページビュー・カウンター(RPV Counter)」。Totalはこのカウンターをリセットしてからのページビューの数、Currentはその時点でこのブログを見ている人の数(ただしノイズあり)、PeakはCurrentの過去最大値だが、ページを再ロードせずとも、それぞれのカウンターが自動的にアップデートされるところが従来のものと異なる「おもてなし」だ。

【解説】
 右クリックで「ソースを表示」をしてもらえばJavascriptのソースを見ることができるが、サーバーの挙動を知らないと、少し分かりにくいので解説する。

まず最初に、

<script type="text/javascript" src="/~onload"></script>

がサーバーにページが表示されたことを知らせているのだが、その戻り値が

onLoadCallback({"Count":10, "Total":100, "Peak":15})

の様に、表示すべきデータを含んだ関数呼び出しである。ただし、この時点ではドキュメントはまだ準備できていないので、この時点では渡されたJSONオブジェクトをjsonInitというグローバル変数にコピーしておく。

 これをBODYタグのonloadイベントにひも付けられたload()関数がsetCount()にjsonInitを渡して最初の表示は完了する。

 ミソはそれが呼んでいるreload()。これが、Jason Levittが提唱するDynamic Scriptの仕組みで、動的に"/~listen"へのスクリプトタグを生成するのだが、これをサーバーがイベントがあるまで(この場合は、同じページを見ている人の数が変化するまで)保留しておく仕組みになっているのだ。そして、数値に変化があると、

updateCount({"Count":11, "Total":101, "Peak":15})

の様に、更新すべきデータを含んだ関数呼び出しが返って来る。つまり、実質的にサーバーからクライアントの関数呼び出しをしているのだ(サーバー側が呼び出す関数を決めているところがJSONPとは異なる)。updateCount()は、setCount()にサーバーから渡されたjsonを渡した後、再度reload()を呼び、サーバーからのイベントを待ちに入る、という仕組みだ。

【追記】 サーバー側は、Totalに関しては、/~onloadへのHTTP GETの数を数えているだけ。/~onloadへのHTTP GETに加え、クライアント側からコネクションが閉じられた時を「増減イベント」としてとらえ、/~listenへのHTTP GET待ちをしているクライアントすべてに対して、"updateCount(...);"を返している。Currentは、「増減イベント」のたびに、/~listen待ちのクライアントの数を数えて報告している(そのため、タイミングによっては実際の数より少なくなってしまう)。

【追記2】 ここで公開してから、サーバーが二度ほど落ちた。原因追求中。

【追記3】 まだCometサーバーは時々止めたりアップデートしたりする必要があるので、HTML/JS/CSSファイルは通常のウェブサーバーから取得するように変更。こうしておけば、Cometサーバーが止まっていても少なくともHTMLファイルを見ることはできる。ちなみに、Cometサーバーが停止しているときには、数字の代わりに"..."が表示されたままになる。


Line Rider で遊んでみた

 ちまたで話題のLine Rider。私もさっそく遊んでみた。こんな風にルールが極端にシンプルでありながら多様性が無限にあるゲームは私の感性にピッタリ。ゲームとしてのゴールがない点、コンテンツはユーザーが作る点、YouTubeにビデオ化した作品をアップすることが可能な点、など今の時代のエンターテイメントサービスを考える上で色々と参考になる点がたくさんある。

 そして、これが私の処女作(下の図の真ん中の矢印をクリックすると再生する)。転倒しそうでしない動きと、フィニッシュにこだわってみた。


ブログを利用して日本語から言葉を一つ消すことができるか?

Roppongi 「誰もやったことのないこと」するのが大好きな私だが、今日は、ちょっとした実験を思いついてしまったのでぜひともご協力願いたい。「ブログを利用して日本語から一つの言葉を消すことができるか」という実験である。

 「そんなことできるわけがない」と思う人が大部分だとは思うが、それはこのエントリーを最後まで読んでから判断して欲しい。

 消すべき言葉は、「ユビキタス社会」という言葉。なぜこの言葉が許せないか、ということ関しては、私のCNetのブログの「『ユビキタス社会』という言葉は誤用」というエントリーに書いたので、まずはそれをお読みいただきたい。

 もちろん、私一人の力で「言葉を一つ消す」ことなどできるわけがない。私の意見に賛成していただける方々に、ブログエントリー、ソシアルブックマークなどの形で、上のCNetのエントリーで述べた私の意見に賛同する意思を表していただくようにお願いしたい。そうすれば、「『ユビキタス社会』という言葉が誤用だ」というメッセージをIT業界の多くの人たちに届けることができ、この由々しき言葉を日本語から消し去ることができるかも知れない、というのが私の作戦だ。

 うまく行くかどうか分からないが、ブログを使って「言葉を一つ消す」ことを試みた人などいないはず。それだけでもこの「Web2.0実験室」で実験してみる価値があるというものだ。


Livedoor の「テレビ番組RSSフィード」で遊んでみた

Tvguide

 「新しいテレビの楽しみ方」にやたらと興味がある私としては、Livedoorが番組表のRSS配信サービスを始めて以来何か作りたくてしかたがなかったのだが、やっとプロトタイプを作る時間を見つけることができた。まずはその作品の発表から。

 「テレビ番組ガイド」(Javaのランタイムが必要)

 工夫した点は以下の4つ

1.上下左右キーだけで操作が可能
2.マニュアルを見なくとも使えるぐらい使い方が自明
3.非同期通信中でも操作が続行できる
4.携帯電話のように少ないメモリでもサクサク動く

 もちろんUIEngineを使っているので、携帯電話だけでなくさまざまなデバイスで動かすことが可能だ。

 ちなみに、サーバー側はPHP。Livedoorのサーバーから取得したRSSをXMLParserでパースし、PHP版のミニコンパイラでバイナリのレコードセットに変更してデバイスに返す、という仕組みだ。

 XMLParserの使い方が分からなくて半日ほど無駄にしてしまったが(ドキュメントが思いっきり不備--;)、それを含めて、のべ約二日でこのプロトタイプが完成。色々と勉強になったし、サンプルとしても提供できるし、何よりもプロトタイプ作りは楽しい。

 MySpaceとのケースでもそうだが、今まではパソコンでしかアクセスできなかったウェブ・サービスを、携帯電話やテレビなどさまざまなデバイスからアクセスしたい、というユーザーからの要求は高くなる一方だ。そんな時に、「ブラウザーじゃまともなユーザーインターフェイスを作るのは不可能に近いですよね。かと言って、JavaやC++でデバイスごとに作りこんでいてはコストがかかりすぎてビジネスにならない。UIEngineを使えばこんなものが簡単に実現できます。」と見せて歩く時に、こういったのプロトタイプが役に立つのだ。

Satoshi, the Chief Prototyping Officer


YouTubeに動画をアップロードしてみた

 最近は、YouTubeに関してのエントリーばかり書いている私だが、今まで自分自身でYouTubeに動画をアップロードしたことがないことに気が付いた。これではいけない。ちょうど庭の木にAmerican Robinが巣を作り、そこに小鳥が二羽生まれたのを発見したところなので、それをビデオに収めてアップしてみた。

 Quick Time Proで見せたいシーンを抽出したMPEG4の動画(約40MB)を(画質の調整やフォーマット変換などせずに)そのままアップロードして、YouTube側でフォーマット変換させたものがこれ。

使用ビデオカメラ: Sanyo Xacti DMX C5 (MPEG4 640x480 30fps で撮影)
編集ツール: Apple Quicktime Pro for Windows (シーンの抽出のみ)
撮影時間: 三脚で放置して約20分。そこから親鳥が来たシーンだけを抽出。

 とても簡単だ。ただし、アップロードしたファイルが40MBもあったため、アップロードにやたらと時間がかかった(他のことをしていたので全部見ていなかったが、数十分かかったと思う)。

 ちなみに、無料の動画編集ツールを色々と試してみたが、どれも好きになれないので、Apple から Quicktime Proを購入したが、ことMPEG4の編集に関してはフォーマット変換せずに直接編集できるので、使い勝手抜群。「コーデックがどうの」とか一切考えなくて良いのが最高。


北朝鮮のミサイル発射施設を見てみる

 今回の北朝鮮によるミサイル発射実験は、米国でもトップニュース。ニュースの一つに、ミサイル発射施設の衛星写真が掲載されていたので、Google Mapでも見れるものかと試してみると、さすがにミサイルの形までは分からないが、なにやらそれらしき施設があることは分かる。

 そこで、さっそく北朝鮮のミサイル発射施設をGoogle Mapで見るための簡単なMash-upアプリを作ってみた。下の衛星写真上のマーカー(ミサイル発射施設の場所)をクリックすると、そこの拡大写真をみることができ、さらにそこにあるマーカー(4つある)をクリックすると、それぞれの設備を更に拡大した写真を見られる、という趣向だ。

【追記】ソースコードを見たい人は、「北朝鮮ミサイル発射ページ」を開いてそのページのソースを見ていただければよい。


ブログエントリーをその場で編集するツール (MT限定)

060621_053734  今週はUIEJ初の開発合宿が二泊三日で開催されたのだが、私は一日だけ参加。私自身もペアプログラミングに参加したりととても楽しい経験をさせてもらった。

 今日、UIEJのオフィスに行って合宿の成果を見せてもらったのだが、その成果の一つが既に公開されているのでここで紹介。

 サービス名はYamaki(宿泊していた旅館の名前)。Movable Type ユーザー向けのWYSIWYG編集・推敲ツールだ。Firefoxで編集したいページのPermalinkを開き、ブックマークレットをクリックすると、その場でエントリーに変更を加え、保存することができるのだ。

 詳しくは、UIEJの開発者ブログのエントリーをご参照いただきたい。


YouTubeをブログに貼り付けやすくしてみた

 最近になってYouTube上のCMのリンク集のエントリーを二つほど書いたが、「おもてなし」の面で言えば、やはりブログエントリーそのものに動画を埋め込みたい。しかし、二つほど問題がある。一つはこのブログが使っているTypepadサービスがobjectタグを受け付けないこと、もう一つがYouTube標準の大きさ(425x350)がこのブログには少し大きすぎること。

 そこでちょっとしたPHPのプログラムを書いて、iframeを使ってこのブログに埋め込められるようにしてみた(TypepadはobjectタグはNGだが、iframeタグはOK)。大きさも、このブログ標準の画像の標準サイズの、幅320ピクセルで表示するように指定した。

 下がこの仕組みを使った例。画像のまんなかのプレーボタンをクリック(ただし、IEはセキュリティセッティング次第では2回クリックが必要)すると動画が始まる。

 iframeタグが使えてobjectタグが使えないブログがTypepad以外にあるかどうかは知らないが、少なくともTypepadユーザーにとってはこれはなかなか重宝するサービスではないかと思う。

 ということで、ここでこのサービスの使い方も公開。以下のIFRAMEタグの{ID}の部分を、表示したいYouTubeビデオのID(上の例では"N3dlYWfNVl8")に変更してエントリーの一部として貼り付けるだけだ。

<iframe marginwidth="0" marginheight="0" src="http://www.uicentric.com/php/youtube.php?id={ID}" frameborder="0" width="320" scrolling="no" height="278"> </iframe>


アマゾン・アフィリエイトの売り上げを一時的にだが数倍にする裏技

 このブログに「Web2.0実験室」というカテゴリーをもうけたのは数ヶ月前。「実験室」というと技術的な実験ばかりかと誤解する人がいるかも知れないが、そうではない。ウェブ・サービスを考える上でとても重要なのは、人間の行動心理学。新しいアイデアが浮かんだら、あれこれ悩む前に試してみて人々の反応をみる、という実験がリアルタイムにできる点が今の時代のもの作りの楽しさだ。

 このブログでも、今まで色々な実験を試してきた。「今日のひとこと」、「ラーメン大好き」というブログパーツを使った実験、「なぜFカップを持つグラビアアイドルが最近増えたのか、に関する一考察」というエントリーを使った「サーチエンジン最適化遊び」。ここまで書いて気がついた方も多いと思うが、三日前の、「ベストセラー・ブックス(4月~5月)」というエントリーも、やはり実験である。一般の本屋さんと同じ様に、売れ筋の本をベストセラー・ブックスという形で再度紹介することにより、実際の売り上げに変化が生じるものかどうかを知りたかったのである。

 実験前から、「多少は売り上げ増があるのではないか」とは予想していたのだが、実際には私の予想をはるかに上回る結果となった。分かりやすいように、過去10日間のこのブログを介した本の販売数をグラフにしてみた。

Bestseller

 ベストセラー・ブックスを発表した翌日が、いきなり普段の5倍の売り上げ。続く二日間も明らかに普段を上回っており、この因果関係は明らかである。やはり「おもてなし」は大切なのだ。

【追伸】 ちなみに、このエントリーを読んで、「自分のブログでもベストセラー・ブックスを発表してみよう」と考える人もいるだろう。その場合、ベストセラーの発表時にはトラックバックを送っていただき、数日後に実際に売り上げが増えたかどうかをコメントで知らせていただくとありがたい。


ユーザー参加型サービスの力

060327_014146  ブログのエントリーというものは、その性質上、どうしても古くなったものは読まれなくなってしまう。当然、コメントやトラックバックが付くのもエントリーを書いてから高々一週間ぐらいのものである。しかし、5ヶ月前に書いたにも関わらず、未だにコメントやトラックバックが付く、驚異的にロングランなエントリーがこのブログに一つだけある。

 「コミュニティ型『今日のひとこと』」というエントリーである。

 今年の1月に書いたエントリーにもかかわらず、先週だけでも、3つのコメントが寄せられた。どれも、「こちらのブログパーツをブログに貼らせていただきました」という内容である。つまり、今だにこのブログパーツはブログからブログへと増殖中なのである。コメントとトラックバックの数から判断するに、すでに100近くのブログでこのブログパーツは採用されている計算になる(ことわざの数も既に3000を越している)。

 このブログパーツがどんなブログに張られているかを時系列的に観察するととても興味深いことが分かる。初期の段階でこのブログパーツを導入したブログは主にエンジニア系のもので、明らかに私のブログを読んでいる人たちのブログである。しかし、最近は、どう見ても私のブログの読者だとは思えない10代の女の子たちの書いているブログにまで増殖しており、明らかにブログからブログへの増殖、つまりバイラルマーケティングの効果が出ていることが分かる。これこそが、「ユーザー参加型サービス」ならではの力なのである。

 しかし、このようにサービスとして成功し始めると、「どうやってビジネスに結び付けようか?」と考えたくなる私はかなりダークサイドの影響を受けているのかも知れない。10回に一回ぐらいの比率で広告と差し替えるように作り変えるのは簡単だが、そんなことが可能だと想像もせずにこれをブログに貼り付けた女の子たちはショックを受けてしまうだろうし、それはまずい。うーん、どうするルーク?