投稿

textareaが自動的に縦に伸び縮みするJavascript

 　textareaに入力した文字が増えた時に自動的に縦に伸びるコードはcssだけでは実現できないらしく、Javascriptが必要らしい。その為のコードをGeminiに教わったのだけど、外側にdivの枠があると、そのdivの高さを超えた場合にtextareaのスクロールバーだけでなく、その外側にdivのスクロールバーが現れて、見た目が悪いだけでなく使いにくくなる。そこで、Javascriptでtextareaが overflow:hidden; になるようにする。cssで overflow:hidden;にすると、Javascriptが無効な場合にスクロールバーが現れなくなるのでダメだそうだ。 　実験用のコードは次の通り。 <div style="width:300px; height:100%; overflow:auto; border:1px solid;"> <textarea id="autoResizeTextarea" style="resize:none; width:100%; min-height:100px; overflow:auto; "> １２３４５６７８９０１２３４５６７８９０１２３４５６７８９０ </textarea> </div> <script> document.addEventListener('DOMContentLoaded', () => {     const textarea = document.getElementById('autoResizeTextarea');     const minHeight = 100; // CSSのmin-heightと合わせる     textarea.style.overflow = 'hidden'; // textareaにスクロールバーが表示されないようにする     function adjustHeight() {         // textareaの文字が減った場合にサイズを縮める         textarea.sty...
コメントを投稿
続きを読む

マストドンのアーカイブをcsv形式にするコード

 　mastodon-japan.netサーバーが閉鎖されるとのことなので、アーカイブをダウンロードした。その中に、outbox.jsonがあった。これはテキストエディタで開くには重すぎる。ただし、Windowsの「メモ帳」なら開ける。このoutbox.jsonから重要なデータを抽出してcsv形式にすることにした。jqというものを利用した。 https://jqlang.org/ 　このコードについては全く分からないので、Geminiにコードを作成してもらった。 　to_csv.jq というファイルと to_csv.bat というファイルを作成して同じディレクトリーに置き、to_csv.bat を実行すると mastodon_data.csv というファイルが同じディレクトリーに作られる。 　画像などの添付ファイルについては、アーカイブのzipファイルの media_attachments フォルダーの中のかなり深い階層に収納されていて、その位置は outbox.json に記載されているので、その位置も抽出することにした。投稿のidと日時とactorとコンテンツとinReplyToと画像などの添付ファイルの位置を抽出したのだが、idとactorはURL形式だった。 　また、コンテンツに「"」や「,」が含まれている場合が心配だったが、Geminiによると、「ご使用になった jq のフィルタには、CSVの標準ルールに従ってこれらを自動で処理する仕組みが組み込まれていますので、 基本的に列がずれる心配はありません。 」とのことだった。最終行の @csv 演算子 のおかげらしい。 この @csv 演算子 が非常に重要で、以下の標準的なCSVルールに従ってデータを安全にエンコードします。 カンマ ( , ): （Geminiの嘘だと思ったが正しかった。「 データフィールド内にカンマが含まれている場合 」に限らず、コンテンツ全体が""で囲まれているから,のままで大丈夫） データフィールド内にカンマが含まれている場合、そのフィールド全体は 二重引用符 ( " ) で括られます。 例: あ,い,う → "あ,い,う" 二重引用符 ( " ): （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; }     </style> </head> <body>     <h1>康煕部首、CJK部首補助、サロゲートペア等の検出</h1>     <textarea id="inputText" rows="10" ...
コメントを投稿
続きを読む

モーダルウインドウで隠れないコンテンツがあるバグのコード

 サイドバーのあるウェブページでメインブロックから全面のモーダルウインドウを開いたらサイドバーのコンテンツの一部が隠れなかった問題を再現するためのコード。 メインブロックに z-index:0 があることで、メインウインドウとは親が異なるサイドバーは重なった場合にメインウインドウの上面に表示してしまう。 モーダルウインドウはメインウインドウ内にあるため、z-indexの値を大きくしてもメインウインドウ内で最上面に表示されるだけで、その後にサイドバーを描画したらサイドバーの方が上面になる。htmlのコードでサイドバーの方を先に記述していれば、サイドバーの後にメインウインドウを表示するので、重なった場合もメインウインドウの方が上面になり、モーダルウインドウは最上面になる。 モーダルウインドウをメインウインドウの外に出せば、 z-indexの値が効果を持つようになり、最上面に表示させることができる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure Original Code</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style>     #main{       z-index:0; /* メインのウィンドウ。.sub-inよりも小さくしない */       position: relative; /* z-indexを有効にするため */       border: 3px dashed #000;       padding: 10px;       text-align:...
コメントを投稿
続きを読む

Webページ内のidのinnerHTMLを新しいタブで開くためのブックマークレット

 　Webページの一部（例：id=" kashi_area "）をブラウザの新しいタブで表示するためのブックマークレット。表示しているWebページではテキストを取得できず、その所得したいテキスト部分のidが分かっている場合に利用する。  javascript:(function(){     const element = document.getElementById(" kashi_area ");     if (element) {         const newWindow = window.open();         newWindow.document.write(element.innerHTML);         newWindow.document.close();     } else {         alert("要素が見つかりません");     } })();
コメントを投稿
続きを読む

康煕部首、CJK部首補助、サロゲートペアの検出ブックマークレット

ウェブページに康煕部首、CJK部首補助、サロゲートペアが含まれているか確認するためのブックマークレットをGeminiに作ってもらった。サロゲートペアは「CJK統合漢字拡張B以降」と表現している。 javascript:(function() {     const patterns = {         "康煕部首": /[\u2F00-\u2FDF]/g,         "CJK部首補助": /[\u2E80-\u2EFF]/g,         "CJK統合漢字拡張B以降": /[\u{20000}-\u{2FFFF}]/ug,         "絵文字": /[\u{1F000}-\u{1FFFF}\u{1F300}-\u{1F64F}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F1E6}-\u{1F1FF}\u{1F191}-\u{1F251}\u{1F004}\u{1F0CF}\u{1F170}-\u{1F171}\u{1F17E}-\u{1F17F}\u{1F18E}\u{3030}\u{3297}\u{3299}\u{FE00}-\u{FE0F}\u{1F018}-\u{1F02F}]/ug     };     const bodyText = document.body.innerText;     const foundChars = [];     for (const [name, pattern] of Object.entries(patterns)) { ...
コメントを投稿
続きを読む

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

　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...
コメントを投稿
続きを読む