コンピュータ将棋協会blog

ブラウザにお手軽に逆さ駒を表示する方法0.2

2007/8/5(日) 23:30 · カテゴリー未分類

ありがたいことにシリーズ第1回のエントリにさっそく反応あり。そこにはSVGプラグインに頼るような軟弱な話はなく、これから将棋向けの新たなツールを作ろうというお話。素晴らしい。普段のエントリにも手こずっている有様の当ブログは当分の間軟弱路線で(笑)。

前回、列挙したメリットの最初に挙げたように、逆さ駒入り将棋盤はテキストファイルのみで作られています。貼り付けてあるSVGファイルをダウンロードして中身をご覧いただければ一目瞭然のように、SVGファイルがXMLテキストで記述されており、それをHTMLページにリンクさせて表示させているからです。

SVGファイルがテキストであるため、ファイルの中に書かれている駒の文字を書き換えるだけで簡単に他の駒を作成することができます。雛形となるSVGファイルがひとつあれば、それをコピーして1箇所変更するだけで他の駒のファイルを作れますので、通常の画像ファイルよりも作成の手間が少なくて済みます。駒の文字だけでなく、駒のフォントやデザインを変更したバージョンを作りたい場合も、簡単にファイルを増やすことができます。

ただし、貼り付けたい画像をあらかじめSVGファイルとして作成しておかなければならない点は、ときどき不便に感じられることもあるかもしれません。Webページの環境によっては、SVGファイルを扱うのが不便、というケースも考えられます。また、普通に将棋盤を表示させるだけの用途なら問題ないかもしれませんが、たとえば頻繁に変化する数字やメモ、目印など、将棋の駒以外のものを補助情報として表示したい場合は、前もってファイルを作っておくのは難しそうです。

そこで、OperaやFirefoxなどのブラウザでは、WebページからリンクされたSVGファイルだけでなく、Webページ自体に記述された（埋め込まれた）SVGデータを表示させることができます。その機能を使って、（スタイルシート以外の）外部のファイルを一切使うことなく将棋盤を表現したのがこの図です。残念ながらこれを正常に閲覧できるのは、上記のような埋め込みSVG対応のブラウザだけで、プラグインでは後手の駒を表示できません。

このようなことができるのは、SVGと同様にWebページもXMLで記述されている(XHTML)ためです。そのせいか、OperaやFirefoxでは、XHTMLファイルであることを示す拡張子のファイルでないと埋め込みSVGを解釈しないようです。Operaの場合は拡張子を .xml, .xht, .xhtm, xhtml などに、Firefoxの場合は拡張子を .xml , xhtml などにしないと表示してくれませんでした。そのため今回もブログのページに直接表示させることができませんでした。

したがいまして、今回は前回以上にネットで使いにくいテクニックとなってしまいました。残念。やはり通常の画像ファイルを使わないと実用にならないのか？この部分は今後の課題としておきます。その代わり、個人的に使うだけの簡易将棋盤としてなら使い道があるかもしれません。たとえばコンピュータ将棋の開発者であれば、実際の局面を見ながらプログラムをテストしたいことも多いと思います。そのとき、問題の局面を埋め込みSVG入りXMLでファイルに書き出させて、それをブラウザでチェックする、という使い道が考えられます。このとき、ひとつのファイルにアクセスするだけで済むということで、プログラミングが用意になるのではないでしょうか。特に、ブラウザと組み合わせて使える統合開発環境を使っている開発者には便利かもしれません。