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

Programing

音楽を鳴らす

音楽を鳴らしてみる

音楽を鳴らす ©TacM,2019 Ver0.01
おんがく:オニのパンツ


開始ボタンを押してスタートです。

HTMLコード

<div style="font-size:26px; color:violet;">音楽を鳴らす<span style="font-size:12px; color:blue;">&nbsp;&copy;TacM,2019 Ver0.01</span></div>
<audio id='bgm' src="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/oninopantsu.mp3" controls controlslist="nodownload"></audio>
<div id="kyoku" style="height:24px; font-size:14px; line-height:2.0em; border:0px solid navy;">おんがく:オニのパンツ</div>

説明

音楽を鳴らすにはaudioタグを用います。タグという言葉が出ましたが初めて出会う方は画像を表示したり音楽を鳴らすための仕組みと理解してください。タグは100を超える種類があり少しずつ理解していきます。タグや要素の意味を図にしてみました。



上記のように開始タグと終了タグがあります。divはdivision、hはheader、pはparagraphのように英単語の1字以上の短縮形から成り立っています。

タグの説明は図にする場合が多いです。説明のために小なり(Less Than)や大なり(Greater Than)の記号を本文記事の中に置くとタグとして機能し、説明文が乱れることがあるためです。

今回はタグの説明でした。

梅雨さむストップ

太陽を求む

記録的な日照不足です。何事も極端はいけません。そろそろ梅雨も明けてもらわないと困ります。

 

湯けむり美人

コーヒーブレーク

【栃木の秘湯】を巡る女子旅~”日本秘湯を守る会”おすすめの旅館

2019年も半分が過ぎ2日目です。今日は夏至(げし)から十一日目に当たり半夏生(はんげしょう)です。スーパーにはタコや鯖がところ狭しと並んでいることでしょう。

ここ2~3週間はプログラミングにまじめに取り組んできました。

月替わり、半年経過を記念し恩賞としてゆるやか路線に進んでみましょう。湯けむりの向こうにかすかに浮かぶ影を話題にします。

湯けむり天女伝説

ネットを検索したら、湯けむりをサポートするアニメーションAPIが公開されていました。『プラグインを使わずに湯気のアニメーションを作成』の記事を参考にさせていただきました。

アニメーションのイベントを捕まえる方法がはっきりしないので、setTimeoutで羽衣天女(はごろもてんにょ)の出現とお隠れを制御しました。モーレツに業務に精勤されている諸氏の頭休めにお奨めします。

残念ながら教育的配慮により画面を静止できません。お気に入りの画像はスクリーンショットで!

 

夏の歳時記

⇩下線が付いた開始ボタンをクリックしてください。

夏の風物

夏の風物といえば、七夕でしょうか。彦星と織姫の逢瀬にまつわる一年に一度のイベントです。それに童謡から「雨降りお月さん」を取り上げました。最後に透き通るような音色の「南十字星」です。

ここで取り上げた童謡は著作権保護期間が終了したものであり、歌詞が難解のものが多いです。その節はネットを検索して理解されますようにお願いします。

俳句教室への誘い

sodo-haikuimage/svg+xml俳句教室への誘い©2019 TacM, Ver0.01

キャッチコピーの一例

カルチャーセンターの案内コピーを作ってみました。縁取り文字を用いてネオンサイン風に表現しました。

「目には青葉 山ほととぎす 初鰹」とは、江戸中期の俳人・山口素堂(1642~1716)の作です。最初の句が字余りですが形にこだわると何の変哲もない句になるとのこと。

カツオの字は松魚が当てられることがあります。これは鰹節(かつおぶし)が松の節に似ていることからというところからきているようです。

美感「青葉」、聴感「ほととぎす」、食感「初鰹」と、春から夏にかけ、江戸の庶民が粋を感じて俳句に詠みました。

 

令和こんにちは

平成ありがとう ➡ 令和こんにちは

 

Temple bells of New Year’s Eve


経過時間

 

プログレス一例

主要ブラウザで動作

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仕様です。



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

棋譜リーダーの使い方

  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. 研究のためのリンク先を追加する。