先程、ZooPicker探鳥地(野鳥撮影地)全国版Googleマイマップを作成した。
今回、同じデータを使って、Leaflet地図を作成した。
マーカーをクリックすると、その地点の「ZooPicker」へのリンクが表示される。
先程、ZooPicker探鳥地(野鳥撮影地)全国版Googleマイマップを作成した。
今回、同じデータを使って、Leaflet地図を作成した。
マーカーをクリックすると、その地点の「ZooPicker」へのリンクが表示される。
以前に、『はてなブログ「晴歩雨描」記事一覧』ページ
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)に教えてもらった。ググって、自分で考えるより速い。
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」を使っている。
ホームページの<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「hue-rotate」で、画像を色相変換するWebツールを作成した。
このツールを少しカスタマイズして、CSS Filterの「saturate(彩度)」「brightness(明度)」「contrast(コントラスト)」を使って、画像(写真)の色調を変更するWebツールを作成。(ChatGPT利用)
3つのコントローラー「saturate」「brightness」「contrast」を使って、彩度、明度、コントラストを変える。
変更した結果をローカルにダウンロードできる。
違う画像をアップロードすると、現在の値がそのまま適用される。連続して複数画像に対して、同じ値を適用できる。