追記: 2008/05/08 - 現在４人オセロになっているため、多少この説明とは違うかもしれません。

Ajax(Comet)対戦オセロゲーム

http://port.movion.jp/

Cometオセロゲーム作成中なわけですが、前の記事で説明不足すぎたので、遊び方を補足したいと思います。
とはいえ、バグがあるため必ずしも正常に動作するとは限りません。あしからず。

推奨環境・利用前提等
・IE6、IE7、Firefox2.xのブラウザを推奨（他では試してません）
・Cookieが有効であること
・Javascriptが有効であること
・対戦ゲームなので、１人では遊べません。ま、誰かがアクセスしている可能性が低いので、１人で遊ぶ場合は、IEとFirefoxの２つのブラウザを起動してそれぞれでアクセスしてみてください。

遊び方の手順（１人遊び編）
１．それぞれのブラウザでAjax対戦オセロのページにアクセスします。
２．画面の上部から「INPUT YOUR NAME」という入力フォームが現れるはずなので、名前を入力してください。
※リロードした場合など２回目以降（セッションが残っている間は）は表示されません。
３．左したのピンク色のテキストエリアに「入力した名前(NEW) come into a room.」と表示されるはずなので、そしたら、
右上の「take a black seat.」のリンクをクリックしてください。ピンク色のテキストエリアに「入力した名前 take a black seat.」と
表示されるはずです。
４．上記３を実行したブラウザとは別のブラウザで「take a white seat.」をクリックしてください。
５．黒が先行なので、ボード上の黒が置ける場所をクリックしてください。
６．あとは、順番に駒（石）を置いていくだけです。

その他使い方の説明
・右側の「rename」（名前の変更）をクリックすると、名前を変更出来ます。
・右側の「leave a seat」（席をたつ）をクリックすると、黒か白を選んでいた場合、見ているだけの状態になります。
・右側の「force reset」（強制リセット）をクリックすると、ボードの状態や参加者をすべて初期状態に戻します。
・右側の下の灰色の部分は参加しているユーザの名前を表示しています。かっこ書きで「black」や「white」とある場合は、
その人が、黒または白の席に座っていることを示しています。
※ただし、状態は必ずしも最新の正確な状態を示していません。
・左したのテキスト入力欄に、メッセージを入力して「post」ボタンを押すとメッセージを送ることが出来ます。（チャットが出来ます）

動作しているかの判断
・ページにアクセスしたとき、オセロの駒（石）が何も表示されなければ、明らかに動いてません。
・名前を入力しても、左下のピンク色のテキストエリアに何も表示されなければ、おかしくなってるかもしれません。

ちょっと変になったら、リロードや「force reset」をしてみてください。

—-

退室の処理を実装しようとしたが、どうもFirefoxでうまく動作しない。
onUnloadでAjax.Requestの処理を入れると、$A is not defined・・・になってしまう。
コネクション張ったまま画面を閉じて、そのタイミングで結果がかえってくるからだろうか。
困った。退出したひとがしばらくはそのまま残ってしまう。
関連記事：
Ajax(Comet)対戦オセロゲームをApache&PHP&Javascriptで作成中

前回の記事のページから、自鯖にリンクを張っていてたまにしか稼働させていなかったためか、
Googleさんに前回の記事のページだけ嫌われてしまったもよう( ｉдｉ )

続・Ajax(Comet)対戦オセロゲーム　遊び方編　も参照してみてください。

http://port.movion.jp/

2008/05/04追記。port.movion.jpは現在４人オセロになってます。

※自宅サーバのため、常時稼働はしてません。たぶん１２時～２４時くらいは稼働させてます。
※バグが多々多々あります。かつ、開発環境です。
※IEの場合ieerbugがでます。firefoxの場合FireBug入れてないといきなり変になるかも。

2008/04/20追記。ちょっとだけ安定版をここのサーバにも設置しました。
http://movion.net/sample/ajax-reversi/public_html/

今さら感は否めませんが、Cometなオセロゲームを勢いで作成中です。
railthelloとかあったけど。オセロゲームなのは、Pontiyを作っててまんまオセロゲームの仕組みを使えたから。
どうせなんで、４人オセロとかに拡張しようかなぁとも思ってます。

でもって現実的にはやっぱり、FMSなりJavaアプレットなり使った方がよいなぁと。
jetty6もちょっとさわってみたけど、クライアント数が増えることを想定してないので、とりあえずApacheとPHPで実装中。
C10KいやC1Kどころか、C100にも耐えられるか謎です。

実装は、PHPだけでリアルタイムAJAXチャットシステムを構築する方法。
を参考にさせていただきました。

アクセス数さえ少なければ、負荷もたいしたことがないので、
レンタルサーバに設置しようかと思いましたが（こことか）、無限ループぽっくなったり、デットロックぽくなったり、怪しげな挙動をする可能性が高いので、現状自鯖です。
幾分、問題をなおしたものをここのサーバにも置いてみましたが、万一アクセスが多くなったら撤去します。

でもって、自鯖にしてるパソコンはどうも共振してあまりにうるさいので夜はshutdown -h nowしてます。
リンクつながらなかったらごめんなさいorz

て、このサイトで宣伝して人が来るとも思えませんが・・・。

参考：
おとこのCometアプリケーション！　非モテのためのJetty 6 Continuation入門まとめ（前編）
Lingr and Comet - 技術解説編(CNET Japan)

GoogleMapsAPIで、地図上にAjaxで動的なマーカーを表示する場合、
地図を移動したらマーカーを再度よみこみ直す処理をつくってみました。

が、マーカーにクリックイベントをつけて吹き出しを表示するようにすると、
場所によっては吹き出しを表示するときに地図が移動するので、
移動し終わった時にマーカーが再読込されて、吹き出しが消えてしまう問題が。

他にもいい方法がありそうですが、とりあえずremoveListenerで一時的にリスナーを消して、
無理矢理問題解決してみました。
※追記：残念ながら、不具合があります。

removeListener部分を実装する前。

修正後。
一見同じですが、
秋田辺りにあるマーカーをクリックすると違いがわかると思います。

---

そのソースコードの抜粋。
実際の例は、このページを参照してください。12行目。addListener時に、消すリスナーを保持しておくために、
reloadMarkerEventで返値を受けておきます。

---

5～10行目。openInfoWindowHtmlの前にいったんリスナーを消してます。
openInfoWindowHtmlの後に、移動が終わったら再度Listenerを追加するようにしてます。