「プログラミング」カテゴリーアーカイブ

Programing

棋譜自動再生

棋譜リーダーとは

棋譜リーダーあるいは棋譜再生とは、棋譜を読んで画面上に将棋の対戦状況を描画するものです。従前は一手ずつ操作を入れて手を進めるものが多く、今回、自動的に手を進める棋譜自動再生を世に送ります。棋譜ファイルはKIF仕様です。



一手ずつの操作が鬱陶しい、利き手を怪我した、集中して対戦者の棋風を理解したい方への朗報になれば幸いです。

棋譜リーダーの使い方

  1. 大橋流駒並べの速度を設定する。40~1000ミリ秒の値を入力する。40ミリ秒を選択する場合はこの設定を省略できる。大橋流駒並べのボタンは押さない。
  2. ファイルを選択するボタンをクリックして棋譜ファイル名を入力する。
  3. 棋譜再生速度250~10000ミリ秒を入力する。250ミリ秒を選択する場合はこの設定を省略できる。
  4. 試合開始ボタンをクリックする。

 

棋譜自動再生JavaScriptコードをダウンロードするには

以下のここをクリックボタンをクリックします。ダウンロードされたkifuReader.zipファイルを解凍すればkifuReader.htmlになるので棋譜自動再生を実行することができます。

style要素でcssに相当する記述をしており、すべての機能を345行からなるkifuReader.html一個のファイルに凝縮してあります。ソースコードの中には随所にコメントが施されているので初心者にも取り組みやすいことでしょう。

先ずはダウンロードせずとも手元に棋譜ファイルがあれば、次の実演画面でファイルを選択に棋譜ファイル名を設定して自動再生をお楽しみください。

 

棋譜自動再生の実演

棋譜リーダー
将棋研究倶楽部2019 ©TacM,2019 Ver0.02
棋譜ファイル 

プログラミング教育に貢献
  • 2020年度から小学校で必修化
  • プログラミング的思考を育む
  • 知的ゲームでIT社会に適応
『飾り駒』新築祝いなどの贈答品
この作品はJavaScriptで記述され
ています。
将棋は役立つの?
  • 友達が増えた
  • じっくり考えられるようになった
  • 勉強ができるようになった
  • 先を読む力、決断力が身についた

ソースコードの再利用について

  1. このソースコードは①ブラウザ上で将棋棋譜を再生するプログラム:http://www.geocities.jp/shogi_depot/JS/index.htmlと②KIF形式の棋譜ファイルサンプルその2:https://github.com/sandmark/KifuCommetter/tree/master/public/swfを参照して作成されています。両関係者の皆様に感謝申し上げます。
  2. 画面構成はshogi_depotを参照させていただきました。
  3. 制御や描画するコードはオリジナルなものです。
  4. ソースコードの著作権はTacMにありますが、 http://aidesign.lolipop.jp/の利用規定により利用することができます。
  5. 棋譜は「将棋DB2」https://shogidb2.com/等から入手できます。KIF形式のみサポートされています。

さいごに

棋譜自動再生はソフトウェア開発に適したJavaScriptを採用しました。kifuファイルは手入力により作成され多くの冗長が含まれます。厳格さを欠く部分の対応は限定的であることを付記します。

今後の予定はIT将棋の領域に進みたいと考えています。よって、これからは対局の作戦を見破られるソースコードの公開は部分的になることでしょう。

 

ハイポサイクロイド曲線

サイクロイド曲線とは

半径aの定円の内部を半径bの円が転がるとき、内接円の中心からc離れた点の軌跡で描かれる曲線をサイクロイド曲線と呼び、特に定円に内接しながら円が滑らずに回転するときの円周上の定点の軌跡がハイポサイクロイド曲線です。

ハイポサイクロイド曲線

再び実演

-1 0 1 1 -1 ハイポサイクロイド曲線 🎯 0% 参照:フリー音楽素材 甘茶の音楽工房 casualgirls.mp3 ©TacM,2019 Ver0.03

 

サンプルコード

<html>
<body>
<audio id="s9" preload="auto" src="http://aidesign.lolipop.jp/wp-content/uploads/2014/11/se6.wav"></audio>
<audio id="c6" preload="auto" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/04/casualgirls.mp3"></audio>
<div style="float:left; font-size:36px"><a href="javascript:void(0)" onclick="top1()"><span id="t1" style=''>開始</span></a>&emsp;</div>
<div style="float:left; font-size:36px"><a href="https://ja.wikipedia.org/wiki/サイクロイド">サイクロイドとは</a></div>
<DIV style="clear:both; position:relative;">
<canvas id="bird" width="890" height="525" style="border: 0px red solid"></canvas>
<svg width="890" height="560" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;">
    <rect id="dotpt" x="38"   y="257" width="6"     height="6"   fill="green"/>
    <rect id="dotlt" x="48"   y="257" width="6"     height="6"   fill="green"/>

    <circle id="circ9" cx="260"   cy="260" r="250"  stroke-width="1" stroke="darkgreen"    fill="none"/>
    <circle id="circ1" cx="45.7"  cy="260" r="35.7" stroke-width="2" stroke="maroon"       fill="none"/>

    <line id="move0" x1="260" y1="260" x2="51" y2="259" stroke-width="2" stroke="maroon"/>
    <polyline id="curve" style="" points=""/>

    <line id="xaxis1"   x1="0"   y1="260" x2="525"   y2="260" stroke-width="1" stroke="black"/>
    <line id="yaxis1"   x1="260" y1="0"   x2="260"   y2="525" stroke-width="1" stroke="black"/>
    <line id="axis0"    x1="80"  y1="260" x2="105.7" y2="260" stroke-width="2" stroke="green"/>
    <text id="theta"    x="0"    y="590" fill="" font-size="24"> </text>
    <text id="textx0"   x="15"   y="274">-1</text>
    <text id="textx1"   x="270"  y="274">0</text>
    <text id="textx2"   x="522"  y="274">1</text>
    <text id="texty0"   x="268"  y="23">1</text>
    <text id="texty2"   x="260"  y="523">-1</text>
    <text id="head1"    x="2"    y="20"  fill="purple" font-size="16" font-weight="bold">ハイポサイクロイド曲線</text>
    <rect id="progres7" x="41"   y="545" width="400"   height="4" fill="mediumorchid"/>
    <rect id="progres8" x="40"   y="542" width="10"    height="10" fill="red"/>
    <text id="head0"    x="445"  y="515" fill="green" font-size="64">&#x1F3AF;</text>
    <text id="progres9" x="453"  y="550" fill="green"  font-size="24">0%</text>
    <text id="mtext"    x="4"    y="506" font-size="14">参照:フリー音楽素材</text>
    <text               x="4"    y="522" font-size="14">甘茶の音楽工房 casualgirls.mp3</text>
    <text               x="4"    y="538" font-size="14">&copy;TacM,2019 Ver0.03</text>
    <text id="bijin"    x="278"  y="538" font-size="14" fill="magenta" font-weight="bold"></text>
</svg>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
const SIZE=250;                             //回転円半径
const ZX=ZY=260;                            //中心点x, 中心点y
const PAR =[[1, 1/6, 1/24], [1, 1/7, 1/7],  [1, 1/4, 1/15], [1, 1/5, 1/4],									//a, b, c
            [1, 1/8, 1/6], [1, 1/3, 1/12], [1, 1/7, 1/12],  [1, 1/9, 1/27]  ];								//8点
const COL =['gold', 'royalblue', 'magenta', 'indigo', 'bisque', 'darkgreen', 'orange', 'tomato'  ];
const MARU=["\u24ea","\u2460","\u2461","\u2462","\u2463","\u2464","\u2465","\u2466","\u2467","\u2468"];	// 0-9
const lady=["小野小町", "見返り美人", "額田王(ぬかたのおおきみ)", "カジュアルガール",
            "ふっくら万葉美人", "うちわ持つ浴衣美人", "花火見物で涼む着物美人", "三月の鮠ヒロイン葉津"];
const COMT = "M ";                          //円弧のコマンド
const T3 = 40;                              //interval 45 30
const ST = 0.02;                            //step
const FUNC = ["開始", "停止", "終了"];      //"開始", "停止", "終了"
const Src = "http://aidesign.lolipop.jp/wp-content/uploads/2016/11/Bijinga.png";	//poster image
var points12 = "";                          //描画点1, 描画点2
var th = 0.0;                               //回転角
var v = 0;                                  //順番号, 0~7 PAR.length
var w = 0;                                  //動作状態, 0~2
var timer = 0;                              //for setTimeout
var Img;									//イメージオブジェクト
var sequence = [];                          //シャッフル表
var ctx, pbar;								//グローバル変数
var tx0 = document.getElementById("head0");	//Number
console.log("LENGTH", COL.length, PAR.length);
window.onload = function(){                 //ページがロードされるときに起動する無名関数
 var canvas = document.getElementById('bird');          //canvas取得
 if (canvas.getContext) ctx = canvas.getContext('2d');  //有効性
 else                   alert("can not use canvas.");   //エラー
  Img = new Image();                        //イメージオブジェクト
  Img.src = Src;                            //image-file
  Img.onload = function(){                  //読み込み時, drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
	drawBijinga(Math.floor(Math.random()*8));//美人画を描く
  };
};
					//v:0-7 -> sequence[v]	//┌───────────┬────┐
function f(v){return sequence[v];}          //│  0~999までの乱数  │ 順番号 │
											//└───────────┴────┘
function top1(){							//開始 or 停止ボタンの押下で起動
  if(w==0){                                 //開始処理, wは状態識別の他、配列の参照に用いる。
    w=1;                                    //動作中にする。これからシャッフル表を作る。
    for(var i=0; i<8; ++i)  sequence[i] = i + Math.floor(Math.random()*1000)*16;//0~999までの乱数を発生させる
    sequence = sequence.sort(function(a, b){return a - b;});//小さい順に並び替える
    for(i=0; i<8; ++i)  sequence[i] %= 16;  //下4ビットすなわち並び変えられた順番号を取り出す
    pbar = document.getElementById('progres8');//
    document.getElementById('c6').play();   //casualgirls
    hypo();                                 //サイクロイド曲線を描画する
  }                                         //開始処理の終了
  else{                                     //終了or停止処理
    if(w==1){                               //停止処理
        w=2;                                //停止から終了へ表示を変える
        clearTimeout(timer);                //ポスター画像の表示を停止
        document.getElementById('c6').pause();//BGMを停止
    }else   alert("終了しています。再開するには、再読み込みをします。");    //再開する
  }
    labelClick();                           //"開始", "停止", "終了"
}
function hypo(){                            //start, hypoから起動、《サイクロイド曲線を描画する》
    calculate(f(v));                                            //thを参照
    th += ST;                                                   //thを更新

    var u = Math.floor(Math.random()*10);                       //0~9までの乱数を発生させる
    tx0.textContent = MARU[u];                                  //回転軸中央の数字
    if(th < 2.005){                                             //曲線の描画を継続
        head0.setAttribute('fill', COL[v]);                     //刻々変わる当選番号の色
        timer = setTimeout('hypo()', T3);                       //高速描画
    }else{                                                      //番号が確定
		tx0.textContent = MARU[v+1];							//回転軸中央の数字
        head0.setAttribute("fill", 'red');                      //確定色として赤
        document.getElementById('s9').play();                   //一桁の番号が確定
        th = 0.0;                                               //次の処理の準備
		drawBijinga(f(v));										//美人画を描く
        points12="";                                            //svgコマンド
        if(++v<PAR.length)	timer = setTimeout('hypo()', 2200);	//次の数字が残っている, v:0~7 2200ms、次の描画まで間を置く
        else{													//v:7を超えた
            w=v=0;                                              //再開用にクリア
            labelClick();                                       //"開始", "停止", "終了"
        }
    }
}
function labelClick(){document.getElementById("t1").innerHTML=FUNC[w];		/*"開始", "停止", "終了"*/}
function drawBijinga(n){										//美人画を描く
	ctx.drawImage(Img, 300*n,0, 300,300,  80, 80, 360,360);		//切り替え画像,0-7番目
	document.getElementById("bijin").innerHTML = lady[n];
	console.log("bijin", n, lady[n]);
}
function calculate(iy){                                                         //サイクロイド曲線を計算
    var t = th * Math.PI;                                                       //theta:θ
    var ab = PAR[iy][0] - PAR[iy][1];                                           //a - b;
    var bb = ab / PAR[iy][1] * t;                                               //(a-b)/a*θ
    var r = SIZE * PAR[iy][1] / PAR[iy][0];                                     //b/a
    var wx = ZX + SIZE * (ab * Math.cos(t) + PAR[iy][2] * Math.cos(bb));        //x
    var wy = ZY - SIZE * (ab * Math.sin(t) - PAR[iy][2] * Math.sin(bb));        //y
    var vx = ZX + SIZE * ab * Math.cos(t);                                      //X
    var vy = ZY - SIZE * ab * Math.sin(t);                                      //Y

    points12=points12+" "+wx+","+wy;                                            //"0,100 40,200"
    curve.setAttribute("points", points12);                                     //サイクロイド曲線を描画する
    curve.setAttribute("style", 'fill:none; stroke-width:3; stroke:'+COL[iy]);  //描画スタイル

    dotpt.setAttribute("x", wx-3);  dotpt.setAttribute("y", wy-3);              //直線の中点
    dotlt.setAttribute("x", vx-3);  dotlt.setAttribute("y", vy-3);              //直線左の先端

    circ1.setAttribute("cx", vx);   circ1.setAttribute("cy", vy);               //回転円の中心 x, y
    circ1.setAttribute("r", r);                                                 //回転円の半径
    move0.setAttribute("x2", vx);   move0.setAttribute("y2", vy);               //回転円の中心 x, y

    axis0.setAttribute("x1", vx);   axis0.setAttribute("y1", vy);               //直線左
    axis0.setAttribute("x2", wx-1); axis0.setAttribute("y2", wy-1);             //直線右
    var x = Math.round(th * 20000) / 100;   ////////////////// プログレスの処理 /////////////////
    var b = "  " + Math.round(x / 4) + "%";                                     //0-100%
    pbar.setAttribute("x", x+41);                                               //progress
    progres9.textContent = b.substr(b.length-4, 4);                             //percent
}
</script>
</html>

 

改訂への道しるべ

  1. BGMを変更する。
  2. 描画速度を変更する。
  3. 背景画像をもっと気の利いたものと差し替える。
  4. ハイポサイクロイド曲線を変更する。
  5. 研究のためのリンク先を追加する。

 

大橋流で駒を並べる

盛り上がりの2018将棋界

スーパースター、藤井聡太七段の出現で2018年の棋界は大盛り上がりでした。高校生で学業と両立させながら収入を得る社会人でもあるのです。事情を呑み込めないおおらかな人には中学生、高校生でやれることは大きいものはないはずと高をくくります。

先を越された大人の気持ちもわかります。高校生ではまだ体力も大人には適わず野球、相撲、自転車競技など大人に適いません。知的競技は2~3歳から始めることができるものもあり、10~13歳で全国レベルに達してもおかしくないです。

俗に一流になるには最低でも10年は掛かると言われます。将棋や囲碁は小さな体でも戦うことが可能で早くから始めれば12,13歳でも鍛錬を始めてから10年が経つので過小評価は禁物です。

若手の台頭

何十年と将棋界をリードしてきた羽生永世七冠が無冠に転落したのは驚きでした。トップに上り詰めた先人は常に追われる立場です。

自分の情報は数限りなく多くの人々に公開されるのに対して、若手の情報はそれほど公開されません。

これはいつの世も繰り返されてきたことなので当事者は何とも思っていないでしょう。

このまま、ずるずると終わることはないでしょう。捲土重来(けんどちょうらい)を期すことを願っています。

一説によると若手のAI将棋による研究に、ベテラン・古豪の牙城を崩されたとの評価が出ていますが、それが全部ではないでしょう。

駒を並べるにも流儀

将棋は礼に始まり礼に終わるなどと言われ礼儀を重んじます。気楽な対局では駒の並べ方まで気を配ることはありませんが、衆人環視の対局では駒の並べ方にも注意を払います。

駒の並べ方には古来から、伊藤流大橋流があり今では大橋流を採用する棋士が多いとされています。相撲の土俵入りにも雲竜型と不知火型がありどれが正式と決まっているわけではありません。

大橋流駒並べとは

大橋流駒並べは駒を配置する優先順位に、下段、中央、左、右という順位に基づいています。先手後手とも同じやり方だから、先手について説明すると先ず、九段目の駒を並べます。

ここで中央の優先順位が高いので王がトップに配置されます。次の優先順位は左だから6九金、4九金、7九銀、3九銀、8九桂、2九桂、9九香、1九香と並べます。

最下段は終わって八段目に移ると左優先で8八角、2八飛と配置します。次に七段目に移動し、5七歩、6七歩、4七歩、7七歩、3七歩、8七歩、2七歩、9七歩、1七歩で並べ終えます。

総括

駒並べのソースコードは前回に述べた方法で入手できますが、いつまでもあると思うな親の金です。親の金よりも親と金が主流ですが前者が本筋という意見に寄り添いたいです。

JavaScriptは原則、ソースコードが丸見えです。AI将棋で対戦するには相手に自分の手の内が見えては都合悪いです。突如、ソースコードが見られなくなることがありますので早めにJavaScriptをマスターされることを切望します。

追加

IE11では動作しません。IE11を除くモダーンブラウザをお使いください。IE11は古典に近いです。MicrosoftではブラウザにはEdgeを推奨しています。Edgeでは期待した動作になるでしょう。

実際に並べてみる

駒の並べ順序においてJavaScriptの時間差表現が威力を発揮します。実際に時間差を体験しないと意味がありません。大橋流で駒を並べるクリックボタンを押してください。

大橋流で駒を並べる ©TacM,2018 Ver0.03
後手:蒼賢照初段 鬼才伝説
天童佐藤敬商店『飾り駒』
先手:聡琳翔二段 新手一生

 

技巧派からのクリスマスプレゼント

ユニークなクリスマスプレゼント

クリスマスプレゼントの用意に予算不足ならば、世界にただ一つの手作りプレゼントを考えてみましょう。初夏の頃、プラグインを拡張して紙吹雪を降らせる方法において、独自の仕様で紙吹雪を降らせる方法を発表しました。

このライブラリの始まりは「snowfall.jquery.js」であり、雪を降らせる効果を付加するものです。優勝パレードに紙吹雪を降らせたり、しんしんとした雪景色に雪を降らせることができます。

今回は巨大なクリスマスツリーや田園風景にパウダースノウが舞います。寒々しさに暖かみを付けるために色のついた片々が舞って落ちます。ト音記号(🎼)をクリックすれば荘厳なクリスマスソングが流れます。

世界にただ一つのプレゼントを開発して大切な人へ技巧派としての存在感をアピールしてはいかがでしょう。

暖かな贈り物

メリークリスマス 🎼👈BGM ©2018 TacM, Ver0.01

⓿お祝いのチョコレートケーキ

余談

紙吹雪が画面いっぱいでなく雪景色の部分のみに降り注ぐように希望される場合は、冒頭に挙げた記事を参照すれば解決に向かうと思われます。

果敢な挑戦を!

ソースコードの入手の仕方

サンプルソースコードを入手するには、この記事上でCTRL+Uキーを押してWebページのソースコードを表示させ、<!DOCTYPE html>から</html>までを切り取って、たとえばファイル名をindex.htmlと名付けてローカル環境に確保します。

 

AI将棋事始め2

1将棋対局画面の作り方

ゆくゆくは将棋対局ソフトを作るための取り掛かりとして、開始画面の作り方について先日、AI将棋事始め将棋開始画面を作るにおいて導入編の記事を掲載しました。

前回までは高い仕様を望む割には実態が伴っていませんでした。今回はこの辺りの改良になります。

ネット上におけるセキュリティ対策のクロスオリジン問題が起きたら、他のページの機密に関与しないようにブラウザにクロスオリジンを許可する起動オプションを付けるか、事前に様々な画像を用意し複雑な参照を回避することによって解決することができます。

🍀2動作環境と目標

  1. モダーンブラウザで動作する。
  2. ローカル環境でも動作する。
  3. 機能の追加が容易である。
  4. 対局に使う駒を選ぶことができる。

3駒画像の作り方

駒や盤の画像を事前に作成してゲームに使う方式はオーソドックスですが、対局する気候や会場に合わせて用いる駒を変更できるようには配慮されていません。

ここでは対局時に駒や盤を選択できるように無地の駒形画像を編集ソフトでオフラインで作成し、個別コマ名をテキスト表示してその都度作成します。

先手番用に成り駒も含めて15種を作り、180度回転させて後手番の駒にすることができますが、上図のように駒に影を付けて見やすくするために、後手番先手番を別々に作成し合計で30種の駒を用意します。

後手番の文字はtransform:rotate(180deg)を用いてdiv要素を反転して逆さ文字を実現しています。

4初期画面の設定

初期画面は先手番20枚の駒を手前に、後手番20枚の駒を向こう正面に並べます。駒は桝目の縦横の中央に並べると見やすいでしょう。自分の力を過信し無鉄砲にどんどん前にいかないように自分を戒めるために、桝目の下方ギリギリに置く棋士がいますが、少し見にくくなります。

全てのブラウザに100%の満足に至らないですが、ここでは真ん丸中央に置くことを基本にしています。

5対局環境の設定

プロの歴史あるタイトルの対局当日、試合に使う駒でひと悶着があったと聞いたことがあります。プロ野球日本シリーズで前日の打ち合わせで丁々発止があるように、盤外戦の始まりと考えればそんなに特別なことでもないようです。

第1期王将戦第6局、陣屋事件で有名になった鶴巻温泉和風旅館「陣屋」

今回は、対局場の雰囲気に合わせるべく、対局に用いる駒を選択できるようにしています。

過去に、ホテルの滝の音がうるさくて対局に邪魔だから止めてもらえませんかと要望があったそうです。結末はわかりません。探せば将棋名人戦血風録のような著作物がありそうです。

中野英伴氏の作品より

由緒ある対局には羽織袴の正装で臨むことが多いです。ビルマの竪琴の主人公のように頭を丸めてお坊さんの格好で対局場に現れ周りをびっくりさせた挑戦者がおりました。

6将棋対局画面の実行例

対局の間の雰囲気に合わせた駒をボタンをクリックして選択できます。

html2canvas、将棋開始画面作成

将棋開始画面作成 Ver0.03

ローカル環境、Google Chromeではcross origin 許可,
chrome.exe –disable-web-security –user-data-dir
※※※※※ window.devicePixelRatio= ※※※※※

7さいごに

四~六段目に成り駒を含む9個の駒を追加しました。主要モダーンブラウザにおいて、window.devicePixelRatioの値、1.25と1.5にて満足のいく動作結果が得られました。

window.devicePixelRatioについて

動作するデバイスが異なると画面に描画される内容が大幅に違うことがあります。画像を表示するモニタの縦横比が関係しています。

window.devicePixelRatioは画像解像の比を示すプロパティのようです。

今回、window.devicePixelRatioが1.25と1.5の2台のPCで確認したところ、当初、バラバラな表示でしたがwindow.devicePixelRatioを参照して描画位置などを調整して、一応の満足結果を得ています。これについてはまだ研究中です。

 

AI将棋事始め

駒画像を作る

将棋盤新かやセット、shogi.wdy.jp より

AI将棋対戦ソフトを作るには先ず、駒と盤の画像を作ることから始まります。将棋盤は木目の壁紙が入手できます。

だいたいはフリー素材になっているので、それに筋用の線と段用の線を上書きして81個の桝目を作れば、割と簡単に作成できます。

画像編集ソフト(ペイントやpaint.netなど)で手作りも可能ですが、将棋盤作成ソフトを一つ作っておくと、雰囲気にあった盤を何種類と用意することができます。これに対し、駒画像作成は一筋縄にはいきません。

駒は漢字で区別されるうえ、大きさや厚みが種類によって異なっています。画像は平面であり、厚みは考慮しないことにします。駒数は先手、後手が20枚ずつ盤上に決められた位置に据え置かれて開始しますが、駒の種類は8種ありその中の金、王を除いた6種の駒の裏に文字が記載されています。

歩、香、桂、銀、飛、角の6種は相手の陣地に入ると裏返って機能を大きくすることができます。この行為を成ると言います。成ると銀、桂馬、香、歩は元の機能が失われて金の機能に変身しますが、飛、角は金に相当する機能が追加されるので絶大な強さの駒に大変身です。敵陣に入っても成らずを選択できます。成るを選んだ場合、元に戻ることができなくなります。

この他、王(おう)と対等の駒に玉(ぎょく)が用意されているものがほとんどです。上位者や年長者が王を、後輩や若年者が玉を持つことが習慣になっています。よって、30種の画像を用意します。

ニ歩の禁止、進みどころのないところに駒を打てないなど細かな将棋のルールは入門書に譲ることにしてここでは駒の種類を把握するに留めます。

成金の語源

新潮選書より

にわか金持ちを成金(なりきん)と言って、口さがない連中が成功者に投げつける言葉の定番です。

妬み、やっかみでの発言と思われますが、が敵陣に突入して大出世し「(と金)」になると、たとえば年収にたとえると歩に較べ16倍相当になるのだから複雑な心境になるのもやむを得ないところでしょう。

仮に年収400万円でつつましく暮らしているのに、突如、知り合いが6400万円の暮らしをし始めたら穏やかにはいられないでしょう。

駒は売買するように交換できますが、売るときはの値打ちがあったのに交換した相手はの価値しかないのだから、忌ま忌ましいことこの上ないという感じです。高段者はと金で金や銀と交換して有利を拡大します。

駒画像作成JavaScriptプログラムコード

以下に、駒の名前として名付けたを含めて32種の駒画像を示します。時間不足でブラウザChromeのみの動作確認になりました。ブラウザも発展途上にあり、マルチブラウザに完璧に対応することは不可能かと存じます。ご不満の方は公開されたソースコードを基に改良を加えてください。五段目には開始画面には異質ですが参考として成り駒を表示しました。

将棋開始画面を作る ©TacM,2018 Ver0.02

動作はGoogle Chrome バージョン71.0.3578.80で確認されました。

さいごに

このたびの駒画像は形が縦長の長方形で、5角形ではありません。また、影を付けることはできませんでしたが、徐々に改良できるでしょう。

htmlで作ったイメージを画像に変換するAPIはhtml2canvas.min.jsを利用しましたが、なぜかサイズが暗黙の裡に1.25(1/0.8)倍に拡大されます。この大きさを自由に指定できないかを解明中です。

ブラウザはリリース元、バージョンごとに微妙な違いがあります。また、表示デバイスのサイズの違いにより期待した動作にならないことがあります。

これらを克服するレスポンシブWebデザインが望まれます。とりあえず、身近な環境で満足した結果が得られた例を挙げておきます。

 

将棋開始画面を作る

ブームについて

あまりにも有名な詰将棋、15手詰め、余り駒なし

ブームとはにわか景気また、にわかにはやり出すことをいいますが、このところの将棋人気の高さは一種のブームと言ってもよいでしょう。

ブームに乗ってひと儲けはうまくいかないものです。将棋は趣味のひとつとして長く親しんできましたので、今更ひとやま当てようとは考えていません。

今までに経験してきた知識や技術が、将棋とAIに興味を持つようになるきっかけになったら幸いです。

将棋とゲーム

コンピュータ将棋を作成するには、相手に勝つための論理的な思考の組み立てが必要です。それはかなり先の話です。まずは二人の対戦を画面上にどのようにして表示するかから始めなければなりません。そこで将棋開始画面を作る方法を一つ提案します。

プログラミング言語

かつて、将棋ソフトを記述する言語としてC言語を採用することが一般的でした。ふた昔前のころ、ハードウェアの機能が今ほど高速でないので高級言語で記述したコードをコンパイルして高速な機械コードに変換して実行されていましたが、目覚ましいハードウェアの進歩で高級言語のままでも遜色のない実行速度が得られるようになっています。

そのような理由から、開発環境を整えやすく、開発効率の高いJavaScriptをコンピュータ将棋ソフトを記述するプログラミング言語に選びました。

開発の目標

モダーンブラウザ(Chrome, Opeara, FireFox, Edge, IE11)で動作し、HTML5、CSS3に準拠したプログラムをめざします。サポートの終わったWindowsXPパソコンも現役で使われていることでしょうが、古典研究を除けば旧仮名遣いをいつまでも続けるような有様は得策ではありません。

ブラウザ上に図を描くために策定されたCanvasという仕様がありますが、画質などの面で当方は十分に使いこなせていないので限定的な使い方になっています。

将棋開始画面をJavaScriptで記述

イタリック体という文字の呼称はピサの斜塔と直接、関係なさそうです。

イタリック体があるのに文字を逆さにテキスト表示する逆さ文字の機能がないようです。いろいろ探しましたが見つかりませんでした。

将棋盤には後手番の駒を逆さに表示しなければなりません。それには文字を画像に変換して180度、回転して表示する方式があります。

縁起物の「左馬」

これを実現するには、これまで将棋の駒を作るソフトを用意し、テキストを画像イメージに変換して画像ファイルに出力して対戦ソフトに組み込むやり方が取られていました。

今回、駒作成ソフトをコンパクト化し、そのイメージをメモリ上に確保して画像として扱えるようにしてあります。

完成まであと一息

問題点がかなりクリアになってきました。次回にJavaScriptコードを公開できるのではないだろうか。Coming soon!乞うご期待。

天才は忘れたころに

記録は破られるために作られる

将棋の加藤一二三氏(愛称:ひふみん)が棋士になったとき、神武以来の天才が誕生したと言われました。西暦2018年(本年)は、神武天皇即位紀元2678年に当たり、約2600年間でたったひとりの稀稀に存在する才能の持ち主ということになります。

この天才によって作られた記録はここ100年ほどは破られないのではと思っていましたが、その後、谷川氏、羽生氏、渡辺氏などの天才が次々に生まれました。

そしておととし、藤井聡太七段が14歳でプロの棋士になりました。まさに天才(天災)は忘れたころにやってくるとは言い得て妙です。

活況を呈する

スーパースターが現れると業界が活気づきます。世代交代が進まない閉鎖的な集まりは限界集落のごとく沈没してしまいます。

多くのスーパースターは全体をけん引して、長年の功績が認められてやがては高評価につながります。

ドラマや映画のモデルになったスターは、ともすれば奇人のごとく扱われたこともあったようです。国民栄誉賞や文化勲章紫綬褒章の受賞は携わっている全員が光栄感に浸っていることでしょう。

女性に好かれることが大切

女性にそっぽ向かれているスポーツは元気がありません。ここぞというときに期待外れな選手を贔屓の引き倒しをしたり、強すぎるライバルチームの選手を卑猥な言葉で罵ったり、人種差別的なひやかしをする雰囲気は女性に好かれません。

ひところ、人気グッズは女子高生によって作られると言われました。人気に今ひとつ盛り上がりに欠けた相撲、柔道、バレーボール、バスケットボール、最近はJRA競馬など人気面において巻き返しが功を奏しています。

その点、将棋界の若手棋士にはイケメンが多く、清潔感があり節度のある人が多く教養深いです。

神武以来のことわざに女性に注目されるものは栄えるがあります。

 

 

棋譜再生を改訂する

棋譜再生を全面改訂しました。棋譜には著作権があり、ここに棋譜そのものを置くのは適切ではありません。そこで将棋DB2のサイトにアクセスし該当する棋譜を画面に表示し、左欄の棋譜の書き出しの直下にある棋譜形式(KIF形式)をクリックし現れたテキストエリアをコピー&ペーストすれば棋譜ファイルを入手できます。

1989/01/09、NHKK放送センターにおいて対戦されたNHK杯、当時の羽生善治五段と加藤一二三九段の棋譜は永久保存ものです。2018-02に国民栄誉賞で表彰された羽生善治竜王が加藤一二三九段に着手した61手目、驚愕の5二銀打ちは目を見張ります。YoutubeにNHKの放映動画が載っていますが、棋譜を入手してもっと身近かに表現してみませんか。

頂点は身近なところから

将棋やプログラミングの初心者が高段者に勝てるコンピュータ将棋ソフトを開発することは夢のまた夢です。まずは棋譜を再生することから始めて、プログラミングを習得すれば、名人に勝つのもあり得ない話ではありません。

先ずは身近なところに挑戦を!

改訂版自動棋譜再生

余談

動作するブラウザはedge, chrome, opare, firefoxです。IE11では十分な動作が得られません。

 

将棋棋譜を再生する

将棋棋譜の自動再生とは

本作品は将棋の棋譜を読んで再生するプレーヤーです。このところ、藤井聡太七段の活躍などがあって将棋愛好者がうなぎのぼりに増えています。なかでも若い女性が急増しており、カープ女子や刀剣愛好家などに代表されるように男性顔負けの様子は頼もしいのひとことです。

これにはコンピュータ将棋が一役買っていると思われます。当方では人間に対抗するソフトはまだ、ハードルが高いと考えKIF仕様の棋譜を読んで画面上に一手一手操作を加えることなく再生していくJavaScriptによるプレーヤーを作ってみました。

直接の開発動機

ちょっと前に、自動マガジンリーダーに挑戦しました。数百ページにおよぶ電子本をパラパラ読みにて素早く内容をつかむようにする立ち読み専用のリーダーです。ページ数が多くなるとページをめくる操作がおっくうです。

これに似たずぼらな将棋ファン向けに、棋譜、読込みスピードを最初に指定して最後まで自動的に一手ごとの操作なしに画面上に再現するものです。

操作方法

  1. まず、棋譜(今はKIFのみ確認)を読む。ファイルを選択する。
  2. 棋譜を用意できなければ研究1研究2研究3をクリックする。
  3. 次に1手ごとの着手間隔をミリ秒単位で入力する。
  4. 試合開始をクリックする。

考察

棋譜の書式には数種類あり、わかりやすいKIF方式を採用しています。自動再生プレーヤーは何が利点かと問われると詰まってしまいますが、寝転んで観たり、手が不自由な方への朗報となるでしょう。

また、将来、まばたきや声、ジェスチャーによる着手指示への応用にすることができるでしょう。

途中で進行速度を変化することも可能ですが、スムースな操作ではありません。ここらあたりは課題として残っています。

将棋の技量向上には自分より上級者の着手を研究することです。対戦相手がいない場合は一人で技を磨き、にっくき将棋敵きをぎゃふんと言わせましょう。

将棋棋譜自動再生

改訂記録

  1. メニューを小変更。

世界時計を作る

主要都市の現在時刻

地図から選ばれた世界主要10都市の現在時刻を表示します。

それによるとリオデジャネイロが東京(正確には東経135度の明石市か)よりも12時間遅れた時刻になります。

東京が2018年10月28日06時00分ならば、リオデジャネイロは2018年10月27日18時00分ということです。

今回、分かった事ですが時差というぐらいだから、すべて1時間刻みかというとなぜかニューデリーは日本よりも3.5時間遅れになっています。

詳しくはこれから調査したいと考えております。

プログラミングについて

プログラミングは単純化するために、選ばれた10都市の時差のデータを記憶しています。地図が正確ならば、ポイントされた地点の経度を求め時差を算出できますが、プログラムが複雑化します。

また、日付変更線が一直線でないことも算出式は一筋縄ではありません。都市の時間情報を記憶する手法は手堅いです。

拡張性などの配慮

今回、主要な都市を10ヶ所選び、世界白地図にプロットしました。そして、その都市マークの画面上におけるカーソル位置を記憶しました。

たった10ヶ所なのでこの作業は簡単に完成できますが、都市数が増えたときはかなり大変な作業となるでしょう。

都市名からその都市の現在時刻を求めるのならば、都市の緯度経度から白地図にプロットする仕組みが拡張性に富んでいると言えます。

プログラミングは複雑になる代わり、一度、完成させれば多くの都市の時計に対応することが可能になります。

究極の理想論とは 🌏

プログラミングには多様な手法があります。開発者の技量や規模によってもどれが適切かは変わります。原始的に泥臭くても構いません。まずは正確に動作することが大切です。これら方式を考えることも楽しみの一つと言えましょう。

プログラミングコード

<!DOCTYPE html>
<html>
<body onLoad="setInterval(timerX, 1000);">
<div><span style="color:deepskyblue; font-size:32px;">『Warmth』by MFP</span>&nbsp;DOVA-SYNDROMEより</div>
<audio style="float:left" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/10/Warmth.mp3" controls loop controlsList="nodownload"></audio>
<div id="ver" style="float:left; width:80px; height:55px; margin-left:5px; font-size:11px; font-weight:bold;">&copy;TacM,2018<BR>Ver0.04</div>
<div style="float:left; width:415px; height:55px; font-size:36px; color:green; border:0px red solid;">主要10都市の現在時刻</div>
<Div id="world" style="clear:both; position: relative; width:800px; height:504px; visibility:visible; background:aliceblue;">
<img id="map" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/10/worldatlas_800.gif">
<div id="clk1" style="position:absolute; left:475px; top:310px; font-size:24px; color:deeppink; font-weight:bold;">&#9471;Tokyo(東京)</div>
<div id="clk2" style="position:absolute; left:475px; top:360px; font-size:24px; color:darkgreen; font-weight:bold;">2018/10/21(日)</div>
<div id="clk3" style="position:absolute; left:475px; top:410px; font-size:40px; color:mediumblue; font-weight:bold;">09:30:15</div>
</Div>
</body>
<script type="text/javascript" charset="Shift_JIS">
const city= ["東京", "ニューヨーク", "北京", "イスタンブール", "パリ", "オークランド", "シドニー", "リオデジャネイロ", "バンクーバー", "カイロ"];
const curr= [0,   -14,  -1,  -7,  -8,   3,   1, -12, -17,  -7];
const px  = [379, 725, 318, 129,  64, 452, 399, 771, 593, 125];const py  = [282, 259, 275, 274, 249, 478, 471, 438, 236, 308];
const SZ  = 18;
var l=0;
document.body.addEventListener("mousedown", function(e){		//マウスクリックのイベントを捕捉する, 座標を取得する
  if(e.target.id=="map"){										//カーソルは地図上にある
	var x = e.offsetX + 10;		//e.pageX;						//X座標
	var y = e.offsetY + 110;	//e.pageY;						//Y座標
	for(var j=0; j<px.length; ++j){
	  if(x<px[j] || x>(px[j]+SZ) || y<py[j] || y>(py[j]+SZ))continue;
	  l=j;														//timerX()で使う
	  document.getElementById("clk1").innerHTML = "\u24FF\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E".substr(l,1) + city[l];//都市名
	  break;
	}
  }
});
function timerX(){																							//年月日(曜日) 時分秒
  var nowTime = new Date();																					//日付情報
  nowTime.setHours(nowTime.getHours() + curr[l]);				//整数のみ, 30分刻みがあれば分も要修正(ニューデリーなど)
  var ymd = nowTime.getFullYear() + "/" + letter2(nowTime.getMonth()+1) + "/" + letter2(nowTime.getDate());	//年 月 日
  document.getElementById("clk2").innerHTML = ymd + "("+"日月火水木金土".substr(nowTime.getDay(),1) + ")";	//曜日(0-6)
  document.getElementById("clk3").innerHTML = letter2(nowTime.getHours())+":"+letter2(nowTime.getMinutes())+":"+letter2(nowTime.getSeconds());
}
function letter2(num) {return ("0" + num ).slice(-2);}			<!-- send "01" -->
</script>
</html>

動作例

都市名を代表する丸囲み番号をクリックすれば、世界時計が表示されます。また、思いやりのあるBGMを用意しましたので再生ボタンをクリックして和らいだ雰囲気でお楽しみください。

『Warmth』by MFP DOVA-SYNDROMEより
©TacM,2018
Ver0.04
主要10都市の現在時刻
⓿Tokyo(東京)
2018/10/21(日)
09:30:15