囲碁｜ブラウザ上でJavaScriptを使って棋譜データを再生する方法【WGO.js】

以前、将棋の棋譜をブラウザ上で再生する方法 を紹介しました。同様に、囲碁の棋譜再生も JavaScript でできないかなぁと探していたところ見つかったので紹介します。

WGo.js というものです。

WGo.js のページ「http://wgo.waltheri.net/」。

JavaScript 等のファイルは GitHub に置いてあるので、以下の URL からダウンロードした方がいいかと思います。

https://github.com/waltheri/wgo.js

「Clone or download」ボタンで ZIP 形式でダウンロードできます。

WGo.js は、SGFファイル形式の棋譜データを読み込み、ブラウザ上で再生します。

SGF とは、「Smart Game Format」の略で、インターネットで標準となっている棋譜のファイル形式です。

(;
GC[第２６回名人戦　挑戦手合第３局（主催　朝日新聞）]PB[依田紀基]BR[名人]PW[林海峰]WR[九段]KM[5.5]DT[2001-9-26,27]RE[W+0.5];B[qd];W[dp];B[cd];W[qp];B[op];W[mp];B[on];W[qn];B[pl];W[gq];B[qm];W[pn];B[om];W[nc];B[pq];W[qq];B[rm];W[rn];B[od];W[pb];B[nd];W[mc];B[kd];W[md];B[me];W[le];B[ld];W[mf];B[ne];W[qc];B[rd];W[lf];B[lb];W[rc];B[oh];W[ie];B[ic];W[mi];B[jf];W[jh];B[if];W[pm];B[ol];W[lm];B[ck];W[ge];B[fc];W[ed];B[ec];W[dd];B[dc];W[ce];B[bd];W[ek];B[di];W[fi];B[hf];W[dh];B[ch];W[cg];B[ci];W[eh];B[cn];W[gd];B[hb];W[id];B[ke];W[dn];B[co];W[do];B[lk];W[mk];B[ml];W[ll];B[mj];W[lj];B[nk];W[kk];B[pd];W[mb];B[li];W[mk];B[ob];W[oc];B[lk];W[kj];B[lq];W[mq];B[mr];W[lp];B[kr];W[kq];B[lr];W[jq];B[mh];W[ql];B[rl];W[ni];B[oi];W[qk];B[rk];W[qg];B[qj];W[ng];B[og];W[nh];B[ih];W[qr];B[nq];W[cp];B[dm];W[dl];B[cl];W[em];B[ij];W[nj];B[pc];W[qb];B[ma];W[oa];B[fg];W[ef];B[bp];W[bq];B[gj];W[bg];B[cm];W[oj];B[pj];W[be];B[jr];W[mk];B[nf];W[hr];B[fl];W[or];B[pr];W[ps];B[nr];W[hm];B[lc];W[nb];B[gm];W[gn];B[el];W[fm];B[gl];W[hl];B[fj];W[sd];B[se];W[sc];B[re];W[ad];B[bb];W[ir];B[bo];W[aq];B[eg];W[dg];B[ff];W[ee];B[bh];W[ae];B[hn];W[go];B[jl];W[hk];B[jk];W[jm];B[ok];W[lh];B[km];W[jn];B[ei];W[fh];B[sn];W[so];B[sm];W[rp];B[ac];W[gc];B[gb];W[cc];B[bc];W[cb];B[db];W[hj];B[hi];W[gk];B[fk];W[gi];B[ej];W[ca];B[da];W[im];B[la];W[na];B[ii];W[kf];B[je];W[jg];B[kl];W[kn];B[po];W[qo];B[mn];W[no];B[oo];W[mm];B[nn];W[ig];B[hg];W[jc];B[jd];W[ah];B[ai];W[ag];B[lo];W[ko];B[mo];W[ji];B[cq];W[cr];B[np];W[kp];B[he];W[hd];B[jb];W[hc];B[ib];W[js];B[ks];W[is];B[ns];W[os];B[nm];W[nl];B[dq];W[eq];B[ml];W[bi];B[bj];W[nl];B[dr];W[er];B[ml];W[jj];B[ik];W[ln];B[ap];W[qs];B[nl])

SGF の仕様については、以下に詳しく載っています。

http://www.geocities.jp/nakamiya_town/SGF.html

GitHub からダウンロードしたZIPファイル「wgo.js-master.zip」を解凍します。色々とフォルダやファイルがありますが、必要なのは「wgo」フォルダのみとなります。

以下のような html ファイルを用意します。

「data-wgo=」で直接 SGF 形式を張り付けてもかまいません。ファイルのパスを指定しても読み込んでくれます。

以下のような画面がブラウザ上に表示されること確認します。

Game info に対局情報も表示されることが確認できました。