棋譜ビューワー(bodoview) 棋譜ビューワーをHTMLとJavaScriptだけで作りました. (cgi & Perl は不要)ですのでご利用ください。 棋譜は次例のSGF形式で記述(ただし変化のツリーは不可)します。このbodoviewの プログラムで棋譜再現、作成、終局計算が可能です(後述)。 (;Comment[黒:呉清源 白:本因坊 秀栄 対局:1933年東京 ] ;B[qc] ;W[cd] ;B[dp] ;W[pq] ;B[jj] ;W[pd] ;B[qd] ;W[pe] ;B[ob] ;W[qn] ;B[jp] ;W[lq] ;B[dj] ;W[ed] ;B[lo] ;W[nq] ;B[kq] ;W[lp] ;B[ko] ;W[ch] ;B[gj] ;W[fq] ;B[fo] ;W[iq] ;B[gp] ;W[cq] ;B[cp] ;W[dq] ;B[nd] ;W[ph] ;B[pj] ;W[ne] ;B[me] ;W[mf] ;B[nf] ;W[ng] ;B[oe] ;W[of] ;B[ne] ;W[nj] ;B[om] ;W[mg] ;B[ke] ;W[hc] ;B[qm] ;W[rm] ;B[rn] ;W[rl] ;Comment[白 2目勝ち] ) A.棋譜参照型  ホームページに上記の棋譜と下記インラインフレームを次のように組み込む。 プログラムはsrc=からの参照先にあり、一緒に貼り付けられた棋譜を参照します。 ============================================================================== ============================================================================== 以上で組み込み完了です。 ただしプログラムは参照されるのでインターネットに接続しておきます。 但し棋譜の文字数に制限があるので、コメントなしでマイクロソフトのIEで 340−350手までが限界となります(NETSCAPEの方が長い文字数可)。 B.棋譜組込型  棋譜をコメント付きでホームページに組み込むときには下記のようにします。 ==================================================================================
================================================================================== ホームページでの表示位置を変えるにはホームページビルダーの「どこでも配置」で 調整してみてください。あるいはサンプルのように別ページのの 中に表示する方式もあります。 C.プログラム組込型 必要なプログラムはmazのフォルダーに全てありますのでダウンロード、解凍して ホームページと一緒の所に置いておきます。(ネットに接続しなくても動作します。) C_1.次のbodoview.htmに棋譜を貼り付け、別の名前をつけて保存しておく。  棋譜はの間にSGF形式で貼り付けます。 ===============bodoview.htm====================== bodoview by maznaga
================================== C_2.棋譜を表示するホームページに次のインラインフレームを組み込む(2行のみ)。 bodoview.htmの代わりに棋譜を貼り付けて名前をつけたものと置き換えます。 ============================================================================== ============================================================================== 以上で組み込み完了です。 D:サンプルのホームページの作り方 棋譜を切り替えることのできるサンプルのホームページの構成は次のようになっています。 まずindex.htmのフレーム管理の下に目次のbodokifu.htmと本体のbodosample.htmが作られ ています。 さらにbodosample.htmの中には「碁盤と操作のフォーム」がインラインフレームで 組み込まれています。最初は棋譜が入っていないbodoview.htmをインラインフレームに 呼び出しています。 構成:index.htm--->(bodokifu.htm, (bodosample.htm-->bodoview.htm)) 棋譜はbodoview.htmに貼り付けて、棋譜ごとの名前をつけておきます。 (bodo_geseigen.htm, bodo_shusaku.htm, bodo_hinbo.htm など) 目次のbodokifu.htmの棋譜名をクリックするとその棋譜つきのHTM (bodo_goseigen.htmなど)に置き換えてしまいます。このために目次のリンクの記述は次のようにします。 呉清玄 インラインフレームには"go"という名前がついているのでそこにhref=を表示すること を意味します。 プログラム組込型でも棋譜組込型でも同様に動作しますが、プログラムを組込む場合は mazというフォルダーのなかに入っているプログラムを全て以上のホームページと同じ場所に組み込んでおいてください。mazのフォルダーの中にJavaScript(JS)があり、さらにその下のpngフォルダーに画像が入っています。 配布のbodoview.htmは空盤ですが、TextAreaに棋譜をつけた  bodo_goseigen.htm, bodo_shusaku.htm, bodo_hinbo.htm を棋譜の データベースとして用意しておきました。 また使用方法は「ハマ」などの計算TEXTAREAに書き込んであります。 E:操作フォームの使い方 1.棋譜を再現するときは前後操作釦で手順を前後することができます。 (マウスを置くだけで1秒間隔で動作します) 2.手数No.を書き換えてJump釦を押すとその手数までの状態が表示されます。 3.変化を検討するときは碁盤の座標をクリックして手順を変えることができます。 4.碁盤をクリックして変えた手順は、Reload釦で元の棋譜手順に戻ります。 5.碁盤をクリックで作成した棋譜はWrite釦で置き換えることができます。 6.TextAreaの棋譜を他のsgf棋譜に書き換えReload釦でその棋譜を取り込むことができます。 7.置石をチェックのままにしておくと碁盤クリックでも手番は変わらなくなります。 8.Score釦を押すと空地がチェックされ数が計算されます。死石はクリックして取除きます。 9.再度Score釦を押すと計算モードから棋譜再現解析モードにもどります。 F: 棋譜の作り方 1.碁盤をクリックしてWrite釦を押せば棋譜がTextAreaに生成されます。 2.これをコピーしてメモ帖(NOTE)など他のエデターに貼り付け名前をつけ   .sgfの拡張子でセーブします。 3.置石をチェックして碁盤をクリックすれば置石の棋譜が、交互をチェックして   クリックすれば対局棋譜が生成されます。 4.置石は詰碁の棋譜作成などにも利用できます。 2003.2.17 記 松永 清  (改定2004.12.28)  (改定2005.1.15)