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

2023/10/19

JavaScript jQueryのライブラリ「LightBox2」でJavascriptからの画像追加のテスト

画像ファイルをHTMLに記述して拡大表示を行う場合に良く使う「LightBox2」で、 Javascriptのプログラムから画像追加のテストを行ってみました。

「LightBox2」と1個の画像のみの表示の場合は、以下の様な感じでHTMLを作れば画像の拡大表示ができます。

■LightBox2の例

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>
<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});
</script>

</head>
<body>
<h1>LightBox2-TEST</h1>
<a href="./test-1.jpg" data-lightbox="album" >
  <img src="./test-1.jpg" id="" width="100" >
</a>
</body>
</html>

上のHTMLでは特に難しくはありませんでした。そこで、このHTMLにボタンと、10個の適当な画像ファイル（add-1.jpg ～add-10.jpg）を用意して、そのボタンをクリックすることで、上記の「test-1.jpg」のファイルの後ろに表示する様にしてみます。

画像ファイルの指定を追加しやすくするために、<div id="imgdiv"></div> で囲っています。
この35行は、divタグ、aタグ、imgタグを1行で記述していますが、こうしないと余計なキャプションが付くための対策です。

■LightBox2の例・その２

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>

<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});

$(function() {
	$("#btn").on('click', function() {
		for (i = 1; i <= 10; i++) {
			var add = "";
			add += '<a href="./add-'+i+'.jpg" data-lightbox="album" >';
			add += '<img src="./add-'+i+'.jpg" width="100" >';
			add += '</a>';
			$("#imgdiv").append(add);
		}

	});

});
</script>

</head>
<body>
<h1>LightBox2-TEST</h1>
<button id="btn">add image</button>  

<div id="imgdiv"><a href="./test-1.jpg" data-lightbox="album"><img src="./test-1.jpg" width="100"></a></div>
</body>
</html>

「add image」をクリックする前の表示は以下の通りです。

「add image」を2回クリックした後の表示は以下の様になります。

画像のどれかをクリックすると「lightbox2」が機能し、画像の拡大が行われます。

JQuery でのセレクタに対する append メソッドで上手くいくのか懸念していましたが、今回のテストでは特に問題なく「lightbox2」は動作しました。

■LightBox2の例

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>
<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});
</script>

</head>
<body>
<h4>LightBox2テスト</h4>
<a href="./example1.jpg" data-lightbox="album" >
  <img src="./example1.jpg" id="" width="100" >
</a>
<a href="./example2.jpg" data-lightbox="album" >
  <img src="./example2.jpg" id="" width="100" >
</a>
<a href="./example3.png" data-lightbox="album" >
  <img src="./example3.png" id="" width="100" >
</a>
</body>
</html>

上のHTMLでは何も問題は無いのですが、ここに以下の Javascript ファイルを読込んで、そのファイル内の関数を呼出した時にエラーが発生しました。

■Javascriptの例（test.js とする）

(function($) {
    $.fnc = {};
    $.fnc.test = function () {	// ただ単に"test"を表示させる
        alert("test");
    };
})(jQuery);

それでは、先ほどのHTMLファイルに上記の「test.js」を追加してみます。

■LightBox2の例・その２

<!DOCTYPE html>
<head>
<link href="./js/lightbox2-2.11.4/css/lightbox.min.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./js/test.js"></script>
<script type="text/javascript" src="./js/lightbox2-2.11.4/js/lightbox-plus-jquery.min.js"></script>
<script>
//  lightbox start
$(function() {
	lightbox.option({
		"positionFromTop": 150,
	});
});

// test display
$.fnc.test();
</script>

</head>
<body>
<h4>LightBox2テスト</h4>
<a href="./example1.jpg" data-lightbox="album" >
  <img src="./example1.jpg" id="" width="100" >
</a>
<a href="./example2.jpg" data-lightbox="album" >
  <img src="./example2.jpg" id="" width="100" >
</a>
<a href="./example3.png" data-lightbox="album" >
  <img src="./example3.png" id="" width="100" >
</a>
</body>
</html>

このファイルをブラウザで開いても、「alert("test");」の実行が行われませんでした。
Chromeのデベロッパーツールでソースを開いて上記の16行目でブレイクさせると、「$.fnc」は「undefined」となっていました。「undefined」なので当然「$.fnc.test();」は実行不可能でした。

「lightbox2」のJavascriptを読込むと、どうも「JQuery」のプロパティ（この表現が正しいかどうかも分かりませんが）がクリアされる様です。

それならばと「test.js」ファイルの読込を「lightbox2」の後に持ってきたら、「$.fnc.test();」が実行されアラートが表示されました。

少し、便宜的な方法かもしれませんが、何かの参考になればと思い記事を書きました。

■XLSXの読込・書込クラスを使用したワークシートのコピー・セルデータを追加

今回の処理では「XLSX読込クラス」の内部に持っているワークシートを順次取得する getSheetIterator() 関数（イテレータ）を使用します。この関数を foreach 文で呼出すことでワークシートのオブジェクトが取得できます。

そのワークシートのオブジェクトの内部に持っている行データを順次取得する getRowIterator() 関数（イテレータ）を使用します。この関数を foreach 文で呼出すことで行データのオブジェクトが取得できます。

その後、行データのオブジェクトがNULLの場合には、空の行データを生成し、XLSX書込クラスへの行追加を行います。 NULLではない場合にはそのままXLSX書込クラスへの行追加を行います。

その行データからセルデータオブジェクト配列を取得し、その配列からを順次カラムデータとして取り出すために array_map() 関数で行います。結果としてデータの配列が生成されます。

生成されたデータの配列から新規の追加用行データオブジェクトを作成します。行データオブジェクトの setCellAtIndex($cell, $Index) 関数でセルデータの設定（置き換え）ができます。

<?php
require '../vendor/autoload.php';
use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;

// XLSX読込クラス生成
$strReadFile = 'test7-1.xlsx';
$reader = ReaderEntityFactory::createReaderFromFile($strReadFile);
// 空行の読み込み許可
$reader->setShouldPreserveEmptyRows(true);
// 読み込み
$reader->open($strReadFile);

// XLSX書込クラス生成
$writer = WriterEntityFactory::createXLSXWriter();
$writer->openToFile('test7-1-New.xlsx');

// 全てのワークシートを取得
foreach($reader->getSheetIterator() as $sheet) {
    // ワークシートの全行を取得
    foreach($sheet->getRowIterator() as $row) {
        // [$row]がNULLの場合を考慮し、セル値の配列生成
        $cellValues = array_map(function($cell) {
            return $cell->getValue();
        }, $row->getCells());
        // セル値の配列から行データ生成
        $newRow = WriterEntityFactory::createRowFromArray($cellValues);

        // 新規追加するセルデータ生成
        $newCell = WriterEntityFactory::createCell('A001');
        // セルデータ設定
        $newRow->setCellAtIndex($newCell, 5);

        // 書込みへの追加
        $writer->addRow($newRow);
    }
}
// XLSX読込・書込クラスクローズ
$reader->close();
$writer->close();
?>

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

左側が読込んだエクセルで、右側が新たに書込んだエクセルです。 6番目のセルに「'A001'」が設定されたことが分かります。

■XLSXの読込・書込クラスを使用したワークシートのコピー・データ行を指定してセルデータを追加

ワークシートのオブジェクトの内部に持っている行データを順次取得する getRowIterator() 関数（イテレータ）ではキーとして、行Indexを返すことができます。この行Indexを判定すれば、意図した行にのみ処理が可能となります。

<?php
require '../vendor/autoload.php';
use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;

// XLSX読込クラス生成
$strReadFile = 'test7-1.xlsx';
$reader = ReaderEntityFactory::createReaderFromFile($strReadFile);
// 空行の読み込み許可
$reader->setShouldPreserveEmptyRows(true);
// 読み込み
$reader->open($strReadFile);

// XLSX書込クラス生成
$writer = WriterEntityFactory::createXLSXWriter();
$writer->openToFile('test7-2-New.xlsx');

// 全てのワークシートを取得
foreach($reader->getSheetIterator() as $sheet) {
    // ワークシートの全行を取得
    foreach ($sheet->getRowIterator() as $rowIndex => $row) {
        // [$row]がNULLの場合を考慮し、セル値の配列生成
        $cellValues = array_map(function($cell) {
            return $cell->getValue();
        }, $row->getCells());
        // セル値の配列から行データ生成
        $newRow = WriterEntityFactory::createRowFromArray($cellValues);

        // 行が2行目と5行目のみ処理
        if ($rowIndex == 2 || $rowIndex == 5) {
            $cell = WriterEntityFactory::createCell('A001');
            $newRow->setCellAtIndex($cell, 5);
        }
        // 書込みへの追加
        $writer->addRow($newRow);
    }
}
// XLSX読込・書込クラスクローズ
$reader->close();
$writer->close();
?>

出力されたエクセルファイルを見てみると以下の様になります。 2行目と5行目のみにセルデータが設定されています。

PHP
0CM

2023/04/19

PHP Spoutを使用してエクセル出力・ワークシートの処理の方法について・その２

今回はある「ワークシート」から行データを順次読み込み、別の「ワークシート」に行データ追加を行う方法について説明したいと思います。

■XLSXの読込・書込クラスを使用したワークシートのコピー

今回の処理では「XLSX読込クラス」の内部に持っているワークシートを順次取得する getSheetIterator() 関数（イテレータ）を使用します。この関数を foreach 文で呼出すことでワークシートのオブジェクトが取得できます。

そのワークシートのオブジェクトの内部に持っている行データを順次取得する getRowIterator() 関数（イテレータ）を使用します。この関数を foreach 文で呼出すことで行データのオブジェクトが取得できます。

その後、行データのオブジェクトがNULLの場合には、空の行データを生成し、XLSX書込クラスへの行追加を行います。 NULLではない場合にはそのままXLSX書込クラスへの行追加を行います。

<?php
require '../vendor/autoload.php';
use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;

// XLSX読込クラス生成
$strReadFile = 'test6-1.xlsx';
$reader = ReaderEntityFactory::createReaderFromFile($strReadFile);
// 空行の読み込み許可
$reader->setShouldPreserveEmptyRows(true);
// 読み込み
$reader->open($strReadFile);

// XLSX書込クラス生成
$writer = WriterEntityFactory::createXLSXWriter();
$writer->openToFile('test6-1-New.xlsx');

// 全てのワークシートを取得
foreach($reader->getSheetIterator() as $sheet) {
    // ワークシートの全行を取得
    foreach($sheet->getRowIterator() as $row) {
        if (empty($row)) {
            // 空行の場合
            $emptyRow = WriterEntityFactory::createRowFromArray([]);
            $writer->addRow($emptyRow);
        } else {
            // 読込行の書込みへの追加
            $writer->addRow($row);
        }
    }
}

// XLSX読込・書込クラスクローズ
$reader->close();
$writer->close();
?>

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

左側が読込んだエクセルで、右側が新たに書込んだエクセルです。２行目、５行目が空白行ですが、右側のエクセルはその行が若干幅が狭くなっている様です。
これは読込んだ時の行データがNULLなので空行を作成した時にデフォルトの縦幅が設定された様です。このあたりは改良の余地が在るかも知れません。

■XLSXの読込・書込クラスを使用したワークシートのコピーその２

以下のプログラムでは、上で説明した行データがNULLの場合に空行を作成して新規のエクセルに追加する部分ですが、以下のソースの様に array_map() 関数で置き換えができます。

<?php
require '../vendor/autoload.php';
use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;

// XLSX読込クラス生成
$strReadFile = 'test6-1.xlsx';
$reader = ReaderEntityFactory::createReaderFromFile($strReadFile);
// 空行の読み込み許可
$reader->setShouldPreserveEmptyRows(true);
// 読み込み
$reader->open($strReadFile);

// XLSX書込クラス生成
$writer = WriterEntityFactory::createXLSXWriter();
$writer->openToFile('test6-1-New2.xlsx');

// 全てのワークシートを取得
foreach($reader->getSheetIterator() as $sheet) {
    // ワークシートの全行を取得
    foreach($sheet->getRowIterator() as $row) {
        // [$row]がNULLの場合を考慮し、セル値の配列生成
        $cellValues = array_map(function($cell) {
            return $cell->getValue();
        }, $row->getCells());
        // セル値の配列から行データ生成
        $newRow = WriterEntityFactory::createRowFromArray($cellValues);
        // 書込みへの追加
        $writer->addRow($newRow);
    }
}
// XLSX読込・書込クラスクローズ
$reader->close();
$writer->close();
?>

出力されたエクセルファイルは最初の場合と同様となります。

PHP
0CM

2023/04/18

PHP Spoutを使用してエクセル出力・ワークシートの処理の方法について

前回までは「ワークシート」のことを気にせず、カラムデータ生成から行データを作成し「ワークシート」に追加していました。

今回は複数の「ワークシート」の追加などについて説明したいと思います。

■XLSX書込クラスのワークシート関連関数

XLSX書込クラスのクラスには以下の様な、ワークシートに関連した関数があります。

関数	戻り値	備考
getCurrentSheet()	ワークシートオブジェクト	カレントのワークシートオブジェクトを返す
addNewSheetAndMakeItCurrent()	ワークシートオブジェクト	新規のワークシートを生成しカレントのワークシートオブジェクトとして返す
setCurrentSheet($sheet) $sheet : ワークシート	なし	指定されたワークシートをカレントのワークシートとする
getSheets()	ワークシートオブジェクト配列	ワークブックの全てのワークシートオブジェクトを配列として返す

これらの関数の使い方ですが「XLSX書込クラス」を生成し、オブジェクト変数に設定しますがこのオブジェクトが処理対象としているのはカレントシートです。
そのカレントシートを変更することで、行データ等の追加されるワークシートが変わります。

以下の例では createXLSXWriter 関数で「XLSX書込クラス」を生成しカレントのワークシートに行データを追加しています。このクラス生成直後は最初の１つのワークシートを生成し、そのワークシートがカレントになります。

その後 addNewSheetAndMakeItCurrent 関数でワークシートを追加していますが、この時点でカレントワークシートが追加されたものになります。その後で addRow 関数で処理すると追加のワークシートに行データが反映されます。

<?php
// 利用クラスエイリアスなどの宣言は省略...

// XLSX書込クラス生成
$writer = WriterEntityFactory::createXLSXWriter();
// 書込みファイル指定
$writer->openToFile('testaaa.xlsx');

// セルデータ
$cells = [
    WriterEntityFactory::createCell('A001'),
    WriterEntityFactory::createCell('B002'),
    WriterEntityFactory::createCell('C003'),
];
// 行データ
$row = WriterEntityFactory::createRow($cells);
// カレントシートへの書込み
$writer->addRow($row);

// シートを追加しカレントシートにする
$sheetNew = $writer->addNewSheetAndMakeItCurrent();
// 追加シートに行データ追加
$writer->addRow($row);

// エクセルファイルの書込
$writer->close();
?>

それではもう少し処理を追加した例を以下の項目で記します。

■XLSX書込クラスのワークシート関連関数を使用した簡単な例

以下のプログラムでは、「行データ１」と「行データ２」を生成し、最初のワークシートに「行データ１」を追加します。その後、新規ワークシートを追加し「行データ２」を追加します。さらにカレントのワークシートを最初のシートに切り替えて「行データ２」を追加します。

<?php
require '../vendor/autoload.php';

// 利用クラスエイリアス
use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
use Box\Spout\Common\Entity\Style\Border;
use Box\Spout\Writer\Common\Creator\Style\BorderBuilder;
use Box\Spout\Writer\Common\Creator\Style\StyleBuilder;
use Box\Spout\Common\Entity\Style\CellAlignment;
use Box\Spout\Common\Entity\Style\Color;

// XLSX書込クラス生成
$writer = WriterEntityFactory::createXLSXWriter();
// XLSX書込クラスへのデフォルトスタイル
$defaultStyle = (new StyleBuilder())
                ->setFontName('ＭＳ ゴシック')
                ->setFontSize(14)
                ->build();
// XLSX書込クラスへのデフォルトスタイル
$writer->setDefaultRowStyle($defaultStyle);
// 書込みファイル指定
$writer->openToFile('test5-1.xlsx');

// セルデータ１
$cells1 = [
    WriterEntityFactory::createCell('A001'),
    WriterEntityFactory::createCell('B002'),
    WriterEntityFactory::createCell('C003'),
];
// 行データ１
$row1 = WriterEntityFactory::createRow($cells1);

// セルデータ２
$cells2 = [
    WriterEntityFactory::createCell('aaa001'),
    WriterEntityFactory::createCell('bbb002'),
    WriterEntityFactory::createCell('ccc003'),
];
// 行データ２
$row2 = WriterEntityFactory::createRow($cells2);

// 最初のカレントシート
$sheet1 = $writer->getCurrentSheet();
// シート名設定
$sheet1->setName('テスト1');
// カレントシート($sheet1)に[行データ１]追加
$writer->addRow($row1);

// シートを追加しカレントシートにする
// （ここで[$writer]は追加シートに対しての処理となる）
$sheet2 = $writer->addNewSheetAndMakeItCurrent();
// シート名設定
$sheet2->setName('テスト2');
// カレントシート($sheet2)に[行データ２]追加
$writer->addRow($row2);

// カレントシートを最初のシートに戻す
$writer->setCurrentSheet($sheet1);
// 最初のシートに[行データ２]追加
$writer->addRow($row2);

// エクセルファイルの書込
$writer->close();
?>

出力されたエクセルファイルを見てみると以下の様になります。
最初のシートに「行データ１」「行データ２」が書き込まれ、２番目のシートには「行データ２」が書き込まれていることが分かります。

■複数のワークシートの処理の例

以下の例では createXLSXWriter 関数で「XLSX書込クラス」を生成しカレントのワークシートを取得しています。
その後 addNewSheetAndMakeItCurrent 関数でワークシートを２個追加します。
全てのワークシートを getSheets 関数で取得し setCurrentSheet 関数でカレントのワークシートを変更しながら行データを追加しています。

<?php
require '../vendor/autoload.php';

// 利用クラスエイリアス
use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
use Box\Spout\Common\Entity\Style\Border;
use Box\Spout\Writer\Common\Creator\Style\BorderBuilder;
use Box\Spout\Writer\Common\Creator\Style\StyleBuilder;
use Box\Spout\Common\Entity\Style\CellAlignment;
use Box\Spout\Common\Entity\Style\Color;

// XLSX書込クラス生成
$writer = WriterEntityFactory::createXLSXWriter();
// XLSX書込クラスへのデフォルトスタイル
$defaultStyle = (new StyleBuilder())
                ->setFontName('ＭＳ ゴシック')
                ->setFontSize(14)
                ->build();
// XLSX書込クラスへのデフォルトスタイル
$writer->setDefaultRowStyle($defaultStyle);
// 書込みファイル指定
$writer->openToFile('test5-2.xlsx');

// セルデータ１
$cells1 = [
    WriterEntityFactory::createCell('A001'),
    WriterEntityFactory::createCell('B002'),
    WriterEntityFactory::createCell('C003'),
];
// 行データ
$row1 = WriterEntityFactory::createRow($cells1);

// 最初のカレントシート
$sheet1 = $writer->getCurrentSheet();
// ２個のシート追加
$sheet2 = $writer->addNewSheetAndMakeItCurrent();
$sheet3 = $writer->addNewSheetAndMakeItCurrent();

// 全てのシートの取得
$sheets = $writer->getSheets();
foreach($sheets as $sheet) {
    // カレントシートの設定
    $writer->setCurrentSheet($sheet);
    // 行データを追加
    $writer->addRow($row1);
}

// エクセルファイルの書込
$writer->close();
?>

出力されたエクセルファイルを見てみると以下の様になります。
３つのシートに同じ行データが書き込まれていることが分かります。