にゃあ

Cometを実装していて竜ヶ峰帝人のウェブ技術に脱帽した

注:ネタバレがあります。

私が、デュラララ!!のチャットを再現する道のりは、竜ヶ峰帝人がダラーズのサイトを立ち上げたものを後から追っていくようなものだ。

竜ヶ峰帝人は、池袋でオフ会をしてあれだけのメンバーが集まるようなコミュニティサイトを立ち上げたんだから、きっとチャットもCometを実装したに違いない。彼の足跡を辿るようにして、私もCometの実装にとりかかった。Cometの実装パターンはいろいろあるが、その中でも一番修正が少なくて済みそうなXHR long-pollingという方法をとることにした。

この方法をPHPでやるとすると、AjaxでPHPにリクエスト → 新しい発言があるまでPHPが無限ループ → 発言が見つかるとデータレスポンスを返す → クライアントがデータを料理して表示 → 最初に戻る という流れになる。

PHPで無限ループするところでは、sleep(1)をかませるのが王道。一秒ごとに新しい発言がないかチェックするわけだ。しかし、このsleep()関数が第一の鬼門だった。チャットアプリは当然ログインしているわけで、セッションを張った状態になっている。このセッションが張られた状態で、sleep()の無限ループがつづいていると、その後に別のスクリプトに出したリクエストが帰ってこない。これは、どうしたものかと調べてみると、sleep()はスクリプト単位ではなく、セッション単位で機能するということ。とりあえず、sleep()に入る直前にsession_write_close()することで解決できた。

そして、Cometにおいて最大の難関にさしかかる。それはIEの対応。Cometは少なくても2コネクションを同時に使う。ひとつは発言のPOST、もうひとつは無限ループしてるスクリプトへのGET。IEだと、同時に2コネクションしか使うことができない。2個もあれば十分じゃないかと思ったら、チャット中に他のページに行くこと(3つ目のコネクションを作ること)ができないことが分かった。これはたぶんTCPの仕様じゃなかったかと思う。だからIEは間違ってない。FFやChromeが寛大なだけだ。

調べてみると、Cometではこの対策として複数のドメインをたらいまわす方法がとられているらしい。Ajaxではドメインを超えて通信できなので、IFRAMEの出番になる……。

ここまでのことを竜ヶ峰帝人は、高校生にしてやりとげたというのか!私が高校生だったころなんて、オブジェクト指向はおろか参照渡しもわからなかったと言うのに。帝人のウェブ技術に脱帽。


デュラララに登場するチャットの寄付額報告と1.0.2開示予定

カンパの現状報告

先日、カンパを募ったところ、実に多くの方からご寄付をいただきました。デュラララ!!チャットサービスは、ユーザのモチベーションに基づいたのサービスなので、ご寄付いただけるか不安でしたが、想像以上に皆様のサポートが手厚く感激・感動した次第でございます。多くの方が、10円〜500円の単位でご寄付をくださいましたが、協力しあうことでチャットサービスが持続かのうであることが確認できました。

2010/03/31 16:11の寄付額は以下のとおりです。

  • 現金:14,000円
  • ウェブマネー:6240 point

現時点で、半年分のサーバ代が捻出可能になりました。ご寄付くださった方、大変ありがとうございました!今後も、引き続き寄付を募りたいと思います。

コントリビューターとして名前の掲載依頼があった方の草稿(敬称略)

  • 天野龍司
  • 東京工科大学 インターネットラジオサークル M.R.E(リンク希望)
  • Nekosuke(リンク希望)
  • 紅子

その他19名

特にウェブマネーでのカンパを多くいただきましたが、私のアナウンスがよく伝わらなかったのか、ハンドル名を掲載していいか仰っていただいていない方が大勢いらっしゃいました。もし、寄付くださった方の中で、ハンドル名掲載の依頼をお申し付け忘れた方はお手数ですがメールください。

近日Dura 1.0.2ソース開示予定

先日、Dura 1.0.1のソースコードを開示しましたが、現在メジャーバージョンアップ版1.0.2を開発中です。パフォーマンス改善やバグ修正などを含んだものになります。主な仕様変更は以下のとおりです。

  • ログのXML化(jsonの廃止 → PHP 5.2から5.1でも動作するように)
  • 擬似Cometの実装
  • ローカリゼーションの対応(台湾・英語圏の方が翻訳版を作りたいそうです)
  • trust_path化
  • ユーザが部屋を作れる

また、パッケージングが遅れていてすみません。1.0.2リリースにあわせてパッケージングを行う予定ですので、もうしばらくお待ちください。


デュラララに登場するチャットと寄付のお願い

チャットサービスとして展開します

この度、多くの方に応援いただいたこともあり、開発者自らチャットサービスを提供することになりました。その第一歩として、過密状態にあった部屋制限を緩和し、50名から250名が利用できるスペースを拡大しました。この裏側では、月額200円の共用サーバから月額3000円の仮想専用サーバへグレードアップしてます。当初は、月額1万円する専用サーバを検討していましたが、専用サーバに移る中間的なステップとしてワンランク下の仮想専用サーバにすることにしました。今後もアクセスをが増えるようでしたら、専用サーバも検討していく次第です。

新しいURLはこちらです。

http://ikebukuro-dollars.com

課金はしません

さて、今回のサーバを拡張するのに伴って、課金を心配されている方がいらっしゃいます。ですが、心配には及びません。課金をする予定はありません。デュラララ風チャットルームは、趣味の一環で作ったので、そもそもお金儲けする計画はなかったのです。

代わりに寄付を受け付けます

とは言っても、年間36,000円ほどのサーバ代などの物理的なコストがかかってしまいます。私が趣味でこれだけのコストを賄うのは苦しいのが現状です。そこで、善意で寄付してくださる方を募りたいと思います。ひとりに3000円くださいということではなく、大勢から少しずつ(100人から30円など)あつまればいいと考えております。デュラララ風チャットを気に入って下さり、これからも使っていきたい方からは是非、寄付をお願いしたいと思います。

寄付をいただいた方は、お名前(ハンドルネーム)をコントリビューターとして、ikebukuro-dollars.comに掲載させていただこうと思います。

目標額は月3000円です

寄付をいただくに当たり、毎月の目標額を3000円に設定します。その3000円はその月のサーバー代に当てます。今日は3月30日なので、今からは4月分の寄付を募ります。

もし、その月に3000円集まらなかった場合、つまり赤字が出た場合、申し訳ありませんが、チャットサービスを終了させていただくか、サーバーとチャットルームを縮小させていただこうと思います。逆に、3000円を超えて寄付が集まった場合、つまり黒字が出た場合、その黒字の部分は翌月・翌々月のサーバー代3000円に当てさせていただきます。

基本的に、利益を出すことが目的ではないので、収支がプラスマイナス0になるべきです。それでも、なお黒字の分を消費できない場合は、サーバー拡張、開発費用に当てさせていただこうと思います。

寄付はこちら

銀行振り込み(こんな方法で寄付したほうがもっと楽というのがあれば教えてください)

WebMoneyぷちカンパ

WebMoney ぷちカンパ

ぷちカンパでご寄付くださった方は、ぷちカンパのメッセージ欄に記載して送ってくださいますようお願いたします。

  • ハンドルネーム(寄付者リストに掲載を希望するか、しないか、ひとことお願いします)
  • ウェブサイトURL(リンクをご希望であれば、ハンドルネーム/団体名にリンクを付けます)

銀行振り込み

  • 新生銀行 ららぽーと支店
  • 普通:0325068
  • ノザワ ヒデヒト

お手数ですが、銀行振込でお振込みくださった方は、以下を記載したメール()を送ってくださいますようお願い申し上げます。

  • お振込み様名(銀行振り込みの場合)
  • ご金額
  • ご送金日時
  • ハンドルネーム または 団体名(ハンドルネームをウェブサイトに掲載希望なら)
  • ウェブサイトURL(リンクをご希望であれば、ハンドルネーム/団体名にリンクを付けます)

最後に

デュラララのチャットを再現するに当たって、「作ってくれてありがとう」と感謝とお褒めの言葉を沢山頂きました。しかし、チャットルームを作ったのは私ではありません。私は単に「再現」しただけです。チャットルームを作ったのはアニメや原作であり、私はアニメの世界と現実世界を繋げる橋を作ったに過ぎません。

私は現在、無収入の学生ですが、デュラララの世界への通行料として、1000円ほどデュラララチャットルームの運営費に寄付したいと思います。そして、みなさんの力をお借りして、デュラララの世界に通じる橋を強固にしていきたいと考えています。皆さんの、皆さんによる、皆さんのためのチャットルームを作ってみませんでしょうか?


デュラララに登場するチャットを再現したその後

オープンソース化しました

チャットをダウンロードして使いたい、自分のサーバーにも設置したい、翻訳したいという方のために、パッケージングはまだですが、Google Codeにてソースコードを公開しました。

http://code.google.com/p/drrr-like-chat/

SVNが利用できる方はチェックアウトすると、ソースコード入手可能です。 ライセンスはGPL3です。

人数制限追加しました

できれば制限を加えたくなかったのですが、サーバーダウンが頻発し、こちらのブログにも影響が出たのでやむをえず参加人数を制限しました。当然、「部屋を増やして or 制限緩和して」という要望が出てくると予想していました。この問題は後述するサーバーの問題と関係しています。現状では月額数百円の共用サーバーを使っていますので、あまりパフォーマンスが良くないです。参加人数を増やすには、ひとまずパフォーマンスの問題(=サーバー)を解決しないといけないです。

チャットサービスとして展開するか

当初は、技術的なデモとしてデュラララ風チャットを公開したという経緯があります。幸か不幸か私は商売人ではないので、チャットを商品として売ったりとか、課金するつもりはありません。(なので、ソースコードを開示しました。)ウェブのリソースは基本的に無料という環境でやってきたので、ユーザからお金をとる気はないです。広告もあまり好きではないです。

現在は、デモを見に来るというより常駐してチャットを楽しむ人が多いようです。作った私としては、多くの人を楽しませることができて非常に嬉しく思っております。以下のような不透明な点が多く、今後、チャットサービスとして展開していくか悩ましいのが正直なところです。

  • このチャットを使い続けたい人がどれくらいいるのか
  • このチャットをいつまで使いつづけてくれるのか
  • Twitter、mixi、Skype、ブログとコミュニケーションが多様化したWeb2.0の世界でこのチャットは今後も使ってもらえるのか
  • サーバのコストは誰が負担するか

サーバーどうしよ

もし、チャットサービスとして展開する場合ですが、サーバーを選び直さないといけません。おそらく専用サーバになると思いますが、正直どんなサーバーを使うべきか検討がつきません。現在のサーバーのスペックを書いておきますので、サーバーに詳しい方がいらっしゃったらアドバイスをいただきたいです。

現状

今後

  • 専用サーバー?
  • 月額1万円〜数万円(私のような学生には...^^; 寄付を募ったとしてこれだけの額があつまるだろうか?シンプルな広告だったらユーザは納得してもらえるだろうか?

Comet的な実装

現在のチャットは1.5秒ごとにGETをする使用になっていて、負荷が高く多くのユーザに対応するには難しい技術的な弱点を抱えています。その点について、Cometという実装があるよと、ブログのコメントで教えてくださった方がいらっしゃいました。そのような実装方法があると知らなかったので、ありがたかったです。今後、チャットサービスとして展開する目処がつけが、Comet的な実装を試してみたいと思います。


デュラララに登場するチャットを再現した

開発動機

  • デュララに登場するチャットのインターフェイスが好き
  • リアルタイムチャットはJavaやFlashが主流だが、PHPでもAjaxを駆使すれば実現可能ではないかという技術的な関心

ニコニコでの反響

投稿してから1日ほどで3万回再生、2010/03/26現在ニコニコ技術部で3位になるなど、想像以上の反響がありました。「才能の無駄遣い」とか言われると期待していたのですが、「才能の有効活用」タグがついたのも予想外でした。

トラフィックが増大してサーバーが落ちました

年間2,500円の激安サーバーを使っていたので、あっという間に転送量オーバーとなり、「Service Temporarily Unavailable」が発生しました。普段、1日あたりの転送量が80MB前後のサイトが、1970MBまで増幅したのです。チャットサイトを立ち上げるつもりはなく、たんにサンプルを見せびらかす程度の考えでいたので、これほどアクセスがあり嬉しい悲鳴といったところです。

開設当初は、ニコニコ動画からのアクセスが多かったのですが、その後Twitterなどで広まったらしく、海外からのアクセスも増え、チャットに英語が飛び交ったりと、これも予想外のできごとでした。

ほんの出来心で立ち上げたサイトが、自分の想像とは異なった方向へいきつつあるので、怖くなり逃げ出すのも時間の問題です 笑

技術的な話

これ、どういう技術なの?とかC#なの?とかいろいろ疑問をお持ちの方いらっしゃるそうなので簡単に内部的な話をしておきます。まず、C#ではありません 笑。PHPというスクリプト言語で作りました。基本的な内部構造は、よくあるCGIのチャットと大差はありません。

また、デュララのチャットでは発言がポンと飛び出てくる効果があるので、それを演出するためにJavaScript(jQuery)を使いました。よくあるCGIチャットと異なるところは、jQueryで非同期通信を行っている点です。CGIチャットだと、投稿がある度に画面全体をリロードしますが、私の作ったチャットは非同期通信を行っているので、まるでSkypeやMSNメッセンジャーのような画面遷移のない感じが実現できています。

大まかなフローは下の図に示したとおりです。

バグと要望

バグの報告もいただきました。バグは暇なときに潰していきます。潰れるまでは「仕様」ということにさせてください^^;

  • LOGINをダブルクリックするとポスト画面が二重になる
  • ENTERを連打すると、同じメッセージがなんども投稿される
  • これ、手動でリロードしなきゃいけいないの?

要望もいただきました。どれもまともな要望です。これらも暇なときに実装します。

  • アイコンを選べるようにして
  • 人数制限つけて
  • アカウント認証制にして
  • PW製の部屋を作れるようにして
  • 表示するログの数に制限つけて OR 設定できるようにして
  • コメント連続投稿の対策をして
  • サウンドつけてよ

今後の展開

サーバーの負荷対策についてですが、第一に、一旦同時にアクセスできる人数を50人程度に制限してみます。本当は多くの人に使ってもらいたいのですが、サーバーの事情もあるのでやむを得ないです^^; 一時的なブーム感はありますので、トラフィックが減り次第人数制限を解除していこうと思います。もっといいサーバー使ってよ、という人からは寄付を募集中ですw

第二に、転送量が少なくなるように改良しようと思います。今は、毎秒に過去ログを30件拾ってくるような仕様ですが、今後は、新着コメントだけを取ってくる仕様にするつもりです。これにより、転送量が半減するのではないかと思います。

第三に、オープンソース化で負荷を分散しようと思います。アイコンなどのデザインが、著作権的にどうなのか怪しいですが、OpenPNEとかはmixiをそのままパクっていても訴えられないですし、適宜そのへんは対処しつつ、ソースコードを公開します。ライセンスはたぶんGPLにします。

最後に、バグや要望は受け付けますが、趣味の範囲なので、いつまでにどうするとは言いにくいです。気が向いたら対応していきます。



このブログの著者


Suinと申します。

@suin on Twitter

サブメニュー

最近気になるモノ!

WindowsからMacに乗り換えて半年ですが、Macは細かいところまで丁寧に作られていて、親切なユーザーインターフェイスが気に入ってます。iMacはMagic Mouseと洗練されたデザインのBluetoothキーボードがついてくるので、お得だなあ、なんて思ってます。私に買ってもいいという方、いたら教えてください 笑。

最近のエントリ

XOOPS Cube Dev Ring

最近のコメント

最近のトラックバック

ひとりで喜ぶログ
デュラララに登場するチャットを再現した (04/09)
ひとりで喜ぶログ
デュラララに登場するチャットを再現した (03/28)
http://www15.atpages.jp/~classicalstudio/wordpress/?p=50
getcwd()とdirname(__FILE__)は違う結果になるときがある (12/22)
Re:
CSSのtext-align:center;は<div>には通用しない (12/15)
XOOPS専門-株式会社RYUS - d3blog
Shiori 1.02 (12/02)
9deMaio.com - blog
Koins 1.00 (11/11)
インターネット覚え書き「ビボウログ」
CSSのtext-align:center;は<div>には通用しない (09/16)
hinoeuma1966
CSSのtext-align:center;は<div>には通用しない (07/03)
Suin.org
ブログ作ってみた (03/23)
Suin.org
ブログ作ってみた (03/23)