法律、習慣、流行など時代とともに変わります。時代にそぐわなくなってもすぐには変えられずそのまま踏襲されているものが数多くあります。同一県でも方言や習慣が微妙に違う地方があります。それは江戸末期までは異なる統治下にあって明治維新で同じ県に統合されたからです。
ニュースを見るためにブラウザを起動するとテレビ局が発行する動画が大音量で流れびっくりしたことがありました。
このようなことがないように操作が加わらないと音が出ないようにブラウザの仕様が変更されました。
それに合わせて一度発表した「奥の細道・序文」の朗読を、音声再生ボタンをクリックしてすべてがスタートするように改訂しました。朗読に加えて臨場感を高めるBGMを付けました。BGMは《気淑く風和らぎ》という万葉集の一節で令和改元の基になったタイトルがついている曲を採用しました。ソースコードは落ち着いた時期に公開されるでしょう。
NHK朝ドラは女性の一代記、大河ドラマは歴史上の人物の一代記をテーマにしているものが多いです。前者は女性、後者は男性を主に取り上げています。
大河ドラマは日曜日に放映されます。正月三ガ日が日曜でもない限り年が明けて一週間以内には一回目が放送されるはずですが、今年は共演者の覚せい剤所持事件の影響で半月ほど遅れているようです。
そのため、大河ドラマの番組宣伝でその場をしのいでいます。今年の大河ドラマのタイトルは「麒麟がくる」で、明智光秀をテーマにしています。NHK、民放の明智光秀を語る番組は殊の外多くドラマの放送開始が待ち遠しく感じます。その中でも、また昔から「歴史は勝者が作る」という言葉が何度も使われます。
「勝てば官軍、負ければ賊軍」という言葉もあります。勝てば正義、負ければ不正義が一般化しています。勝ったものは称えられ、負けたものは怠け者と誹られます。負けた者の周辺からは人が去り、過去の親しい付き合いなどはなかったような顔をするのが一般的です。
権力闘争はどの組織にもあります。非情な手段で手に入れた権力は正しく使って欲しいものです。争った相手を子会社の日の当たらない部署に追いやったのに、勝者が慢心して会社をつぶした例は少なくありません。
明智光秀は織田信長の有能な家臣であったはずですが、主君から満座の席で叱責されたり足蹴りにあったドラマのシーンを一度や二度見たことがあることでしょう。光秀は裏切り者の代名詞です。本当にそうかどうかはわからないのです。江戸時代に明智光秀に関する資料はことごとく消滅したと言われています。
勝者は賢く強い人間と称えられ、敗者は不義理ものと評価されがちです。2代将軍秀忠の正室お江は織田信長の妹お市の方の三女であり、織田家は徳川家の親戚にあたり、その子孫は吉良、京極などとともに高家として処遇されました。
お市の方は戦国一の美女であり、さらに聡明であったと語られていますが、それもアンフェアぎりぎりで天下を取った権力者側の関係者であったからでしょう。主君に逆らったとされる縁者を賛美する資料は埋もれていったと推測されます。
「勝者は事実によって裁かれる」とも言われています。万難を排して獲得した権力は大切に行使してもらいたいものです。
2代将軍秀忠は側室を置かなかったとある小説家は作品のなかで語っています。司馬遼太郎の『王城の護衛者』には「会津松平家というのは、ほんのかりそめの恋から出発している」と書かれています。
そして3代将軍は秀忠とお江から生まれた家光に引き継がれました。書き出しのフレーズに惹かれて夢中になって『王城の護衛者』をむさぼり読んだ記憶がよみがえりました。
相手の情報をこちらから見た状態で表現したいことがあります。卑近な例では将棋のゲームがあります。相手の盤や駒台にある駒は逆向きにあり、対戦者は総合的な判断から容易に駒などを識別します。
棋譜はテキスト形式で記録されます。相手の駒は逆向きであり逆さ表示になります。画像ならば逆さ表示は容易ですがテキストながら逆さに表示する必要性が高いです。
このような時には逆さ文字や鏡文字に注目しましょう。
以前に逆さ文字と鏡文字に両者を取り上げました。今回、鏡文字について左右対称と上下対称に分けて考えてみました。
時間は連続して流れています。新しいことに挑戦するにはいい時期です。3日坊主でも合計すれば3週間、3か月になるかも知れません。HTMLで会報や会計報告書を作ってみませんか。
準備する資材はネット上にありフリーで利用できます。
すでにお使いのパソコン、スマホに組み込まれているでしょう。
以下に旅行案内の事前連絡をお知らせするハガキを想定した文面を掲げます。
2020年４月から新学習指導要領が全面実施となるので小学校でもプログラミング教育が必修化になります。
プログラミングは誰にでも開かれ相談相手はネットです。興味があれば老若男女あらゆる世代で始められます。そこでHTMLで楽しんでみませんか。
縦書き、横書き併用、カラー、テキスト・画像の重ね書きは異彩を放ちます。
会員の皆様、お変わりありませんか。令和初めての新年です。春の恒例の旅行について、様々な要望が届いていますが、都内近辺を提案します。東京都が筆頭株主のはとバスを利用して効率よく東京を巡るのはいかがでしょうか。
はとバス観光には洗練されたコースがたくさんあり、おおぜいの外国人観光客にも利用されています。近々、詳細スケジュールを決定したいと考えています。健康には十分気を付けたいです。桜の頃に元気に再会しましょう。
幹事より
<!DOCTYPE html> <html> <body> <DIV style="width:60%; margin-right:auto; margin-left:auto; margin-top:10px;"> <Div style="position:relative; width:351px; height:520px; font-size:20px; border:1px solid pink;"> <div id="doyo" class="h2vr_26" style="margin-right:10px; margin-top:0px; line-height:1.2em;"> <span style="color:navy;">《恒例の旅行について》</span> <p>会員の皆様、お変わりありませんか。<strong>令和</strong>初めての新年です。春の恒例の旅行について、様々な要望が届いていますが、都内近辺を提案します。東京都が筆頭株主の<strong>はとバス</strong>を利用して効率よく東京を巡るのはいかがでしょうか。<BR> <BR> <BR> はとバス観光には洗練されたコースがたくさんあり、おおぜいの外国人観光客にも利用されています。近々、詳細スケジュールを決定したいと考えています。健康には十分気を付けたいです。桜の頃に元気に再会しましょう。<BR> <span style="padding-left:437px; color:deeppink;">幹事より</span></p> 令和二年 あけぼの </div> <div style="position:absolute; left:15px; top:180px; width:435px; height:40px; font-size:64px; color:deeppink; border:0px solid blue; opacity:0.3;">貴賓席の旅</div> <div style="position:absolute; left:2px; top:260px; width:347px; height:260px; border:0px solid red; opacity:0.6"> <image src="https://img.poke.co.jp/media/transfer/img/eventid_13003/eventid_13003_pic3.jpg" width="347" height="260"> </div> </Div> </DIV> </body> </html>
はじめととまれボタンを押下してバックグラウンドの背景色の更新、月画像の回転、音声の開始と停止を交互に制御します。これまで縦書きはh2vRのプラグイン（アドイン）を利用していましたが、今回はブラウザの素の機能を利用します。
一つのボタンで交互に処理を切り分ける部分はCSSだけという触れ込みに抵触しますが6行ほどのJavaScriptを使っています。縦書きはブラウザごとにかなり動作に差があります。Chrome, FireFox, Operaはほぼ同一ですが、Edgeは差が大きいです。IE11はサポート終了でお薦めできません。
時空と季節を超越して江戸時代の俳人、松尾芭蕉の足跡のひとつを訪ねてみます。BGMはヨーロッパの著名な民謡《ドナウ川のさざなみ》を用意しました。最上川とは趣きは異なりますが著作権がらみで世界の民謡を取り上げました。画像は小高い山から眺めた庄内平野です。
音声再生ボタンを押下してなにもかもスタートです。
俳句はInkscapeでPathデータを作りました。Inkscapeは漢字の振り仮名はサポートしてくれません。振りがなは漢字と同様にしてPathデータを作り、本文との位置はTry and Goで決めます。この作業は時間に比例して確実に進みます。
このアプリが生成したプログラムコードに手を加えて画像とテキストの共存を図っています。両立のポイントはopacityを巧妙に操ることです。ソースコードの公開は故あって先延ばしになります。
来年の4月から小学校においてプログラミング教育が必修化になります。プログラミングを構えすぎると難解と言えますが、自然に使っていくと入りやすいでしょう。赤ちゃんは覚えたものだけを大胆に使います。
覚えたものを一つずつ使っていけばやがて高みに到達するでしょう。まずは臆せずに使いましょう。
電子書類にちょっとした動きを付けるにはHTML, CSS, JavaScriptを使いこなすと多彩な表現が可能です。恐縮ですが以下のサンプルは難解の部に入ります。以下のような動くドキュメントを表現できる一つの例を挙げます。末尾にHTMLコードを示します。
以前に、七五三お祝いのメッセージにおいて「玲依ちゃん」の七五三を祝いました。当事者の氏名を変更することは初心者には難儀であることを述べました。名前を一筆書きのように表示するには、独自のフォントを作成するに等しくLazy-Line-Painterなどの専門知識を必要とします。
ここでは「あかりちゃん」の仮名を使っていますが遅延表示をしていないので容易に関係者の名前に変更できます。また、BGMはフリー素材の音源を使っていますが家族で楽しむぶんには最新の人気曲に差し替えることも可能でしょう。
上の図は「あかりちゃん」を表示するコードの一部分です。赤字のところを置き換えれば個別に対応できます。BGMを独自のものに差し替えるにはaudio要素のsrcに音声オブジェクトの格納アドレスを指定します。
出来合いの作品だけでなくオリジナル作品をどしどし発表して存在感を発揮してください。
<!DOCTYPE html>
<html>
<head>
<style>
body{
width: 100%;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#kisho6 {
width: 50vw;
height: 50vh;
overflow: visible;
}
</style>
<script type="text/javascript" charset="utf-8">
const day=["12/92kisho-0.png", "04/jitensha.png", "04/dokusho.png", 59, 63, 63, "04/f1-kaban.png",
"12/hirune.png", "12/sanpo.png", "12/otohsan.png", 50, 56, 68, "04/f2-hoikuen.png"];
var i=0;
function startPlay(){ //
var music = new Audio("http://aidesign.lolipop.jp/wp-content/uploads/2019/04/valse.mp3");
music.addEventListener("ended", closeProc, false);
music.play();
}
function closeProc(){ //BGMの終了イベント
renewal();
}
function renewal(){ //congratulateAdmission, closeProc
var j = (i++ % 2) * 7; //j : 0 or 7
f0.setAttribute("xlink:href", "http://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j]);
f1.setAttribute("xlink:href", "http://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j+1]);
f2.setAttribute("xlink:href", "http://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j+2]);
f0.setAttribute("height", day[j+3]);
f1.setAttribute("height", day[j+4]);
f2.setAttribute("height", day[j+5]);
setTimeout(function(){
console.log("finish", j, day[j+6]);
f3.setAttribute("xlink:href", "http://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j+6]);
if(i%2 == 0){
headmsg1.setAttribute("visibility", "visible");
}
},1500); //8000 ➡ 1500
}
function congratulateAdmission(){ //音符記号ボタンのクリックで起動
renewal();
headmsg1.setAttribute("visibility", "hidden");
document.getElementById('text814').style.fillOpacity = "1.0";
document.getElementById('text824').style.fillOpacity = "1.0";
startPlay(); //starting
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="297mm" height="210mm" viewBox="0 0 297 210" id="kisho6">
<g transform="translate(0,0)">
<g><image id="f0" x="10" y="70" width="78" height="59" xlink:href="http://aidesign.lolipop.jp/wp-content/uploads/2019/12/92kisho-0.png"></g>
<g><image id="f1" x="110" y="70" width="78" height="63" xlink:href="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/jitensha.png"></g>
<g><image id="f2" x="200" y="70" width="78" height="63" xlink:href="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/dokusho.png"></g>
<g><image id="f3" x="10" y="145" width="265" height="66" xlink:href="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/f1-kaban.png"></g>
<text id="text814" x="15" y="25" font-size="14" fill="deeppink" fill-opacity="0.1">あかりちゃん</text>
<text id="text824" x="15" y="50" font-size="24" fill="cyan" fill-opacity="0.1">クリスマスおめでとう</text>
</g>
<g id="frame">
<path id="around" fill="none" stroke="pink" stroke-width="0.1rem" d="M5,5 L275,5 L275,220 L5,220 L5,5 Z"/>
<image id="f4" x="0" y="0" width="23" height="18" xlink:href="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/elephant.png">
<animateMotion dur="20s" calcMode="linear" repeatCount="indefinite"><mpath xlink:href="#around" /></animateMotion>
</g>
<text id="headmsg1" x="140" y="20" font-size="10" fill="darkgreen">音符記号をクリックして開始</text>
<a onclick="congratulateAdmission();" style="text-decoration:underline;">
<text x="10" y="250" font-size="8">♫音楽:甘茶の音楽工房より 『ヴァルス』♫ ©2019 TacM, Ver0.01</text>
</a>
</svg>
</body>
</html>
人間とコンピューターが対戦するAI将棋が盛んです。コンピューターの高速化やアルゴリズムの発展でプロ棋士をも凌駕するコンピューター将棋ソフトが開発されています。
かつて、日本のあちこちで将棋大会が開かれ成績優秀者には景品が授与される大会がありました。今でも開催されているでしょうが高齢者の参加が多いようでした。
プロ棋士藤井聡太七段の活躍などによりこれからは小中学生や女性の参加者が増えることでしょう。これに加えてコンピューター将棋大会が日本の津々浦々で開催されればIT先進国をけん引できるようになることでしょう。
自分で対戦ソフトを開発しいきなり人間やコンピューターと対戦するコンピューターソフトを作成するのはハードルが高いです。
初心者は駒の名称と駒の効きを覚えて盤上に駒を並べることからスタートします。コンピューター将棋ソフトのC言語やJavaScrictソースコードは大学や研究機関から公開されています。
ネット上には駒や将棋盤、駒台などの画像など参考になるものが盛りたくさん揃っています。将来、コンピューターソフトを販売する計画の場合は二次利用などの著作権にまつわる検討をするとよいでしょう。
盤や駒台などは後から見栄えよく追加できるので基本だけを備えた大橋流駒並べソフトを公開します。
☖大橋流で駒を並べる☗キーをクリックしてスタートです。
<!DOCTYPE html>
<html lang="ja">
<body onload="start()">
<audio id="komaoto" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/11/komaotoPiece1.mp3"></audio>
<div style="clear:both; bottom:20px; height:50px; border:0px red solid;"><a onclick='masume81();setKoma();'><span style="font-size:24px;color:green; background:papayawhip;">☖大橋流で駒を並べる☗</span></a> ©TacM,2019 Ver1.00</div>
<DiV style="float:left; width:360px; height:500px; font-size:24px; color:blue; border:0px red solid;">
<div style="float:left; width:300px; height:40px; border:0px peru solid">後手：蒼賢照初段 <span id="gote" style="color:red">鬼才伝説</span></div>
<div><canvas id="sample0" width="40" height="40" style="margin-left:0px; border:0px gold solid;"></canvas></div>
<div><canvas id="sample2" width="350" height="384" style="background-color:aliceblue; opacity:0;"></canvas></div>
<Div id="kazarikoma" style="padding-top:40px; padding-bottom:59px; margin-left:0px; margin-top:-384px;">
<img id="oh" src="https://www.gogo-web.com/shogi-img/600710.jpg" width="350" height="245">
<div style="width:350px; height:40px; font-size:28px; color:orange; border:0px gold solid;">天童佐藤敬商店『飾り駒』</div>
</Div>
<div style="float:left; width:300px; height:40px; border:0px red solid">先手：聡琳翔二段 <span id="sente" style="color:red">新手一生</span></div>
<div><canvas id="sample1" width="40" height="40" style="margin-left:0px; border:0px gold solid;"></canvas></div>
</DiV>
<DiV style="height:424px;margin-top:40px"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2019/12/shogiAppeal.png" width="240" height="400"></DiV>
<img id="p0" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/12/o80x86.png" width="80" height="86" style="display:none;">
<img id="p1" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/12/k80x86.png" width="80" height="86" style="display:none;">
<img id="p2" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/12/komaImage.png" style="display:none;">
<script type="text/javascript" charset="utf-8">
const CC = 12;
const X0=36;
const Y0=40;
const X1=101.25; // 810/8
const Y1=112.5 // 450/4
const KOMA_NAME = '王飛角金銀桂香歩玉竜馬 金圭杏と玉飛角金銀桂香歩玉竜馬 金圭杏と'; //
const SUJI = '９８７６５４３２１';
const DAN = '一二三四五六七八九';
const ban = [//９-0 ８-1 ７-2 ６-3 ５-4 ４-5 ３-6 ２-7 １-8 //将棋開始画面データ
[22, 21, 20, 19, 16, 19, 20, 21, 22], //一 0
[-9, 17, -9, -9, -9, -9, -9, 18, -9], //二 1
[23, 23, 23, 23, 23, 23, 23, 23, 23], //三 2
[-9, -9, -9, -9, -9, -9, -9, -9, -9], //四 3
[-9, -9, -9, -9, -9, -9, -9, -9, -9], //五 4
[-9, -9, -9, -9, -9, -9, -9, -9, -9], //六 5
[ 7, 7, 7, 7, 7, 7, 7, 7, 7], //七 6
[-9, 2, -9, -9, -9, -9, -9, 1, -9], //八 7
[ 6, 5, 4, 3, 0, 3, 4, 5, 6]]; //九 8
const setting=[ [40, 30, 50, 20, 60, 10, 70, 00, 80, 11, 71, 42, 32, 52, 22, 62, 12, 72, 02, 82],
[48, 58, 38, 68, 28, 78, 18, 88, 8, 77, 17, 46, 56, 36, 66, 26, 76, 16, 86, 06],];
const SenteGote = ["gote", "sente"];
var ctx, ct2=[0, 0], n=0;
function start(){
ct2[0] = document.getElementById("sample0").getContext('2d');
ct2[1] = document.getElementById("sample1").getContext('2d');
ctx = document.getElementById("sample2").getContext('2d');
//桝目を作る
}
function setKoma(){ //20枚の駒を並べる
if(n>=20){alert('Please reload!');return;}
document.getElementById("komaoto").play(); //駒音鳴動
for(var l=0; l<2; ++l){ //0:先手, 1:後手
var x0=8-Math.floor(setting[l][n] / 10); //筋をx座標に変換
var y0=setting[l][n] % 10; //先手段
var k0=ban[y0][x0]; //初期配置図から駒を引き当てる
komaDraw(x0, y0, k0, l); //定められた位置に駒を設置
document.getElementById(SenteGote[l]).innerHTML = SUJI.substr(x0, 1) + DAN.substr(y0, 1) + KOMA_NAME[k0];
}
if(++n < 20) setTimeout(setKoma, 1000); //20枚の駒を並べるまで繰り返す
else{
ct2[0].drawImage(document.getElementById("p0"), 0, 0, 80, 86, 0, 0, 40, 43);
ct2[1].drawImage(document.getElementById("p1"), 0, 0, 80, 86, 0, 0, 40, 43);
document.getElementById("gote").innerHTML = "鬼才伝説";
document.getElementById("sente").innerHTML = "新手一生";
}
}
function komaDraw(x, y, koma, p){ //ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
var kx = koma % 8; //0～7
var ky = Math.floor(koma / 8); //32枚の全体画像から1枚を切り出す
ctx.drawImage(document.getElementById("p2"), kx*X1, ky*Y1, X1, Y1, x*X0+CC+0, y*Y0+CC+1, X0, Y0); //12-w
ct2[p].clearRect(0, 0, X0, Y0);
ct2[p].drawImage(document.getElementById("p2"), kx*X1, ky*Y1, X1, Y1, 0, 0, X0, Y0);
}
function masume81(){ //81個の桝目を作る
document.getElementById("sample2").style.opacity=1.0;
document.getElementById("kazarikoma").style.opacity=0.0;
for (var i = 0; i <= 9; i++) {
var x = i * X0 + 12; //縦線
ctx.moveTo(x, 2 + CC);
ctx.lineTo(x, 360 + CC);
ctx.stroke();
var y = i * Y0 + 1 + CC; //横線
ctx.moveTo(11, y);
ctx.lineTo(337, y);
ctx.stroke();
if(i==9)break;
ctx.font = "bold 11px 'ＭＳ ゴシック'"; // 2019-12-19
ctx.fillText(SUJI.substr(i, 1), i*X0+22, CC);
ctx.fillText(DAN.substr(i, 1), 338, CC+i*Y0+24);
}
}
</script>
</body>
</html>
「将棋は役立つの？」の問いに5項目を挙げています。小学生向けの言葉が多いですが最後は大人にも通用します。将棋は囲碁のように勝ち負けに大小はなくall or nothingです。
負けるときは「負けました」と声を発して相手に告げることが礼儀とされています。
この言葉は当初、悔しくてなかなか言えないのです。万感の思いを乗り越えて言えるようになると強くなると言われています。
以前に生活目標を発表したことがあります。今回は以下の点を改良しています。日々の暮らしにおける心得をしるしたものです。
❶メッセージの回転を滑らかにした。
➋BGMを追加した。
❸主な絵文字を表示して彩りを持たせた。
❹リンクフリーのライブカメラでオンラインビデオ再生。
円形スクロールメッセージ、時計、絵文字、四字標語の出力は自動開始されますが、ブラウザの制限によりビデオと音声は再生開始でスタートします。
広告媒体は新聞、テレビ、ラジオから少しずつネット関連に移行しています。
ここでは静止画、静止テキスト、音声、ビデオ、回るテキスト、切り替わるテキスト、切り替わる画像、時計など盛りだくさんの表現を試しました。
画像、ビデオ、記事の格納先を明示してリンクを認めているサイトは多くありません。東京・渋谷のスクランブル交差点のライブカメラを中継したらたちまち止められてしまいました。上では数少ないリンクフリーから掲載しました。
