⇩下線が付いた開始ボタンをクリックしてください。
夏の風物
夏の風物といえば、七夕でしょうか。彦星と織姫の逢瀬にまつわる一年に一度のイベントです。それに童謡から「雨降りお月さん」を取り上げました。最後に透き通るような音色の「南十字星」です。
ここで取り上げた童謡は著作権保護期間が終了したものであり、歌詞が難解のものが多いです。その節はネットを検索して理解されますようにお願いします。
「プログラミング」カテゴリーアーカイブ
俳句教室への誘い
キャッチコピーの一例
カルチャーセンターの案内コピーを作ってみました。縁取り文字を用いてネオンサイン風に表現しました。
「目には青葉 山ほととぎす 初鰹」とは、江戸中期の俳人・山口素堂（1642～1716）の作です。最初の句が字余りですが形にこだわると何の変哲もない句になるとのこと。
カツオの字は松魚が当てられることがあります。これは鰹節(かつおぶし)が松の節に似ていることからというところからきているようです。
美感「青葉」、聴感「ほととぎす」、食感「初鰹」と、春から夏にかけ、江戸の庶民が粋を感じて俳句に詠みました。
令和こんにちは
平成ありがとう ➡ 令和こんにちは
経過時間
プログレス一例
主要ブラウザで動作
HTMLの表現で進捗度を表すとき、progress要素を使います。ダウンロードの完了度や音楽、ビデオの進行状況を表示するときに多用されています。progress要素は進捗度の他、音量の目盛りなどにも使われます。
ほとんどのブラウザでプログレスバーの長さを設定することができません。上図の中央に示したようにMicrosoft Edgeでは他のブラウザよりも長くなるので、右のように統一した表現をしたいと考え、自前のプログレス表示を作ってみました。
実行例
すでに実行済みであり、再実行にはブラウザのリロードボタンをクリックします。
サンプルコード
親要素に幅、長さ、背景色を指定し子要素のwidthに%を指定するだけです。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prog100 {
margin-top: 2px;
background: palegoldenrod;
width: 160px;
height: 14px;
}
</style>
</head>
<body onload="progressSample();">
<Div class="prog100" style="width:120px;">
<div id="prg0" style="width:0%; height:14px; background:seagreen;"></div>
</Div>
<Div class="prog100" style="width:200px;">
<div id="prg1" style="width:0%; height:14px; background:deepskyblue;"></div>
</Div>
<Div class="prog100" style="width:240px;">
<div id="prg2" style="width:0%; height:14px; background:crimson;"></div>
</Div>
<script type="text/javascript" charset="Shift_JIS">
var percent=0;
function progressSample(){
var p = percent+"%";
console.log("progressSample", p, 20+percent*0.5+"%");
document.getElementById("prg0").style.width = p;
document.getElementById("prg1").style.width = p;
document.getElementById("prg2").style.width = 20+percent*0.5+"%";
if(++percent <= 100) setTimeout(progressSample, 50);
}
</script>
</body>
</html>
苦労話
参考にした例は子要素にimageを使った方法でした。その方法でも期待した結果が得られましたが、プログレスバーの色を変更する場合はその都度、画像を用意しなければならず、上の方法を編み出しました。
参考例ではclass名にmainを使っており、ローカル環境で満足いく動作になり、公開サーバーにアップロードするととんでもない動作になりました。原因は容易にわからずclass名をprog100に変更したら期待した動作になりました。
ブログ画面にはヘッダー画面、ウィジェット画面などがかみ合っています。本画面でないところでmainという要素名を使っているようで、予約語のようなclass名を使う事は避けた方が賢明という体験をしました。
グラデーションを楽しむ
アニメーションのひとつ
HTMLで動的な表現をする場合は、JavaScriptで記述すれば、かなり細かな動作を行うことができます。一方、HTMLにanimateメソッドがあり、CSSファイルの中に少ない記述で様々なアニメ表現を可能にしています。その中にグラデーション機能があります。
グラデーションとはホームページやブログの記述において、色や濃淡を連続した階調で表現することを言います。アニメーションについては探求を始めたばかりです。まずはグラデーションを使ってみます。
背景色を連続的に変更する
さんぷる
グラデーションのサンプルコード
<style>
#sample {
background-color: #6CB8FF;
animation: gradationTest 10s linear infinite;
}
@keyframes gradationTest {
0% { background-color: #6CB8FF; }
50% { background-color: #FFF66C; }
100% { background-color: #FFA36C; }
}
</style>
<body>
<DIV id="sample" style="width:600px; height:300px; font-size:136px; color:navy; border:1px solid deeppink;">さんぷる</DIV>
</body>
応用例
先週、人里離れた気まぐれの宿に動くキャッチコピーを表現しました。こんどは次の図をクリックしてグラデーションをお楽しみください。
棋譜自動再生
棋譜リーダーとは
棋譜リーダーあるいは棋譜再生とは、棋譜を読んで画面上に将棋の対戦状況を描画するものです。従前は一手ずつ操作を入れて手を進めるものが多く、今回、自動的に手を進める棋譜自動再生を世に送ります。棋譜ファイルはKIF仕様です。
一手ずつの操作が鬱陶しい、利き手を怪我した、集中して対戦者の棋風を理解したい方への朗報になれば幸いです。
棋譜リーダーの使い方
- 大橋流駒並べの速度を設定する。40～1000ミリ秒の値を入力する。40ミリ秒を選択する場合はこの設定を省略できる。大橋流駒並べのボタンは押さない。
- ファイルを選択するボタンをクリックして棋譜ファイル名を入力する。
- 棋譜再生速度250～10000ミリ秒を入力する。250ミリ秒を選択する場合はこの設定を省略できる。
- 試合開始ボタンをクリックする。
棋譜自動再生JavaScriptコードをダウンロードするには
以下のここをクリックボタンをクリックします。ダウンロードされたkifuReader.zipファイルを解凍すればkifuReader.htmlになるので棋譜自動再生を実行することができます。
style要素でcssに相当する記述をしており、すべての機能を345行からなるkifuReader.html一個のファイルに凝縮してあります。ソースコードの中には随所にコメントが施されているので初心者にも取り組みやすいことでしょう。
先ずはダウンロードせずとも手元に棋譜ファイルがあれば、次の実演画面でファイルを選択に棋譜ファイル名を設定して自動再生をお楽しみください。
棋譜自動再生の実演
棋譜リーダー
将棋研究倶楽部2019
©TacM,2019 Ver0.02
棋譜ファイル
プログラミング教育に貢献
- 2020年度から小学校で必修化
- プログラミング的思考を育む
- 知的ゲームでIT社会に適応
『飾り駒』新築祝いなどの贈答品
この作品はJavaScriptで記述され
ています。
ています。
将棋は役立つの？
- 友達が増えた
- じっくり考えられるようになった
- 勉強ができるようになった
- 先を読む力、決断力が身についた
ソースコードの再利用について
- このソースコードは①ブラウザ上で将棋棋譜を再生するプログラム：http://www.geocities.jp/shogi_depot/JS/index.htmlと②KIF形式の棋譜ファイルサンプルその２：https://github.com/sandmark/KifuCommetter/tree/master/public/swfを参照して作成されています。両関係者の皆様に感謝申し上げます。
- 画面構成はshogi_depotを参照させていただきました。
- 制御や描画するコードはオリジナルなものです。
- ソースコードの著作権はTacMにありますが、 http://aidesign.lolipop.jp/の利用規定により利用することができます。
- 棋譜は「将棋DB2」https://shogidb2.com/等から入手できます。KIF形式のみサポートされています。
さいごに
棋譜自動再生はソフトウェア開発に適したJavaScriptを採用しました。kifuファイルは手入力により作成され多くの冗長が含まれます。厳格さを欠く部分の対応は限定的であることを付記します。
今後の予定はIT将棋の領域に進みたいと考えています。よって、これからは対局の作戦を見破られるソースコードの公開は部分的になることでしょう。
ハイポサイクロイド曲線
サイクロイド曲線とは
半径aの定円の内部を半径bの円が転がるとき、内接円の中心からc離れた点の軌跡で描かれる曲線をサイクロイド曲線と呼び、特に定円に内接しながら円が滑らずに回転するときの円周上の定点の軌跡がハイポサイクロイド曲線です。
再び実演
サンプルコード
<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> </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">🎯</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">©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>
改訂への道しるべ
- BGMを変更する。
- 描画速度を変更する。
- 背景画像をもっと気の利いたものと差し替える。
- ハイポサイクロイド曲線を変更する。
- 研究のためのリンク先を追加する。
大橋流で駒を並べる
盛り上がりの2018将棋界
スーパースター、藤井聡太七段の出現で2018年の棋界は大盛り上がりでした。高校生で学業と両立させながら収入を得る社会人でもあるのです。事情を呑み込めないおおらかな人には中学生、高校生でやれることは大きいものはないはずと高をくくります。
先を越された大人の気持ちもわかります。高校生ではまだ体力も大人には適わず野球、相撲、自転車競技など大人に適いません。知的競技は2~3歳から始めることができるものもあり、10～13歳で全国レベルに達してもおかしくないです。
俗に一流になるには最低でも10年は掛かると言われます。将棋や囲碁は小さな体でも戦うことが可能で早くから始めれば12,13歳でも鍛錬を始めてから10年が経つので過小評価は禁物です。
若手の台頭
何十年と将棋界をリードしてきた羽生永世七冠が無冠に転落したのは驚きでした。トップに上り詰めた先人は常に追われる立場です。
自分の情報は数限りなく多くの人々に公開されるのに対して、若手の情報はそれほど公開されません。
これはいつの世も繰り返されてきたことなので当事者は何とも思っていないでしょう。
このまま、ずるずると終わることはないでしょう。捲土重来（けんどちょうらい）を期すことを願っています。
一説によると若手のAI将棋による研究に、ベテラン・古豪の牙城を崩されたとの評価が出ていますが、それが全部ではないでしょう。
駒を並べるにも流儀
将棋は礼に始まり礼に終わるなどと言われ礼儀を重んじます。気楽な対局では駒の並べ方まで気を配ることはありませんが、衆人環視の対局では駒の並べ方にも注意を払います。
駒の並べ方には古来から、伊藤流と大橋流があり今では大橋流を採用する棋士が多いとされています。相撲の土俵入りにも雲竜型と不知火型がありどれが正式と決まっているわけではありません。
大橋流駒並べとは
大橋流駒並べは駒を配置する優先順位に、下段、中央、左、右という順位に基づいています。先手後手とも同じやり方だから、先手について説明すると先ず、九段目の駒を並べます。
ここで中央の優先順位が高いので王がトップに配置されます。次の優先順位は左だから６九金、４九金、７九銀、３九銀、８九桂、２九桂、９九香、１九香と並べます。
最下段は終わって八段目に移ると左優先で８八角、２八飛と配置します。次に七段目に移動し、５七歩、６七歩、４七歩、７七歩、３七歩、８七歩、２七歩、９七歩、１七歩で並べ終えます。
総括
駒並べのソースコードは前回に述べた方法で入手できますが、いつまでもあると思うな親の金です。親の金よりも親と金が主流ですが前者が本筋という意見に寄り添いたいです。
JavaScriptは原則、ソースコードが丸見えです。AI将棋で対戦するには相手に自分の手の内が見えては都合悪いです。突如、ソースコードが見られなくなることがありますので早めにJavaScriptをマスターされることを切望します。
追加
IE11では動作しません。IE11を除くモダーンブラウザをお使いください。IE11は古典に近いです。MicrosoftではブラウザにはEdgeを推奨しています。Edgeでは期待した動作になるでしょう。
実際に並べてみる
駒の並べ順序においてJavaScriptの時間差表現が威力を発揮します。実際に時間差を体験しないと意味がありません。大橋流で駒を並べるクリックボタンを押してください。
大橋流で駒を並べる ©TacM,2018 Ver0.03
後手：蒼賢照初段 鬼才伝説
天童佐藤敬商店『飾り駒』
先手：聡琳翔二段 新手一生
技巧派からのクリスマスプレゼント
ユニークなクリスマスプレゼント
クリスマスプレゼントの用意に予算不足ならば、世界にただ一つの手作りプレゼントを考えてみましょう。初夏の頃、プラグインを拡張して紙吹雪を降らせる方法において、独自の仕様で紙吹雪を降らせる方法を発表しました。
このライブラリの始まりは「snowfall.jquery.js」であり、雪を降らせる効果を付加するものです。優勝パレードに紙吹雪を降らせたり、しんしんとした雪景色に雪を降らせることができます。
今回は巨大なクリスマスツリーや田園風景にパウダースノウが舞います。寒々しさに暖かみを付けるために色のついた片々が舞って落ちます。ト音記号（🎼）をクリックすれば荘厳なクリスマスソングが流れます。
世界にただ一つのプレゼントを開発して大切な人へ技巧派としての存在感をアピールしてはいかがでしょう。
暖かな贈り物
余談
紙吹雪が画面いっぱいでなく雪景色の部分のみに降り注ぐように希望される場合は、冒頭に挙げた記事を参照すれば解決に向かうと思われます。
果敢な挑戦を！
ソースコードの入手の仕方
サンプルソースコードを入手するには、この記事上でCTRL+Uキーを押してWebページのソースコードを表示させ、＜!DOCTYPE html＞から＜/html＞までを切り取って、たとえばファイル名をindex.htmlと名付けてローカル環境に確保します。
AI将棋事始め2
１将棋対局画面の作り方
ゆくゆくは将棋対局ソフトを作るための取り掛かりとして、開始画面の作り方について先日、AI将棋事始めと将棋開始画面を作るにおいて導入編の記事を掲載しました。
前回までは高い仕様を望む割には実態が伴っていませんでした。今回はこの辺りの改良になります。
ネット上におけるセキュリティ対策のクロスオリジン問題が起きたら、他のページの機密に関与しないようにブラウザにクロスオリジンを許可する起動オプションを付けるか、事前に様々な画像を用意し複雑な参照を回避することによって解決することができます。
🍀２動作環境と目標
- モダーンブラウザで動作する。
- ローカル環境でも動作する。
- 機能の追加が容易である。
- 対局に使う駒を選ぶことができる。
３駒画像の作り方
駒や盤の画像を事前に作成してゲームに使う方式はオーソドックスですが、対局する気候や会場に合わせて用いる駒を変更できるようには配慮されていません。
ここでは対局時に駒や盤を選択できるように無地の駒形画像を編集ソフトでオフラインで作成し、個別コマ名をテキスト表示してその都度作成します。
先手番用に成り駒も含めて15種を作り、180度回転させて後手番の駒にすることができますが、上図のように駒に影を付けて見やすくするために、後手番先手番を別々に作成し合計で30種の駒を用意します。
後手番の文字はtransform:rotate(180deg)を用いてdiv要素を反転して逆さ文字を実現しています。
４初期画面の設定
初期画面は先手番20枚の駒を手前に、後手番20枚の駒を向こう正面に並べます。駒は桝目の縦横の中央に並べると見やすいでしょう。自分の力を過信し無鉄砲にどんどん前にいかないように自分を戒めるために、桝目の下方ギリギリに置く棋士がいますが、少し見にくくなります。
全てのブラウザに100%の満足に至らないですが、ここでは真ん丸中央に置くことを基本にしています。
５対局環境の設定
プロの歴史あるタイトルの対局当日、試合に使う駒でひと悶着があったと聞いたことがあります。プロ野球日本シリーズで前日の打ち合わせで丁々発止があるように、盤外戦の始まりと考えればそんなに特別なことでもないようです。
今回は、対局場の雰囲気に合わせるべく、対局に用いる駒を選択できるようにしています。
過去に、ホテルの滝の音がうるさくて対局に邪魔だから止めてもらえませんかと要望があったそうです。結末はわかりません。探せば将棋名人戦血風録のような著作物がありそうです。
由緒ある対局には羽織袴の正装で臨むことが多いです。ビルマの竪琴の主人公のように頭を丸めてお坊さんの格好で対局場に現れ周りをびっくりさせた挑戦者がおりました。
6将棋対局画面の実行例
対局の間の雰囲気に合わせた駒をボタンをクリックして選択できます。
将棋開始画面作成 Ver0.03
ローカル環境、Google Chromeではcross origin 許可,
chrome.exe –disable-web-security –user-data-dir
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を参照して描画位置などを調整して、一応の満足結果を得ています。これについてはまだ研究中です。