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だと市松模様にグラデーションをかけて白く見せている。どちらがいいかなと思ったんだけどグラデーションはなしにしている。