CSS3＋Javascriptでテキストベースの将棋盤麺表示
Web上における将棋盤面の表示方法は今のところだいたい以下の４つ。
- Java/Flashなどの独立したリッチなアプリケーション（動的）
- 駒画像＋Javascriptを利用したアプリケーション（動的）
- 棋泉やKifu For Windowsを利用して生成した画像（静的）
- CSA、KI2形式などのテキスト表示（静的)
このうち、1はよく棋戦のネット中継で使われてるし、2はfloodgateのjavascript将棋盤やNHK将棋トーナメントのサイトに使われているようなもので、3は棋戦のネット記事やBlogなどで見かける。普通の人は余り見かけることはないと思うが将棋プログラマーの人はよく知っているかと思う。
今回そのうちの1つとして今後加わるであろう方法を一つ記述しておく。それが、タイトルのCSS3＋Javascriptによる表現。素人なので申し訳ないがCSS3についての詳細は詳しくは知らないけど、現状Webkitで実装されているブラウザ（GoogleChromeやSafari）ではの-webkit-transformというプロパティを使うと文字や画像を書いてさせられるらしい。
将棋は盤上の駒がどちらの手番のものかを識別するために、自分の駒は自分基準の正位置になっているわけなので、それをWeb上で実現しようとすると今まででは反転させた駒の文字の画像や、識別子を使った後手の駒表現などをしなければならなかった。しかし、これを利用すれば、従来のように反転された駒を表示する際にわざわざ画像を使わずに全てテキストの1文字で表現出来ることになる。
使い方は
.reverse { -webkit-transform:rotate(180deg); }
<span class="reverse">飛</span>
という感じで単位はdegで角度を使うらしい。これを対応しているブラウザで開けば飛車の飛という文字は逆さまに表示されるみたい。
今後CSS3でこれと同じようなものが正式に採用されればいいなと願うなど。先取り気味だけど、暇つぶしにテキストベースの将棋盤をJavascriptで作成して自己満足したい。これを使えばサクサクと将棋盤面でAmazonのCarousel UIみたいなことも出来たりしないかと思ったり。（一枚画像形式の盤面画像が予め用意されてればそれでも出来るけど画像は動的に生成するのが大変）
- webkit-transformプロパティ自体は他にもいろいろ出来るらしく興味深い。
rotate(deg) 回転（deg で指定。30deg など）
rotateX(deg)
rotateY(deg) 横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。（deg で指定。30deg など）
scale(xy[x,y]) 拡大・縮小（数値を指定。1 や 0.5 など）
skew(deg) スキュー(シアー)（degで指定。30deg など）
translate(xy[x,y]) 移動（px で指定。30px など）
perspective(deg) 遠近感（数値で指定）
参考リンク：
＊追記：Aptanaのプロジェクト漁っていたら昔作りかけていたjQuery製の将棋盤（棋譜再生用 Javascript 将棋盤を参考に作っていた）が見つかりました。んで、駒の表示だけいじって-webkit-transformしてみたらこんなん出来ました。Tableタグで盤面表現していて、フォントはブラウザから強制的に行書体を使用してSSをとりましたｗ反転しても文字は綺麗に表示できてるわ。
一つも画像は使っていません。（ブログでの↓の表示は画像ですが・・・）
たとえばCGIでサーバーからSFEN表記などで将棋の盤面を吐かせて、Javascript使ってブラウザ上で上記の様な盤面に変換させてやると（もしかしたら）おもしろいインターフェイスが作れるかもしれない。
