VB.NET-TIPS などプログラミングについて

2022/10/26

PHP クラス（class）のオーバーライドの使い方について・その４（プロパティ）

以下の記事で、クラス（class）の使い方について説明しましたが、その時は親クラスのメソッドを、子クラスで同じメソッド名で宣言することでオーバーライドができることを記しました。

⇒PHP クラス（class）の使い方について

クラスは関数だけではなく、プロパティ（変数と言ってもいいと思います）もオーバーライドが使えます。

親クラスで public で宣言されたプロパティを、子クラスで同じ名前で public で宣言すればオーバーライドしたことになります。取敢えず、簡単な例を以下に示します。

<?php
//  継承の基となる親クラス
class cParent
{
    //  プロパティ
    public $param;

    //  コンストラクタ
    public function __construct() {
        $this->param = "cParent_param";
    }

    //  テスト関数
    public function func() {
        echo $this->param."

\n";
    }
}

//  [cParent]から派生した子クラス
class cChild extends cParent
{
    //  オーバーライド・プロパティ
    public $param;

    //  コンストラクタ
    public function __construct() {
        $this->param = "cChild_param";
    }
}

//  [cParent]クラスの生成
$insParent = new cParent();
//  テスト関数の実行
$insParent->func();
//  [cChild]クラスの生成
$insChild = new cChild();
//  テスト関数の実行
$insChild->func();
?>

親クラスに「param」のプロパティを宣言し、コンストラクタの中でそのプロパティを初期化しています。また、関数「func()」の中ではそのプロパティを出力しています。
そこで、この親クラスから派生した子クラスに「param」というプロパティをオーバーライド宣言しています。

これらのクラスを実行してするため、親クラスを生成し「func()」を実行し、子クラスを生成し「func()」を実行しています。
これを実行するとブラウザに以下の様に表示されます。

cParent_param
cChild_param

子クラスを生成し「func()」を実行した場合は、親クラスの「func()」が実行され、「func()」の中で参照されている「param」は子クラスのプロパティとなります。オーバーライドの結果が出ていると思います。

このことから、子クラスで宣言されたプロパティを使って、親クラスの関数に違った動作を行わせることが出来ると思います。

PR

PHP
0CM

2022/04/14

ヤフオクでこんなものが売れた（５）コンピュータメーカーの工場見学のパンフレット

ヤフオク で売れた商品の第５弾としては、コンピュータメーカーの工場見学のパンフレットです。

私が学生時代（1980年ごろ）に、IBMの工場見学をした時に頂いたパンフレットです。
このIBMの野洲工場は当時としては最先端の工場で、汎用機のCPU基盤から装置への組み込みまで一貫して行っていました。実際に見学した時には、マザーボード基盤の裏側のワィヤーラッピングの配線を自動でロボットが行っていて非常に驚いたのを覚えています。

現在の野洲工場は確か京セラの工場として使われていると思います。IBMの企業としてはパソコン事業から撤退したりと隔世の感があります。

まさか売れるとも思っていなかったのですが、古いものは結構なんでも売れる様でしたので出品してみました。

落札は開始価格の「５００円」でしたが、処分の意味ではOKでした。

はじめての全部スマホでできる！ヤフオク！ Kindle版

はじめてヤフオクを使う場合の入門書には最適です。

ヤフオク
0CM

2021/12/27

JavaScript JQuery crypto-jsを使って暗号化と復号を行う方法について

crypto-js を使って文字列（データ）を暗号化、及び復号化を行う方法を記したいと思います。

このモジュールの中の AES(Advanced Encryption Standard) の機能を使って処理を行います。

AES とはなにかと言いますと Advanced Encryption Standard の略で、無線LANなどの通信データの暗号化に用いられるアルゴリズムの様です。
通信の送信側と受信側で、同じ暗号鍵を用いて暗号化と復号を行います。

crypto-js は以下のサイトにありますので、リンクをソースに貼れば参照できます。

⇒https://cdnjs.com/libraries/crypto-js

さて実際に crypto-js を使う例を示します。
暗号化するには CryptoJS.AES.encrypt 、復号化するには CryptoJS.AES.decrypt メソッドを使います。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	var src = "12345ABCDE";
	var des = "";

	//暗号化キー:"testkey"を用いて暗号化
    des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('Source :' + src);
    console.log('Crypto :' + des);

	//暗号化キー:"testkey"を用いて復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
    console.log('Decrypt:' + decrypted);
}
</script>
</head>
<body>
    <h2>test crypto-js 1</h2>
    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。

source:12345ABCDE
Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0=
decrypted:31323334354142434445

復号化した文字列をよく見ると HEX文字列となっています。
このままでは使えないので crypto-js がもつ uft8 用のエンコーダで文字列にしてやります。
上のソースに1行追加して以下の様になります。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	var src = "12345ABCDE";
	var des = "";

	//暗号化キー:"testkey"を用いて暗号化
    des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('Source :' + src);
    console.log('Crypto :' + des);

	//暗号化キー:"testkey"を用いて復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
    console.log('Decrypt:' + decrypted);
    var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
    console.log('utf8     :' + decrypt);
}
</script>
</head>
<body>
    <h2>test crypto-js 1</h2>
    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。

source:12345ABCDE
Crypto:U2FsdGVkX19tkNEEWTeV401CSx84Kgc6+KlgbWSEau0=
decrypted:31323334354142434445
utf8     :12345ABCDE

■オブジェクトを暗号化・復号化の処理

上記の例では文字列を暗号化・復号化することは出来ました。そこでこの処理を拡張して、オブジェクトデータについても暗号化・復号化させてみます。

オブジェクトを先ず JSON 文字列として作成し、それを暗号化します。復号の場合には逆の考えですので、復号化された JSON 文字列をオブジェクトとして戻します。

<html>
<head>
<meta charset="utf-8">
<title>test crypto-js 3</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script type="text/javascript">
//暗号・復号テスト
function crypto() {
	//オブジェクト宣言
	var obj = {
		data1: "12345ABCDE",
		data2: "あいうえお",
		data3: 12345
	}

	//JSON文字列に変換
    var src = JSON.stringify(obj);
	//暗号化
    var des = CryptoJS.AES.encrypt(src, "testkey");
    console.log('source:' + src);
    console.log('Crypto:' + des);

	//復号化
    var decrypted = CryptoJS.AES.decrypt(des, "testkey");
	//UTF-8文字列変換
    var decrypt = decrypted.toString(CryptoJS.enc.Utf8);
    console.log('utf8     :' + decrypt);
	//オブジェクトに戻す
	var objDes = JSON.parse(decrypt);
	console.log('obj.data1:' + objDes.data1);
	console.log('obj.data2:' + objDes.data2);
	console.log('obj.data3:' + objDes.data3);
}
</script>
</head>
<body>
    <h2>test crypto-js 3</h2>

    <button onclick="crypto();">crypto</button>
</body>
</html>

これをブラウザで表示し、「crypto」ボタンをクリックするとブラウザの開発ツールのコンソールウインドウで見ると以下の様に表示されます。
確かにオブジェクトが暗号化されて、その後復号化しオブジェクトの各項目を参照できることが分かります。

source:{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
Crypto:U2FsdGVkX19pPVoeRzc/ZjN1jKNIzi13I543cTbiNhMQ4Q3Tnn6AD0GILW1a4LCoN3b8Zh5qhbCul1RTymiwPMZFkiIGlweGu0vukHq2YD8=
utf8     :{"data1":"12345ABCDE","data2":"あいうえお","data3":12345}
obj.data1:12345ABCDE
obj.data2:あいうえお
obj.data3:12345

■empty メソッドでの処理

以下の例では p タグの中身を削除して append メソッドで文字列を追加しています。

<html>
<head>
<meta charset="utf-8">
<title>test tag exchg 1-1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//変更1
function exchg1() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更11111";
    $("#main p").append(tag);
}
//変更2
function exchg2() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更2222";
    $("#main p").append(tag);
}
</script>
</head>
<body>
    <h2>test tag exchg 1-1</h2>
    <div id="main">
      <p>
        test initial document
      </p>
	</div>
    <br />
    <button onclick="exchg1();">Exchange1</button>
    <button onclick="exchg2();">Exchange2</button>
</body>
</html>

■タグの書き換えで連続的な処理を行う様にする

タグの書き換えは静的なテキストだけでは無く、その他のタグを含む文字列を置き換えることができます。
以下の例では div タグの中の p タグにボタンタグを入れ替えています。ボタンタグを動的に作成しても onclick イベントは利く様です。

最初の「Exchange0」ボタンクリックで「Exchange1」「Exchange2」のボタンが現れそれぞれのクリックで以下の様に処理が進みます。
「Exchange1」⇒「Exchange1_1」⇒「Exchange0」(画面が最初の表示)
「Exchange2」⇒「Exchange2_1」⇒「Exchange0」(画面が最初の表示)

<html>
<head>
<meta charset="utf-8">
<title>test tag exchg 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//変更0
function exchg0() {
    $("#main p").empty();
    var tag = "";
    tag += " <button onclick='exchg1();'>Exchange1</button>";
    tag += " <button onclick='exchg2();'>Exchange2</button>";
    $("#main p").append(tag);
}
//変更1
function exchg1() {
    $("#main p").empty();
    var tag = "";
    tag += " <button onclick='exchg1_1();'>Exchange1_1</button>";
    $("#main p").append(tag);
}
//変更1_1
function exchg1_1() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更11111<br />";
    tag += " <button onclick='exchg0();'>Exchange0</button>";
    $("#main p").append(tag);
}

//変更2
function exchg2() {
    $("#main p").empty();
    var tag = "";
    tag += " <button onclick='exchg2_1();'>Exchange2_1</button>";
    $("#main p").append(tag);
}
//変更2_1
function exchg2_1() {
    $("#main p").empty();
    var tag = "";
    tag += " 変更22222<br />";
    tag += " <button onclick='exchg0();'>Exchange0</button>";
    $("#main p").append(tag);
}
</script>
</head>
<body>
    <h2>test tag exchg 2</h2>
    <div id="main">
      <p>
        test initial document
	    <br />
	    <button onclick="exchg0();">Exchange0</button>
      </p>
	</div>
</body>
</html>

以上のことから HTML の中に何も無くても、順次 Javascript プログラムから処理を行うタグを条件に合わせて変化させることができます。

結果 Javascript プログラムを使ってWEBページを動的に変化させることが出来る様になります。

■animate メソッドの書式

JQuery メソッドの animate の書式は以下の通りです。

//animateの書式
.animate( cssproperties [, duration] [, easing] [, complete] )
.animate( cssproperties, options ) 1.0追加 

// cssproperties : CSSプロパティオブジェクト（複数指定可）
// [duration]    : フェードするアニメーション時間を指定(数値型と文字列型)
//                 ・数値型はミリ秒の値
//                 ・文字列型は "slow"(600ミリ秒) "fast"(200ミリ秒) の値
// [easing]      : アニメーションの変化の種類を指定（"linear","swing"）
//                 ・"linear" を指定すると直線的に変化
//                 ・"swing"  を指定すると最初ゆっくり動きだし最後の方は早く変化
// [callback]    : アニメーション完了後に実行したい関数を指定
// options       : duration等をオブジェクトで指定
//

■animate メソッドの簡単な例

それでは animate の簡単な例を以下に示します。この例は div で囲まれた要素の透明度である opacity を通常から「0.5」へ、さらに「0.5」から通常にする処理です。

<html>
<head>
<meta charset="utf-8">
<title>test animate</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//透明度0.5処理
function animateOpacityHalf() {
    $("#menu").animate({
			opacity: 0.5	// 透明度0.5へ
	  	}, 1000
	);
}
//透明度1.0処理
function animateOpacityNormal() {
    $("#menu").animate({
			opacity: 1.0	// 透明度1.0へ
	  	}, 1000
	);
}
</script>
</head>
<body>
    <h2>test animate</h2>
    <div id="menu">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="animateOpacityHalf();">OpacityHalf</button>
    <button onclick="animateOpacityNormal();">OpacityNormal</button>
</body>
</html>

■CSS プロパティを複数設定する

上記の簡単な例では opacity のみを指定しましたが、以下の例では marginLeft marginTop の2個を追加しました。

CSS プロパティで指定できるのは値として数値であるものです。例では marginLeft にはピクセル値を設定していますが、これは数値として判断できるためです。なお、単位として % や em も使える様です。

<html>
<head>
<meta charset="utf-8">
<title>test animate</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//透明度0.5処理
function animateOpacityHalf() {
    $("#menu").animate({
			opacity: 0.5,		// 透明度0.5へ
			marginLeft: "100px",// 左マージン100px
			marginTop: "100px"	// 上マージン100px
	  	}, 1000
	);
}
//透明度1.0処理
function animateOpacityNormal() {
    $("#menu").animate({
			opacity: 1.0,		// 透明度1.0へ
			marginLeft: "0px",	// 左マージン0px
			marginTop: "0px"  	// 上マージン0px
	  	}, 1000
	);
}
</script>
</head>
<body>
    <h2>test animate</h2>
    <div id="menu">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="animateOpacityHalf();">OpacityHalf</button>
    <button onclick="animateOpacityNormal();">OpacityNormal</button>
</body>
</html>

上の例は　div で囲まれた領域が「OpacityHalf」ボタンでは右下に移動し、「OpacityNormal」ボタンでは左上に戻った様に表示されます。

VB.NET-TIPS などプログラミングについて

■オブジェクトを暗号化・復号化の処理

関連する記事

■empty メソッドでの処理

■タグの書き換えで連続的な処理を行う様にする

関連する記事

■このページの内容

■animate メソッドの書式

■animate メソッドの簡単な例

■CSS プロパティを複数設定する

関連する記事