にゃあ

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

開発動機

  • デュララに登場するチャットのインターフェイスが好き
  • リアルタイムチャットは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にします。

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


Author

Submenu

Recent Entries

XOOPS Cube Dev Ring

氷川 XOOPS Module 開発室

Recent Comments

Recent Trackbacks