しろログ

久しぶりに新しいWebサイトを作り始めた。

箱庭ダンジョン
http://dungeon.hakoniwa.net/

ウィザードリィっぽいダンジョンを作って遊ぼう、という企画。
とりあえず現時点でできるのは、
・プロファイル登録
・ダンジョンマップ作成(壁と床だけ)
・ダンジョンデータの保存・読込
・作ったダンジョンを歩き回る
ことくらい。

今後、
・イベントの作成
・ダンジョン同士のリンク
・プレイヤーのゲーム内交流
など、箱庭ノベルズではできなかった、ソーシャルな感じで進められればと思う。

例によってJavaScript。いい加減FLASHに、という気分ではあるけど。
ただ、最近のゲームやってると、もうエフェクトに凝ったりできる次元じゃないな、
というのを感じているので、開き直り気味で。

何も考えず、スクリプト書いてたらゲーム部分でファイル数25。30KBほど。
とりあえず自前でコメント部分と、インデント削除するスクリプト書いて連結したら19KBほどになった。
ちなみに改行も取ったら動かなくなった。
うーん、気をつけて書いたつもりだったが。

一応、ソースコードも公開中。
へこんでやる気が無くなる恐れのあるので、ツッコミはほどほどでお願いします。

それにしても、作ってる最中にこういうの見つけたりするとあせるから。マジで。
マネじゃないのにマネしてるように思われるし。

JavaScriptはprototypeベースのオブジェクト指向言語なんだぜー、
ということに慣れてきたところ、「prototypeベースの」という部分を忘れてはまった。

var Box = function() {};

Box.prototype = {
    toys: [],
    addToy: function(name) {
        this.toys.push(name);
    }
}

まず、こんな感じで、toysプロパティと、addToyメソッドを持った
Boxクラスを作ったつもりになる。

早速インスタンスを作るぜ。

var MyBox = new Box;
var YourBox = new Box;

おもちゃを入れるぜ。

MyBox.addToy('ball');
alert(MyBox.toys.length); // 1

YourBox.addToy('puzzle');
alert(YourBox.toys.length); // 2

げーん。1つだけ入れたつもりが、なぜか2個に…魔法の箱だぁ。

もちろん、下のような感じでも、

function a() {
    var MyBox = new Box;
    MyBox.addToy('ball');
    alert(MyBox.toys.length);
}

毎回新たに作ってるつもりだったのに……

a(); // 1
a(); // 2
a(); // 3

でもこれ、↓と同様だと考えれば納得できる

var a = [];
var b = a;

a[0] = 'hey';

alert(b[0]); // hey

newした時に、新しいオブジェクトは自分用に元のprototypeをコピるけど、
参照型の場合、コピるのはあくまでも「参照」だけで、参照してる先まではコピらないってコトかな。
上で言う「b = a」とだけしてる感じ。

(newが具体的に何をしてるかはこちら)

なので逆に、数値とか文字列とか、プリミティブ型は問題無い。

ちなみに、ECMAscriptでの定義は、

プリミティブ値 (Primitive Value)
プリミティブ値 (primitive value) は Undefined, Null, Boolean, Number, String 型のうちの一つの構成要素である。プリミティブ値は言語実装の最低レベルにおいて直接表されるデータである。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/4_Overview.html

オブジェクト (Object)
オブジェクトは Object 型の構成要素である。序列のないプロパティの集合体で、それぞれのプロパティがプリミティブ値やオブジェクト、関数を含む。オブジェクトのプロパティに格納された関数はメソッドと呼ばれる。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/4_Overview.html

こんな感じ。

とりあえず、この問題を避けるには、
コンストラクタ内で新しいオブジェクトを参照するようにしてやれば、OK。

var Box = function() {
    this.toys = [];
};

Box.prototype = {
    addToy: function(name) {
        this.toys.push(name);
    }
}

初期化はコンストラクタでしようぜ、という感じ。

友人、亮さんのサイトを作った。
内容は実際見てもらったほうが早いので、是非訪問してみよう！
写真やイラストのサイトで、個人的にオススメなのは「月とうさぎ」。
他のもコンセプトやメッセージを持っている作品ばかりで質が高い。
ちなみにサイトデザインも亮さんなので、僕は裏方。

というわけで、コーディング周りのつれづれ。

HTMLを打ち始めて早9年になろうかという今日この頃・・。
(と言っても本格的にはここ1～2年だけど)

ようやくだいぶマシなHTMLが打てるになってきた。
とりあえず、W3CのXHTML1.0には概ねValid。
構造的にも極力無駄を省いたつもり。

その代わりCSSはレイアウト的に
position: absolute;
が多用されているので、位置指定がしつこいような感じで、
かなり大きなファイルになってしまったけど、
どうなのかなぁ・・

主なSEOとして、テキストの上に画像を置くようなことをやってる。
参考:CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない

スパムとみなされそうだが、全く無関係の文字列ではなく、
画像の文字をそのままテキストにしているのだから、
常識的に許されるだろうという希望的観測。

視覚効果では、lightbox2をベースに使ってみた。
写真やイラストのサイトなので、これは便利。
ページの特定の場所に埋め込むタイプのは直接スクリプト書いた。

あと、トップとかにある、
「画像に白ワク付けて三角コーナー付ける効果」もJavascriptで実装した。
<span class=”fixer”><img～></span>
とするだけでこの効果を得られる。

HTML=文書の意味づけ、という性質を考えると
HTML構造が乱れるような大掛かりな装飾はJavascriptでやるほうが良い気がする。
(汎用的にする必要がなければそのまま画像、でもいいけど)

Javascriptが切ってある、もしくは使えない環境もあるだろうが、
Javascriptが動かないような環境では、おそらく
装飾より内容が重要なんだろうから気にする必要はないと思う。

三角部分は画像。三角でなくピンなどでも面白いだろう。
実際このサイトでは、三角のほか、テープ仕様のもある。

FirefoxやIE7は画像でなくても三角が作れるのだが・・
border-color: transparent;
がIE6で使えないという痛恨の仕様(バグとも言う)により断念（；ω；
参考:border-colorにtransparentを指定すると前景色で表示される

あとDiaryはWordpress。
何かしたいとき、PHPをちょいと書けるのが大きなメリット。

なお表示確認したブラウザは
Windows(XP):IE6、IE7、Opera9.2、Firefox1.5、Firefox2、Netscape8.1
Macintosh(OS X):Safari2、Firefox2、Camino
など。
OS9とかはダメでしょう(ごめん！)

という感じの作り。
製作期間は約3週間。
こういうのはパーツ切りも結構大変だからなぁ・・亮さん、お疲れ様です。

仕事では凝った作りのサイトは少ないので、結構面白かった。
左右のインデックスのような一見複雑なものも
意外とValidにできるなぁ、と思ったり。

# もっと凄いのはこちらから・・
# css Zen Garden

G10リーダーみたいに、
ダブルクリックで辞書ってやつを実現するブックマークレット。
ダブルクリックでなく、範囲選択でもOKにしてみた。

英和・和英・国語辞書

↑これをお気に入りに追加して、
辞書使いたいページでこれを選択。
で、英単語をダブルクリック。もしくは範囲選択。
すると@niftyの辞書に飛ぶ。
試しに、上のリンクをクリックしてから、→ hello ←ここをダブルクリックしてみて。

URL変えればいろいろいける。

各種辞書/辞典
・英英辞典
・Weblio
・Wikipedia
・IT用語辞典 e-words(掲載されていない用語はページが見つかりません)

各種検索
・Google検索
・Googleマップ検索
・Yahoo検索
・YouTube検索
・Fooooo検索

※今後、サイトの構成が変わったりした場合は、
ブックマークレットが使えなくなる場合があります。

ついでに解除ボタン。コピペとかしたくなって、辞書に飛びたくない時は解除を押す。
解除

僕はこんなふうに入れてます。

基本コードは以下の通り。
javascript:(function(){document.body.onmouseup=function(){var t=(/*@cc_on!@*/false)?document.selection.createRange().text:document.getSelection();if(t){window.open('http://tool.nifty.com/oyakudachi/webapp/dictionary/search?book2=2&book3=3&book1=1&book0=0&word=' + encodeURI(t) + '&option=0&page=0&item=');t=null}}})();

WindowsのIEとFirefox2ではできた。

isMSIE=/*@cc_on!@*/false;

via Sniff! - dean.edwards.name

1行ハックが役に立つ(^^
これで、IEは
document.selection.createRange().text
Firefoxは
document.getSelection()
で選択範囲を取得。

Greasemonkeyとか・・
英単語をダブルクリックで英英辞典を検索する Bookmarklet と Greasemonkey - IT戦記

15パズルジェネレーターサイトを作ってみました。
自分の持ってる画像で15パズル(9パズル・25パズル)を作れます。
タグを貼れば自分のサイトにも設置できます。
もちろん無料・登録不要です。

なんかこう、サクッと作るつもりが妙に四苦八苦しました。
以下、よもやま話。

パズルジェネレーター自体はいろいろありますが、
今回はJavascriptベースで作りました。
JavaやFLASHのほうが画像を簡単に取られなくていいとかあるのですが、
あえてHTML+Javascript。

ぶっちゃけると、1枚の画像を各ピースになるようにずらして表示してます。
なので、最初から元画像はダウンロードされてるわけです。
そのへんこだわる人は、あらかじめ15枚に切った画像を用意するのが良いでしょうね。

今回はそこまでやってません。
例によってストレージにAmazonのS3を使うので、細かく切った画像を
アップしまくるのも時間かかりそうだし。
(名称は15パズルですか、9～25ピースにもできるので、全部作ると47枚作ることになる・・)

まあ、それでも簡単にコピーされてもつまらないので、
申し訳程度には、ごにょごにょしてます。
(なお画像を保存させないというのは、HTMLベースでやってる限りたぶん不可能)

パズルピースはIE6とその他のブラウザで実装が異なります。
IE6はIMGタグ+CSSのclipで、
その他はDIVタグ+background-imageです。

IE6だけはbackground-imageのある要素をいじると
再度画像を読み込むという訳の分からない仕様があるようで、こうなりました。

他のブラウザでIMGタグを使わないのは、
例えばSafariだとドラッグ・ドロップで画像見えちゃったり、
簡単にデスクトップに保存とかできちゃうので、
これは興ざめだろうということで。
ちなみにIE6はIMGをAタグでくくってドラッグ・ドロップによる画像保存を防止してます。

あとは、このピースを適当にならべて移動できるようにすれば完成・・・
とか思ってたのですが、「適当に」を本当に「ランダム」でやってたら
どうも、パズルが完成しないことがあります。

どうやら、15パズルは完成しない配置があるらしい。

てっきりどんな並べ方でもそろうんだと思ってました。

その辺の証明とか、解説とかはこちら。

はじめ、ピース配列のシャッフルに工夫すれば、済みそうだなと思ってたのですが、
面倒になったので、空マスをランダム移動させることにしました。
(普通そうするか)

これで丸2日ほど試行錯誤・・
単純そうで奥が深いのねー。

<img src="GIFアニメ.gif" onload="loaded()">

とかやってる時、IE7だとGIFアニメのコマが再生されるたびに
loadedが呼ばれるらしい。Firefox2ではそんなことは無かった。

なので、こうした。

var img = document.getElementById('GIFアニメをロードするIMGタグのID');
img.onload = function() {
    alert('1回だけ呼んでね');
    this.onload = null;
}