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

今回は小ネタですが、セルに PHP のUNIT-TIMEデータを日付型データとして設定し、日付の書式で表示させる方法について説明したいと思います。

■「PHPToExcel」を使ったセルへの日付型データの設定

セルに日付型データを設定するには Date クラスの PHPToExcel メソッドで PHP の日付データ（UNIX-TIME） をエクセルの date/time 値に変換したものを設定します。 PHPToExcel メソッドは static な関数なので Date::PHPToExcel と直接書くことができます。
以下に簡単な例を示します。 [A2] セルに現在時刻を設定し、そのセルの書式スタイルを日付表示の設定で行っています。

<?php
// ライブラリ読込
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Style\NumberFormat;
use PhpOffice\PhpSpreadsheet\Shared\Date;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

// Spreadsheetオブジェクト生成
$objSpreadsheet = new Spreadsheet();
// ワークシートオブジェクト
$objSheet = $objSpreadsheet->getActiveSheet();

// セルにシステム時刻(Unix Time)を設定
$objSheet->setCellValue('A2', Date::PHPToExcel(time()));
// スタイルオブジェクト取得([A2]セル)
$objStyle = $objSheet->getStyle('A2')->getNumberFormat()->setFormatCode('yyyy"年"m"月"d"日";@');

// [test6-a2.xlsx]:Excel2007形式で保存する
$objWriter = new Xlsx($objSpreadsheet);
$objWriter->save('test6-a2.xlsx');
exit();
?>

出力されたエクセルファイルを見てみると以下の様になります。[A]列の幅は便宜上広くして表示しました。

エクセルのワークシートのセルにスタイルを設定する説明は以下の記事で行いましたが、今回は複数セルに対するスタイル設定について説明したいと思います。
PHP PhpSpreadsheet エクセルのワークシートのセルのスタイル設定について

• 「applyFromArray」を使ったセルのスタイル設定
• 「applyFromArray」と「duplicateStyle」を使ったセルのスタイル設定

■「applyFromArray」を使ったセルのスタイル設定

ワークシートオブジェクト から取得した スタイルオブジェクト の applyFromArray() メソッドで設定するスタイルを array() で与えることが出来ます。
以下に簡単な例を示します。 [A1:D3] のセル範囲の周りに赤色のボーダーで囲む設定を行っています。

<?php
// ライブラリ読込
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Style\Style;
use PhpOffice\PhpSpreadsheet\Style\Border;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

// Spreadsheetオブジェクト生成
$objSpreadsheet = new Spreadsheet();
// ワークシートオブジェクト
$objSheet = $objSpreadsheet->getActiveSheet();
// スタイル設定値array
$styleArray = [
    'borders' => [
        'outline' => [
            'borderStyle' => \PhpOffice\PhpSpreadsheet\Style\Border::BORDER_THICK,
            'color' => ['argb' => 'FFFF0000'],
        ],
    ],
];
// [A1:D3]のスタイル設定
$objSheet->getStyle('A1:D3')->applyFromArray($styleArray);

// [test6-a0.xlsx]:Excel2007形式で保存する
$objWriter = new Xlsx($objSpreadsheet);
$objWriter->save('test6-a0.xlsx');
exit();
?>

出力されたエクセルファイルを見てみると以下の様になります。

■「applyFromArray」と「duplicateStyle」を使ったセルのスタイル設定

上記は スタイルオブジェクト の applyFromArray() メソッドでスタイルを設定する処理でしたが、 指定したセル範囲を一つのセルと考えてのスタイルを設定していました。

今度は、指定したセル範囲の全てのセルに対して同じスタイルを設定する方法を示します。
以下の例は スタイルクラス:Style() を生成しその スタイルオブジェクト に applyFromArray() メソッドでスタイルを設定しておきます。
この スタイルオブジェクト を ワークシートオブジェクト の duplicateStyle() メソッドで指定範囲の各セルへのスタイル設定が一括で行えます。
各セルには「文字フォント」「アライメント（水平位置）」「ボーダー（全周枠）」「書式設定（数値）」「ぬりつぶし（色）」のスタイルを設定します。

<?php
// ライブラリ読込
require '../vendor/autoload.php';
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Style\Style;
use PhpOffice\PhpSpreadsheet\Style\Alignment;
use PhpOffice\PhpSpreadsheet\Style\Border;
use PhpOffice\PhpSpreadsheet\Style\Fill;
use PhpOffice\PhpSpreadsheet\Style\Font;
use PhpOffice\PhpSpreadsheet\Writer\Xlsx;

// Spreadsheetオブジェクト生成
$objSpreadsheet = new Spreadsheet();
// ワークシートオブジェクト
$objSheet = $objSpreadsheet->getActiveSheet();

// 配列データ
$arrData = array(
    array(100,  -1100,   12000,   130000),	// マイナス値もいれる
    array(200,   2100,   22000,  -230000),
    array(300,   3100,  -32000,   330000),
);
// [A1:D3]セルに配列データ設定
$objSheet->fromArray(
    $arrData,  // 配列データ
    NULL,      // 配列データの中でセルに設定しないNULL値の指定
    'A1'       // 左上座標(デフォルト:"A1")
);

// 全部のスタイルの定義
$objStyle = new Style();
$objStyle->applyFromArray(
    array(
    	'font' => array(
           'name' => 'Arial',
           'bold' => TRUE,
           'italic' => FALSE,
           'underline' => Font::UNDERLINE_DOUBLE,
           'strikethrough' => FALSE,
    	),
    	'alignment' => array(
    		'horizontal' => Alignment::HORIZONTAL_RIGHT
    	),
    	'borders' => array(
    		'top' => array(
    			'borderStyle' => Border::BORDER_THIN,
    		),
    		'bottom' => array(
    			'borderStyle' => Border::BORDER_THIN,
    		),
    		'left' => array(
    			'borderStyle' => Border::BORDER_THIN,
    		),
    		'right' => array(
    			'borderStyle' => Border::BORDER_THIN,
    		)
    	),
    	'numberFormat' => array(
       	    'formatCode' => '#,##0;[Red]#,##0',		// マイナスは赤色
    	),
    	'fill' => array(
    		'fillType' => Fill::FILL_SOLID,
    		'startColor' => array(
    			'argb' => '00FFFF80'
    		)
    	)
    )
);
// セル範囲指定でのスタイル設定
$objSheet->duplicateStyle($objStyle, 'A1:D3');

// [test6-a1.xlsx]:Excel2007形式で保存する
$objWriter = new Xlsx($objSpreadsheet);
$objWriter->save('test6-a1.xlsx');
exit();
?>

出力されたエクセルファイルを見てみると以下の様になります。

以下の記事で、クラス（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」は子クラスのプロパティとなります。 オーバーライドの結果が出ていると思います。

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

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

関連する記事

HTMLタグの入れ替ることにより、表示内容を変えることは特に難しくはありません。
以下の例では div タグの中の p タグを入れ替えています。 JQuery の remove メソッドで対象となるタグを全て削除し append メソッドでタグを挿入し、テキストを変更するものです。

remove メソッドは指定したセレクタ（タグ）そのものも削除するので注意が必要です。 なお、中身だけ削除する場合は empty メソッドを使います。

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

remove メソッドを empty メソッドに変更した例を以下に記します。

■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ページを動的に変化させることが出来る様になります。

関連する記事