コンピュータ将棋協会blog

ホームページやブログで将棋の図面を表示する方法としてもっとも多く使われているのは、将棋盤全体の画像ファイルを作成してページに挿入させる方法でしょう。あるいは盤面だけでなく棋譜も紹介するために、棋譜のテキストを併記するだけでなく、JavaアプレットやFlashアニメーションで駒を動かせるようになっているページもごく普通に見られるようになりました。古くから主流として使われている柿木将棋アプレットや勝田将棋盤などはJavaアプレットですが、kif2swfなどで作成されたFlashアニメーションも最近増えてきました。これらが当協会による世界コンピュータ将棋選手権ライブ中継を含む多くの対局中継サイトでも活躍していることは、すでに周知のことと思います。

上記の将棋図面の挿入には、Webサイトの作者がいくつかファイルを準備する必要がありますが、 サイト作成ツールが充実し、多数の画像ファイルに彩られたブログが珍しくなくなった現代では、それもさほど面倒なことではなくなったと思われます。今後は、ブログに貼り付けられるウィジェット（和製英語でブログパーツ）としても、今後いろいろな形の将棋の表現が普及するのではないかと思われます。

そんな時流に逆らうかのように、あえて外部のファイルを使わず、(X)HTMLの中に将棋の図面を埋め込んでみたのが下の将棋盤リンク（表示されているのはサムネイル）です。ただし、残念ながらこの図を正常に閲覧できるブラウザは限られていますので、以下の説明をお読みになってからクリックしてください。下の図は、Mozilla FirefoxやOperaなどSVGに対応している（比較的新しいバージョンの）ブラウザか、Adobe SVG Viewerプラグインがインストールされたブラウザでなければ正常に見ることができません。たとえば、デフォルトの状態のInternet Explorer(IE)などで下のリンクをクリックすると、「同意する/同意しない」などのメッセージが大量に出現する可能性がありますので、あらかじめご了承ください。

ブラウザで表示できる図面を作成する上で大きな問題となるのは、駒を逆さに表示させることが難しい点です。上の図は、それをSVGで実現しています。ブラウザによって微妙に見栄えが変わるものの、上の図はWindows/Linux版Firefox 2.0.0.6、Windows版Opera9.22、Adobe SVG ViewerプラグインがインストールされたWindows版IE7にて正常に表示されることを確認しています。ブラウザを選ぶため、多くの方にお奨めできる方法ではありませんが、SVGを使うことで以下のようなニッチなメリットがいくつかあります。

• テキストファイルだけで作成できる。
• 好みのフォントを（著作権侵害などすることなく）そのまま使える。
• 図の大きさを変更しやすい。
• 他の表現テクニックと組み合わせるのが容易。

長い記事になってしまいましたので、上記の細かい説明は次回以降に譲ることにいたします。私としては、最後のポイントを重視しています。すなわち、この場をお借りしてWebの将棋盤でいろいろな表示効果の組み合わせを試してみる予定です。その手始めにSVGを使ってみましたが、多くの試みは駒のグラフィックに通常の画像ファイルを使った方式でも有効になるはずです。ひとまず現時点では、上記に挙げた以外のSVG対応のブラウザで正常に表示されるかどうか、当ブログをご覧の皆様に確認していただけますと幸いです。ブラウザの対応状況は、WikipediaのSVGの解説が詳しいようです。

念のため補足しておきますが、当面の最大のポイントは駒の逆さ表示ですので、少なくとも当分の間は駒は動きません。あしからず。

なお、古いバージョンのブラウザをお使いの方は、コンピュータウィルスなどへの対策が不充分な場合がありますので、安全のため、ブラウザのバージョンアップをこまめに実施されることをお奨めいたします。もっとも、 Adobe SVG Viewerプラグインのサポートも今年いっぱいと宣言されてしまっていますので、その後セキュリティホールが見つかるとその時点でお奨めできないソフトになってしまうのが残念なところです。