Vipper Cityの公開形態について

現在30％ぐらい完成した「Vipper City」。
そろそろ実際の運用についても考える時期じゃないかと…
そこで、このゲームをどのような形で公開するか候補をまとめてみました。

自分で運営をする
自分で運営する場合、最大のメリットはメンテナンス、改造が自由にできることです。保守だけでなく、新しい機能とかも一気に導入できます。

一方、私のような忙しい人間にとって、コミュニティサイトの運営は簡単じゃありません。このゲームも含めて、CGIゲームには掲示板が設置されています。掲示板を設置する以上は、荒らしやスパム、誹謗中傷などに随時対応しなければなりません。
個々の荒らしに１つずつ対処するのではきりがありません。

事前に荒らしを防ぐには、メールアドレス登録制などの、ある程度匿名性を犠牲にしたシステムが必要になります。しかし、個人運営のサイトでメールアドレスという個人情報を取り扱うのは気が引けます（普通にやってるサイトも多いですが）。また、sendmailが使えないレンタル鯖が多いので、実装するのも困難なように思えます。

上記の理由から、俺が１人で管理する形態だと、長期的な運営は難しいでしょう。

代理の運営人を頼む
かなり合理的な方法です。俺以外に運営人を募集し、荒らしに対処してもらう方法です。実は、Vipper Cityには、仮想通貨というシステムがあるので、運営人の募集が簡単になります。ゲーム内に「警察」という職業をつくり、そういった仕事をしてもらう代わりに仮想通貨を支給する方法です。

しかし、一般に、書き込み削除などの基準が運営人によって異なります。厳密な基準を作るのは非常に難しい作業になるでしょう。

スクリプトの配布のみ
無難な方法です。しかし、この高負荷ゲームを設置してくれる人なんているのでしょうか。しかもこの方法だと、後から新機能を追加することができません。
ゲームを設置した人がスクリプトを改造できるため（CGIゲームは改造して使うのが一般的）、俺の追加した部分と設置者が改造した部分が、思わぬ干渉を起こすかもしれません。


さて、どの方法がベストでしょうか

ブラウザ上に図形が描けるcanvasタグ

最近のWebアプリでは、グラフを描くツールやお絵かき掲示板など、ブラウザ上で簡単な図形を描くものが増えています。
これらのアプリの多くは、
　・gifやpngの画像をサーバー側で生成するタイプ
　・FlashやJavaでクライアント側で描画するタイプ

の２種類に大別できます。しかし、最近になって新たなる手法が広まりつつあります。
それが、<canvas>タグ、SVGファイルです。ちょい昔にVMLなんてのもありましたが消えつつあります。

<canvas>タグとは
<canvas>タグは、ブラウザ上に直線や多角形や画像を描画するキャンバスを生成するタグです。
詳しい使い方は、canvas の描画メソッド - WebOS Goodiesとかのページにあります。

これのメリットは、JavaScriptから直接ブラウザに図形を描けることです。
現状では速度面や描画の機能などでは、Flashに到底及びませんが、手軽に使えるのでCGIゲームのインターフェースには便利です。

なお、IEはこのタグに対応していません。しかし、Googleが開発したExplorerCanvasというJavaScriptをインクルードするだけでIEでも同等の機能が使えます。

ちなみに、Vipper Cityでも<canvas>を使ってマップを描画しています。
で、マップ上の建物をクリックすると情報を表示する、という機能をつけたのですが、IEで互換性の問題が起こりました。

通常、event.offsetXでマウスの座標を取得するのですが(詳しいやりかたは忘れた)、この方法では正しく取得できません。IEでは、canvasに画像を描画した場合、その画像の左上を基準とした座標が返ってきます。どうやら、canvasに貼った画像が要素として認識されるみたい。
そこで、event.xで親要素の座標を取得すると……、うまくいったぞ！

SVGファイル
SVG(Scalable Vector Graphics)は、ベクターグラフィックの規格です。ベクターグラフィックは、直線や曲線をベースにした画像のことで、ファイルサイズが小さい、拡大しても汚くならない、というメリットがあります。AdobeのIllustratorはベクターグラフィックを扱うソフトの代表格です。
でもIllustratorは素人が購入できるような価格ではありませんねｗ。

そこで、オープンソースで開発されているInkscapeというソフトがあります。俺はこれを使ってます。

しかし、現時点ではサーバーでSVGを生成して表示するサービスというのは、ほとんど見られません。多分IEで表示できないからでしょう…。IEでもSVGを表示するプラグインがあるのですがインストールが面倒ですね

Ajaxでダイアログを表示するライブラリ

従来のサイトで、何かメッセージを表示したいとき、JavaScriptで
alert("hogehoge");
ってやってましたよね？

でもデザインに凝ったサイトだと、少しばかり見劣りがします。

ところで、最近のサイトにありがちなのが、写真のサムネイルをクリックすると派手なアニメーションをして拡大画像を表示するやつ。一般にLightboxとかのライブラリを使ってる場合が多いです。
（何のことか分からない人はとりあえずLightboxのデモページの画像をクリックしてみるべし）

俺の開発してる「Vipper City」でも、メッセージを表示するときに似たようなライブラリを使っています。俺が使ってるのはjqModalというライブラリ。jQueryのプラグインとして動作します。

一般には「ThickBox」とかのプラグインを使う場合が多いようですが、俺がjqModalを使ってる主な理由は、容量が小さいのと、JavaScriptからの呼び出しが楽だからです。
一般のブログでは大して恩恵はないのですが、Webアプリを作る場合は、「jqmShow()」って書くだけでいいってのは便利ですね。

（本来、この手のライブラリは、<A>タグだけで呼び出せるので、JSを知らない人にもお勧めです。俺の使い方はちょっと変w）

余談：
Vipper Cityぐらいalert()で十分じゃないかと思われがちですが（当初は俺もalert使ってた）、ダイアログに画像を載せたり文字色を変えたりするにはこうするしか…

jQueryのライブラリで似たようなのはたくさんあります。俺がjqModal使ってるのはただ単にスクリプトのほかの部分との相性問題ですねｗ

ブログ開設…っておまｗ

　　　　　　 __,,..,,,,_
　　　　 ┗/・`ω'・ヽ┛ 　　フゥーハハハハ、開発記録を書いてやるぞ
　　.　　　 | 　 で　　l　　情報の山で時間を無駄に過ごすがいい！
　　　　　　`'ｰ---‐´　

※フォントによっては、AAが正常に表示されない場合があります。