些細な日常

僕が提供する Blogger用テンプレートのImaginary の特徴の一つに文書方向の左右対応がある。日本語や英語などの右から左へ書いて行く言語がある一方で、アラビア語やヘブライ語などの右から左へ書いて行く言語もある。Imginaryはどちらでもブログが適切に表示されるように設計されているんだ。 サイトの文書の方向はHTMLのdir属性のltrかrtで決められてアイコンなどの向きを左右に反転させたいものがあればCSSのtransform要素のscaleX(-1)を使うとデザインを合わせられる。 この二つで全て上手く行くと思ったら大間違いともいうべき苦しみを味わわされることになったので、なぜかの原因と修正できた対処法を載せておきたい。 SVGのtext要素は反対方向の文書で適切に表示されない テンプレートに新しく翻訳ウィジェットを搭載してボタンで起動するために翻訳アイコンを追加したら元から入れ替えた…

inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CSSの二つの方法を見付けて望み通りのデザインを付けられるようになったので、紹介する。 目次 inputタグのtype-textは入力フォントで高さがコロコロ変わる inputタグのtype-textとtype-buttonの英語と日本語の高さの比較 フォームとボタンの高さを揃えるCSSの二つのマークアップ vertical-align:middleをフォームとボタンの両方にかけると良い display:flexをフォームとボタンの親ボックスにかけると良い inputタグのtype-textは…

正規表現の数、アラビア数字の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 One｜ Google Googleの Google One というオンラインストレージのWebサービスがあってドライブと比べたら有料なので、貧困生活の僕にとっては無縁だと思って見向きもしなかったんだけれどもひょんなことが切欠でダークウェブレポートをやっていることが分かって無料でもアカウントのG…

Bloggerのテンプレートのヴァージョンは三つあり、それぞれに使い方が少し異なる。又、テンプレートのソースコードをHTML編集などから書き換える場合、Bloggerの独自タグであるウィジェットタグに互換性がないものもあるので、注意して使い分ける必要がある。 Bloggerのテンプレートヴァージョンの指定 テンプレートのhtmlタグに特定の属性を付けるか何も付けないことでヴァージョンが確定する。 ヴァージョン3 b:layoutsVersion='3' ヴァージョン2 b:version='2' ヴァージョン1 指定なし Bloggerのテンプレートのヴァージョンによって使用できるヴィジェットのヴァージョンが異なっている。 もう一つクラシックテーマ（第一世代）というのが管理画面のレイアウトのメニューから利用できるけれどもこれはテンプレートヴァージョンと無縁のもので、最初のもの…

ブログのフッターに 年度別の一件 という画像付きの スクロールボックス のリンクを作成した。 スクロールボックスを作ると片端にスクロールの方向のスクロールバーが表示されていつもは隠された領域があることが分かるから便利だと思ってそののままにしていた。しかしながら今回のスクロールボックスはボタンを付けて隠された領域があることが分かるからスクロールバーはデザインの邪魔にしかならないと消したくなった。 スクロールボックスのスクロールバーを消す スクロールボックスのスクロールバーは サイトのデザインのCSSのマークアップ で簡単に消すことができてスクロールバーの太さを指定できるscrollbar-widthを使うと良い。 scrollbar-widthのサンプルのソースコード HTML <div class="scroll-box”> スクロールボックスのコンテンツ </div> CSS .…

Googleの 読み上げのWebサービスのText-to-Speechを使う ときにクレジットカードかデビットカードの登録が必要で、基本的に無料枠の範囲内で使うつもりだけれども十五歳以上で口座があれば簡単に作れるという銀行のデビットカードを新しくインターネットで申し込んで直ぐに手に入れた。 目的のText-to-SpeechのGoogle Cloudのアカウントに登録したら受け付けが完了して 些細な日常のブイログ などの動画作成に使っていた。 その後、Google Cloudの他のWebサービスのGemini APIやFirebaseも使うようになったら、先月、ちょっとした管理ミスで二円の課金が発生してしまって参った。 いうとGemini APIのシステムが変わって有料アカウントへ移行すると最初から課金されるようになった。普通ならばFirebaseとか無料の範囲を越えて初めて課金されるはずだけれどもG…

Bloggerの管理画面のメニューの収益はサイト広告の アドセンスライセンスを持つ場合 はブログでの使用が設定できる。自動広告と広告ユニットと広告なしの三種類が用意されている。それぞれの広告コードの扱い方がどのように出るか出ないかで異なるから覚えておいて上手く使い分けられると良いと思う。 Bloggerの収益の自動広告はどうなっているか ブログのhead内にアドセンスの広告コードがサーバーから追加される 特徴的なのはブログのテンプレートのアドセンスの広告コードとは別にBloggerのサーバーから、直接、それが出力されて記載されることなんだ。 ということはブログのテンプレートのアドセンスの広告コードが出た場合には重複して無駄なマークアップを増やすことになってしまう。 実際は大した問題ではないし、一つの広告のために数多くの広告コードを記載しても、全部、同じならば、逐一、しっかり読み込むわけではなく、表示速…

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

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