JSON+COMETでリアルタイム・ページビュー・カウンターを作ってみた
Logitech FreePulse、 Bluetoothe 2.0 ヘッドホン入手

「足あとライブ!」

Agedori 昨日公開した、リアル・タイム・ページビューカウンター(RPV Counter)に関して、さっそくLingrの開発者の江島健太郎さんから「Webで読者が自分以外の人の存在の『気配』みたいなものが感じられるというのは面白いですよね。」というコメントをいただいた。それにに刺激されて今朝作ったのが「足あとライブ!」。自分の「気配」をもっと明示的に他の人に知らせる仕組みだ。

 このブログの右上のページビュー・カウンターの下にある「足あとアイコン」は、クリックすると色を変えることができるのだが、その情報がCometサーバーを伝わって、同時にこのブログを見ている他の人のアイコンにも反映されるようになっているのだ。

 ちなみに、Lingrとは、この「足あとライブ!」と同じく、CometサーバーによるPUSHの仕組みを使った「ブラウザ上で動くチャット」である。RPV Counterのデバッグ中に、クライアントから張りっぱなしにするソケットの数の上限に悩まされていた時に、「Lingrはどうやってそれを回避しているのだろう」と、「Lingr Room for Kenn's Clairvoyance」を開いてみたところ、たまたま江島さんがログインしており、色々と教わることができたのである(悪さをしていたのはやはりKeep-Aliveでした…ありがとうございます)。

 ということで、今日、このエントリーを見た方には、ぜひとも足あとをクリックしていただきたい。Let's 足あとライブ!

【追記】 ちなみに、同じブラウザーのウィンドウを二つ開いてこのサービスの動作を確認しようとすると、ブラウザーの構造上、HTTPリクエストが通らなくなって動作しなくなることがあるので要注意(同じドメインへのHTTPリクエストは同時に2までしか開けないことになっている)。もし一台のマシンでこのサービスがちゃんと動作していることを確認したければ、例えばIEとFirefox、の様に異なるブラウザーを二つ立ち上げて実験するのが確実である。

Comments

nefert-ity

足跡ライブ、楽しい〜(^^)/ほかの人の気配がこんなふうに感じられることってなかなかないですよね。こちらでチョコチョコ色を変えると、ネットの向こうでほかの人がまた変えてくる…面白い!遊び心いっぱいで素敵です♪

shiro

足あとライブ、試してみました。今これを書いている瞬間にもいろいろと足の色が変わります。
クリックしようとすると、直前に誰かにクリックされたり、ずっと色の変わらない(誰もクリックしない)足があったり。
知らない誰かと心理戦でもしているような感じ。
何かのゲームとかパズルに応用できそうな。

Otchy

いつも楽しく拝見しています。

足あとライブをより進めたようなコンセプトの、Flashで作ったこんなサイトがあって、以前はまっていたことがあります。
http://web.okaygo.co.uk/apps/letters/flashcom/

こういう、ネットの向こうに人を感じる仕掛けはとても楽しいですね。

masa

昨日のカウンタまでは良かったのですが、今日の追加機能の足跡は、リアルに変わらないので、いまいちかな・・・と。

連打しても、相手のブラウザでリアルに表現される訳ではないので、中途半端な気分になりました。

ベビドル

面白いですね。技術的にも、発想的にも。
こういったモノを発展させて
そのうち何かとてつもなく面白くて
インタラクティブでリアルタイムで
他人の動きを感じられるモノが
できるのでは?と期待しています。

技術面に関しては毎回毎回勉強になります。

だい

足跡ライブ面白いですね♪

50人以上もアクセスしてたら、もっとめまぐるしく変わりそうですけど、
これって、全てのクリックに対してPUSHしてるんですか?

Satoshi

>これって、全てのクリックに対してPUSHしてるんですか?

 はい。全てのクリックは逃さずPUSHしています。ただし、Cometの構造上、クライアントが一つのPUSHを受けてからHTTPコネクションを貼りなおしている期間(実測はしてませんが、100ms~200msかかっているようです)に次のPUSHが送られてしまうと、それをとりこぼすことになります。そのため、ユーザー数が多くなり、クリックが頻繁に(1秒間に数回以上)送られるようになると、取りこぼしが目立ちはじめます。

 この問題を回避する方法は色々とありますが、とりあえずはこのサービスに関しては、多少の取りこぼしがあっても、サーバーを軽くすることを優先した方が良いかと、こんな設計になっています。

 ちなみに、昨日リリースしてから、まだ24時間たっていないのですが、トランザクション数(処理したHTTPリクエストの数)が150万を越しました。予想を遥かに上回るアクセス数です。

だい

>はい。全てのクリックは逃さずPUSHしています。・・・

お返事ありがとうございます。クリック自体は全て受信できるって事ですか。

クリック数のカウンタ、付けたんですね。実際に自分のクリックがカウントされてるのかどぉか分かって面白いです♪

丁度今は15人くらいしか居ないんで、もっと人が多い時に試してみたいですねぇ。

こんちゃん

匿名,リモートで,間接的なコミュニケーション,素敵ですね.
ちょっとむかしを思い出しました.

高校時代に,窓際で窓から外を眺めていると,
遙か下方の倉庫の壁に光の点が動いていました.
当時,通称?エチケットブラシという,服のほこりをとるブラシと鏡がセットになって折りたためるアイテムが流行っており,光はその鏡で反射させている生徒によって作られていました.
ちょうど,みんなもそれに気づいたのか,光の点が10個20個と増えていき...
そして,それぞれ様々な図形の軌跡を描いていたかと思うと,一転に集まって光を強めたり,一人が集合からはずれると,みんな一気にはずれていったりと,不思議なコミュニケーションが発生しました. まるで足跡の変化のように.
そうこうしているうちに,ある先生が歩いてきてその倉庫の前を通りかかると...(その先生は,頭がかなり禿げていたのですが)
倉庫の前に来たとたん,すべての光が集中しました.
反射した光は,天空に柱となって上っていきました.

そんなことを思い出させてくれる、素敵コンテンツだと思いました.

Satoshi

>…反射した光は,天空に柱となって上っていきました.

感動的なシーンですね。ぜひとも映画化を^^

Satoshi

>クリック数のカウンタ、付けたんですね。実際に自分のクリックがカウントされてるのかどぉか分かって面白いです♪

 フィードバック、ありがとうございます。ちなみに、自分がクリックした場合、アイコンの色の方は(サーバー側からの通知を待たずに)すぐに変化させてますが、カウンターはサーバーからの非同期な通知を待って変化させています。色の変化とカウンターの数値の変化の間に若干の遅延が観測できるのはそのためです。

srv250s

「Web上で他者の気配を感じる」という意味では、
同一Webページを眺めている人同士でチャット可能な
yakalikeやchatsumといったアプリケーションがありますが、
これらはユーザの過疎に悩まされているように思います。
見知らぬ人とチャットするってのは敷居が高いうえ、
Webはフィールドとしては少々広すぎるようです。

足あとライブ!も同様の懸念を孕んでいそうな印象を受けましたが、
チャットほど敷居が高くないですし、
操作されなければ操作されないで、さほど意識されない存在なので、
ちょっとしたスパイスとして活用できそうですね。

aocky

足跡ライブ面白いですね。
何気なくクリックしてみたら
ちらちら色が変わってくという
不思議なコミニュケーション。

折りたたみブラシの光線宛
うちの中学でもはやっていました。
懐かしい。

jetblue

すいません。
思わずはまってしまい、
他人様と競って足あとを連続クリックしてしまいました。
Google Gadgetのインベーダーゲームより、
ぜんぜん楽しいですね♪

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)