些細な日常

マークダウンを使う機会が増えた。HTMLを簡略化したマークアップ言語で、覚えるのはさほど難しくない。慣れると非常に便利だ。 僕が 初めて知ったのはTumblr の投稿だったけれども今は 対話型AIのChatGTPとGemini の文章の回答をクリップボードにコピーするとマークダウンになっているので――必ずしも決まっているわけではないらしい――サイトに載せるときには対応してない場合は自分でHTMLに変換しなくては行けない。 最初は手動でやっていたけれどもマークアップの数が増えると大変なので、マークダウンからHTMLへの変換装置をJavaScriptで自作して使うようにした。 MarkedでマークダウンをHTMLへ変換する 変換 入力欄にマークダウン形式の文章を入れて「変換」を押すとHTML形式に書き換えられてサイトで表示できるようになる。 AIの文章の回答で良く使われるマークダウン ## 見出し <h2&g…

正規表現の数、アラビア数字の0から9までを検出するパターンから良く使いそうなものを纏めておく。 一桁の数 [0123456789] [0-9] \d 0から9までの数が一つでもあれば検出する。 完全一致の記載例 ^[0123456789]$ ^[0-9]$ ^\d$ 半角サーカムフレックス（^）で始めて半角ダラー（$）で終えると一桁の数以外を含まないことになる。 一桁以上の数 [0123456789]+ [0-9]+ \d+ 一桁の数字のパターン の後に半角プラス（+）を付けると0から9までのどれか一つが、一回以上、続いた場合に一致する。 桁数を指定する場合 [0123456789]{n} [0-9]{n} \d{n} 一桁の数のパターン の後に {n} （nは任意の最小桁数）を付ける。 五桁の数の記載例 [0123456789]{5} [0-9]{5} \d{5} ある範囲の数 ※3から7までの範囲の数で検出 [n-m] 半角角…

今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえば社会は ベーシックインカム へ移行するべきだ し、そうやって皆の生活費が保障されればサイト広告も本当に必要ではなくなるけれども政治が非常に遅れている。日本は不労生活の実験すらもせず、一体、何をやっているのだろう。いつかサイト広告を付けたい人と消したい人がどちらも何の不利益もなく、共存できる ビーバーの湿地帯 のような素晴らしい社会が実現されるまではサイトの収益化に纏わる問題を面倒でも避けることはできない。 昨今、僕のブログの減収は酷いもので、最大の原因は Googleの個人サイト潰し によ…

FirebaseのFunctionsで NodeのExpressを初めて使って 目眩を起こすような感しがした、getやpostなどのHTTPリクエストに対してルーティングという処理を行う。これが変数と関数とメソッドとエンドポイントなどの色んな要素で入り組んで頭の中がグチャグチャになると倒れるくらい難しい。分かれば何ということもないし、Expressの便利な機能なので、良く覚えておきたい。 Expressのルーティングとは何か ある関数の実行をサイトアドレスで振り分ける処理がルーティングで、Expressは受け取るHTTPリクエストのメソッドを含めて最初から分散させることができる。 ルーティング とは、アプリケーションが特定のエンドポイントに対するクライアント要求に応答する方法として、URI (またはパス) と特定の HTTP 要求メソッド (GET、POST など) を決定することです。 基本的なル…

Bloggerの投稿画像の WebP と 遅延読み込み のJavaScriptプログラムにscriptタグを新しく作って入れ直すという部分があって元の属性としてsrcとasyncという良くあるものを付けてやっていたけれどもどんな属性でも対応できるように変えた。 そのとき、元のscriptタグに属性があるかないか、又、あるならばどんな名前で、何の値が付いているかを全ての属性について調べる方法が必要になった。 hasAttribute()メソッドはHTML要素の属性の有無を調べられるけれども特定のものだけで、その名前も分からない。属性の値はgetAttribute()メソッドで取得できるけれども予め名前が分かった属性にしか使えないんだ。 どうしようもないので、正規表現でソースコードを分解してパターンマッチングで取り出すべきかとやってみたけれども、中々、上手く行かなくて大変なので、もう一度、メソッドか何かで…

addEventListener()メソッドを設定して後から外したい、すなわち無駄なものを残しておくのは良くないから解除したい場合、一回だけ使うならば第三引数のoptionに {once:true} を追加すると自動的にやれるから簡単だ。 それ以外はremoveEventListener()メソッドを使わなくてはならないけど、ただし条件があってどんなaddEventListener()メソッドに対しても機能するわけではないから注意を要する。 removeEventListenerが機能するための三つの条件 以前に addEventListener() を呼び出して追加したイベントリスナーがある場合、最終的にそれを取り外す必要がある場合があります。当然ながら、同じ type と listener 引数を removeEventListener() には指定する必要があります。しかし、 options…

サイトのボタンの設置などで良く使う非常に便利なJavaScriptのaddEventListener()メソッドは普通に第二引数のコールバック関数に値を入れても引数として正しく渡すことができない。 addEventListnerでコールバック関数に引数を渡せない理由 イベントリスナーには、コールバック関数または handleEvent()メソッドを持つオブジェクトの何れかをコールバック関数として指定することができます。 コールバック関数自体は、 handleEvent()メソッドと同じ引数と返値を持ちます。つまり、コールバック関数は発生したイベントを説明する Event に基づくオブジェクトを唯一の引数として受け付け、何も返しません。 EventTarget: addEventListener()メソッド｜ MDN Web Docs ｜Mozilla addEventListenerのコールバック関数…

サイトのテキストを指定してデバイスのクリップボードにコピーして他の場所へペーストして使えるようにするJavaScriptプログラムを考える。 Clipboard APIによるグローバル変数からコピー クリップボードの書き込み by 結城永人 JavaScriptのクリップボードへのコピーはClipboard APIで行える。 クリップボード API は、クリップボードのコマンド (切り取り、コピー、貼り付け) に応答する機能や、システムクリップボードの非同期の読み取りや書き込みを行う機能を提供します。 クリップボード API｜ MDN ｜Mozilla Navigatorインターフェイスが返すClipboardオブジェクト、グローバル変数の window.navigator.clipboard を通じてクリップボードを操作できる。 ClipboardオブジェクトのwriteText()メソッドの使い方 サイトの…

僕が提供する Blogger用テンプレートのImaginary への質問で、デザインが壊れて何とかして欲しいというのがあって原因の一つにブラウザがある。サイト作成のHTMLやCSSやJavaScriptのコードの一部に未対応だったり、場合によってアップデートでバグが起きて急に反映しなくなったりもする。 ブラウザの問題はいつか対応して来ると期待されるかぎり、待つしかないけれども、その間、テンプレートが壊れているのはどうにも耐えられないとなるとコードを変えるか多少の違和感ならばブラウザを除外してやり過ごせる。 今回、JavaScriptで訪問者のブラウザをOSと共にデバイス毎に判別して一部のコードを除外する方法を調べたので、纏めておきたい。 JavaScriptでブラウザとOSを判別する JavaScriptでブラウザが何かを取得する方法としてユーザーエージェントクライアントヒント APIのNaviga…

一般サイト向けの目次の自動生成のJavaScriptプログラムを公開してBloggerブログでも使えるので、どうすれば実装できるかを説明する。 JavaScriptでコンテンツの目次を自動生成して表示するプログラム どのような目次なのかやデザインや機能のカスタマイズについては一般サイト向けの記事を参考にして欲しい。 僕が提供するBlogger用のImaginaryテーマは サンプルブログの自動生成の目次のカスタマイズの記事 に専用のソースコードと実装方法を紹介している。 目次の自動生成のプログラムのソースコード ブログのテンプレートか投稿にscriptで、プログラムのソースコードを記載して使う。 /* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/03/implement-a-javascript-program-t…

Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コンテンツのHTMLの見出しタグの良く使われるh2からh4までを取り込んで順序付きリストタグのolとliに見出しへのジャンプリンクを入れて階層的に仕立てた目次を最初の見出しタグの直前に挿入する。 目次のジャンプリンクを得るために見出しのidを新しく付けているので、もしも既存のidを、そのまま、使いたい場合は ソースコードのカスタマイズ を行うと上書きを避けることができる。 目次の見出しのリストは開閉メニューのdetailsで、表題と開閉ボタンを付けてさらにサイトのナビゲーションを示すn…