月別アーカイブ: 2020年4月

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

新しい時代に合った方法

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

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

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

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

考察

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

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

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

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

 

「山吹の花」を詠む

晩春を惜しんで




晩春に「山吹の花」を詠む 古今和歌集より


【現代語訳】

春雨に洗われて

あざやかに映える色だけでも

楽しみが尽きないのに、

さらに香りにまで

心ひかれてしまう山吹の花よ
春雨はるさめ

 にほへるいろ

  あかなくに

さへなつかし

 山吹やまぶきはな

 よみ人知らず 古今和歌集一二二

再生ボタンをクリックしてスタートです。
音楽:フリーBGM素材「お気楽日和」by もっぴーさうんど



 

ストップ・ザ・ウイルス

徹底した対策を

新型コロナウィルスの感染は拡大する一方です。籠りっきりも辛いです。対策を徹底するしかないでしょうか。感染を防ぐ策を動くメッセージにしました。アピール度の高い作品を発表してコロナ撲滅の啓蒙を展開してください。作り方、楽しみ方が参考になれば幸いです。はじめボタンをクリックしてスタートです。

 

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="https://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="https://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="https://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 = "https://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>

 

ピンチはチャンス

艱難はチャンスです

他人(ひと)の不幸を笑っているといつかはわが身に振りかかると言われます。明日は我が身とも言います。体験したこともない困難には協力し合って乗り越えましょう。

このような時にこそ、先人の教えを結集したり身に付けた知恵を絞りだして切り抜けたいものです。

ピンチはチャンス、艱難はチャンスです。昨今の病魔は長い人間の歴史の中で何度も何度も巡ってきた困難のひとつです。当ブログでは対面をしないで世のために貢献するとの考えで、プログラミング学習を進めます。

家族の成長をプログラミングで動的表現

このテーマは以前にも取り上げていますが、この度はBGMを変更したり豊かな描写を盛り込みました。最後に自前で開発するためのガイド先を載せてあります。

あみだくじ、将棋、電子万華鏡、万葉集、ビンゴゲームの作り方について触れています。HTMLやJavaScriptに興味のある方はぜひひも解いてみてください。

サンプル

開始(再生)ボタンをクリックしてスタートです。

最後に


かつて子供の成長記はアルバムに収録していました。デジタルメディアが全盛の時代ですが、今はどのように保存しているのだろうか。

クラウド上に保管しておけば、スマホやパソコンが壊れても紛失の心配はないはずですが、一筋縄にはいかないようです。

簡便で信頼性とセキュリティの高い方法はあるのでしょうか。先導的なマスコミはもっと取り上げてほしいものです。

都道府県データ閲覧

都道府県データの原型

テレビニュースにおいて都道府県ごとに集計したデータを発表する習わしが一般化しています。我が国において中央集権とも地方分権ともとれる江戸時代を超える長さを誇る政権は他にないでしょう。


幕藩体制の延長上にある現代は都道府県単位に中央からコントロールされるのもやむを得ないところでしょうか。

毎日、毎日、コロナ感染者が都道府県別に色どりされた日本地図上に詳報されます。

これまでも日本地図から都道府県別データを引き出すサンプルを発表してきましたが、決定版として改訂しました。

改訂項目

先ず、滋賀県の地方区分を中部地方に入れていましたが、近畿地方の誤りでした。そのほか、静岡県の地図情報も正確さを欠いていましたので改訂しました。また県章と県のシンボルマークをごっちゃに表示しましたがシンボルマークに統一し鮮明な画像に作り直しサイズを大きくしました。

メニューは9個用意してありますが、中身はありません。独自の開発ができるようになっています。県コードは北海道を00とし沖縄県を46にしています。

サンプル

地図をクリックすれば、都道府県をアピールする作品を作ろう。





都道府県データの原型©TacM,2020 Ver0.01





まとめ

改訂項目に示した47都道府県の図は6行8列からなり、原図は200PX*200PXにリサイズし47枚集めて1枚にしてあります。48番目に示したサイトを参照しながら私が作りました。著作権を主張したいところですが元の画像を引用することすら許諾を得ていませんのでこれは無理ですね。

るるぶ都道府県いちばんかるた

シンボルマークに関わる都道府県の関係者の皆様、どうか使わせてください。280*280のシンボルマークの一次利用者の図は左に偏っていたりして調整するのにそれなりに苦労しましたが作業がとても捗りました。感謝申し上げます。

県章やシンボルマークは前回までは白黒でしたので、今回は大きな進展です。これまで気づいた点を挙げれば都道府県名の長さは2~3字、県庁所在地名は1~4字(津…さいたま)です。シンボルマークで画面をフルに使っているのは栃木県、ローマ字県名を入れているのは岐阜県です。

 

英会話や料理など、ある程度のレベルまで到達するには時間が必要です。コロナウィルスで外出禁止ならば開き直って室内で確たるものを身につけてはいかがでしょう。

 

オンライン学習

オンライン授業

最近、コロナウィルスの猛威の影響でテレワークやオンライン学習の言葉を耳にするようになりました。政府は全国の小中学校にひとり一台のタブレットを無償で配ることを前倒しで実行するようです。

タブレットを使いこなせない状態で配布はとんでもないと言わずにこれから欠かせない道具がひとつ増えると考えましょう。

車の運転ができると行動半径が広がります。インターネットは狭い空間を世界に広げてくれます。また、居ながらにして遠隔地の情報を入手することができます。

当ブログでは原理や仕組みを考えて自ら作り上げることを標榜していますが、既存のシステムに手を加えて自分好みの使い方に設計することに挑戦します。

馬には乗ってみよ人には添うてみよ

上の警句は何事も経験してみなくては本当のところはわからないのだから、やりもしないで批判したり評価したりするべきではないということです。食わず嫌いは止めて何事も自分で直接、経験してみよというときにも使われる言葉です。

先日、宅配便で物を送るべく、集配をお願いするために電話したところ、あなたの電話は○○○○-○○-○○○○ですね。そうであれば1をそうでなければ0を、本日中に集配を希望の場合は1を、明日ならば0を押してくださいとアナウンスされました。

それぞれに1を応答したら電話が切れ、30分後に係員が集配に来ました。ロボットに扱われるのはごめんだと突っぱねると集配が遅れることになるでしょう。時代、時代に合わせてこちらから寄り添っていく余裕は持っていたいものです。

日本の地理を学ぶ

地図に親しむで都道府県の基本データを手に入れる方法を語りました。その作品は都道府県の位置や県庁所在地の都市名を覚えることが主な目的でした。今回はメニューを増やし使い勝手のよいアプリを開発することをねらっています。

メニューを5つに増やし、選択した県データは記憶されているので、メニューから削除しました。上から3つのメニューはサンプルとして作成済みです。下の2つは未実装であり薄い色で表示されています。ソースコードはCTRL+Uを押下して取り出せます。

都道府県の花などは多くの人が発表しています。発表者のブログからURLアドレスを引き出して当ブログに埋め込んであります。このようにすれば一から作らずに済みます。このような行為を他のページにリンクするといいますが、まれにはこれを禁じている作者がいますがこの場合、素直に引き下がります。

 

ブログなどは多くからの閲覧があってなんぼなのですが、参照した記事の著作権はブログ運営者にあるのでダメなものはダメです。他人が作った記事で利益を上げている場合などを除けば許されるケースが多いことも付記しておきます。

サンプル

下記サンプルの使い方は閲覧する都道府県を地図上でクリックします。そして、都道府県詳細情報から始まるメニューを指定します。移動した新しいページでXにて終了すれば元の画面に戻ります。

 





都道府県にとことん親しむ





 

記事の参照方法

記事を参照するにはwindow.open()メソッドを用います。最初の引数に新規ウィンドウで表示させたいWebページやHTMLファイルのアドレスを設定します。都道府県に関する記事であり、ここに指定するURLアドレスには必ずと言っていいほど県名が入っています。だからここでは1つのメニュー用に都道府県名をローマ字表記した47種の表を持ち、ほかのメニューの場合は作り直せばスマートなプログラミングと言えます。

ところが記事の作者が異なるため、ローマ字はヘボン式表記が一般的ですが訓令式表記も使われています。北海道の英語表記では長音はUやOUを含めず、hokkaidoと表記しますがhokkaidouと表記している作者もいます。尚、茨城(ibaraki)を'ibaragi'の表記例も見受けられます。規格化された県名の名づけ基準を厳守しない限り、1つのメニューに対して47種のアドレスを用意する必要がありそうです。

理想論ですが他者の記事を参照せずにすべてを自前で作成すれば、何の問題も起きないでしょう。その時はやっつけ仕事のごとく機能を追加するのではなく、拡張性を考慮して設計することが大切です。

都道府県データを採集して表示には

都道府県データを自ら採集して表示するには、採集データを表示する記事を作成します。例えば都道府県出身の著名人に関する記事を作成し公開サーバーに登録し、URLアドレスを押さえておきます。次にメニュー部に新規ウィドウでその記事が開くようにwindow.openを用いて設定します。

終わりに

ブログを作成するのも一般生活も変わりはありません。既存に溶け込むには今までの基準を踏襲しなければならないことが多いです。それはムダがあったりしますがゼロから作り上げるよりはマシと認めることになります。弊害が大きくなってしがらみのない強力リーダーが現れて世直しが起きることもあります。様々な問題を含んでいる一例をあげました。

 

外出を控えるようにとの通達が届いています。オンライン学習を自前で作って見ませんか。