WordPress（ワードプレス）の投稿ページにCVSファイルを読み込んで表を表示（自動生成）する

ワードプレスの投稿画面で表を作成する場合、表（テーブル）用のブロックを使用しているのだけれど、項目の多いものになると打ち込みが大変なうえに、打ち間違いも増えるので、オリジナル投稿ブロックを作成してCSVファイルから自動生成できるようにした方法をメモ

original-blocks.js

(function (blocks, editor, element, blockEditor){
		
	var RichText = editor.RichText;
	var { InnerBlocks } = blockEditor;
	
	//CSVファイル展開
	blocks.registerBlockType('sample/csv-viewer', {
		title: 'CSVファイル展開',
		icon: 'media-spreadsheet',
		category: 'common',

		edit: function(props){
			
			return element.createElement('div', {className: 'post_csvviewer'},
				[
					element.createElement('div',　{className: 'post_csvviewer__container' },
						[
						]
					),
					element.createElement('div',　{className: 'post_csvviewer__input' },
						[
							element.createElement(
								InnerBlocks,
								{
									template: [
										['core/file', {className: ''}],
									]
								}
							),
						]
					),

				]
			)
	
		},
		save: function(props){

			return element.createElement('div', {className: 'post_csvviewer'},
				[
					element.createElement('div',　{className: 'post_csvviewer__container' },
						[
						]
					),
					element.createElement('div',　{className: 'post_csvviewer__input' },
						[
							element.createElement( InnerBlocks.Content, {} ),
						]
					),

				]
			);

		},

	});
}(
	window.wp.blocks,
	window.wp.editor,
	window.wp.element,
	window.wp.blockEditor 
) );

original-blocks.css

.post_csvviewer {
	display: flex;
	padding: 20px;
	border: 1px solid #ddd;
}
.post_csvviewer .post_csvviewer__container::before {
	content: "読み込みファイル";
}
.post_csvviewer .post_csvviewer__input .wp-block {
	margin: 0 0 0 20px;
}
.post_csvviewer .post_csvviewer__input .wp-block-file__button-richtext-wrapper {
	display: none;
}

ファイル（メディア）の登録はコアブロック（デフォルトで用意されているもの）を使用
登録画面では表の生成は行わず、使用しているファイルをそのまま表示。
編集画面に不要なボタン（ダウンロードボタン）が表示されるのでCSSで調整を行っています。

詳しい投稿ブロックの作成方法は前回のブログで確認いただけます

• WordPress（ワードプレス）のグーテンベルクにオリジナル投稿ブロックを設置する

javascript（jQuery）

async function loadCSV(url) {
	try {
		const response = await fetch(url);
		// Shift-JIS → UTF-8 に変換
		const arrayBuffer = await response.arrayBuffer();
		const decoder = new TextDecoder('shift-jis');
		const text = decoder.decode(arrayBuffer);
		
		const rows = text.split('\n').map(row => row.split(','));
		return rows;
	} catch (err) {
		console.error(err);
		return [];
	}
}

function renderTable(data, $i) {
	
	var $table = $('<table>');
	data.forEach(row => {
		// row の中で空文字以外があるか確認
		var hasContent = row.some(cell => cell.trim() !== '');
		if (!hasContent) {
			return; // 空行ならスキップ
		}

		var $tr = $('<tr>');
		row.forEach(cell => {
			var $td = $('<td>').text(cell);
			$tr.append($td);
		});
		$table.append($tr);
	});
	
	$('.post_csvviewer__container').eq($i).append($table);

}

$(function(){
	
	if($('.post_csvviewer__container').length){
		
		$('.post_csvviewer__input').hide();
		var count = $('.post_csvviewer__container').length;
		
		var csvUrl = [];
		var urlPath = []
		
		for(let i = 0; i < count; i++){
			
			//読み込みファイルの取得
			csvUrl[i] = $('.post_csvviewer__input').eq(i).find('a').eq(0).attr('href');

			//表示ページのプロトコル（http or https）に差し替える
			var currentOrigin = window.location.protocol + '//' + window.location.host;
			urlPath[i] = csvUrl[i].replace(/^https?:\/\/[^/]+/, ''); 
			csvUrl[i] = currentOrigin + urlPath[i];
		
			loadCSV(csvUrl[i]).then(data => {
				renderTable(data, i);
			});
		}
		
	}
});

表示側のjavascriptで対象ファイルを読み込み、表示ページのプロトコル（http or https）に差し替えてから「post_csvviewer__container」の箇所に表を自動生成して表示。

ループ処理を使用しているためページ内に複数のCSVファイルが存在していても上書きされることなく表示が可能。
ファイル名の表示されている部分はまとめて非表示にしています。

また、CSVファイルの生成は「Shift-JIS」を使用されることが多いため、「Shift-JIS」から「UTF-8」への変換を行っていますが、必要ない場合（もともとUTF-8の場合）は下記を参照

javascript（jQuery）

async function loadCSV(url) {
	try {
		const response = await fetch(url);
		const text = await response.text(); // デフォルトでUTF-8として読み込み
		const rows = text.split('\n').map(row => row.split(','));
		return rows;
	} catch (err) {
		console.error(err);
		return [];
	}
}

「投稿ページ用」とは書きましたが「固定ページ」でも使用が可能。
表の差し換えもCSVファイルを入れ替えるだけで可能になるので、定期的に報告書などを掲載している方には便利です。
※カラムを結合している複雑な表には対応していません