はじめととまれボタンを押下してバックグラウンドの背景色の更新、月画像の回転、音声の開始と停止を交互に制御します。これまで縦書きは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に音声オブジェクトの格納アドレスを指定します。
出来合いの作品だけでなくオリジナル作品をどしどし発表して存在感を発揮してください。
[html]
<!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("https://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", "https://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j]);
f1.setAttribute("xlink:href", "https://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j+1]);
f2.setAttribute("xlink:href", "https://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", "https://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="https://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="https://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="https://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="https://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="https://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>
[/html]
人間とコンピューターが対戦するAI将棋が盛んです。コンピューターの高速化やアルゴリズムの発展でプロ棋士をも凌駕するコンピューター将棋ソフトが開発されています。
かつて、日本のあちこちで将棋大会が開かれ成績優秀者には景品が授与される大会がありました。今でも開催されているでしょうが高齢者の参加が多いようでした。
プロ棋士藤井聡太七段の活躍などによりこれからは小中学生や女性の参加者が増えることでしょう。これに加えてコンピューター将棋大会が日本の津々浦々で開催されればIT先進国をけん引できるようになることでしょう。
自分で対戦ソフトを開発しいきなり人間やコンピューターと対戦するコンピューターソフトを作成するのはハードルが高いです。
初心者は駒の名称と駒の効きを覚えて盤上に駒を並べることからスタートします。コンピューター将棋ソフトのC言語やJavaScrictソースコードは大学や研究機関から公開されています。
ネット上には駒や将棋盤、駒台などの画像など参考になるものが盛りたくさん揃っています。将来、コンピューターソフトを販売する計画の場合は二次利用などの著作権にまつわる検討をするとよいでしょう。
盤や駒台などは後から見栄えよく追加できるので基本だけを備えた大橋流駒並べソフトを公開します。
☖大橋流で駒を並べる☗キーをクリックしてスタートです。
[html]
<!DOCTYPE html>
<html lang="ja">
<body onload="start()">
<audio id="komaoto" src="https://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="https://aidesign.lolipop.jp/wp-content/uploads/2019/12/shogiAppeal.png" width="240" height="400"></DiV>
<img id="p0" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/12/o80x86.png" width="80" height="86" style="display:none;">
<img id="p1" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/12/k80x86.png" width="80" height="86" style="display:none;">
<img id="p2" src="https://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>
[/html]
「将棋は役立つの？」の問いに5項目を挙げています。小学生向けの言葉が多いですが最後は大人にも通用します。将棋は囲碁のように勝ち負けに大小はなくall or nothingです。
負けるときは「負けました」と声を発して相手に告げることが礼儀とされています。
この言葉は当初、悔しくてなかなか言えないのです。万感の思いを乗り越えて言えるようになると強くなると言われています。
以前に生活目標を発表したことがあります。今回は以下の点を改良しています。日々の暮らしにおける心得をしるしたものです。
❶メッセージの回転を滑らかにした。
➋BGMを追加した。
❸主な絵文字を表示して彩りを持たせた。
❹リンクフリーのライブカメラでオンラインビデオ再生。
円形スクロールメッセージ、時計、絵文字、四字標語の出力は自動開始されますが、ブラウザの制限によりビデオと音声は再生開始でスタートします。
日々の暮らし 生活心得
©TacM,2019 Ver0.01
広告媒体は新聞、テレビ、ラジオから少しずつネット関連に移行しています。
ここでは静止画、静止テキスト、音声、ビデオ、回るテキスト、切り替わるテキスト、切り替わる画像、時計など盛りだくさんの表現を試しました。
画像、ビデオ、記事の格納先を明示してリンクを認めているサイトは多くありません。東京・渋谷のスクランブル交差点のライブカメラを中継したらたちまち止められてしまいました。上では数少ないリンクフリーから掲載しました。
マンション施工で手抜き工事が発覚して建て直しのニュースが流れたことがあります。マンションの壁の中までは専門家でなければ評価が難しいです。
しかしながら長年暮らしていくうちに瑕疵が浮き彫りになります。発覚した時には経営者が変わっていることが多くその責任はうやむやになることがありました。この辺りはこれから整備されていくものと思われます。
散歩コースに雨上がりに滑りやすい箇所があり写真に納めました。ここは近年、簡易舗装から本格舗装に変わった所ですが片側にU字溝があるのに高低差に施工ミスがあり雨の日には水溜りができました。雨降り直後は流れ着いた粘り気のある土を踏むと転ぶことがあります。
駅にまだ自動改札が未導入の頃、高架駅舎に昇る階段の手前が年配の男女二人の業者によって舗装されましたが、雨がふると水溜りができ不評ビンビンでした。
切符切りの駅員に苦情がしきりに浴びせられたと思われ、施工のやり直しを見たことがありました。最近は水準器なるものがあり、手作りマニアも所有しています。水はけの技術は有史以来、いち早く確立したことでしょう。
道路工事は大きな事業でもなく地元優先で中小企業の業者に委託されるのがほとんどと推測されます。業者の技能・技術はピンからキリまでで完成度にかなりの差が出てしまいます。小さな手抜き工事でしょうが出来具合が長きに渡って評価され続くでしょう。
文書に至急、極秘、複製を禁ずなどの文字を文書に重ね書きして注意を喚起する方法があります。
古いWORDではあらかじめ用意した文字を重ね書きしていましたが今では自由に文字列を指定できるようになっているようです。
HTMLはテキストのほか画像や図形の重ね書きが可能です。そのうえ、透過率のopacityにより多彩な表現ができます。
ここでは書類の絵文字（📄）をPDFの説明文に重ね書きしています。
HTMLはフリーで使えるほか、より良い品質を目指してグローバルな協議会にて管理されています。
📄
[html]
<style type="text/css">
.radius_test {
margin-top: -360px; /* 重ね書きの位置 */
width: 360px; /* 幅指定 */
height: 360px; /* 高さ指定 */
border: solid 2px green; /* 枠線指定 */
background-color: #fdede4; /* 背景色指定 */
border-radius: 10px; /* 角丸指定 */
font-size:24px;
color:navy;
}
</style>
<div style="width:360px; height:360px; font-size:192px; color:yellow; border:0px red solid;"><p style="padding-left:70px; padding-top:50px; opacity:0.6;">📄</p></div>
<div class="radius_test">
<span style="color:deeppink; font-weight:bold;">PDF</span>は、「Portable Document Format」の略で、データを実際に紙に印刷したときの状態を、そのまま保存することができるファイル形式です。パソコンやスマホなどのデバイス、Windows、iOS、Linux、Unix、AndroidなどのOSの垣根を超えて見ることができる「電子的な紙」です。
</div>
[/html]
テレビ番組やプレゼンにおいてフリップに付箋紙をかぶせて最初は見えないようにし気を持たせるおあずけ手法があります。めくりフリップについては当ブログでは数度、取り上げています。
先の例では一度めくると元の戻すことができませんでした。再度クリックすれば目隠しが元に戻るようにした例を以下に掲げます。参考になれば幸いです。
[html]
<html>
<div onClick="document.all.item(‘okng’).style.visibility=(document.getElementById(‘okng’).style.visibility.length==6)?’visible’:’hidden’;">
<span style="font-size:36px; color:orange;">お隠れ/御出座</span><span style="font-size:18px; color:blue;">ここをクリック</span>
</div>
<div id="okng" style="visibility:hidden; width:360px; height:160px; border:1px solid blue">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2015/09/hamanasu.png" alt="イラストB" width=350 height=152>
</div>
</html>
[/html]
御出座（ごしゅつざ）とはおでましを言います。テレビ時代劇の北町奉行、遠山左衛門尉様、御出座ぁ～！(きたまちぶぎょう、とうやまさえもんのじょうさま、ごしゅつざぁ～)のきめ台詞が浮かびます。
