htmlソースメモ

投稿

4月, 2025の投稿を表示しています

TextAreaのキャレットの位置で行番号を取得するコード

4/30/2025 11:40:00 午後

　TextAreaに行番号を付加するのは、折り返しでも行番号が追加されてしまうコードか、折り返しを禁止するコードしか、作ることができず、難しい。そこで、キャレットの位置で行番号が分かるようなコードを用意することにした。この場合、折り返して数行に見えてもそれは同じ行としてカウントされるので、テキストエディタで表示される行番号と同じになる。コードはGeminiに教わった。 <!DOCTYPE html> <html> <head> <title>TextArea キャレット行番号取得</title> </head> <body> <textarea id="inputText" rows="10" cols="50"></textarea> <div id="caretLineNumber">現在のキャレット行番号: 1</div> <script> const textarea = document.getElementById('inputText'); const caretLineNumberDiv = document.getElementById('caretLineNumber'); function updateCaretLineNumber() { const caretPosition = textarea.selectionStart; con...

康煕部首、CJK部首補助、サロゲートペアの検出

4/19/2025 10:38:00 午後

康煕部首を検出して修正案を表示するコードをGeminiに作ってもらったが、CJK部首補助やサロゲートペアも問題を起こしそうなので検出する必要が生じた。そこで、CJK部首補助も検出して修正案を表示できるようにコードを変更し、サロゲートペアを検出して表示するコードも作成してもらった後、それらをまとめた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="康煕部首とCJK部首補助を検出して修正案を示したり、サロゲートペアを検出してUnicodeを示す"> <title>康煕部首、CJK部首補助、サロゲートペアの検出</title> <style> body { font-family: sans-serif; } table { border-collapse: collapse; width: auto; /* テーブルの幅を内容に合わせて調整 */ } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; white-space: nowrap; /* セルの内容が折り返されないように */ } th { background-color: #f0f0f0; } ...

康煕部首を検出して修正案を表示するコード

4/19/2025 04:28:00 午後

ウェブページの文章をコピーする際に康煕部首が含まれていることがあって、見た目では気づきにくいので、検出して修正案を表示するコードをGeminiに作ってもらった。（kangxiToModifiedにずれがあったので修正しました。「戸」も修正しました。） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>康煕部首検出と修正案 (Unicode表示付き)</title> <style> body { font-family: sans-serif; } table { border-collapse: collapse; width: auto; /* テーブルの幅を内容に合わせて調整 */ } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; white-space: nowrap; /* セルの内容が折り返されないように */ } th { background-color: #f0f0f0; } </style> </head> <body> <h1>康煕部首検出と修正案 (Unicode表示付き)</h1> ...

紹介されてるコードを右端で折り返すブックマークレット

4/15/2025 06:38:00 午前

ウェブページで紹介されているコードの一行が横に長くて横スクロールバーが出ているのを右端で折り返して横スクロールバーが出ないようにするためのブックマークレット。（折り返せる区切りが無くて折り返せない場合に横スクロールバーが無いと困る。）その１ javascript:(function() { const elements = document.querySelectorAll('code, pre'); elements.forEach(element => { const currentWhiteSpace = window.getComputedStyle(element).whiteSpace; if (currentWhiteSpace === 'pre-wrap') { element.style.setProperty('white-space', 'pre'); element.style.setProperty('overflow-x', 'auto'); } else { element.style.setProperty('white-space', 'pre-wrap'); /* element.style.setProperty('overflow-x', 'hidden'); この行は削除する */ } }); })(); その２ javascript:(function() { const elements = document.querySelectorAll('code, pre'); elements.forEach(element => { const currentWhiteSpace = window.getComputedStyle(element).whiteSpace;...

しぶとい「extract_reply_context」関数

4/10/2025 01:00:00 午後

失敗例だけどメモっておく。 WordPressのプラグイン「ActivityPub」には、コメント欄からリプライした際に、コメント欄にメンションを記載しなくても、同じスレッド内の全てのアカウントにメンションして通知を送る仕様があり、これを防ぎたいと試行錯誤した。 Fediverseに届いた時に投稿にメンションが記載されないようにすることはできた。次のコードをfunctions.phpに追加する。 // Fediverseで自動追加メンションが表示されないようにする（ただし、通知は防げない） function my_filter_comment_text( $content, $comment, $args ) { // 常に元のコメントコンテンツで $content を上書きする $content = $comment->comment_content; // その後の処理は元のフィルターチェーンに沿って行われます return $content; } add_filter( 'comment_text', 'my_filter_comment_text', 5, 3 ); しかし、この方法では通知は防げない。自動で付加されるメンションは 'extract_reply_context'という関数で作られている。通知に関しては、この関数が実行されている次の関数が怪しいと思った。 /** * Helper function to get the @-Mentions from the comment content. * * @return array The list of @-Mentions. */ protected function get_mentions() { \add_filter( 'activitypub_extract_mentions', array( $this, 'extract_reply_context' ) ); /** * Filter the mentions in t...