ウェブ上で将棋盤をどう表示するか

Web 将棋サイト

12月25日に触れた件について、改めて考えてみます。

詰将棋の図面の表示方法で議論していた頃から時間が経過してしまったので、はじめに将棋サイトで将棋の局面を表現する方法にどのようなものがあるか整理しつつ列挙してみます。

1. 局面をべた書きにする。
例：「先手：１七歩 １九香 ２七歩 ……、後手：１一香 １三歩 ２一桂……」
視覚に障碍のある人を含め最も汎用的に使える記法ですが、駒数が多い場合には局面理解に困難をきたします。可能ならば初形からの手順を記した方がまだしも実用的でしょう。
2. 柿木将棋での盤面を表現する記法に従う。
例：
後手の持駒：なし
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
v香v桂v銀v金v玉v金v銀v桂v香 一
・v飛 ・ ・ ・ ・ ・v角 ・ 二
v歩v歩v歩v歩v歩v歩v歩v歩v歩 三
・ ・ ・ ・ ・ ・ ・ ・ ・ 四
・ ・ ・ ・ ・ ・ ・ ・ ・ 五
・ ・ ・ ・ ・ ・ ・ ・ ・ 六
歩 歩 歩 歩 歩 歩 歩 歩 歩 七
・ 角 ・ ・ ・ ・ ・ 飛 ・ 八
香 桂 銀 金 玉 金 銀 桂 香 九
+---------------------------+
先手の持駒：なし
文字だけで表現されている上に、等幅フォントを指定すればぱっと見で局面を把握できるという利点があります。しかし、音声で読み上げられた場合には局面を把握することはほぼ不可能です。テキストというよりも、アスキーアートの一種としてとらえるべきでしょう。そう考えると複数行に渡るASCIIアートは、読み飛ばすことができるようにするやアスキーアートガイドラインにあるような注意事項が適応されることになり、逆に面倒になるかもしれません。これについてはいずれ詳しく検討したいなと思っています。
3. 一つ一つの駒画像を用意して、表形式で並べる

後手　なし

先手　なし

盤面作成プログラムでこのような盤面を出力するCGIプログラムが提供されています。上の例では手抜きをしたのでHTML的に問題がありますが、代替テキストをきちんと指定するなどすれば、それなりに通用するものができそうです。問題は、コードが長くなることでしょう。工夫の余地が大きい分複雑さも増しています。なお、IE限定であればFilterを利用して文字を180度回転させることができます。これなら画像を使う必要がないのでよりよいのですが、やはりIE限定というのは邪道なので考慮に入れないことにします。
4. 盤面を一枚の画像として表示する。
表示例：将棋盤面 初形
現在最も多く見られる方法です。HTMLでの記述も楽ですし、KIFtoGIFのようなソフトを利用すれば画像作成も難しくありません。何より、画像が表示されれば局面のわかりやすさは一番です。デメリットは画像に頼れない環境でどうするかという点にあります。後ほど考えたいと思います。
5. JavaAppletを利用する
表示例は省略します。
JavaAppletを利用して動く棋譜表示ソフトはいくつも開発されています。途中盤面からの0手の棋譜と位置づければ、局面を表示するJavaAppletと見ることもできるので局面表示にも利用できるというわけです。盤面画像をたくさん使うなら、JavaAppletは共通なので軽くなる可能性がありますが、一般にJavaの起動は重いので使える場面は限定されそうです。いずれにしても、棋譜表示をどうするかということと同じように扱えますので、また今度ということにします。

個人的には3.も有力な方法だと思いますが、ここでは4.について考えてみます。盤面を一枚の画像として表示する場合には、画像が表示できない環境への配慮も必要となってきます。配慮の仕方は様々ですので、どのような方法があるか少し列挙してみます。

1. alt属性に全て任せる。
例：<img src="shokei.gif" alt="将棋盤面 初形">
このように「初形」と書くだけでわかるならいいのですが、もっと複雑な局面では代替テキストが非常に長くなってしまいます。果たしてそれでいいのかという問題は避けられません。
2. longdesc属性も利用する。*1
例：<img src="shokei.gif" alt="将棋盤面 初形" longdesc="shokeisetsumei.html">
img要素にはalt属性のほかにlongdesc属性を指定することもできます。これは「long description」の略で長い説明へのリンクを指定することになっています。盤面の説明が長くなりすぎるなら、これを指定すればHTMLの仕様上は完璧になるわけです。しかし、これはIEではサポートされていないためそれで満足していいのかという問題が発生します。また、HTMLファイルとは別に説明のファイルを準備するという手間も無視できません。
3. 画像の脇に説明を付記する。
<img src="shokei.gif" alt="将棋盤面 初形"> [将棋盤面初形]
これと類似の方法に、画像の脇に説明書きへのリンクを付記するという方法もあります。しかし、画像の脇に何か書かなければならないというのはページ作りに制約を与える上、画像を見られる人にとってはその説明が重複したものになってしまうという問題があります。スマートな方法ではないので、できれば避けたいというのが本音です。
4. 画像をobject要素として記述する。
これについては、以前に私が書いたhttp://www.esn.gr.jp/~mozu/mozuiro/rireki/2002-1.html#r0526を参照して下さい。

現在は自分も含めほとんどのサイトで1.すらおぼつかない状況です。

改めて、ウェブページ内で将棋盤画像を使うことの利点を考えると次のようなことがあります。

  • 図表（ダイアグラム）を用いることで、コンテンツの理解を促進させたり、飽きさせない効果があります。

画像を使う方が、「先手：１七歩、１九香……」などとべたに記すよりもずっとわかりやすいですから。白黒の二値画像を利用すれば一枚の画像の容量を5KB以下に抑えられますから*2、低速回線を考慮してもそれほど重くはなりません。また、使いやすいソフトも出回っているので、将棋盤画像の作成自体は制作者にとってテキストとほぼ同程度の負担しかありません。したがって、アクセシビリティという観点を無視すれば、将棋盤画像の利用はメリットが大きいと言えます。

上で引用したページでは、画像の示す内容を本文に出すという方法論に触れていますが、将棋盤画像の場合は局面全体を示さなければ無意味なので、そのような手段を取るのは難しいと言えます。

それでは、代替テキストはどのように指定すればいいのでしょうか。上の1.の場合には代替テキストは長めにならざるを得ず、2.であれば簡潔に書くということになるでしょう。結局、「先手：１七歩、１九香……」という方式にするしかないのかもしれません。

ここまで考えてきてもう少し別のやり方を模索すべきなのではないかという気がしてきました。その考えはまた後日書くことにします。

*1:longdesc属性およびそれにまつわる事項については、<img longdesc=...>についてを参照して下さい。

*2:上で例に挙げた将棋初形の画像はおよそ3.4KBです。