Web連珠盤の自サイトでの利用方法について説明します。
もっとも手っ取り早いのはWeb連珠盤を表示させたいページのheadタグ内に
<script type="text/javascript" language="JavaScript" src="https://quinstella.net/wp-content/plugins/web-renju-board/renjuboardmin.js"></script>
を追記し、表示したい場所で
<div style="position:relative" id="idGameTree"></div>
<script>RenjuBoardApi.Embed('idGameTree', {boardMode : 'horeditor', sgfData : ''});</script>
とすると
とWeb連珠盤が表示されるはずです。
記入するHTMLタグを作成する際には
- divタグのid属性とRenjuBoardApi.Embedの第一引数を一致させる
- 複数のWeb連珠盤を表示させる場合はHTML内でidを一意にする
という点にご注意ください。
表示オプション
RenjuBoardApi.Embedメソッドの第二引数にJSON形式で以下のオプションを指定することができます。
- boardMode
- image: 画像を表示
- viewer: 棋譜の再生のみ
- vereditor/horeditor: 盤面編集モード（それぞれメニューを下／横に表示）
- problems: 問題解答モード
- sgfData: 初期盤面で読み込む分岐棋譜をSGF形式で指定
- sgfUrl: 初期盤面で読み込む分岐棋譜（SGF形式ファイル）のURLを指定
- moveNumber: 初期状態で表示する手数(デフォルトは0, つまり1手も打たれていない局面が表示される)
- width: 表示するWeb連珠盤の幅をピクセル単位で指定
- viewPort: ‘Auto’を指定すると初期盤面周辺の盤面のみを表示
例えば、
- boardMode: ‘image’
- sgfData: ‘(;GM[4]FF[4]CA[UTF-8]AP[Web Renju Board:1.0.0]ST[0]SZ[15]PB[Black]PW[White];B[hh];W[hg];B[hj];W[if];B[ij];W[ig];B[gg];W[gh];B[je];W[ii];B[ih];W[gj];B[kf])’
- moveNumber: ’13’
- width: ‘600’
- viewPort: ‘Auto’
の場合は次のようなHTMLになり
<div style="position:relative" id="idGameTree"></div>
<script>
RenjuBoardApi.Embed('idGameTree', {boardMode : 'image', 'viewPort': 'auto', width: '600', moveNumber: '13', sgfData : '(;GM[4]FF[4]CA[UTF-8]AP[Web Renju Board:1.0.0]ST[0]SZ[15]PB[Black]PW[White];B[hh];W[hg];B[hj];W[if];B[ij];W[ig];B[gg];W[gh];B[je];W[ii];B[ih];W[gj];B[kf])'});
</script>
以下の画像が表示されるようになります。
最新のWeb連珠盤を配置する場合
GitHub上の最新のWeb連珠盤Javaスクリプトをダウンロードし、自サイトの適当な場所に置きheadタグ内で読み込むようにすると最新のWeb連珠盤を利用することができます。