Blogger parts: Chess Board (cont.)

暗い背景の上に白いチェスの駒を表示すると、駒の本体のあたりが透けて白く見えない問題があったが、「黒の駒を白く表示した上に、白の駒を表示すればいいんだよ」というすごいアイデアを見つけた。 さっそくやってみる。

おお！ついでに、黒の駒の後ろにも白で描画された白の駒を置いてあります。分かりにくいけどbishopの十字がちゃんと白くなっていたりね。

JavaScript / CSS は次のようになった。

こうなると、盤面は違う色でも構わないので変更。さらにマスが正方形になっていないのでサイズを調整。

r.bqkbnr
pppp.ppp
..n.....
.B..p...
....P...
.....N..
PPPP.PPP
RNBQK..R

Blogger parts: Chess Board

これまでチェス盤の表示はプログラムの出力のASCII出力のチェス盤をpreで貼っただけだった。こんな感じ。

r. bqkbnr
pppp. ppp
. . n. . . . .
. B. . p. . .
. . . . P. . .
. . . . . N. .
PPPP. PPP
RNBQK. . R

しかし、これだとみづらいので、これをclass="chessboard"をつけるだけで下図に変換するJavaScriptを書いた。 (2012/4/12 追記: スクリプトの変更前の画像に差し替え）

JavaScriptは次の通り。文字列をスキャンしてKとかnとかをチェスの駒へと変換し（unicodeにチェスの駒がある！）、全体をtableとして構成し、もとのエレメントと入れ替える。 Closure compilerにかけてscriptタグで囲んだものを、Bloggerのレイアウト > HTML/JavaScriptガジェットとして登録する。 次にCSSを設定。CSSはCSS3 Chess Boardを参考にさせてもらった。以下のCSSをテンプレート > アドバンス > CSSを追加 から設定。 unicodeに含まれるチェスの駒を使うと白い駒の白い部分が白くならないという問題があって（フォントは黒い部分を定義するものなので）、オリジナルのCSSだと市松模様にグラデーションをかけて白く見せている。どちらがいいかなと思ったんだけどグラデーションはなしにしている。