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

Programing

ビンゴゲームを解析する

以下のビンゴゲーム管理ソフトは左上のビンゴ籠をクリックして開始します。左側の写真は70周年創業祭を祝った本社ビルを例に採用しました。

このサンプルでは16人の参加者が抽選に当たる経過をモニタリングしながら、4個の穴が開いたら「リーチ」と発声が飛び交い、5個の抽選が出そろったら「ビンゴ」と叫んでラッキー者を引き立てています。

また別の例として結婚式におけるビンゴ大会を模して若い二人の明るい行く末を祈っています。右のプログラミングコードはビンゴ管理ソフトのメイン関数です。

このソフトはビンゴゲームを科学する第一歩になると思われます。幅の狭い画面では期待した動作にならないかもしれません。公開されたプログラムコードをひな型にして多彩なビンゴゲームに挑戦してください。

さらなる深みを目指そう

HTML, CSS, JavaScriptを基本から学びたいときは本屋さんやWeb上の書店から初歩編を入手し、多くのサンプルコードを手に入れるには下記の「ブログ管理人著作のプログラミング教則本」を覗いてみませんか。

コンピュータ将棋への道

IT将棋を極める

今やプロを凌ぐIT将棋が存在しています。勝負は拮抗していないと面白みがありません。最近、人間とコンピュータの対戦は見かけなくなりました。これは人間を凌ぐソフトウェアが開発されたことが原因と言われています。コンピュータの進歩は処理速度やメモリ容量などにおいて日進月歩にあるのに対して、人間の進歩は緩やかであり、人間との実力が縮まりやがて逆転してしまいました。

プロ棋士に勝つソフトの開発は誰にも開かれています。ただ、その保証は誰もしてくれません。将棋プロ棋士になるのは東大に入るよりかなり難しいとされています。たとえ県大会で優勝してもプロ棋士になるのは容易でありません。全国優勝者でも年齢制限などで断念したケースは多々あります。

コンピュータ将棋の入口

コンピュータ将棋でひとかどの成績を上げるソフトを開発するには次のような手順があります。

①HTML, CSS, JavaScriptをひも解く

②駒を盤上に並べるソフトを開発する

③棋譜を再生する

④AI将棋に進む

以上のような手順です。

大橋流で駒を並べる

以前に、大橋流で駒を並べるソフトを公開しましたが、今回はより人間臭くなるように配慮しました。千里の道も一歩からです。ハードルを下げて挑戦してみてはいかがでしょう。中央上部のボタンをクリックしてスタートです。

 

後手:蒼賢照初段 鬼才伝説
天童佐藤敬商店『飾り駒』
先手:聡琳翔二段 新手一生
  ☖大橋流で駒を並べる☗
©TacM,2020 Ver0.01 

 

 

動くキャッチコピーの作り方

新しい時代に合った方法

電子媒体は急速な勢いで発展してきました。あまりにも進歩が速すぎてその特長を引き出せないケースもあります。今回もコロナ対策の一環として動くキャッチコピーを作ってみました。

SNSで気の利いた作品を発表するにはHTMLの知識があると強みです。ネット上には手本になる教材が山積しています。

最適なものを選ぶにはそれなりの知識が必要です。堂々巡りではないですか。確かに。それには多少のムダには目を瞑り、繰り返し挑戦することです。

人混みを避けて家で過ごす

考察

学校の再開は当面無理でしょう。このまま、夏休みまで休校して早くて9月から再開という話が出ています。

何か世界、文化、哲学とかかなりの変化がありそうに思えます。先人がきちんと敷いてくれたレールを歩みなさいと教えられてきましたが、これからはそれだけではうまくいかないような気がします。

これからの就職活動において、リクルートルックを着て会社を廻るのは泥臭いと廃れるでしょう。デモテープに代わる個人サイトを作って会社にアピールする時代が到来しています。経費も安く電車が混むこともなくなるでしょう。

強固なバックボーンとは大げさですが専門的な技能、知識、自分で判断する能力を身に付けておくと安心と思われます。コロナさえ無ければ何もかもうまくいっていたのにと指導者側に言い訳されても困らないように自ら手をうっておきましょう。

 

Stay Homeを励行する

ストップ・ザ・ウィルス

COVID-19(コヴィッド19と発音、新型コロナウイルス感染症)が猛り狂って人間の平穏な生活を脅かしています。3密を避けて感染を防止することが叫ばれています。3つの標語を動的に表現しました。プログラミングの学習に参考になれば幸いです。

stayHome image/svg+xml #プログラミング学習 HTML, CSS, JavaScriptに親しむ 1 InkscapeとLazyLinePainterの使い方を学ぶ 2 Inkscapeでパスデータを作りファイル保存 3 LazyLinePainterで手書き風に変換 4 出力されたindex.htmlを修正 5 stayHomeの画像をはめ込む 6 BGMを組み込む 7 音楽、描画の動作を調整する 8 時計の針を進める HTMLプログラミングサンプル集 https://bit.ly/34upht5 BGMを再生するには音符記号をクリックします。 /*家*/ 音楽:DOVA-SYNDROMEより 『南国ジングル』 ©2020 TacM, Ver0.01

 

テキストエディタについて

動作が軽いのが特徴

長年、テキストエディタを使ってきた体験談を語ります。

メモとして記録したり、プログラムコードを作る時には機能の大きなエディタよりも動作が軽いものを選ぶのが通例です。用途はファイルに記録することが主目的であり、印刷をすることは多くありません。また、表や画像を扱うことも少なく単機能のものが選ばれます。

(^○^) → 😄

 

最近、絵文字や外国語を扱うことが多くなり保存されるファイルのキャラクタセットをきちんと設定しておかなければならないケースが増えています。

ちょっと前までHTMLのキャラクタセットには、Shift_JISを使っていましたが表現できないコードが多くなりUTF-8に切り替えました。以前、顔マークは特殊記号を合成して使っていました。日本では携帯電話で絵文字が積極的に使われ、日本発祥の文化としてUnicodeに取り入れられました。今では顔マークを合成して使う必要はなくなり絵文字を使うのが一般化しています。

UTF-8コードで保存するとShift_JISコードファイルよりはサイズが大きくなります。Shift_JIS仕様は少ない情報で漢字を表現する手段として考案されましたがもはや役割を終えたというところです。

エディタの設定

文字コードをどのタイプにするかは設定メニューにて実態のコードを指定します。HTMLにはmetaタグのcharset属性にてタイプを指定しますが実態と会わない場合は実物のコードが優先されるようです。

両者間に違いがある場合は文字化けが起きます。HTMLやJavaScriptの命令はすべて半角で定義されるので文字化けはデータ部にて発生し原因を特定できる場合がほとんどです。

複数エディタを使い分ける

盛りだくさんの機能を有するオールマイティ型エディタを除けば、エディタごとの特徴があります。それゆえに複数のエディタを使い分ける方法が採られます。

ある文字列を別の文字列に一括して変換する機能や矩形編集機能、グローバル検索などプログラミングに便利な機能がたくさんあります。便利な機能のほとんどはすでに世に存在しています。ネット検索で見つけて使い方をマスターしてください。

絵文字の使用例とプログラミングコード

🍀 四つ葉のクローバー:幸運のシンボル


<p style="font-size:32px; color:hotpink;">&#x1f340; 四つ葉のクローバー:幸運のシンボル</p>

 

補足説明

上例では絵文字において特殊文字を表示する方式《&#x16進数;》で表現していますがエディタによっては絵文字をそのまま表示することがあります。

 

プログラミングを楽しむ

家族の成長をプログラミングで多彩に表現

次の動的表現はブラウザChrome, edge, Firefox, operaで動作します。

 

ショートメッセージ一覧

下の図はすべてテキストでありUnicodeが定める絵文字です。モダーンブラウザならば問題なく表示されますがデザインは微妙に異なります。

🌺 🎏 🎎 🎷 🐘 🚸 🎃 🏃 🎣 🎵 🎐 🏫 🙂 📖 👩 🎓

成長一覧図

応用するときの注意事項

HTMLプログラミングコードを次項に示します。サンプル成長記の画像はイラストですが実際にはスナップ写真、卒業証書をスキャンした画像などを載せます。

左の中央部には大きな絵文字を表示していますが、小さなフォントサイズでひとことメッセージにするのも面白いでしょう。

時計回りに回転するメッセージはサイズを小さめにして多くの文字を入れることができます。ブログなどに発表することがなければもっと茶目っ気、センセーショナル、とっておきの自慢話や失敗談を載せるのもいいかもしれません。

プログラミングに精通した暁には途中の開発過程を秘密にしておき、誕生日などの記念日にサプライズプレゼントされてはいかがでしょう。

両親がプログラミングに得意であれば、息子、娘の結婚祝いに、そうでなければ、息子、娘から父親の30年勤務祝いに手作りプレゼントを目指すのもいいのではないでしょうか。

プログラミングコードはCTRL+Uで引き出すことができますが、次に掲載します。

プログラミングコード

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<Div style="float:left; width:500px; height:500px; background:ivory; overflow:hidden; border:1px green solid;">
<canvas id="sample" width="500" height="500"></canvas>
<img id="btn" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/12/startButton.png" width="48" height="48" style="margin-left:440px; margin-top:-485px; display:block;">
<span id="num" style="margin-left:440px; margin-top:-495px; font-size:48px; display:none;">❶</span>
</Div>
<DIV style="float:left; position:relative; width:500px; height:500px; overflow:hidden; border:1px solid pink;">
<div id="month5" style="position:absolute; left:60px; top:70px; width:500px; weight:500px;">
<img id="growth" src="http://aidesign.lolipop.jp/wp-content/uploads/2020/04/simple_family-300x300-1.png" width="400" height="400">
</div>
<div id="music" style="visibility:hidden; position:absolute; left:15px; top:485px; font-size:11px; border:0px blue solid;">
参照音楽:フリーBGM・音楽素材 H/MIX GALLERY「遅めのランチ」 ©TacM,2020 Ver0.01
</div>
</DIV>
<audio id="bgm1" src="http://aidesign.lolipop.jp/wp-content/uploads/2020/04/lateLunch.mp3"></audio>
<script type="text/javascript" charset="utf-8">
//                 ❶  ❷  ❸  ❹  ❺  ❻  ❼  ❽  ❾  ❿  ⓫  ⓬  ⓭  ⓮  ⓯  ⓰
const festival = ["&#x1f33a;", "&#x1f38f;", "&#x1f38e;", "&#x1f3b7;", "&#x1f418;", "&#x1f6b8;", "&#x1f383;", "&#x1f3c3;", "&#x1f3a3;", "&#x1f3b5;", "&#x1f390;", "&#x1f3eb;", "&#x1f642;", "&#x1f4d6;", "&#x1f469;", "&#x1f393;"];
const N=15;											//分割数
const HK=200;										//半径
const ZX=250;										//中心点x
const ZY=245;										//中心点y
const tcolor=["limegreen", "blue", "cyan", "green", "red", "purple", "chocolate", "deeppink"];
const msg=[	" ふたりにわんぱくぼうず授かる", " はしゃぎ回る元気な男の子  ", " ぼんぼりに灯りをつけて雛祭り", " 堂々たる鼓笛隊の晴れ姿   ",
			" みんなに祝福されて入園式  ", " 横断歩道は気をつけて渡って ", " 手づくり竹とんぼで遊ぶ   ", " 選抜選手リレー競走     ",
			" お父さんといっしょつり大会 ", " ピアノ発表会の晴れすがた  ", " うまいおいしいバーベキュー ", " 晴れの入学式        ",
			" 弁論大会の勇姿       ", " 少年老い易く学成り難し   ", " 卒業式 仲間との悲しい別れ ", " 卒業式 新たな旅立ちへ   "];
var FS=62;											//フォントサイズ
var FX=28;											//x
var FY=24;											//y
var x=[], y=[];
var v=[], w=[];
var ctx, m, t, count=time=0;

var evnt = document.getElementById("bgm1");			//BGMのイベントオブジェクト
var DT = 360 / N;									//多角形の1角の値
	for(var i=0; i<N; ++i){
		var t=(i*DT+114)*Math.PI/180.0;				//114=360/15+90
		x[i]=Math.cos(t);
		y[i]=Math.sin(t);
		//console.log("i=", i, x[i], y[i]);
	}

var canvas1 = document.getElementById('sample');	// canvasの要素を取得する
	canvas1.addEventListener("mousedown", mouseDownListner, false);
	ctx = canvas1.getContext('2d');					//次から具体的な描画内容を指定する
	textOut(192, "&#x1f492;", 120, 330);					//指定座標にテキスト描画
	ctx.fillStyle = "darkviolet";
	textOut(56, "家族の成長記録", 20, 110);			//指定座標にテキスト描画
	textOut(12, "by TacM", 10, 495);				//credit

function start(){									//開始指定
	document.getElementById('btn').style.display = "none";
	document.getElementById('num').style.display = "block";
	//ctx.strokeRect(20, 55, 415, 65);
	ctx.clearRect(20, 55, 415, 65);					//20, 65, 420, 60
	evnt.play();									//bgm
	pentagon(HK, ZX, ZY, 'snow');					//多角形を描画
}
function pentagon(hk, px, py, color){
	ctx.beginPath();								//パスの描画を始める
	ctx.lineWidth = 6;
	for(var i=0; i<N; ++i){
		v[i] = px + x[i] * hk;						//始点
		w[i] = py - y[i] * hk;						//終点
	}
	ctx.moveTo(v[N-1], w[N-1]);						//線の開始位置 (xの座標値 , yの座標値)
	for(var j=0; j<N; ++j){
		ctx.lineTo(v[j], w[j]);
	}
	ctx.closePath();
	ctx.strokeStyle = color;
	ctx.stroke();									//指定された色の多角形を描画

	document.getElementById('growth').src = "http://aidesign.lolipop.jp/wp-content/uploads/2020/04/1440-400.png";
	document.getElementById('growth').width = "3600";
	document.getElementById('growth').height = "1000";
	catchCopy();
}
function mouseDownListner(e) {
	var rect = e.target.getBoundingClientRect();	//座標取得
	mouseX1 = e.clientX - rect.left;
	mouseY1 = e.clientY - rect.top;
	console.log("mouseDownListner", mouseX1, e.clientX, rect.left,  mouseY1, e.clientY, rect.top);
	if (mouseX1 > 195 && mouseX1 < 195 + 300) {		//作り方
		if (mouseY1 > 478 && mouseY1 < 478 + 20) {
		    	location.href = "https://bit.ly/34upht5";	//「音や映像が飛び出すプログラミングつぶやき本」の概要
		}
	}
	if (mouseX1 > 440 && mouseX1 < 485) {			//開始
		if (mouseY1 > 18 && mouseY1 < 58) {
		    	start();							//開始指定
		}
	}
}
function catchCopy(){								//キャッチコピー
	time=Math.floor(count / N);						//T i m e, 0~15
	m = time % 8;									//0~7
	t = Math.floor(time / 8);						//0~1,//console.log("count="+count+" "+m+" "+t);
	var l=(1484+N-count-time)%N;
	//ctx.lineWidth=1;ctx.strokeStyle = 'black';ctx.strokeRect(v[l]-FX-2, w[l]-FY-11, FS+10, FS+5);	//4, 8, 8
	ctx.clearRect(v[l]-FX-2, w[l]-FY-11, FS+10, FS+5);	//4, 8, 8 circle
	var cn = count % N;								//0~14
	var s = msg[time][cn];
	ctx.fillStyle = tcolor[time%tcolor.length];		//'deeppink'
	textOut(FS, s, v[l]-FX, w[l]+FY);				//指定座標にテキスト描画
	//console.log("CN=", count, cn, m, t, time, s, tcolor[time%tcolor.length]);
	if(cn==0){										//メッセージの始まり
		document.getElementById("num").innerHTML = "❶❷❸❹❺❻❼❽❾❿⓫⓬⓭⓮⓯⓰".substr(time, 1);
		drawGrowth();
	}
	if(++count < 240)	setTimeout('catchCopy()', (cn==14) ? /*3000*/1500 : 60);
	else{	//credit
		ctx.fillStyle = 'black';
		textOut(16, "作り方、楽しみ方&#x27a1; https://bit.ly/34upht5", 200, 494);
		ctx.strokeStyle="blue";ctx.lineWidth=1;		// 線の色を青に指定
		ctx.strokeRect(195, 478, 300, 20);			// 四角形(輪郭)
		ctx.clearRect(8, 480, 60, 18);
		textOut(16, "presented by grandfather.", 2, 495);
		document.getElementById('music').style.visibility = "visible";
		count=0;									//for rerun
	}
}
function drawGrowth() {			// 180*200 -> 450*500
	var x=time % 8;
	var y=Math.floor(time / 8);
    document.getElementById('month5').style.left = (-x*450) + "px";		//450:500
    document.getElementById('month5').style.top = (-y*500) + "px";
	setTimeout(function(){
	  console.log("TIME, X, Y", time, festival[time], x, y);
	  //ctx.lineWidth=1;ctx.strokeStyle = 'black';ctx.strokeRect(140, 140, 225, 225);
	  ctx.clearRect(140, 140, 225, 235);
	  textOut(192, festival[time], 120, 320);		//指定座標にテキスト描画
	},400);											//delay
}
function textOut(fnt, msg, x, y){
	ctx.font = fnt + 'px Arial';
	ctx.fillText(msg, x, y);
}
</script>
</body>
</html>

 

手書き風アニメーション「愛」を込めて

アウトライン化する

図形・画像をSvgで表現すると画像サイズが小さくなるうえ、拡大・縮小しても画像が劣化しないという特長があります。加えて手書きでサインするかのように時間差表示が可能になり、動画表現として閲覧者にアピールできます。

画像を縁どって違和感なく表現するには複雑な図形や写真などは似合いません。単純なものを選びます。文字を縁取りしたり、左馬のようにフォントが無いものは扱い易いです。文字は白と黒の2色であり、多色画像はこれらをマスターした後の挑戦が望ましいでしょう。

SVG画像に変換する

PNG画像からSVG画像を作成するには、フリーソフトInkscapeを使います。Inkscapeを起動し、ファイル-インポートと指定して画像ファイルを読み込む-上の図のように長方形の窓枠に移動-無駄なクリックで選択がはずれたら選択ツールで再び選択する-パス-ビットマップのトレース-画面の右下ライブレビューに✔を入れる-プレビュー欄に画像が表示されるように明るさの境界のしきい値を変更する-OK-ファイル-名前を付けて保存-終了

保存したSVGファイルをテキストエディタで開き、<image xlink:href=”data:image/png;base64, ~ /> の直後にPathデータが生成されていることを確認します。生成されない場合はPNG画像が選択されているかを調べます。

次のステップで一筆書きのようなHTMLプログラミングコードを作成しますが、imageデータは不要です。削除しておくとSVGファイルサイズが激減します。

手書き風アニメーションにする

手書き風アニメーションにするにはLazyLinePainterを用います。LAZY LINE COMPOSERは指定したSVGファイルを手書き風アニメーションのHTMLコードに変換してくれます。上のリンクアドレスをクリックして「Click or Drop your SVG file here」に先に求めたSVGファイルをドロップします。

Animation optionsでdurationを5000(5秒)に設定してDownload Zipをクリックすると15秒ほどでlazy-line-painter.zipがダウンロードされます。Zipファイルを解凍するとindex.htmlとlazy-line-painter-1.9.6.min.jsが現れます。

この形式はすべてに共通です。サイトに公開するにはJSライブラリーをアップロードしindex.htmlの<!– Include lazylinepainter –>の次の行にライブラリーアップロードアドレスを設定します。

index.htmlというファイル名も常に同一なのでrenameして管理します。

「愛」を込めたサンプル

サンプルは記事のロード完了で動き出しています。再度、手書き風アニメーションするには再ロードボタンをクリックします。

Like_A_Sign image/svg+xml ©2020 TacM, Ver0.02

 

サンプルプログラミングコード

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Like_A_Sign</title>
        <meta name="description" content="A modern JS library for SVG path animation">
        
<style>						<!-- css  -->
          body, html {
            position: absolute;
            width:100%; height:100%;
            top:0; left:0; margin:0; display:flex;
            align-items:center;
            justify-content:center;
          }
            #Ai550X600A {
              width: 70vw;
              height: 70vh;
              position: relative;
              overflow: visible;
            }
        </style>

        <script src="http://aidesign.lolipop.jp/wp-content/uploads/2019/03/lazy-line-painter-1.9.6.min.js"></script>	<!-- Include lazylinepainter -->
        <script type="text/javascript">
          (function(){ 
            document.onreadystatechange = () => {
              if (document.readyState === 'complete') {
                let el = document.querySelector('#Ai550X600A');
                let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":1.5,"strokeOpacity":1,"strokeColor":"blueviolet","strokeCap":"square"}); 
                myAnimation.paint(); 
				setTimeout(function(){						//アニメーション終了時
					document.getElementById("path847").style.fillOpacity = "1";
					document.getElementById("credit").style.opacity = "1";
				},10000);									//ディレー
              }
            }
          })();
        </script>
      </head>
      <body>
        <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" id="Ai550X600A" inkscape:version="0.92.4 (5da689c313, 2019-01-14)" sodipodi:docname="Ai550X600A.svg" data-llp-composed="true" class="lazy-line-painter">
  <defs id="defs828"/>
  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-510" inkscape:cy="560" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"/>
  <metadata id="metadata831">
    <rdf:rdf>
      <cc:work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
      </cc:work>
    </rdf:rdf>
  </metadata>
  <g inkscape:label="レイヤー 1" inkscape:groupmode="layer" id="layer1" transform="translate(-100, -97)">

    <path style="fill:tomato" d="m 151.58382,215.5911 c -0.64016,-0.17199 -2.34213,-0.9327 -3.78216,-1.69047 -5.34373,-2.81194 -8.31907,-4.84474 -21.92653,-14.9806 -3.83677,-2.85791 -6.98878,-5.17625 -7.00447,-5.15187 -0.30157,0.46866 -9.33539,10.47468 -11.09951,12.29403 -2.72916,2.8146 -4.31624,4.03962 -6.60142,5.09544 -2.566503,1.18579 -4.454883,1.45926 -9.153828,1.32562 -4.063671,-0.11557 -5.955814,-0.41689 -7.054413,-1.1234 -0.809528,-0.52061 -0.553468,-0.81805 1.058333,-1.22937 2.940596,-0.75041 5.783565,-2.04926 8.420191,-3.84687 3.55931,-2.42668 13.600197,-11.40358 17.110007,-15.29694 l 1.48591,-1.64828 -3.10993,-2.29317 c -1.71046,-1.26124 -3.21292,-2.30244 -3.3388,-2.31378 -0.12588,-0.0113 -2.26901,1.89627 -4.7625,4.23912 -12.653652,11.88917 -22.006774,19.35387 -26.143147,20.86477 -1.731694,0.63254 -5.275929,0.76005 -8.038205,0.28921 -3.582184,-0.61061 -8.291692,-2.38336 -10.489841,-3.94858 l -0.660413,-0.47025 2.513156,-0.69167 c 4.348066,-1.19667 8.462685,-2.77397 14.54588,-5.57602 4.471751,-2.05979 12.420829,-7.33627 20.335613,-13.49849 2.266924,-1.76496 6.684157,-5.51799 6.684157,-5.67909 0,-0.16399 -5.18122,-3.551 -5.876437,-3.84148 -0.433669,-0.1812 -1.635682,-0.38991 -2.671136,-0.46379 l -1.882646,-0.13434 1.436575,-1.68918 1.436578,-1.68919 -1.93174,-0.25875 c -2.936064,-0.39329 -3.849133,-1.00913 -3.84154,-2.59102 0.0078,-1.62098 0.617154,-2.55006 3.884026,-5.92183 3.191713,-3.29419 3.51577,-3.80445 3.518477,-5.54021 8.47e-4,-0.54085 -0.154673,-0.90331 -0.544912,-1.27 -0.470408,-0.44203 -0.785766,-0.52194 -2.275417,-0.57656 -1.343372,-0.0493 -1.893303,0.0216 -2.464066,0.3175 -0.40411,0.2095 -1.676938,1.47629 -2.828508,2.81508 -4.585765,5.33131 -8.572504,9.66309 -9.448129,10.26583 -1.195396,0.82285 -2.47379,0.80292 -4.319875,-0.0674 -2.541459,-1.19808 -3.002312,-2.26634 -1.802175,-4.17746 0.955128,-1.52096 5.116312,-5.54837 8.668426,-8.38976 4.49752,-3.59763 6.664921,-6.05483 9.432922,-10.6942 1.249892,-2.0949 1.357181,-2.37005 1.302901,-3.34123 -0.05781,-1.0344 -0.08707,-1.0769 -1.29374,-1.87955 -1.23411,-0.8209 -1.279349,-0.91651 -0.885694,-1.87168 0.140159,-0.34009 -0.131803,-0.35651 -4.050567,-0.24459 l -4.200817,0.11998 -0.423333,0.5479 c -0.232834,0.30135 -0.996707,1.26866 -1.697495,2.14959 l -1.274161,1.60168 -3.276672,0.35096 c -1.80217,0.19302 -3.679563,0.35971 -4.171985,0.37041 l -0.895314,0.0195 0.970795,-1.5007 c 2.313072,-3.57565 3.268217,-6.59233 3.279257,-10.35706 0.0039,-1.34122 -0.05809,-2.69853 -0.137833,-3.01625 -0.09276,-0.36958 -0.06024,-0.57767 0.09027,-0.57767 0.35653,0 7.636614,-0.82554 8.528042,-0.96705 0.709179,-0.11259 0.810104,-0.0654 1.112935,0.5202 0.183168,0.35421 0.445378,1.36664 0.582687,2.24985 l 0.249654,1.60583 3.611577,-0.12714 c 5.267261,-0.18542 4.902488,-0.0669 5.065858,-1.64542 0.223491,-2.15934 0.419318,-9.98923 0.265191,-10.60331 -0.175247,-0.69824 -1.403094,-2.08664 -2.378426,-2.68943 l -0.723879,-0.44738 -3.910393,0.54859 c -2.150717,0.30173 -4.03033,0.54542 -4.176918,0.54154 -0.146587,-0.004 0.685978,-0.32477 1.850145,-0.71308 6.965968,-2.32352 19.489332,-7.49216 26.516352,-10.94383 3.80319,-1.86813 4.44715,-2.26067 5.66096,-3.45082 2.07836,-2.03784 3.24459,-5.045964 3.26947,-8.433133 l 0.007,-1.005417 h 2.13903 c 4.30227,0 8.07113,1.735291 8.98904,4.138816 0.64228,1.681778 -0.0175,4.140424 -1.74137,6.488744 -0.88249,1.2022 -3.57925,3.62506 -6.15754,5.53215 l -1.74501,1.29073 2.40175,0.77822 c 1.32096,0.42803 2.69011,0.92734 3.04255,1.1096 1.07443,0.55561 1.9617,1.41623 1.95897,1.90014 -0.007,1.20362 -2.5586,5.98856 -5.86385,10.99544 -1.60044,2.42438 -3.10223,5.21439 -2.91237,5.41056 0.0392,0.0404 3.75651,-0.0478 8.26077,-0.19616 l 8.18957,-0.26973 0.62587,-0.86217 c 0.90348,-1.24459 2.40132,-4.05001 3.72173,-6.97068 1.08602,-2.40222 1.14304,-2.61356 1.06023,-3.93012 -0.0532,-0.84535 -0.30802,-1.92727 -0.6494,-2.75694 -0.30904,-0.75107 -0.53431,-1.39315 -0.50061,-1.42685 0.0337,-0.0337 1.86394,-0.0859 4.0672,-0.11609 3.79488,-0.0519 4.0617,-0.0292 5.06427,0.43226 1.23733,0.56948 2.34822,1.5758 2.52733,2.28944 0.2525,1.00606 -1.69116,3.95271 -5.35893,8.12431 -1.76355,2.00581 -3.62468,4.49122 -3.62395,4.83953 1.6e-4,0.074 4.69122,0.13526 10.42459,0.13602 5.73336,8.5e-4 10.78868,0.0779 11.23403,0.17134 1.09462,0.22975 1.61526,1.33418 1.61484,3.42561 -2.1e-4,1.2144 -0.1044,1.67157 -0.57744,2.53451 -0.56668,1.03377 -0.90489,1.34886 -5.96847,5.5606 -1.86029,1.54734 -3.81617,3.89442 -3.81617,4.57947 0,0.18829 0.47456,0.26848 1.64042,0.27719 2.85322,0.0213 6.74442,1.61174 7.80503,3.19011 1.63051,2.42648 0.0506,6.94242 -3.14193,8.98085 -0.60349,0.38533 -2.65955,1.72454 -4.56902,2.97602 -1.90948,1.25148 -3.56173,2.27541 -3.67169,2.27541 -0.10995,0 0.42449,0.73819 1.18765,1.64042 1.83646,2.17113 2.3657,3.23889 2.01956,4.07454 -0.26667,0.64381 -1.62008,1.63071 -3.06322,2.23369 -0.73639,0.30768 -1.91758,0.34565 -9.95626,0.31998 l -9.12075,-0.0291 0.0887,1.39278 c 0.14152,2.22259 -1.0175,4.57813 -3.69656,7.51272 -0.69082,0.75671 -2.22986,2.49011 -3.42009,3.852 l -2.16406,2.47617 5.7707,3.86366 c 3.17389,2.12502 6.86608,4.51538 8.20487,5.31191 5.89145,3.50522 21.31015,10.77046 29.58073,13.93835 0.72778,0.27876 1.29277,0.60252 1.25554,0.71946 -0.2313,0.72643 -4.24405,2.49507 -7.69557,3.39185 -4.4042,1.14431 -7.60157,1.41149 -9.80545,0.81937 z M 119.9624,181.80042 c 1.89335,-1.94469 3.14006,-3.44866 4.50548,-5.43519 1.27671,-1.85746 1.36553,-2.51463 0.46197,-3.41818 l -0.61872,-0.61872 -3.66753,0.002 -3.66753,0.002 -2.54,3.09106 c -1.397,1.70008 -2.54,3.18902 -2.54,3.30876 0,0.23676 6.00036,4.57116 6.3553,4.59079 0.11933,0.007 0.88929,-0.67856 1.71103,-1.52258 z m -12.4055,-8.30792 1.14971,-1.16417 h -2.47985 c -1.8493,0 -2.47674,0.0673 -2.46762,0.26459 0.0134,0.29015 2.07717,2.03366 2.42916,2.05221 0.1204,0.006 0.73627,-0.51234 1.3686,-1.15263 z m 1.65446,-7.65475 5.57029,-0.13972 0.95083,-1.23569 0.95083,-1.23567 -1.01778,-0.001 c -1.74524,-0.003 -4.87074,-0.56529 -5.89575,-1.06149 -1.74278,-0.84368 -3.69454,-3.90054 -3.69454,-5.78642 0,-3.70547 4.73804,-6.60771 9.56479,-5.85881 0.8368,0.12983 2.81324,0.66013 4.39208,1.17844 2.68676,0.88201 2.8887,0.91878 3.15275,0.57399 1.28126,-1.67301 4.90371,-10.54204 4.90371,-12.00599 0,-0.29654 -0.3614,-0.81245 -0.94777,-1.35294 -0.88233,-0.81331 -1.03213,-0.87364 -2.16958,-0.87376 -1.2536,-1.3e-4 -26.074771,0.59467 -28.738482,0.68868 l -1.481666,0.0523 0.986864,0.48615 c 1.476493,0.72735 2.880713,2.05534 3.16039,2.98881 0.205958,0.68743 0.176782,0.94319 -0.206434,1.80952 -0.528999,1.19588 -1.803334,3.01555 -4.199663,5.99685 -0.963596,1.19882 -1.751991,2.25792 -1.751991,2.35355 0,0.24544 1.331229,0.43583 3.069167,0.43895 1.760914,0.003 2.738778,0.41933 3.435365,1.46205 0.85088,1.27369 0.682525,2.18741 -1.001199,5.43387 -1.698332,3.27463 -1.843322,4.0738 -0.93495,5.15334 0.300696,0.35735 0.848383,0.73707 1.217083,0.84381 0.84535,0.24474 3.630626,0.26864 10.685656,0.0917 z m 32.41154,-0.30406 c 0.42769,-0.12814 1.00005,-0.40076 1.27191,-0.60583 1.14327,-0.86236 0.0396,-1.84871 -4.85167,-4.33587 l -2.69552,-1.37065 -2.94161,1.07273 c -1.61788,0.59 -3.99852,1.37213 -5.29029,1.73808 l -2.34869,0.66535 -0.93215,1.25151 c -0.51268,0.68833 -1.00831,1.3789 -1.10141,1.53459 -0.14026,0.23455 1.39719,0.28307 8.97127,0.28307 6.03905,0 9.4044,-0.0791 9.91816,-0.23298 z m 11.9214,-3.86639 c 2.05763,-2.7276 2.40081,-3.52845 2.05782,-4.8022 -0.55663,-2.06715 -2.53801,-2.9704 -5.51706,-2.51506 -2.07529,0.31721 -11.20739,3.2365 -11.19868,3.57992 0.001,0.061 1.97799,0.91422 4.39209,1.89609 4.45922,1.81367 6.63247,2.81972 7.77593,3.59969 0.34925,0.23823 0.68263,0.43014 0.74084,0.42648 0.0582,-0.004 0.84528,-0.98687 1.74906,-2.18492 z m -33.60683,-3.95885 c 0.66379,-1.17235 1.1739,-2.16248 1.13358,-2.20028 -0.0403,-0.0378 -0.86111,-0.28021 -1.82397,-0.53867 -1.24841,-0.33511 -2.14413,-0.44487 -3.12216,-0.38259 -1.25674,0.08 -1.44235,0.15651 -2.21809,0.914 -1.04801,1.02335 -1.12728,1.85636 -0.27327,2.8713 0.82853,0.98465 2.02155,1.45763 3.6906,1.46314 l 1.40642,0.005 1.20689,-2.13155 z m 9.20943,1.01004 1.16417,-0.43254 -0.6961,-0.28526 c -1.26514,-0.51843 -1.50955,-0.45548 -2.10555,0.54234 l -0.55282,0.92554 0.51307,-0.15877 c 0.28219,-0.0873 1.03694,-0.35342 1.67723,-0.59131 z m 8.55036,-3.82826 c 1.75843,-0.97612 5.26433,-2.96273 7.7909,-4.41469 2.52656,-1.45196 5.02081,-2.7595 5.54276,-2.90563 0.82038,-0.22969 0.99732,-0.38442 1.3055,-1.14156 0.79232,-1.94664 1.55067,-4.41416 1.68144,-5.47111 0.19624,-1.58614 -0.10212,-2.20985 -1.32218,-2.76398 -0.91865,-0.41723 -1.43921,-0.46432 -5.97791,-0.54071 -2.7344,-0.046 -6.32186,-0.0162 -7.97212,0.0663 l -3.00049,0.15 0.9342,0.89512 c 0.51382,0.49232 0.93421,1.05331 0.93421,1.24664 0,0.75795 -0.86906,2.55922 -2.68766,5.57064 -2.31142,3.82747 -5.43962,9.38417 -5.32986,9.46755 0.26288,0.19968 4.17125,1.5901 4.50288,1.60191 0.22065,0.008 1.8399,-0.78436 3.59833,-1.76048 z m -31.09286,-23.69738 6.35,-0.24535 0.46799,-1.39972 c 0.87909,-2.62928 1.74979,-8.74742 1.75278,-12.31621 0.002,-2.29965 -0.16821,-2.80532 -1.31435,-3.90643 l -0.7172,-0.68903 -7.21817,1.21162 -7.218182,1.21163 0.519101,0.61692 c 0.986721,1.17264 1.411171,2.28438 1.511211,3.95812 0.0834,1.39529 0.0285,1.73174 -0.43184,2.64583 -0.738278,1.46607 -2.466545,5.82899 -3.035065,7.66185 l -0.475996,1.53459 1.729863,-0.0192 c 0.951425,-0.0106 4.587358,-0.12964 8.079858,-0.26459 z" id="path847" inkscape:connector-curvature="0" data-llp-id="Ai550X600A-0" data-llp-duration="15000" data-llp-delay="0" fill-opacity="0.2"/>
    <text id="credit" style="opacity:0" x="70" y="222" font-size="6" font-family="bold" fill="black">&copy;2020 TacM, Ver0.01</text>
  </g>
</svg>
      </body>
    </html>

最後に

前回は「い」の文字のパスデータを作りました。次には左馬をアウトライン化して描画する予定でしたが、それを飛び越えて「直江兼続」が装着した兜をイメージした「愛」の文字を手書き風にアニメーションにしました。

プログラミングコードを公開しますので五月端午の節句に向けて関係者の固有名を入れてプレゼントしてはいかがでしょう。

おまけ

サンプルコードはLASY LINE COMPOSERが出力したコードを少し変更しています。時代遅れなインターネットエクスプローラーのサポートコードや冗長と思われる部分を削除しています。

アニメーションが終了した時に縁取り文字を目立たせ完了を告知し、クレジットを入れる処理を追加しています。32~35行部分を注視してください。

LAZY LINE COMPOSERはフリーソフトながら画像をアウトライン化してくれる優れたツールです。HTMLプログラミングを習得して会社の創業記念や大切な人への誕生祝いの作品制作に挑戦してください。

 

永遠の旅人、芭蕉の足跡

芭蕉足跡の一つ

時空と季節を超越して江戸時代の俳人、松尾芭蕉の足跡のひとつを訪ねてみます。BGMはヨーロッパの著名な民謡《ドナウ川のさざなみ》を用意しました。最上川とは趣きは異なりますが著作権がらみで世界の民謡を取り上げました。画像は小高い山から眺めた庄内平野です。

音声再生ボタンを押下してなにもかもスタートです。

プログラムコードについて

俳句はInkscapeでPathデータを作りました。Inkscapeは漢字の振り仮名はサポートしてくれません。振りがなは漢字と同様にしてPathデータを作り、本文との位置はTry and Goで決めます。この作業は時間に比例して確実に進みます。

このアプリが生成したプログラムコードに手を加えて画像とテキストの共存を図っています。両立のポイントはopacityを巧妙に操ることです。ソースコードの公開は故あって先延ばしになります。

 

特別なクリスマスプレゼント

プログラミング教育必修化

来年の4月から小学校においてプログラミング教育が必修化になります。プログラミングを構えすぎると難解と言えますが、自然に使っていくと入りやすいでしょう。赤ちゃんは覚えたものだけを大胆に使います。

覚えたものを一つずつ使っていけばやがて高みに到達するでしょう。まずは臆せずに使いましょう。

動きのある書類

電子書類にちょっとした動きを付けるにはHTML, CSS, JavaScriptを使いこなすと多彩な表現が可能です。恐縮ですが以下のサンプルは難解の部に入ります。以下のような動くドキュメントを表現できる一つの例を挙げます。末尾にHTMLコードを示します。

あかりちゃん クリスマスおめでとう 音符記号をクリックして開始 ♫音楽:甘茶の音楽工房より 『ヴァルス』♫ ©2019 TacM, Ver0.01

 

 

 

個別に改造する方法

以前に、七五三お祝いのメッセージにおいて「玲依ちゃん」の七五三を祝いました。当事者の氏名を変更することは初心者には難儀であることを述べました。名前を一筆書きのように表示するには、独自のフォントを作成するに等しく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("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 &#x27a1; 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">&#x97F3;&#x7B26;&#x8A18;&#x53F7;&#x3092;&#x30AF;&#x30EA;&#x30C3;&#x30AF;&#x3057;&#x3066;&#x958B;&#x59CB;</text>
<a onclick="congratulateAdmission();" style="text-decoration:underline;">
<text x="10" y="250" font-size="8">&#x266B;&#x97F3;&#x697D;&#x3A;&#x7518;&#x8336;&#x306E;&#x97F3;&#x697D;&#x5DE5;&#x623F;&#x3088;&#x308A;&#x20;&#x300E;&#x30F4;&#x30A1;&#x30EB;&#x30B9;&#x300F;&#x266B;&emsp;&copy;2019 TacM, Ver0.01</text>
</a>
</svg>
</body>
</html>