F-light の最新アップデートについて

｜2024/10/05 ｜6
アイキャッチ

本日、拙作テーマの F-lght v1.37 をリリースしました。

今回のアップデートの主な変更点について記しておこうと思います。

尚、全ての変更箇所はこちらで確認できます。
F-light v1.36 → v1.37 - Diffchecker
F-light v1.36-TD → v1.37-TD - Diffchecker

① 脱 jQuery

今回のアップデートでメインとなるのが「脱 jQuery」です。

ちなみに jQuery とは、JavaScript のためのライブラリで、jQuery を使用することでシンプルに JavaScript を記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになるというものです。私のような JavaScript の初心者でも比較的簡単にコードを書くことができる便利なものです。F-light でもいくつかの機能で活用していました。

便利ではありますが、その半面、かなりの分量のある重たいライブラリを読み込む必要があるため、ページの表示速度に影響が出てしまい、PageSpeed Insights (PSI)でも「使用していない JavaScript の削減」と指摘されてしまいます。要するに無駄なものは省きなさい！ということ。

結構前からこの問題をなんとかしたいな、と思いつつずっと先延ばしにしていましたが、やっと重い腰を上げて jQuery → Vanilla JS (jQuery を使わない素の状態のコードのこと) への変換作業に取り組むことにしました。とはいえ、自力では到底無理そうなので、また先人のお知恵を拝借することに😅

まずスムーススクロールは IB-Note さんに、そして匿名コメントアバターの表示は mizusame さんのコードを使わせていただきました。

ファビコンIB-Note
サムネイル
スムーススクロールをJavaScriptのみで実装してみる | IB-Note
スムーススクロールをJavaScriptだけで実装してみました。シンプルかつ軽量なおすすめスクリプトです。
https://itblogger-note.blogspot.com/2022/01/smooth-scroll.html
ファビコンmizusame
サムネイル
【Blogger】標準 JS を無効にしつつコメント欄のアバター画像を変更する
Blogger のコメント欄に「匿名」や「名前/URL」でコメントをすると、アバター画像として blank.gif という 1 px のドットが表示されることがあります。
https://mizunosame.blogspot.com/2022/04/blogger-comment-anonymous-avatar-without-javascript.html#toc-7

コードを少し改造

スムーススクロールに関して、ChatGPTさんに頼んで自分好みの仕様になるように改変。リンクを踏んだ後も URL に #ID が残るようにしました。(F-light の旧バージョンもこの仕様)

例えば目次で見出しリンクをクリックすると、見出しに移動するとともに、アドレスバーの URL がこんな感じになります。
https://fujilogic.blogspot.com/2024/07/f-light-update-without-jquery.html#2

ただ、先日こちらの記事(ブラウザの履歴の章)を読んで、#ID が付かない方が好みの方もいるかもしれないな…という気がしたので、#ID が付かないバージョンのコード(IB-Note さんのオリジナルコードを圧縮したもの)を載せておきます。テーマのHTML 編集にて、<!-- スムーススクロールの所のコードを下記のものと入れ替えて下さい。

ファビコンThe other way round
サムネイル
【smooth scroll】JSとCSSの挙動の違い
これまでページ内のスムーススクロールはJavaScriptを用いて行うのが定石でしたが、CSSの scroll-behavior プロパティ が大半のブラウザで実装済みになりましたので、今後はJSを使わず簡単にできるようになります。...
https://vanillaice000.blog.fc2.com/blog-entry-1177.html
!function(){let e=document.querySelectorAll('a[href^="#"]');e.forEach(e=>{e.addEventListener("click",t=>{t.preventDefault();let l=e.getAttribute("href").substr(1);l="#"==l?"html":`[id="${l}"]`;let o=document.querySelector(l),r=o.getBoundingClientRect(),c=window.pageYOffset||document.documentElement.scrollTop,n=r.top+c-40;window.scrollTo({top:n,behavior:"smooth"})})})}();

次はページトップ(下部)にジャンプするボタン。これも ChatGPT さんにお願いしました。それにしても、こういう AI が存在しなかったらたぶん Vanilla 化作業に取り掛かろうなんて思わなかったかもしれないですね(笑)

早速 ChatGPT さんに提示してもらったコードを実装してみた所、問題なく機能した…と思いきや、何故かスマホ(Android)だとバグって挙動がおかしくなることが判明。PCのデベロッパーモードだと問題なかったので、スマホ実機で不具合に気づけて良かった(^^;

不具合のことを ChatGPT さんに文句言って直してもらったコードでもやはりおかしい…というわけで最近話題の Google さんの AI Gemini をまだ使ったことがなかったのでダメ元で聞いてみたら、今度はちゃんと動いた！しかも ChatGPT のコードよりもスッキリしてる！？ もうこれからは Gemini さんだけを頼ろうかとも思ったけど、色々試してみると Gemini さんの回答もたまにおかしなことがあるみたいなので、現時点ではまだどちらが優秀とは言い切れないですね。

あとちなみに、これまで PC では移動距離が短いからという理由でトップページではジャンプボタンを非表示にしていましたが、全ページで表示する仕様に変更しました。

脱 jQuery による注意点

ほとんどの環境では大丈夫だとは思いますが、古いブラウザだとスムーススクロールもジャンプボタンも機能しなくなる可能性がありますのでご注意下さい。目次の見出しリンクをクリックしても無反応で見出しタグに飛べません。

ご自身で何かしらの jQuery 用のプラグインを導入されている環境だと全て動かなくなってしまいますので、jQuery ライブラリを再導入して下さい。

<head>か<body>の下に下記のタグを設置して下さい。

<script src='//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js'/>

② PSI 指摘箇所(ユーザー補助)の調整

最近「ユーザー補助 (Accessibility)」の基準が変わったらしく、タップターゲットのサイズや間隔に関して減点されるようになったので、対応しました。

ナビバー検索ボックスののサイズとか、プロフィールウィジェットの名前とプロフ画像の間隔等、ぱっと見わからないような細かい所が変更されています。

プレーンな状態では問題ないように調整しましたが、後付のウィジェットや広告等の影響で減点される場合もあります。

③ フッター帰属表記の調整

とある F-light ブログで、フッターのブログ名表示部分に多数のコピーライト表記を追加されていたのですが、レイアウトが残念な感じになっていたので、長いブログ名でも仕切り線がいい感じになるようにマークアップを調整してみました。

変更前のフッター帰属表記
before
変更後のフッター帰属表記
after

④ 全てのウィジェットの外部リンクを新しいタブで開く仕様に変更

これまではページリスト及びリンクリストの外部リンクだけ新しいタブで開くようにしていましたが、全てのウィジェットの外部リンクを対象にしました。

⑤ 半透明処理の仕様変更

ナビバーの背景やジャンプボタンの色は半透明になっていますが、実はテーマデザイナー(TD)あり版となし版ではそれぞれ異なる処理法で半透明化していました。

F-light のナビバーは、TD 実装前まではrgbaで指定した半透明色をカスタムプロパティに当てることでナビバーの背景だけを半透明にすることが出来ていましたが、TD では半透明色は使えないため、opacityで色を薄めるしかなく、その結果ナビバーだけでなく、内包するナビメニューの文字や背景まで半透明になってしまっており、配色によっては見づらくなる可能性もありました。

F-light の HTML 構造を変えればなんとかなりそうのですが、結構面倒なのでやはり CSS だけでなんとかしたい所…。

去年リリースされた Chrome119 でサポートされるようになった「CSS 相対色構文」という 新構文であれば TD でも半透明色が使えるようになることがわかったので早速導入。両バージョンで仕様を統一出来たことにより、どちらも同じ表示状態にすることが出来ました。

比較

このような HTML で、 TD あり版、TD なし版、そして今回の新構文のそれぞれの CSS を当ててみた比較です。

※ 違いがわかりやすいように不透明度を50%にしてあります。F-light の不透明度は90%なので、実際はそこまで視認性は悪くないです。

<div class="bg"><span class="menu">MENU</span></div>

TD なし版 (rgba)

:root {
  --bg-color: rgba(30, 144, 255, .5); /*半透明の DodgerBlue、TD では rgba は使えない*/
}
.bg {
  background: var(--bg-color);
  height: 200px;
  width: 200px;
  margin: 2em auto;
  position: relative;
}
.menu {
  background: #eee;
  color: #111;
  position: absolute;
  left: 50px;
  top: 75px;
  padding: .5em 1.5em;
}

カスタムプロパティで半透明の背景色を定義して、背景にのみ当てることが可能なので、その他の要素(MENU)には影響を与えない。

MENU

TD あり版 (opacity)

:root {
  --bg-color: DodgerBlue;
}
.bg {
  background: var(--bg-color);
  opacity: .5;
  height: 200px;
  width: 200px;
  margin: 2em auto;
  position: relative;
}
.menu {
  background: #eee;
  color: #111;
  position: absolute;
  left: 50px;
  top: 75px;
  padding: .5em 1.5em;
}

メニューの背景や文字色まで半透明になってしまっている。ダークモードで見ると文字色がさらに見づらくなる。

MENU

相対色構文

:root {
  --bg-color: DodgerBlue;
}
.bg {
  background: rgb(from var(--bg-color) r g b / 50%);
  height: 200px;
  width: 200px;
  margin: 2em auto;
  position: relative;
}
.menu {
  background: #eee;
  color: #111;
  position: absolute;
  left: 50px;
  top: 75px;
  padding: .5em 1.5em;
}

カスタムプロパティで定義した色に直接 alpha(透明度) の値を指定することが出来る。

MENU

何故半年以上も実装を見送っていたか

Chrome119 がリリースされた去年の11月にこの新構文の事を知り、早速 F-light に導入しようと思ったのですが、Firefox が未対応だということが発覚。今日リリースされた Firefox128 で漸く対応されましたので、それに合わせてのアップデートとなったというわけなんです😅

Firefox をお使いの方はアップデートしましょう！

最後に

一番の悩みの種だった jQuery 問題が片付いて個人的に満足したということもあって、もう今後は F-light のアップデートはしないつもりです。(もちろん不具合があれば修正はしますし、カスタマイズのご相談があれば対応します)

サブブログでも F-light を使っているのですが、こまめに変更を適用している当メインブログと違って、サブの方は旧バージョンのままずっと放ったらかしな上に、ウィジェットを多数追加&あちこち弄りまくってあったので、新版テーマを当てた後、元のカスタマイズ状態を再現するのに結構手間取りました…💦

マメにアプデを適用していただいてるユーザーさんのご苦労、お察しします。しょっちゅうアプデばっかりしてすいません😅

こんな面倒くさい作業、何度もやりたくないですよね。一応今回が最後のアップデート(のつもり)ですのでご安心下さい😁