このブログでは囲碁の棋譜ビューアとしてGoswfという、Flashのソフトを使っていたのですが、自分でiPadを使っている時にも当然見ることができなくて、さすがにそろそろまずいかなあと思っていました。ところが、じゃあJavaScriptなので何かないかと探しても、意外なことに適当なのがぜんぜん見つからないんですね(最初に探し始めたのは、1年ぐらい前だったような気がする…)。せいぜいちょっとオールドファッションなEidoGoぐらいで、これは9路、13路、19路以外はちゃんと対応していないみたいです。というわけで、時間は掛かりましたが、ようやく見つけたのが今回のWGo.jsです(正確には、WGo.jsを利用したWGo.js Playerで棋譜再生ができます)。

WGo.js – javascript library for game of go
http://wgo.waltheri.net/

SGF Player | WGo.js
http://wgo.waltheri.net/player

こんな感じで表示させることができます。

クリックしないと対局結果が表示されないのは気が利いていますし、コメントに座標が含まれていれば、その座標にマウスオーバーすると、その場所が画面に示されるのは、ちょっとおしゃれです。

以下、簡単に使い方の解説をします。

まず、ファイルをダウンロードしてきます。正式版では、パス(着手放棄)の扱いがおかしかったりするので、こちらから開発版を落としてきたほうが良いと思います(最新の開発版はこれはまたこれで、本当はできるはずの碁石の大きさの変更ができないような気がしますが…)。必要なファイルは、wgo/wgo.min.js、wgo/wgo.player.min.js、wgo/wgo.player.css、wgo/wood1.jpgだけです。単色の碁盤、もしくは自前の碁盤の画像を使う場合は、wood1.jpgも必要ありません。その場合は、後で説明するように、碁盤の設定をしてください。

次に、ファイルをサーバにアップロードして、headタグ内で、wgo.min.js、wgo.player.min.js、wgo.player.cssをロードします。

<script type="text/javascript" src="path/to/wgo.min.js"></script>
<script type="text/javascript" src="path/to/wgo.player.min.js"></script>
<link type="text/css" href="path/to/wgo.player.css" rel="stylesheet" />

CMSなどを利用する場合は、絶対パスの方が良いかもしれません。wood1.jpgはwgo.min.jsと同じところに置いておきます(もしくは、後で説明するように、パスを設定してください)。

最後に、ウェブサイトの棋譜ビューアを表示させたい所に、このように記述します。

<div
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
>
Sorry, your browser doesn't support WGo.js.
</div>

外部ファイルを読み込むこともできます。

<div
style="width:650px"
data-wgo="path/to/sgf-file.sgf"
>
Sorry, your browser doesn't support WGo.js.
</div>

初手以外を初期局面としたい場合は、このように記述します。

<div
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
data-wgo-move="3"
>

デフォルトでは、碁盤の画像はwgo.min.jsと同じ場所に置かれているwood1.jpgが使用されますが、それ以外の画像を使いたい場合は、このように記述します。

<div 
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
data-wgo-board="background:'path/to/image.png'"
>
Sorry, your browser doesn't support WGo.js.
</div>

碁盤を単色にすることもできます。

<div 
style="width:650px"
data-wgo="(;GM[1]FF[4]SZ[9];B[aa];W[bb];B[cc];W[dd];B[])"
data-wgo-board="background:'#bbccbb'"
>
Sorry, your browser doesn't support WGo.js.
</div>

スタイルシートのwidthプロパティで、表示サイズを変更することができます。ただし、レイアウトも変わってしまう時があります(ちゃんと調べてないので、ちょっとよく分かっていません)。

これ以外にも、WGo.jsはかなりいろいろとカスタマイズすることができ、この手のソフトに求められる機能は、ほぼ網羅されている気がします。詳しくは本家サイトで調べてみてください。

WGo.jsは最低でも向こう5年、もしかすると向こう10年、問題なく使い続けることができるソフトだと思います。廃墟(笑)のようになったJavaを使ったウェブサイトとか、もう見たくありません(作られた時はものすごい労力がかかったでしょうに…)。今このタイミングで、Java、Flash、EidoGoからWGo.jsにみんなで移行しませんか？