些細な日常
マークダウンを使う機会が増えた。HTMLを簡略化したマークアップ言語で、覚えるのはさほど難しくない。慣れると非常に便利だ。 僕が 初めて知ったのはTumblr の投稿だったけれども今は 対話型AIのChatGTPとGemini の文章の回答をクリップボードにコピーするとマークダウンになっているので――必ずしも決まっているわけではないらしい――サイトに載せるときには対応してない場合は自分でHTMLに変換しなくては行けない。 最初は手動でやっていたけれどもマークアップの数が増えると大変なので、マークダウンからHTMLへの変換装置をJavaScriptで自作して使うようにした。 MarkedでマークダウンをHTMLへ変換する 変換 入力欄にマークダウン形式の文章を入れて「変換」を押すとHTML形式に書き換えられてサイトで表示できるようになる。 AIの文章の回答で良く使われるマークダウン ## 見出し <h2&g…
僕が提供する Blogger用テンプレートのImaginary の特徴の一つに文書方向の左右対応がある。日本語や英語などの右から左へ書いて行く言語がある一方で、アラビア語やヘブライ語などの右から左へ書いて行く言語もある。Imginaryはどちらでもブログが適切に表示されるように設計されているんだ。 サイトの文書の方向はHTMLのdir属性のltrかrtで決められてアイコンなどの向きを左右に反転させたいものがあればCSSのtransform要素のscaleX(-1)を使うとデザインを合わせられる。 この二つで全て上手く行くと思ったら大間違いともいうべき苦しみを味わわされることになったので、なぜかの原因と修正できた対処法を載せておきたい。 SVGのtext要素は反対方向の文書で適切に表示されない テンプレートに新しく翻訳ウィジェットを搭載してボタンで起動するために翻訳アイコンを追加したら元から入れ替えた…
ブログのフッターに 年度別の一件 という画像付きの スクロールボックス のリンクを作成した。 スクロールボックスを作ると片端にスクロールの方向のスクロールバーが表示されていつもは隠された領域があることが分かるから便利だと思ってそののままにしていた。しかしながら今回のスクロールボックスはボタンを付けて隠された領域があることが分かるからスクロールバーはデザインの邪魔にしかならないと消したくなった。 スクロールボックスのスクロールバーを消す スクロールボックスのスクロールバーは サイトのデザインのCSSのマークアップ で簡単に消すことができてスクロールバーの太さを指定できるscrollbar-widthを使うと良い。 scrollbar-widthのサンプルのソースコード HTML <div class="scroll-box”> スクロールボックスのコンテンツ </div> CSS .…
Bloggerの管理画面のメニューの収益はサイト広告の アドセンスライセンスを持つ場合 はブログでの使用が設定できる。自動広告と広告ユニットと広告なしの三種類が用意されている。それぞれの広告コードの扱い方がどのように出るか出ないかで異なるから覚えておいて上手く使い分けられると良いと思う。 Bloggerの収益の自動広告はどうなっているか ブログのhead内にアドセンスの広告コードがサーバーから追加される 特徴的なのはブログのテンプレートのアドセンスの広告コードとは別にBloggerのサーバーから、直接、それが出力されて記載されることなんだ。 ということはブログのテンプレートのアドセンスの広告コードが出た場合には重複して無駄なマークアップを増やすことになってしまう。 実際は大した問題ではないし、一つの広告のために数多くの広告コードを記載しても、全部、同じならば、逐一、しっかり読み込むわけではなく、表示速…
今年の二月からアドセンスの収益化の方式がサイト広告のクリック課金からインプレッション課金に変更された。これにより、広告ブロックのブラウザが多くのサイトで、直接、減益を齎すようになっている。つまり サイト広告を表示しないことはアドセンスを始めとしたインプレッション課金の収益化を妨害していることに他ならない。 理想的にいえば社会は ベーシックインカム へ移行するべきだ し、そうやって皆の生活費が保障されればサイト広告も本当に必要ではなくなるけれども政治が非常に遅れている。日本は不労生活の実験すらもせず、一体、何をやっているのだろう。いつかサイト広告を付けたい人と消したい人がどちらも何の不利益もなく、共存できる ビーバーの湿地帯 のような素晴らしい社会が実現されるまではサイトの収益化に纏わる問題を面倒でも避けることはできない。 昨今、僕のブログの減収は酷いもので、最大の原因は 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()メソッドで取得できるけれども予め名前が分かった属性にしか使えないんだ。 どうしようもないので、正規表現でソースコードを分解してパターンマッチングで取り出すべきかとやってみたけれども、中々、上手く行かなくて大変なので、もう一度、メソッドか何かで…
Bloggerの投稿の作成ビューのメニューには🅰というフォントの項目があって様々なフォントを使うことができる。 Bloggerの投稿の作成ビューのフォントの使い方 使用可能なフォントには日本語も多く含まれていて非常に便利なんだ。 Bloggerの投稿の作成ビューのフォントの注意点 ところがフォントの項目の最初に表示される通常のもの以外、選択後にマイフォントに分類されるものは外部サイトのGoogle Fontsから読み込むようになっているために表示速度は比較的に遅くて事前に通常のフォントが現れたり、切り替えでレイアウトが動いたりする恐れがあることに注意したい。 マイフォントの表示速度を改善するカスタマイズ 幾らかは改善する方法もあってブログのソースコードの編集が必要になるから手間がかかるにせよ、外部サイトから読み込むフォントの表示の遅れに対しては非常に有効なんだ。 Bloggerの解除不能のマイフォン…
Bloggerブログのテンプレートはそれ自体のソースコードだけではなく、最終的にBloggerの一般的なソースコードが追加されて表示されている。それはブログのテンプレートのXMLファイルを見ても分からず、実際に表示されたブログのソースコードを見て初めて分かるものなんだ。 主にheadとbodyの閉じタグを発端にして行われ、ブログで使われるガジェットに必要なものが含まれているけど、しかしブログで使わないものもあると無駄なソースコードでしかなく、表示速度を下げるなどのパフォーマンスに支障を来すだけだから何とかしたくなる。 調べると無効化する方法が出回っていて皆に使われているので、纏めておきたいと思う。 Bloggerのテンプレートのソースコードは管理画面のテーマのメニュー（カスタマイズの▼）のhtmlを編集かパックアッブと復元から書き換えることができる。 目次 htmlタグの属性のカスタマイズによる無…
Bloggerでは管理画面の設定の「Google アナリティクスの測定 ID」からGoogleアナリティクスの測定ID（GoogleタグID）を保存するとアナリティクスのソースコードをブログのテンプレートに自動挿入して使用することができる。 グローバルタグという普通のアナリティクスのソースコードが自動挿入されるけれどもテンプレートのソースコードを書き換えることによって他のものにカスタマイズすることができる。 アナリティクスのソースコードを書き換える Bloggerのアナリティクスのソースコードは管理画面のテーマのカスタマイズの「HTML編集」か「バックアップ」と「復元」から書き換えてカスタマイズできる。 Bloggerのアナリティクスの独自タグ 公式テーマではHTMLのheadの閉じタグの直前か少し前にアナリティクスのソースコードを出力する独自タグが記載されていてその他の多くの非公式テーマでも同じ…
アナリティクスのソースコードを指定通り、サイトのheadタグの直前に記載するとサイトのパフォーマンスが低下する。必ずしも大きな影響はないかも知れないけれども例えば WebPageTest のCore Web Vitals（Googleのサイト評価の基準の一つ）のテストで調べるとアナリティクスの「www.googletagmanager.com」の読み込みのTotal Blocking Timeが、255ms／0.255s、発生していた。サイトのパフォーマンスとして気がかりなくらい大きい。 アナリティクスのTotal Blocking Timeは不味い Total Blocking Timeとはサイトが完全に表示されてからインタラクティブになるまでの時間、サイトのボタンなどが固まらず、ちゃんと使えるようになるまでどのくらい待たされるかを示している。 Core Web Vitalsが依拠するLight…
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のコールバック関数…
HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input type="button"> に popovertarget 属性が付いたもの）、または HTMLElement.showPopover() の呼び出しによって開かれるまで、display: none で非表示になっています。 開かれると、ポップオーバー要素は、最上位レイヤー内の他のすべての要素の上に現れ、親要素の position や overflow のスタイル付けの影響を受けません。 popover｜ MDN Web Docs ｜Mozilla ボタンとコン…
Bloggerのテンプレートは管理画面の「テーマ」のカスタマイズのテーマデザイナーからヘッダー画像を追加したり、コンテンツの文字の大きさや色を変更したり、デザインのCSSをを追加したりすることができる。 Bloggerのテーマデザイナーは利用者がブログのデザインのCSSを簡単に操作できるようにするためのツールなんだけれどもこれは最初から決められたものではなく、どの領域のどの要素を操作できるようにするかを管理画面の「テーマ」のカスタマイズのHTML編集からカスタマイズすることができる。 目次 Variableタグがテーマデザイナーを指定する Bloggerの七種類のVariableタグ Variableタグの基本的なマークアップの仕方 Variableタグのマークアップの必須事項 Variableタグとテーマデザイナーの対応関係 半透明の色を設定するときの注意点 旧ヴァージョンで使用可能なvariableタ…
