１将棋対局画面の作り方

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

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

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

３駒画像の作り方

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

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

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

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

４初期画面の設定

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

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

５対局環境の設定

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

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

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

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

6将棋対局画面の実行例

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

将棋開始画面作成 Ver0.03

7さいごに

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

window.devicePixelRatioについて

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

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

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

駒画像を作る

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

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

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

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

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

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

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

成金の語源

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

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

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

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

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

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

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

さいごに

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

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

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

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

ブームについて

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

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

今までに経験してきた知識や技術が、将棋と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手目、驚愕の５二銀打ちは目を見張ります。YoutubeにNHKの放映動画が載っていますが、棋譜を入手してもっと身近かに表現してみませんか。

頂点は身近なところから

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

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

改訂版自動棋譜再生

余談

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

将棋棋譜の自動再生とは

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

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

直接の開発動機

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

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

操作方法

1. まず、棋譜（今はKIFのみ確認）を読む。ファイルを選択する。
2. 棋譜を用意できなければ研究１、研究２、研究３をクリックする。
3. 次に１手ごとの着手間隔をミリ秒単位で入力する。
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>

動作例

⓿Tokyo（東京）

2018/10/21(日)

09:30:15

学ぶ前に真似ぶ

動物はあまねく親や先輩を真似ることからは始まります。鳥などの小動物も巣立ちまでは親が運んでくる食料で生き延びますが、やがて自立が待ち受けています。

先進国をひたすら参考にして成長しやがて自ら切り開く時代に突入して久しい時が流れました。プログラミング教育が小学校において必修化になる時期が近づいています。

プログラミングについては、プログラミング言語開発に累計数十年、職業として携わり機械語、アセンブリ言語、高級言語と数えきれないほど触れてきました。

お礼を込めてブログでプログラミングを取り上げています。今回は学び方の一つについて再び語ります。

言語について

人は母国語をもっています。プログラミング言語はその一つと言っても間違いではありません。人間の言葉には融通性がありますが、機械が理解するには厳密性が要求されそれで嫌になる人がおおぜいいます。時代が進めばそれらも改善されるでしょう。

芸術家肌など新しいことに挑戦してとん挫する人は、あまりにまじめに考え過ぎます。理想をめざしたエスペラント語が世界共通語にはなりませんでした。あまりに理想的では暖かみがありません。プログラミング言語は良いと思ったものを一通り理解するのが肝心です。

たとえその言語がすたれても次に隆盛を極める言語は前の欠点などを補って成立するので、だいたい似通ったものになり取っつきやすいです。その意味でも現在、飛ぶ鳥を落とす勢いと言われる言語に触れることは悪くありません。

HTMLとJavaScript

ブログやホームページを記述する言語にHTMLがあります。JavaScriptはその仲間です。それらは無料で入手できるうえ、解説書やサンプルコードなども無料で役立つものが出回っています。特定のメーカーが開発したツールでなく公正な世界中の関係者によって管理されているので、予算的にも教育機関が採用する言語には妥当なところと考えます。

取り掛かりのサンプル

取り掛かりのサンプルとして、『世界時計を作る』に挑戦します。世界の地図の指定した地点の現在時刻を表示するものです。第一回は日本の標準時刻を1秒ごとに表示する課題です。

作成のポイント

サンプルコード

<!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:85px; height:55px; margin-left:5px; font-size:11px; font-weight:bold;">&copy;TacM,2018<BR>Ver0.01</div>
<DIV id="clock" style="clear:both; position:relative; width:600px; height:400px; background:darkgreen; color:aliceblue; font-family:ＭＳ 明朝">
<div style="padding-top:30px; margin-left:45px; font-size:48px; font-weight:bold;">&#x1F30F;&ensp;世界時計を作る
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/10/BigVen.png" width="46" height="59" style="margin-left:8px; margin-bottom:-6px">
</div>
<Div style="position:absolute; left:118px; top:140px; width:364px; height:200px; background:lemonchiffon; color:midnightblue; font-size:44px;">
<div id="clk1" style="position:absolute; left:10px; top:3px; color:tomato;">Tokyo（東京）</div>
<div id="clk2" style="position:absolute; left:10px; top:55px;">2018/10/21（日）</div>
<div id="clk3" style="position:absolute; left:10px; top:105px; font-size:80px;">09:30:15</div>
</Div>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
function timerX(){												//年月日（曜日） 時分秒
  var nowTime = new Date();										<!-- 日付情報 -->
  var sec = nowTime.getSeconds();								<!-- 秒 -->
  var min = nowTime.getMinutes();								<!-- 分 -->
  var hour = nowTime.getHours();								<!-- 時 -->
  var year = nowTime.getFullYear() ;							<!-- 年 -->
  var month = letter2( nowTime.getMonth() + 1 );				<!-- 月 -->
  var date = letter2( nowTime.getDate() ) ;						<!-- 日 -->
  var weekDay = "（"+"日月火水木金土".substr(nowTime.getDay(), 1)+"）";		<!-- 曜日(0-6) -->
  var datex = year+"/"+month+"/"+date+weekDay+"\n";				//表示用(2016/07/02(土) 15:57:01
  document.getElementById("clk2").innerHTML = datex;
  document.getElementById("clk3").innerHTML = letter2(hour)+":"+letter2(min)+":"+letter2(sec);
}
function letter2(num) {return ('0' + num ).slice(-2);}			<!-- send '01' -->
</script>
</html>

動作例

《Warmth》思いやり、優しさというタイトルのBGM付きです。

🌏 世界時計を作る

Tokyo（東京）

2018/10/21（日）

09:30:15

次へのステップ

今回は日本の現在時刻を表示しました。次回は世界地図上に指名した地点の現在時刻を表示する予定です。

小さな目標

日ごろの小さな目標を4題、円形スクロールで表示してみました。

スクロール領域からはみ出す部分の描画設定はoverflow属性にてhiddenを指定しますが、円形帯状に制御する代わりに縦横方向に駆使して代用します。

もっと滑らかなスクロールになるはずですが、西郷（せごどん）風に、初回はこの辺りでよかろうか。

動作例

スクロールのいろは

スクロールはmarqeeタグを用いて、一時代を築いたようですがこのタグはHTML5やCSS3において、非推奨になっていますのでなるべくならば、使わないに越したことはありません。

そこでjquery.marquee.jsの利用になります。このブログでもCSSで作る全ブラウザ対応marqueeなどにおいてMarqueeWithCSSの名で何べんも取り上げています。

画像やテキストを左右の横、上下の縦スクロールして効果的な表現を可能にしています。

縦横を駆使して円形状にスクロールできないかといろいろ挑戦しましたが無理があるようです。そこでDIVの中に定義したテキストをtransform:rotateを用いて回転して描画する方法を採用しました。

にわかな挑戦のため、スムースな円形スクロールではありません。

参照先は、CSSでロゴを回転させるサンプル | WWW WATCHです。こちらは縦スクロールバーのスクロールに応じてスムースに回転表示される優れものですが、新幹線のガイド案内のように隠れたメッセージをスクロールして表示する例ではありません。

当サンプルにおいても解析が進めば期待した動作が得られるのではないだろうか。

円形状スクロール動作例

ブラウザの再読み込みボタンをクリックし、再実行してください。

かぞえうたの歴史

かぞえうたの歴史はかなり古くから存在しています。娯楽と仕事が一体となったものやリズム感よろしく老若男女の間で歌われています。わらべ歌から童謡、春歌まで幅広く庶民生活になじんでいます。

かぞえうたにも種類があり、１から順に繰り上がっていくものが多いようです。日本のことばには七転び八起きのように数詞を折り込んで表現し、ことば遊びの原形と言えるのではないでしょうか。

夏休みの課題として

ことば遊びのひとつとして、すでに輪環の順に四字熟語（輪環の順仕様四字熟語、数え歌仕様四字熟語）を取り上げました。

今回は夏休みの課題例になるよう全プログラムコードを公開し、左スクロールに対応すべく縦書きを止めるなど小変更を加えました。

スクロールの特長

今回は、jQueryというJavaScriptのライブラリを用いてスクロール表現を取り上げます。jQueryには使いやす機能が豊富に詰まっています。

新幹線や山手線などにおいて限定された広さの車内掲示板で多くのメッセージを表示するとき、スクロール表示されます。また、表現に動きを付けて見るものの目を惹きつけます。

動作例

 ダブル連番かぞえ歌 ©TacM,2018 Ver0.04

右の▶をクリック

動作コード

<html>
<head>
<style type="text/css">
.markey {
  width: 600px;
  height: 450px;
  background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2018/08/SkyAutumn.png");
  overflow: hidden;
  border: 1px solid violet;
}
</style>
</head>
<body>
<DIV style="width:100%; height:590px; border:0px solid red;">
<span style="font-size:28px; color:mediumblue;">&emsp;ダブル連番かぞえ歌&emsp;</span>&copy;TacM,2018 Ver0.04<BR>
<Div style="width:600px; min-height:95px; border:0px solid blue; font-size:36px;">
<div id="top" style="float:left; width:298px; color:deeppink; border:0px solid pink;">再生<span style='color:black'>&#x25B6;</span>をクリック</div>
<audio id="bgm" style="float:left; min-height:55px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/kazoeuta.mp3" controls controlsList="nodownload">他のブラウザをどうぞ。</audio>
</Div>
<Div style="position:relative; width:600; height:450; border:0px solid pink;">
<div class="markey" data-direction='left' data-duration='14000' width="600" height="450" style="position:absolute; top:0; left:0;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/08/wordplay12.png" width="6000" height="450"></div>
</Div>
</DIV>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.js"></script>
<script type="text/javascript" charset="Shift_JIS">
          //①    ②    ③    ④    ⑤    ⑥    ⑦    ⑧    ⑨    ⑩    ⑪    ⑫    ⑬    ⑭    ⑮    ⑯
const suji="\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E\u277F\u24EB\u24EC\u24ED\u24EE\u24EF\u24F0";
const head=["一石二鳥", "二人三脚", "三寒四温", "四分五裂", "五臓六腑", "六順七徳", "七転八倒", "八葉九尊", "九分十分", "十年一日", "再生<span style='color:black'>&#x25B6;</span>をクリック"];
var count=-1;
document.getElementById("bgm").addEventListener('play', function(){	//プレイイベント
 if(count < 0){											//初期化処理は1回こっきり
  count=0;
  jQuery(function () {									//marquee処理
	jQuery('.markey')
			.bind('beforeStarting', function(){			//開始前に動作する処理
			timer1sec();								//待機関数起動
		})
		.bind('finished', function(){					//マーキーの終了処理
			jQuery('.markey').marquee('destroy');		//jQuery('.markey').marquee('toggle');
			count=-1;
		})
		.marquee()
  });
 }
});
function timer1sec(){									//待機関数 //console.log("count", count, count*14.3, count, suji[count]+head[count]);
	document.getElementById("top").innerHTML = (count==10) ? head[count] : suji[count]+head[count];
	if(++count <= 10)setTimeout('timer1sec()', 14300);	//待機関数再起動, 2'35"  155" 15500ms
}
</script>
</body>
</html>

終わりに

ダブル連番四字熟語は六と八が難解でした。六泊七日や八割九分は苦し紛れと言われそうで取り上げるに至りません。

音楽や動画を表示する場合、描画の準備完了や再生完了時にイベントが発生し、その処理を定義する例を示しました。参考になれば幸いです。

追記

2018/09/01：chrome, edge, firefox, operaのほかie11で動作するように小変更。