晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

「ブログ記事一覧」の検索ボックスの文字列を、URLに反映できるようにした。ChatGPT(3.5)に教えてもらった。

以前に、『はてなブログ「晴歩雨描」記事一覧』ページ

https://ok2nd.github.io/sitemap/hatena-sitemap-table.html

のURLで、検索文字列を初期設定できるようにした。URLのパラメーター文字列を検索テキストボックスに反映させるもの。

今回逆に、検索テキストボックスに入力されている文字列を、URLのパラメーター(?search=文字列)に反映する機能を追加。

以下の方法をベースに、jQueryプラグイン「DataTables」の<INPUT>テキストボックス連携機能を追加。

URLパラメーターと検索ボックス間で双方向に文字列が反映される。

これについても、ChatGPT(無料版3.5)に教えてもらった。ググるより速い。

https://ok2nd.github.io/sitemap/hatena-sitemap-table.html?search=神戸

≪該当部分のスクリプト≫
<script type="text/javascript">
$(document).ready(function () {
	// DataTablesの初期化
	var table = $('#dataTable').DataTable({
		language: {		// 日本語化
			"sProcessing": "処理中...",
			"sLengthMenu": "表示 _MENU_ 件",
			"sZeroRecords": "検索結果がありません",
			"sInfo": " _TOTAL_ 件中 _START_ から _END_ まで表示",
			"sInfoEmpty": " 0 件中 0 から 0 まで表示",
			"sInfoFiltered": "(全 _MAX_ 件より抽出)",
			"sInfoPostFix": "",
			"sSearch": "検索:",
			"sUrl": "",
			"oPaginate": {
				"sFirst": "先頭",
				"sPrevious": "前",
				"sNext": "次",
				"sLast": "最終"
			}
		},
		paging: false,		// ページングしない。
		ordering: false,	// ソートしない。
		mark: true		// 検索文字列ハイライト (by mark.js)
	});
	// DataTablesが生成する検索ボックスを取得
	var searchInput = $('div.dataTables_filter input');
	//                   ↑INPUTボックス名はテーブル名+"_filter"になる
	// ページの読み込み時にURLからパラメーターを読み取って検索フィルターに反映
	var urlParams = new URLSearchParams(window.location.search);
	var searchParam = urlParams.get('search');
	if (searchParam !== null) {
		searchInput.val(decodeURIComponent(searchParam));
		table.search(decodeURIComponent(searchParam)).draw();
	}
	// テキストボックスの入力が変更されたときにURLを更新(?search=xxx)
	searchInput.on('input', function () {
		var inputTextValue = $(this).val();
		var currentURL = window.location.href;
		if (currentURL.indexOf('?') !== -1) {
			// パラメーターがすでに存在する場合は置き換える
			var updatedURL = currentURL.replace(/(\?|&)search=.*?(&|$)/, '$1search=' + encodeURIComponent(inputTextValue) + '$2');
		} else {
			// パラメーターが存在しない場合は新しく追加する
			var updatedURL = currentURL + '?search=' + encodeURIComponent(inputTextValue);
		}
		// ブラウザの履歴を変更せずにURLを更新
		window.history.replaceState({ path: updatedURL }, '', updatedURL);
		// DataTablesの検索フィルターを更新
		table.search(inputTextValue).draw();
	});
});
</script>

HTML<INPUT>テキストボックスに入力されている文字列を、リアルタイムにURLのパラメーターに反映する方法。ChatGPT(3.5)に教えてもらった。

HTML<INPUT>テキストボックスに入力されている文字列を、リアルタイムにURLのパラメーターに反映する方法。

方法は、ChatGPT(無料版3.5)に教えてもらった。ググって、自分で考えるより速い。

≪サンプル≫

https://ok2nd.github.io/Test/text2url.html?text=テスト

URLに「text=テスト」等、文字列を渡すと、<INPUT>テキストボックスに、その文字列が入る。

<INPUT>テキストボックスの文字列を変えると、リアルタイムでURL引数のパラメーター文字列が変わる。

<INPUT>テキストボックスとURLパラメーター間で双方向に文字列が反映される。

≪ソースコード≫
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMLテキストボックスに入力されている文字列をリアルタイムにURLのパラメーターに反映する方法</title>
</head>
<body>
<h4>
HTMLテキストボックスに入力されている文字列をリアルタイムにURLのパラメーターに反映する方法
</h4>
<label for="inputText">Text Input:</label>
<input type="text" id="inputText" oninput="updateURLParameter()">
<script>
function updateURLParameter() {
	// 入力されたテキストを取得
	var inputTextValue = document.getElementById('inputText').value;
	// 現在のURLを取得
	var currentURL = window.location.href;
	// URLにパラメーターが含まれている場合と含まれていない場合で処理を分ける
	if (currentURL.indexOf('?') !== -1) {
		// パラメーターがすでに存在する場合は置き換える
		var updatedURL = currentURL.replace(/(\?|&)text=.*?(&|$)/, '$1text=' + encodeURIComponent(inputTextValue) + '$2');
	} else {
		// パラメーターが存在しない場合は新しく追加する
		var updatedURL = currentURL + '?text=' + encodeURIComponent(inputTextValue);
	}
	// ブラウザの履歴を変更せずにURLを更新
	window.history.replaceState({ path: updatedURL }, '', updatedURL);
}
// ページロード時にURLからパラメーターを読み取ってテキストボックスに反映
window.onload = function () {
	var urlParams = new URLSearchParams(window.location.search);
	var textParam = urlParams.get('text');
	if (textParam !== null) {
		document.getElementById('inputText').value = decodeURIComponent(textParam);
	}
};
</script>
</body>
</html>

jQueryプラグイン「DataTables」のWebページ(URL)に検索文字列を初期設定できるようにした。ChatGPT(3.5)に教えてもらった。

以前から、jQueryプラグイン「DataTables」を使っている。

ホームページの<table>に検索機能やソート機能を簡単に付けられる。

このjQueryプラグイン「DataTables」を使ったWebページに検索文字列を初期設定できるようにした。

方法は、ChatGPT(無料版3.5)に教えてもらった。ググるより速い。

URLに「?s=検索文字列」を付ける方式。

≪JavaScriptソースコード:赤色部分が追加コード≫

$(function() {
	var table = $('#dataTable').DataTable({
		language: {	// 日本語化
			url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
		},
		paging: false,		// ページングしない。
		ordering: true,
		mark: true		// 検索文字列ハイライト (by mark.js)
	});
	var searchQuery = getUrlParameter('s');	// URLから検索文字列を取得
	table.search(searchQuery).draw();	// 検索文字列セット
});
function getUrlParameter(name) {
	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
	var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
	var results = regex.exec(location.search);
	return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

以下、実際のページの使用例。検索文字列をスペースを挟んで複数指定することもできる。

■ はてなブログ「晴歩雨描」記事一覧

https://ok2nd.github.io/sitemap/hatena-sitemap-table-2.html?s=神戸
https://ok2nd.github.io/sitemap/hatena-sitemap-table-2.html?s=神戸 モノクロ

■ デジカメ・スナップ写真 ブログ記事一覧

https://ok2nd.github.io/sitemap/photo/?s=56mm F1.4

■ Eマウント(AF)単焦点レンズ

https://ok2nd.github.io/index/camera/e-mount-lens.html?s=24mm

CSS Filter「saturate」「brightness」「contrast」で、画像の彩度、明度、コントラストを変更するWebツール作成。(ChatGPT)

先程、CSS Filter「hue-rotate」で、画像を色相変換するWebツールを作成した。

このツールを少しカスタマイズして、CSS Filterの「saturate(彩度)」「brightness(明度)」「contrast(コントラスト)」を使って、画像(写真)の色調を変更するWebツールを作成。(ChatGPT利用)

3つのコントローラー「saturate」「brightness」「contrast」を使って、彩度、明度、コントラストを変える。

変更した結果をローカルにダウンロードできる。

違う画像をアップロードすると、現在の値がそのまま適用される。連続して複数画像に対して、同じ値を適用できる。