些細な日常
マークダウンを使う機会が増えた。HTMLを簡略化したマークアップ言語で、覚えるのはさほど難しくない。慣れると非常に便利だ。 僕が 初めて知ったのはTumblr の投稿だったけれども今は 対話型AIのChatGTPとGemini の文章の回答をクリップボードにコピーするとマークダウンになっているので――必ずしも決まっているわけではないらしい――サイトに載せるときには対応してない場合は自分でHTMLに変換しなくては行けない。 最初は手動でやっていたけれどもマークアップの数が増えると大変なので、マークダウンからHTMLへの変換装置をJavaScriptで自作して使うようにした。 MarkedでマークダウンをHTMLへ変換する 変換 入力欄にマークダウン形式の文章を入れて「変換」を押すとHTML形式に書き換えられてサイトで表示できるようになる。 AIの文章の回答で良く使われるマークダウン ## 見出し <h2&g…
今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえば社会は ベーシックインカム へ移行するべきだ し、そうやって皆の生活費が保障されればサイト広告も本当に必要ではなくなるけれども政治が非常に遅れている。日本は不労生活の実験すらもせず、一体、何をやっているのだろう。いつかサイト広告を付けたい人と消したい人がどちらも何の不利益もなく、共存できる ビーバーの湿地帯 のような素晴らしい社会が実現されるまではサイトの収益化に纏わる問題を面倒でも避けることはできない。 昨今、僕のブログの減収は酷いもので、最大の原因は Googleの個人サイト潰し によ…
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ブログの投稿に画像かYouTube動画があると先頭のものを対象としてサムネイル画像を自動的に生成することができる。これはブログトップページなどのインデックスページや人気の投稿のなどのガジェットのスニペット、またはFacebookやXといったソーシャルメディアへの投稿の共有で使われることになる。画像かYouTube動画がない投稿はサイムネイル画像もないものとして扱われることになる。 投稿のサムネイル画像は取得先の画像かYouTube動画が複数ならば変更できる トップページ｜ 気になる情報局 投稿の画像かYouTube動画が一つしかなければサムネイルもそれしかないんだけれども複数ならば二つ以降のどれかを先頭に置いてブログで表示する際にプログラムで入れ替えて正しい位置へ移動させることでサムネイルに使うことができる。 サイトのコンテンツの位置を変更するJavaScriptプログラム Blogg…
僕が提供する 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…
サイトのHTMLに最初から記載されてないコンテンツを後からJavaScriptで挿入するとそのときにページが新しいスペースを取られて動いてしまう。初回画面だと既存のコンテンツが押し下げられるのが、一瞬、見えたりもするけど、これがサイトのCLS（Cumulative Layout Shift／累積的な配置の変動）を上げて使い難くなる。 指標｜PageSpeed Insights｜ Google Developers 良くあるのが押そうとしたボタンがサイトの読み込み中に動いて押せなくなってしまうことだ。 訪問者に良い印象を与えないのはもちろんだけど、さらにGoogleのサイトの検索状況のSearch Consoleや性能計測のPageSpeed Insightsでも警告が出されるので、 検索エンジンからアクセスアップを望む 上でもCLSの上昇に注意しなくてはならない。 普通の回避策としては新しいコンテンツ…
Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策（検索エンジン最適化） で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ｜Search Console｜ Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマホでの表示は大丈夫で、何の支障もないから…
