Monthly Archives: June 2012

あらためて、考え方を整理してみる。 Webページは　HTMLファイル、CSSファイル、JavaScriptファイルという三つの構成要素から成り立っている。そこで今回試作したページのすみわけを考えると以下のようになる。 html ファイル：将棋盤の入れ物を定義し、CSS,JavaScriptファイルにリンクさせる。 CSSファイル：将棋盤と駒の表示の仕組みを定義する。これをHTMLのエレメントの属性に対するスタイル定義で行う。 JavaScriptファイル：　将棋盤の初期配置と駒の動きのデータ、および、駒を初期配置の通りに並べて表示し、駒を動かす関数およびボタンの表示。　データ部分と機能部分を分けて二つのファイルで構成するようにする。 JavaScriptでも”描画”作業は行っていない。WebのDOM（DataObjectModel)を操作してHTMLのエレメント属性を変更させているだけで、あとはブラウザにお任せである。 一度画像データをサーバーから読み込めばデータがローカルにキャッシングされる。ブラウザとしては初期画面で盤と駒のデータを読み込んだあとは時々成り駒のデータをダウンロードしにいくだけなので、作画速度で目に見えるような遅れはない。 Web page を表示するためには将棋の盤、マス目、各コマの画像データの他に filename.html shogiboard.css boarddata.js boardfunction.js の４つのファイルが必要、boarddata.jsに棋譜データを書き込んで動きを指定する、ということになる。実際にはboarddata01.js, boarddata02.js などと作っておいて、html からのリンク先指定を変えてやるような操作になる。 HTML内部、JavaScriptへのリンク部分 <script src=”http://code.jquery.com/jquery-1.7.2.min.js”></script> <script src=”boardfunction.js”></script> <script src=”boarddata01.js”></script> HTML内部、CSSファイルへのリンク部分 <link href=”shogiboard.css” rel=”stylesheet”> ところで、 この将棋盤、自分のサイトに表示するには少し大きすぎる。 もっと小さい画像データがないかなあ、と思っていたのだが、CSSでイメージをスケーリングすれば解決できることに気が付いた。　Cascaded Style Sheet は変更部分だけ記述すれば、最後に置かれた記述が依然の記述を書き換えるので 約６５％のスケールダウンには以下のような内容のCSSファイルをリンク先に追加すればよい。 .board {width:286px; height: 312px;} .komadai {width:100px; height:150px;} .komadai img,.koma, .marker {width:30px; height:33px;} .comment {padding-left:7px; width:450px;min-height:100px;} #boardbase {width:323px; height:337px;} .c1 {left:258px;} .c2 {left: 228px;} .c3 {left:198px;} .c4 {left:168px;} .c5 {left: 138px;} .c6 {left:108px;} .c7 {left:78px;} .c8 {left: 48px;}  .c9 {left: 18px;} .r1 {top:17px;}   .r2 {top:50px;}    .r3 {top:83px;} .r4{top:116px;}   .r5{top:149px;}    .r6 {top:182px;} .r7{top:215px;}   .r8{top:248px;}    .r9{top:281px;} このファイル名、shogiboard-small.css とすれば　HTML内部、CSSファイルへのリンク部分は <link href=”shogiboard.css” rel=”stylesheet”> <link href=”shobiboard-small.css rel=”stylesheet”> となる。 動くサンプルはこちら。 下にファイルと機能のまとめをマインドマップで整理したものをリンクしておく  Animated shogi board

将棋盤の上の駒がボタンを押すごとに一手づつうごくようになって喜んだのもつかの間、手を戻すボタンがないのがひどく問題に見えてきた。　これは機能を追加せねば、と考えたのだが、最初の設計時点で履歴をとるような構想は一切なかったのではたと困った

前述のグローバルデータを読み込んで、駒の処理をする関数を定義していく。 function animateBoard(){ var zAction=board.moves[board.index]; parseAction(zAction); board.index+=1; if (board.moves[board.index].charAt(0)==’x’) $(‘#aButton’).attr(“disabled”,”disabled”)   ; } 上がメインの関数になる。これは呼ばれるごとにboard.indexで指定されるboard.moves[]文字列を読み出し、parseAction関数に渡す。　’x’ を読み込んだ時点で、駒を動かすボタンを無効化するようにしている。 function parseAction(aAction) { if (aAction.charAt(0) == ‘*’) postComment(aAction.slice(1)); else { if (aAction.charAt(1) == ‘d’) makeAdrop(aAction.charAt(0), aAction.charAt(4), aAction.substr(2, 2)); else { makeAmove(aAction.charAt(0).toUpperCase(), aAction.charAt(1), aAction.substr(4, 2), aAction.substr(2, 2)); } if(aAction.indexOf(‘*’)>0){postComment(aAction.slice(aAction.indexOf(‘*’)+1))} } } parseAction 関数では文字列を解析し、コマンドを実行する。コメントであれば、postComment,  駒を打つのであれば、makeAdrop, それ以外はmakeAmove関数にパラメーターを渡し、最後にもう一度コメントの有無を確認している。 function postComment(comment) {$(‘#scomment’).empty().append(comment);} postComment はid=”scomment”のhtml エレメントをまず空にしてから、コメントを張り付ける、というだけのもの。 function makeAdrop(side,koma,position) { var png=side.toUpperCase()+komatopng(koma); if (side.toUpperCase()==’S’) side=’#senteMochigoma’; else side=’#goteMochigoma’; setMarker(position); position=cordToClass(position); emptyComment(); var selector=side+’ [src$=”‘+png+'”]’; $(selector).first().addClass(position).appendTo(‘#boardbase’); } 駒をドロップする、ということは先手、または後手の駒台から当該する駒のイメージエレメントを探し出し、このイメージエレメントのクラスを変更して将棋板のブロックにぶら下げる(appendTo)という作業になる。appendTo自体はエレメントを移動するコマンドなので、駒台のイメージエレメントをdetachする必要はない。 function makeAmove(side,promote, from, to) { emptyComment(); //if to position is already occupied, then capture that image element to ‘side’s mochigoma //for this we check the lenth of selector. ie, if $(“.c6 .r7”).length>0 then there is an element. if …

Continue reading “JavaScriptで将棋の駒を動かす２”

前回作った将棋盤で、初期画面を表示することができたので、ここから駒を動かすしかけをJavaScriptで作成していく。 駒の動きを表すデータ形式をまず決める。やはり、boardというグローバルオブジェクトの中にmoves というString配列 として用意することにする。 一文字目：先手・後手の指示、s (先手)またはｇ(後手）の一文字で表記。先手が2手続けて指す、ような場合にも対応、　 ‘x’で終了。 二文字目：駒を打つ場合にはd(drop) ,駒をなる場合には’+’, それ以外は読み込まない。 三、四文字目：駒の移動先の座標　3四の場合は34 etc., 五、六文字目：二文字目、drop指定以外は駒の移動元の座標　3三の場合は33 etc., 二文字目がDrop指定の場合、五文字目は駒の指定一文字jとなる。(p,l,n,s,g,r or b) たとえば、後手３三の駒が３四に行く場合の表記は “g-3433″となる。　コマの種類に無頓着に３三にあった駒を３四に移動する、という考え方である。 また、後手側が歩を２三に打つ場合は”gd23p”となる。 駒をとる、という表記がないが、これは移動した先に駒があれば、それを取るということにする。よって明示的には記述しない。 また、’*’以下の文字列をコメントとして認識し、コメント欄に表示できるようにする。　一文字目にあれば、駒を動かさず、コメントのみ更新する。   配列のポインターとしてboard.index という変数を指定しておく。　初期値は当然０． これらのルールによって、一連の駒の動きをあらわすとたとえば以下のようなデータ配列となる。 object={ . . . moves:[ “*this is a comment that should go to comment line”, “s-2627 *here, the sente moves a piece from 27 to 26”,//2六歩 “g-8483”,　//８四歩 “s-2526”,　// ２五歩 “g-7261”,　// ７二金 “s-2425”,　// ２四歩 “g-2423 *capturing the piece is implied”,　//同歩 “s-2428”,　// 同飛車 “gd23p”,　// ２三歩打 “s+2324”,// 同飛車成り “g-3241”,　//３二金 “s-2223”,　// 2二竜 “g-2231”,　//同銀 “x”　//終了 ], index:0, . . }

まずは静的に将棋盤と駒をWEBページに表示してみる。 HTMLの記述は以下のごとくなる。 当該部分のみ <link href=”boardstyle.css”  rel=”stylesheet” > . . <div class=”table”> <!– outer table –> <div class=”row”> <div id=”boardbase” class=”cell”> <img class=”board” src=”assets/images/shogiboards/ban_kaya_a.png” alt=””/>　<!– 盤を表示–> <img class=”board” src=”assets/images/shogiboards/masu_dot_xy.png” alt=””/><!– マス目を表示 –> <img class=”koma c5 r9″ src=”assets/images/shogiboards/Sou.png” alt=””/><!–先手王を　５９に –> <img class=”koma c5 r1″ src=”assets/images/shogiboards/Gou.png” alt=””/><!– 後手王を　５１に–> <img class=”koma c3 r7″ src=”assets/images/shogiboards/Ggin.png” alt=””/><!–後手銀を　３７に –> <img class=”koma c9 r7″ src=”assets/images/shogiboards/Sfu.png” alt=””/><!–先手の歩を９７に–> <img class=”koma c4 r9″ src=”assets/images/shogiboards/Skin.png” alt=””/><!–先手の金を４９に–> </div> <div class=”table”><!– inner table –> <div class=”row”> <div id=”goteMochigoma” class=”komadai cell”>　<!– 後手の駒台–> <img src=”assets/images/shogiboards/Gou.png” alt=””/> <img src=”assets/images/shogiboards/Ggin.png” alt=””/> <img src=”assets/images/shogiboards/Gfu.png” alt=””/> <img src=”assets/images/shogiboards/Gfu.png” alt=””/> <img src=”assets/images/shogiboards/Gkin.png” alt=””/> </div> </div> <div class=”row”> <div class=”cell empty” ></div> </div> <div class=”row”> <div id=”senteMochigoma” class=”komadai cell”><!–先手の駒台–> <img src=”assets/images/shogiboards/Sgin.png” alt=””/> …

Continue reading “将棋盤と駒をWEB上に表示する1”

趣味で英語の将棋入門サイトをホストして5年くらい経つ。　駒の動きとか手筋、などをみせるのに過去ネット上で入手できる色々なアプリに世話になってきた。一番お世話になっているのが柿木さんのkifu for Flash で、定跡の紹介などは、このアプリケーションが欠かせない。　他にもユモケンさんのFlashを使った将棋盤を使って歩の手筋の紹介などをしてきた。　数年前に簡単な詰め将棋集をつくるのにBCM将棋で画像を生成し、これを順次表示して詰め手順を示すしくみを当時覚えたてのJavaScriptで書いてみた。　ただそのときわかったのだが、手数ごとの画像をいちいちセーブしてそれを組みたてる、というのはJavaScriptを使っていても結構手間がかかる。　今回駒職人1さんのサイトからCreative common license による駒と将棋盤の画像が入手できたのでこれを機会に初期の駒配置と動きのデータをJavaScriptファイルに書いておけば、それをなぞって実行してくれるようなしかけを作ってみた。 一応うごくようになったので、ここに公開しておくことにする。 特徴としては 駒の配置をCSSで処理しているということで、具体的にいうと　たとえば先手の銀を３４におきたい場合、銀のイメージファイルがSgin.png とすると <img  src=”Sgin.png” class=”koma c3 r4″ alt=”” /> というようなイメージエレメントをJavascriptで動的に生成して将棋盤の３四の位置に銀を表示させる、というような手法をとっている。 動くサンプルをここにおいておく。　また、3年経つと何をやっているのかわからなくなる、というのが前回の経験でよくわかったので少し詳しい説明を順次ここに書きのこしておくことにする。　誰かの参考になればうれしいし、もっと経験のある方から助言をいただけるとありがたい。 ねらい：　サイトの教材作成に使えるような動く将棋盤 データのエラーチェックなどはつけない（自分でしか使わないので） 前もって用意しておいたデータファイルをもとに初期配置およびその後の駒の動きを表示できる CSSとJavaScript、HTMLの3種の神器のみで記述、JavaScriptはJqueryLibraryも使用 上記のページにはHTML記述に余計なものは入れていないので、ブラウザーの開発ツールを使って二つのJSファイルの中身とCSSファイルの中身も一緒に見てもらえれば、それなりにコメントも入れたので、ほぼ全容がつかめると思う。