◆ script タグを追加などでカスタマイズしてた部分を ESM 化して整理
◆ Import Assertion や adoptedStyleSheets などを使ってるので現状 Safari は動かないはず 

気づけばそろそろ IE が終了ですね
長かったですね
まぁ個人的にはもう数年前から IE 対応なんて全くしてないですけど

https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support
Starting June 15, 2022, the Internet Explorer 11 desktop application will no longer be supported on certain versions of Windows 10*.

2022/06/15 からサポートされないということは今日の 6/14 で終わりということでしょうか
日本時間だと明日の日中頃になるのかも?

ESM 化

考えてみればこのブログ 特に IE 対応をしてるわけでもないですが 昔ながらの script タグなどでカスタマイズしてる部分があったりでまとまっていません
この機に全部 ESM に揃えようかなということで揃えました

ライブドアブログのシステムが挿入するコードが多数ある分 ページのソースコードを見るとほとんどが IE でも動きそうなレガシーなものになってますが 自分で HTML に追加できる部分は ESM になりました

HTML に追加するのはこういうコードで

<script type="module" src="/r/custom/index.js"></script>

index.js で各モジュールをロードしてます

import "./heading-index.js"
import "./code-block.js"
import "./dyn-style.js"

見出しを作るとかコードブロックの機能や色付けしたりを行ってます

highlight.js

highlight.js も新しいバージョンにして CDN から動的にロードするようにしました
めったに使わない言語の構文データをブログ内のファイルサーバに配置しなくて済みますし 想定してなかった言語を使うときに追加でアップロードする必要もなくて便利です
CDN は cdnjs にしようとしたのですが cdnjs は npm パッケージをそのまま配信してるわけじゃないみたいで esm 版がなかったので jsdelivr にしてます
highlight.js は最新版でも相変わらず JSX が入ると正しくパースできないようで prism.js に置き換えようかとも考えてますが しばらくはこのままです

CSS

CSS もモジュール化して ESM でロードするようにしてます
こんな感じです

import stylesheet from "./code-block.css" assert { type: "css" }

document.adoptedStyleSheets.push(stylesheet)

WebComponent 化してれば ShadowDOM に CSSStyleSheet を設定してスコープ問題は解決できるのですが WebComponent 化してないところだと document に CSSStyleSheet を設定して クラス名をつけるなどで スコープ化することになるので WebComponent 化したほうがいいかなとも思ったり

Firefox

最近は Firefox はサポートしないというサイトが増えて動かないページもあるとか言われてますが 流れに乗ってここも Firefox はサポートしません
というか単純に動くか確認しません
そもそも最近は Firefox をインストールしてないですし
基本 MDN に乗ってるような標準機能で作ってるのでだいたい動くでしょうし 動かなくてもしばらくすれば Firefox にも実装されて(Safari より先には)動くようになるでしょう

Safari

アクセス解析によれば このブログへのモバイル端末でのアクセスは 8% ほどです
その中で iOS は半分程度なので約 4% です
さらに デフォルトではライブドアブログ側で用意されるテンプレートのモバイル版表示になっているので今回のようなカスタマイズは影響しません
わざわざ PC 表示に切り替える必要があります
そんなことまでするのは 0.??? % くらいでしょうし Safari の対応状況も気にしないことにします

今のところ Safari では Import Assertion や adoptedStyleSheets は未対応なので正しく動かないです