Web連珠盤の自サイトでの利用方法

Web連珠盤の自サイトでの利用方法について説明します。

もっとも手っ取り早いのはWeb連珠盤を表示させたいページのheadタグ内に

<script type="text/javascript" language="JavaScript" src="http://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連珠盤を利用することができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です