inventor のすべての投稿

PHPのバージョンアップでおおごとに

🚑

システムの改訂

長年、同じことを繰り返しているとそれが未来永劫に続くものと思いがちです。周りに感謝する気持ちが薄らいできます。本ブログはWordPressを利用しています。ブログは様々なパートから成り立っていて、それらを少しずつメンテナンスしなければならないことは万物、皆おなじでしょう。

PHPというパーツをバージョン5.6のまま、長きにわたって使い続けていました。アドバイス、警告を無視してその日暮らしに明け暮れていたのです。PHPやWordPressをバージョンアップするとブログが立ち上がらなくなることがあります。

システム(ここではWordPressのこと)をバージョンアップするとき、開発者は動作信頼性を確認しますが無料で提供している場合はその確認はおろそかになりがちです。プラグインは誰もが開発・販売・提供できるので数が多く周辺の商品の品質まで保証できないのが実情であり、プラグインの品質まで責任を負うものではありません。

そこでPHP Compatibilityというツールがあり、PHPをバージョンアップする前に有効化されたプラグインの適合性・互換性をチェックしてくれます。このツールは実行してその結果を報告してくれるものでなく、ソースコードを解析して新PHPバージョンに適合するかどうかを判断しています。

そのため、100%の解析を保証できないもの、解析に長時間かかるものはスキップされることがあるとことわりが表明されています。だから、PHPバージョンアップでブログが立ち行かなくなることがあります。

今回、過去の記事がすべてなくなり新規開催状態に陥りました。10年を超える蓄積が一瞬のうちに無に帰したときは青ざめましたが、大罪を犯したわけではないのだと言い聞かせました。

レンタルサーバーの運用先(ロリポップ)にサポートをお願いし、メールで回答を受けシステムの復元にこぎつけました。

記事失念の原因

今回、苦労して書き上げた投稿記事が0件になりましたが、本でいえば目次がなくなっただけで本文はサーバーに残っていました。具体的にはwp-config.phpファイルに編集ミスがあったことです。ロリポップからのメールに的確な説明が記されていました。改修方法が記載され、この編集で100%復元するとは限らないとも書かれていました。

その後、exec-phpというプラグインの22行目が問題発症ヶ所であるとの報告がメールで届きました。WordPress5.2から自動で解析が進むように改訂されたとの説明が合わせて載っていました。ここでもAIが大活躍しているのでしょうか。

今は、exec-phpというプラグインを停止してこの記事を投稿しています。結構、体力が消耗しましたので本日はここで終わらせていただきます。

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

新しい時代に合った方法

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

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="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>