些細な日常
Imaginaryに ブログの目次を表示するカスタマイズ を紹介したけど、使用したJavaScriptのコンテンツの目次の自動生成のプログラムはBloggerの他のテーマを含めて他の全てのサイトで使うことができるので、もはや著者名を付けるだけで誰でも無料で使えるように提供しようと思った。 目次の自動生成のプログラムの特徴 コンテンツのHTMLの見出しタグの良く使われるh2からh4までを取り込んで順序付きリストタグのolとliに見出しへのジャンプリンクを入れて階層的に仕立てた目次を最初の見出しタグの直前に挿入する。 目次のジャンプリンクを得るために見出しのidを新しく付けているので、もしも既存のidを、そのまま、使いたい場合は ソースコードのカスタマイズ を行うと上書きを避けることができる。 目次の見出しのリストは開閉メニューのdetailsで、表題と開閉ボタンを付…
YouTubeのホームに出て来た動画の歌う女性に「何だ、この妖艶な魅力は」と心を動かされて観てみたら聴き覚えのある曲だった。ずっと昔、幼い頃に聴いて「一体、誰が歌っているんだろう」と気になった記憶が微かに残っていた。初めて知ってとても嬉しかったんだけれども歌っていたのは ジューシィ・フルーツ というバンドのヴォーカルの イリア （奥野敦子）で、曲は ジェニーはご機嫌ななめ だったんだ。今聴いても全く古さを感じさせないほどに引き付けられ捲るし、他の曲にも幾つか聴き覚えがあって本当に気に入りの音楽を見付けたと感じる。 ジューシィ・フルーツのテクノロックが何よりも好きだ ジューシィ・フルーツのイリア｜ステレオ音楽館｜ 東京12チャンネル 今まで、散々、色んな音楽を聴いて来た中で、好きなのに良い曲を見付けることが難しくて、思う存分、聴けないものとしてテクノロックが個人的に挙げ…
サイトの表示速度を計測する PageSpeed Insights にその他のパフォーマンスを判定する要素が盛り込まれて総合的に使い易さの指標が得られるようになった。 コントラスト比の最低基準は4.5 : 1 PageSpeed Insights｜ Google Developers ブログで気がかりになったものの一つにコントラスト比があって「背景色と前景色には十分なコントラスト比がありません」という指摘と共にユーザー補助の項目も少し減点されてしまった。 調べるとWCAG（Web Content Accessibility Guidlines／ウェブコンテントアクセシビリティガイドライン）が定める最低基準となるレベルAAの4.5を通常の文字サイズで越えなくてはならない。 テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の…
ブログを始めとして様々な創作活動に非常に便利だと気付いた最初のブレットの Xperia Z3 Tablet Compact が七年目で電池がニ時間も持たないくらいレンズしたし、性能も相当に遅れているだろうからそろそろ買い換えなくてはならないと感じた。 LenovoのTab M8（FHD）を選んだ理由 前回に続いてAndroidタブレットからLenovoのTab M8を選んで購入した。 画面サイズはXperia Z3 Tablet Compactの8インチに慣れているせいもあるだろうけど、とにかく最も使い易いと思って新しいタブレットの購入の第一条件とした。 値段は余り高過ぎる必要はない。ブログの作成（文章と多少の画像や動画の編集）とインターネットの閲覧ができれば良いので、高性能なものは求めない。第二条件として二万円台の価格を想定した。上手く行けば二万円を下回りた…
Bloggerの投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同じではないと聞くけれどもたぶん大きな違いはないかも知れない。 何れにしてもHTMLのloading-lazyによるブログの表示速度の高速化は非常に限定的だと分かったので、もはや元々の JavaScriptのIntersection Observer API を再び使って画面外の画像や動画を確実に止めてパフォーマンスをきっちり上げるためのプログラムへの書き換えを追加したくなった。 合格した監査｜PageSpeed Insights｜ Google …
ブログをサイトのパフォーマンスをチェックする Measure page quality にかけたらBest PracticesのUser ExperienceのServes images with low resolutionの警告が出たから何なのかと調べて修正した。 Serves images with low resolutionとは何か Best Practices｜Measure page quality｜ Google Developers 画像を低解像度で配信しているのが良くない。 画像の原寸法は表示サイズと画像を最大に明瞭化するピクセル比へ成形されなくてはならない。 原文 Image natural dimensions should be proportional to the display size and the pixel ratio to …
Google Fonts で日本語のWebフォント（ Japanese ）が幾つも無料で提供されていて現在は正式版として相当に使い易くなっている。 Google Fontsの日本語フォント 種類が非常に多くて五十二件（2022年2月時点）から二十件のみ掲載する。 Noto Sans Japanese （ 適用 ） Noto Serif Japanese （ 適用 ） Shizuru （ 適用 ） M PLUS Rounded 1c （ 適用 ） Zen Kaku Gothic Antique （ 適用 ） Sawarabi Mincho （ 適用 ） Kosugi Maru （ 適用 ） Kaisei Decol （ 適用 ） Shippori Mincho （ 適用 ） Delta Gothic One （ 適用 ） Reggae One （ 適用 ） Kiwi Maru （ 適用 ） Murecho （ 適用 ） Yusei Magic （ 適用 ） Yuji Sy…
Bloggerは 世界で最も利用者が多いと共に非常に古いブログサービス で、常に改良されるけれども機能的に無駄な部分が残されていて今最も悲しいのがウィジェット用JavaScriptの外部ファイルとソースコードなんだ。 それ自体が重いどころか多くの機能が一つになっていてそうした標準のプログラムが必要なウィジェットなどを使ってなくても全てのブログにサーバーから自動的に記載されている。 ブログの表示速度などのパフォーマンスを考えると止めるのが最善ながら幾つかの重要な機能が使えなくなるのが悩ましい。しかし後から読み込む方法が全くないわけではない。初回画面を遅らせないことはブログのパフォーマンスでは最も重要だと思う。 ウィジェット用JavaScriptの影響を受ける機能を使わなければ止めて構わないけれども必要な場合でも最初に止めておいて一部の機能で必要なときだけ読み込…
日本の女性歌手のR&Bの楽曲で、 宇多田ヒカル の Automatic が本当に素敵だと感じる。 宇多田ヒカル - Automatic｜Hikaru Utada 宇多田ヒカルのデビュー曲で、大ヒットした。十五歳と思えない本当に繊細な歌唱力から何からあらゆる面で注目された話題曲だった。R&Bだけれども浮遊感があるのが特徴的で、ニュージャックスウィングに近い。ビートが「ツンツ」という三連符（中抜き）のシャッフルになって軽快に弾む。丁度、僕が 黒人音楽に嵌まった 1990年前後に本場のアメリカで流行していて挙げると Everything Little Step （ ボビー・ブラウン ）が歌も踊りもファッションも象徴的に完成されていて最も有名だったかも知れない。心が浮き立つようなリズムのR&Bで、日本の歌として少しでもしっかり取り入れられたのは本当に珍しい…
サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / Pixabay インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SV…
JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 requestAnimationFrameはジャンクを防ぐ requestAnimationFrameはイベントループに強い アニメーションの始動と時間通りの実行に向く requestAnimationFrameに時間を設定して使う 二秒後に実行して即座に停止するサンプル 一秒間隔で実行して十秒で停止するサンプル requestAnimationFrameはジャンクを防ぐ アニメーションの処理に利点があってサイトの表示を良好に保ち易くするのがrequestAnim…