今回は、囲碁きっず詰碁問題を表示することにチャレンジしてみました。
Ino Diaryさんがプラグインを発表されておりますことにたどり着き、喜び勇んでインストール。しかしながら、詰碁問題データの参照場所がプラグイン作成時とは変わってしまっているみたいで、詰碁の表示がされませんでした。そこで、現に詰碁が表示されているサイトのソースを参考に、プラグインの詰碁棋譜の参照先を変えてみましたが、盤面は表示されるものの付帯表示が今一で、私ではお手上げでした。
そこで、他にも詰碁問題を掲載しているところ（日々ネット囲碁）があることがわかり、碁盤周りの表示のソースを見たりして、以下のようにファイルを配置し詰碁を表示させてみました。
◇wgo.jsをダウンロード・展開し、ドキュメントルート以下に配置する。
◇tsumego4kids.js と tsumegoweb.css を tsumego フォルダーに配置する。
＊注：この２つは、ソースから拝借いたしました。
◇tsumego4kids.htmlなるものを作成し、wgo.jsのトップディレクトリに置く。
＊ソースやデモファイルを参考に自サイトの環境に合わせて編集する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>囲碁きっず詰碁</title> <script type="text/javascript" src="./wgo/wgo.min.js"></script> <script type="text/javascript" src="./wgo/wgo.player.min.js"></script> <script type="text/javascript" src="./extensions/tsumego/tsumego.js"></script> <script type="text/javascript" src="./extensions/tsumego/tsumego4kids.js"></script> <script src="./wgo/jquery-3.2.1.min.js"></script> <link rel="stylesheet" type="text/css" href="./extensions/tsumego/tsumegoweb.css"> <script type="text/javascript"> function showTsumego(method) { $.ajax({ type : 'GET', url : 'http://ino.xrea.jp/tsumego/?date=' + method, dataType: 'json', success : function(res) { var tsumego = new WGo.Tsumego(document.getElementById("tsumego_wrapper"), { sgf: res.sgf, }); $("#date").text(res.date); }, error : function(res) { $("#tsumego_wrapper").text("error"); }, timeout : function(res) { $("#tsumego_wrapper").text("error"); } }); } $(document).ready(function(){ $("#today").on('click', function() { showTsumego("today"); }); $("#random").on('click', function() { showTsumego("random"); }); }); </script> </head> <body> <div style="margin: 0; background-color: #f9f9f9; padding: 0px; border-radius: 10px"> <div class="wgo-tsumego-top"> <div class="wgo-tsumego-control"> <div class="wgo-tsumego-btnwrapper"> <button class="wgo-tsumego-btn" id="today">Today</button> </div> <div class="wgo-tsumego-btnwrapper"> <button class="wgo-tsumego-btn" id="random">Random</button> </div> </div> <div class="wgo-tsumego-top"> <div class="wgo-tsumego-comment" id="date"> </div> </div> </div> <div style="margin: 0; background-color: #f9f9f9; padding: 0px; border-radius: 10px" id="tsumego_wrapper"> Your browser doesn't support WGo Player. Use some modern browser like IE9, Google Chrome or Mozilla Firefox. </div> <script> showTsumego("today"); </script> </body> </html> |
◇ファイルの配置イメージ
/htdocs/wgo-js-master/docs/
/extensions/tsumego/tsumego4kids.js, tsumegoweb.css
/iroiroaruyo/
/wgo/jquery-3.2.1.min.js
demo1.html
tsumego4kids.html
◇投稿の際は、iframeタグでtsumego4kids.htmlを表示させる。
何か、将棋盤を表示させた時とやり方が似ていますね。
それでは、実際に打って問題を解いてみてください。
◆クロームとファイアーフォックス以外は、石が置けないみたいですね◆
追記2018.1.12
Ino Diaryさんより、ブログパーツ修正頂き、早速サイドバーに設置いたしました。
IEやEdgeで動作しない問題に対応しました。
ありがとうございました。入れ替えしました。