にゃあ

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

開発動機

  • デュララに登場するチャットのインターフェイスが好き
  • リアルタイムチャットは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.asia)への言及が確認されないトラックバックは破棄しています。

トラバURL : http://suin.asia/trackback/454

コメントを書く

お名前* URL
本文*
合い言葉* ←「penpercoper」と入力して下さい。
* この記事の話題と関係ないコメントはどんな内容でも削除します。(移動できないので)

トラックバック

「デュラララ!!」のチャットルームを再現 ひとりで喜ぶログ (2010.03.28) #
「デュラララ!!」のチャットルームをPHPとJavaで再現された方がいらっしゃいました。 すげーな。 昨日、訪問した時は参加できたんですが、ブログに書く段階ですでにチャットルームが満室でした(泣)
「デュラララ!!」のチャットルームをiPhoneで試してみた ひとりで喜ぶログ (2010.04.09) #
仕事の関係で外出してきたので、ついでにマックでコーヒータイムを過ごしてきました。 当然、いつものようにiPhoneでWiFiアクセス。 ひととおり仕事の用事で利用した後、息抜きにニュースサイトなどを閲覧してから、ひさびさに以前お伝えした、「デュラララ!!」のチャット...

コメント

名無しα(2010.03.26) #
へー,てっきりC#だと思ってた・・・
制限がついちゃうのは少し寂しいけど,使ってみて面白かったー!
まぁ新機能の実装はゆっくりでいいと思いますよー
開発お疲れ様です~~
くるしぇ(2010.03.26) #
とても感動しました><
まさか、あのチャットがこうも早く実現されるとは・・・

有料の広告なし版とかなら、お金払ってでも使いたい
レベルですw
(2010.03.26) #
あのチャット作るなんてすごいですね!!
アニメ世界だけでしかできないと思っていたので感激です(∀)
でわ、お疲れ様でした~。
かるパス3世(2010.03.26) #
めちゃめちゃ感動しました!!
まさかあそこまでリアルになるとはw

今後のサイトの発展も期待させていただいます^^


開発おつかれさまです~-!
アオ(2010.03.26) #
早速チャットを拝見……というか、早速チャットを利用させて頂きました^^
もう、脱帽です。感動しましたよ。えぇ。

本当にお疲れさまです<(_ _)>
やっさん(2010.03.26) #
マジスゴいっす!
出来ればポンって音付けてくださぃー!!
ホントに出来れば。ですけど^^;
がんばってくださいー
774(2010.03.26) #
暫く http://anime2.kokidokom.net/durarara/channel/jp/ 使ってw
(2010.03.27) #
初めまして、
ニコから飛んでチャット使わせて頂いております^^

一つ、
報告?なのですが、
罪歌(ご本人なりきり)のコメントで一時的に荒れるので・・・;

何らかの対処、
出来たらでいいのでお願いできないでしょうか?;

失礼しました。
130(2010.03.27) #
http://76.xmbs.jp/246810-220650-ch.php?guid=on

ここの物をぜひ使ってください
ここに貼ってある画像は使っても構わないので
なおPASSWORDは何も意味ないのでwww
ENTERと書いてあるのも画像です
ENTER のとこ押すとチャットにLINKしてます

使う事になったらメールください
tujimuraisao@yahoo.co.jp
カッスラー(2010.03.27) #
頑張ってね。
きな粉(2010.03.27) #
これ本当にすごいですね!感動しました!

ちなみにどこに振り込めば寄付できますか?
中田太郎(2010.03.27) #
>ほんの出来心で立ち上げたサイトが、自分の想像とは異なった方向へいきつつあるので

なんというダラーズw
これからも頑張ってください、応援してます。
tec(2010.03.27) #
エディタで使用しているフォントをお聞きしたいです。
(2010.03.27) #
IEにコメ自動更新対応出来ない→F5連打→サバ落ち
という原因はあるでしょうか?
自動更新の対応をうまく行けばサバの負荷も減ると思います
七誌(2010.03.27) #
チャットルームのあらしをアク禁にしてほしいです。。。
アッシー(2010.03.27) #
凄いの一言です^^

考えてはみましたけど・・・まさかほんとにやってらっしゃるとは
素晴らしい技術力!

私も見習いたいと思います!
開発、乙でした^^b
みとり(2010.03.27) #
実装お疲れ様です。なんといえばいいのかわかりませんが本当ありがとうございます。そしてお疲れ様(2回目
ゼットン(2010.03.27) #
どうも、無理をしないようマッタリがんばってください
わったー(2010.03.28) #
オフラインしかつかってないですが感動しました!!
デュラララ好きの私としては涙目ものでした!

要望(ここで書いちゃいけないのかな?)なんですが、投稿時間があるとわかりやすいのではないかと?
本やアニメに似せるのはよいのですが(むしろ尊敬ものです)、いまや人気サイトのような状況なのではないかと・・・
まぁ利用者が多いのはここに書き込まれてる記事をみれば一目瞭然なわけで・・・てことで、自分としては日時時間が書いてあれば、本やアニメを超えた(まぁ超えなくてよい壁ですが)すごいものになるのでは・・・・

まぁ、なんであれ開発ご苦労様でした!
あsk(2010.03.28) #
再現率が凄かったです。楽しめました、ありがとうございます。
個人的には音付けつると重くなるのでいらないかと思います。。今後の展開を期待しています。頑張ってください。
ななし(2010.03.28) #
新装お疲れ様でした。非常にクオリティが上がっていて素晴らしかったです。
しかし、問題点が早速いくつかありました。

・コメントの重複が非常に多い。
・強制退去も非常に多い。
・仕方ないことかもしれませんが部屋の独占が起き、新参者が チャットを楽しめない。

宜しくお願いします。
パス付きの甘楽(2010.03.28) #
非常に面白いですね~。
ほぼ完璧にチャットは再現出来ていますね^^

出来ればサーバのスペックを教えて頂いても宜しいでしょうか?

寄付する場所を指定していただければ、私も含め多数の方が寄付なさると思いますよ^^
通りすがり(2010.03.28) #
その昔Lingrというチャットサービスがありましたが,HTML+javascriptでチャットを実現するにあたって,定期的に全てのクライアントがget(polling)するのでは,負荷が大きすぎてとてもじゃないですがユーザが増えた時に対処できません.
そこで,httpのkeep-aliveを用いて,コネクションを張りっぱなしにして,擬似的にサーバー側からのputを実現する技術があり,その一つの実装として「comet」というものがあります.
Lingrはこのcometを用いて,数万人規模のユーザに対処していました.
別に本格的にチャットサービスを始めるおつもりはないでしょうが,一度お調べになってはいかがでしょうか.
ロリ(2010.03.28) #
楽しませてもらってます。
お疲れ様~。気長に待ちます^^
ESTRAL(2010.03.28) #
開発お疲れ様です。こんなもの作っちゃうなんてすごいです。
動画を見てさっそく試させてもらいました。
凄いの一言です。

要望は出来れば原作にある内緒モードを実装してほしいです。
特定の人だけに見える発言みたいなやつです。
なつ(2010.03.28) #
何回か使わせてもらいました!
すごい再現度!尊敬します♪

50人制限は、ちょっと厳しすぎるかと。。。
私が使ったときは、大体13~の人数の時サーバーが落ちてました。
いろいろな人に利用してもらうためにも、1room10人までの制限にして、合計100人までの制限にしてもギリギリ大丈夫だと思いますよ^^

エラそうに言ってすみません;
参考にしてもらえれば幸いです^^
お疲れ様でした!
梅茶(2010.03.28) #
素晴らしいです。ありがとうございます。

私は一昨日から利用させて頂いていたのですが、
未だに「IEってなんですか?」とか「F5キー押さないと更新されないんですね・・・」なんていう書き込みが絶えないようです。

ですから、トップページに
「F5キーの連打がサーバーへの負担になります。」とか「自動更新されない方はGoogleChrome、Firefoxなどを使ってみてください。」とかいう注意書きがあればサーバーへの負担が減るかもしれません。

運営がんばってください。
ソーダ(2010.03.28) #
人数制限スゴくいいです!!!いいんですけど
すぐ満室になるので避難所とか欲しいです
無理せず頑張って下さい
あきぶ(2010.03.28) #
使ってみて面白かったです!

あまりに大量のコメントがアップされていく様には驚かされましたが(笑)

これから管理が大変でしょうが、頑張ってください!
糞男(2010.03.28) #
素晴らしいです!もっと入れる部屋増やしてください!お願いします!パスワード制いいかもしれないです!がんばって探します!
akira(2010.03.28) #
はいれませ~ん
まだ0回目です~
yajin(2010.03.28) #
使ってみて、とても楽しいし面白いです。素晴らしいです。
しかし部屋が少ないので多くしてくれるとうれしいです。
無理せず頑張ってください。
no name(2010.03.28) #
人数制限はどうかと。。。
ですが鯖のせいもあるんでしょうねぇ。。
落ち着いたら最初のようにしていただけませんか?
名無しん(2010.03.28) #
人数制限はいいのですが
1部屋5人で10部屋しかないと
すぐに満室になり、部屋の独占が起きて
なかなか入ることができません・・・

できればもう少し1部屋の人数と
部屋自体を増やして欲しいです
とまと(2010.03.28) #
一昨日から利用させてもらっています。とても感動しましたが、他の方が言っているように人数制限されてからまったく入れません。今日一日逐一サイトをみて空かないかみてましたがだめでした。何か対処の方をお願いします。
これからも応援しています。がんばってください。
大学院生(2010.03.28) #
ニコニコ動画で見て、あまりにもソックリな再現にびっくりしました!こんなすごいこと俺には出来ないんで尊敬します^ ^

でも、今日合計5回サイトをチェックしてるのですが、いつ行った時も全部屋満員では入れませんでした(涙


忙しい中申し訳ないんですが、もう少し、部屋一つ当たりの人数を増やして欲しいです・・・・・新装する前は10人以上でも大丈夫だったんで・・・

偉そうに行って申し訳ないんですが、是非お願いします!

後、寄付する場所を教えてください!是非寄付したいと思っています!

では、頑張ってください。応援しています!!!
内定取れ太(2010.03.28) #
とてもいいサイトを作ってくれて、感謝の一言ですw

しかし、できたら1room10人くらいにしてほしいです

鯖落ちより長い時間はいれないんでどうかお願いします!
たまちゃん(2010.03.28) #
メンテナンス前のチャット使ってました!
すごい再現度でビックリです。
しかしメンテンンスして部屋に制限ができたら
永遠に満員ではいれなくなりましたwww
部屋の数を増やすか入れる数を増やしてください!
ずうずうしくてすいませんm(__)m
ayame(2010.03.29) #
感動感動///素敵ねwwww
しかし
画像は少し異なっています
田中太郎は傷あとがありますwww
気にかけないで参考にすることができます
http://img413.imageshack.us/img413/1827/ppppp.png
http://img695.imageshack.us/img695/2932/seruti.png
http://img532.imageshack.us/img532/2994/81186084.png
akasa(2010.03.29) #
ルームを増やしてください!!
名無し(2010.03.29) #
制作お疲れ様です。
自分にはこんなこと出来ないので、すっごい尊敬します!

ずうずうしいお願いで申し訳ないんですが、アイコンをお借りしたいのできますか?><
suin(2010.03.29) #
> 名無しさん

> ずうずうしいお願いで申し訳ないんですが、アイコンをお借りしたいのできますか?><

デュラララ風チャットはGPL3ライセンスです。
http://drrr-like-chat.googlecode.com/svn/trunk/readme-ja-sjis.txt
http://suin.asia/2010/03/28/durarara_like_chat

GPL3ライセンスに同意していただけるなら、プログラムだけでなくアイコンも利用・修正・再配布できますよ。
名無し(2010.03.29) #
迅速なお返事ありがとうございます。
ライセンスを守って使わせていただきますね。

サーバーの件など、色々大変だと思いますが、凄く応援しています!
ぱっつぁん(2010.03.29) #
普通にパス制にしてやればおつることはありませんが、、、
やっぱりみんなが楽しみたいのでもっと鯖いいの使っていただきたいと思っています。
また感想を言わせていただきますとやっぱり「デュラララ」の世界観をしっかりと楽しむことができました。
ありがとうございます。
鯖が強化されることを願い又パスを特別配布などのイベントなどやっていただけるとさらにおもしろくなるのでないはでしょうか。。
2度目ですが
ありがとうございます。
WORLD(2010.03.29) #
ふたつほど質問を、LOGINしてもLOGINできません>< Why? なぜ?
次のうpはいつごろです?

課金でもぜひぜひやらせていただきたいですが、お金がない・・・><
僕個人としては、無料にしていただきたいです^^:

最後に一言   あなたは神!!
(2010.03.29) #
オフライン版のほうがしっかり動作しないようなので一応報告しておきます ちなみに狐です
彩乃(2010.03.30) #
感動しました!
   
 お疲れ様です(*´д`*)
障り猫(2010.04.01) #
動画を見て、すぐに利用させてもらいました^^

すごいです!

そして、開発ありがとうございました!!
水無月(2010.04.02) #
感動しましたっ!
すごいの一言に限りますw
お疲れ様でーっす^^
ユキダルマ(2010.05.10) #
内緒モードとかは、つけたりしないんですか?
めやすばことかも
ユキダルマ(2010.05.10) #
ついしん
チャットに入らなくても会話
を見れるようにして欲しいとゆう声
があります
Pちゃん(2010.05.19) #
拝見させていただきました!
すごいですね さすがです

ひとつ 疑問なんですが…

ほかの人のコメントが出るたびに
打っている途中の言葉が消えたり
ENTERキーでかってにコメントしてしまったりするのですが
私だけなのでしょうか?
まま(2010.05.19) #
おおすごいwwこれはすごすぎる作るのがとてもうまい・・・・
ama(2010.05.19) #
どうやってダウンロード見たいのできるのでしょうか?
霧生ハルカ(2010.05.27) #
実際自分は中国の人間なんのですが、日本語で別の方とお喋りするのかどっても楽しい。最初このチャットを見つけだの時びっくりしましだ、なんがすごいなと。
開発ご苦労様でした、もしなにが力になれることがあるのなら、言ってください、みな力になりますよ~
罪華(2010.05.28) #
こんにちはー
タカナ(2010.06.06) #
すげええええエーーーーーーーー!!!!!!!!
かれん(2010.06.28) #
すげぇwww
かい(2010.07.03) #
バキュラのアイコン増やして欲しいです!
(2010.07.05) #
悪質な嵐がいるのですがどうしたら><
(2010.07.29) #
皆さん帝國ダラーズに入りませんか?
luna(2010.08.08) #
アイコンなんですが、バキュラがありました。
よかったらもらってください。

http://dollars-sns.exout.net/dura/css/icon_bakyura.png
獅子の遺志を継ぐもの(2010.08.08) #
メアド交換や電話番号交換って違反じゃないんですか?
毎日のようにそんな部屋を見かけてすこしこわいです・・・。
しかも中学生が主に参加しているようで、たまに個人名も出ています。
教育的にも良くないとおもいます。
完璧に対処するのは無理かもしれませんが、部屋名だけでも規制がかかるような仕様にならないのでしょうか・・・?
舞流★(2010.08.09) #
一言、すごい!!
リアルで実現できるとおもいませんでした!
リアルに夢をありがとうございますw

ほんとうにおつかれさまですww
餡琥雫抹(2010.08.13) #
はじめまして。
久しぶりにチャットに来てみたんですが;;
なんだか、入れなくなってしまいました;

一旦パソコンの電源を切ってみたり、待ったりしてみたんですが、入れません><
わたあめ(2010.08.13) #
初めまして、
いつも楽しく利用させていただいています。
初めてきたときは本当にびっくりしました。
こんなに忠実に作ってくださる方がいるとは。
本当にありがとうございます。

えと、
今日はお昼ごろまではチャットに入れたのですが
何故か上の方と同じだと思うのですが
今はエラーが出てチャットに入れませんでした。
色々やってみたのですが、解決しませんでした;
みゃみゃこ(2010.08.13) #
入れません;;
なにやら…
部からログインを試みたなどの原因でエラーが発生しました。

とかいうのがでてくるのですが…
まだ1回も入ったことがないのですか…
どうしたらいいのでしょうか?
「満員」ということですか??
黒雲(2010.08.13) #
はじめまして、黒雲と言います。昼間までは、僕もわたあめさんが言うようにログインできたんですが、今、家に帰ってきてから、全然ログインできません。外部からログインがどうとかってやつで、エラーが発生したらしいんです…。メンテナンス中ですか?
こころ(2010.08.13) #
ええと、今デュラララ!!チャットを利用しようとしたのですが、「外部からログインを試みたなどの原因でエラーが発生しました」と表示され、何度やり直してみても入室ができません。今まではしっかり入室できていたのですが…。
他にもそうなっている方がいるようで、私は心当たりも何もないので不安になっています。

何かPC自体に問題があるのでしょうか?どうか回答をよろしくお願いいたします…。
バキュラ(2010.08.13) #
僕もさっきまではいっていてww

その後用事があったんで入ろうとしたらはいれませんww

皆さんもそういう症状があらわれているということでとてもホッとしています^・w・^「

サーバーに何か起きたのでしょうかね^^;

このチャットは管理人=サーバーさんが常にあるらしいです。

そのため皆さんが「ポスト」とおしたのを一つ一つサーバーさんが操作しているらしいですよ^w^「

今日はサーバーさんもさすがに疲れてしまい他のサーバーに応援でも頼もうと試みたところでそれが親会社に悪用とみなされたのだと思いますww

僕もまだまだコンピューターの知識はないものなのであくまでの説ですがこのコメントを参考にしてもらえたらうれしいです^^「
ファン(2010.08.13) #
え~本日バグが発生しました。どうしたらいいですか?
ファン(2010.08.13) #
え~本日バグが発生しました。どうしたらいいですか?
名無し(2010.08.13) #
わたしがアクセスするとエラーばかりなんですが何なんでしょうか??
ちび(2010.08.13) #
私も昼間で入っていたのですが、pm8時位から入ろうとしたら
外部からログインを試みたなどの原因で・・・
が出て入れなくなりました。
時間が経てば元に戻るのでしょうか?

このブログの著者


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)