IE 終わるしブログの追加スクリプト系を ES Modules に更新
◆ script タグを追加などでカスタマイズしてた部分を ESM 化して整理
◆ Import Assertion や adoptedStyleSheets などを使ってるので現状 Safari は動かないはず
◆ Import Assertion や adoptedStyleSheets などを使ってるので現状 Safari は動かないはず
気づけばそろそろ IE が終了ですね
長かったですね
まぁ個人的にはもう数年前から IE 対応なんて全くしてないですけど
https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support
2022/06/15 からサポートされないということは今日の 6/14 で終わりということでしょうか
日本時間だと明日の日中頃になるのかも?
この機に全部 ESM に揃えようかなということで揃えました
ライブドアブログのシステムが挿入するコードが多数ある分 ページのソースコードを見るとほとんどが IE でも動きそうなレガシーなものになってますが 自分で HTML に追加できる部分は ESM になりました
HTML に追加するのはこういうコードで
index.js で各モジュールをロードしてます
見出しを作るとかコードブロックの機能や色付けしたりを行ってます
めったに使わない言語の構文データをブログ内のファイルサーバに配置しなくて済みますし 想定してなかった言語を使うときに追加でアップロードする必要もなくて便利です
CDN は cdnjs にしようとしたのですが cdnjs は npm パッケージをそのまま配信してるわけじゃないみたいで esm 版がなかったので jsdelivr にしてます
highlight.js は最新版でも相変わらず JSX が入ると正しくパースできないようで prism.js に置き換えようかとも考えてますが しばらくはこのままです
こんな感じです
WebComponent 化してれば ShadowDOM に CSSStyleSheet を設定してスコープ問題は解決できるのですが WebComponent 化してないところだと document に CSSStyleSheet を設定して クラス名をつけるなどで スコープ化することになるので WebComponent 化したほうがいいかなとも思ったり
というか単純に動くか確認しません
そもそも最近は Firefox をインストールしてないですし
基本 MDN に乗ってるような標準機能で作ってるのでだいたい動くでしょうし 動かなくてもしばらくすれば Firefox にも実装されて(Safari より先には)動くようになるでしょう
その中で iOS は半分程度なので約 4% です
さらに デフォルトではライブドアブログ側で用意されるテンプレートのモバイル版表示になっているので今回のようなカスタマイズは影響しません
わざわざ PC 表示に切り替える必要があります
そんなことまでするのは 0.??? % くらいでしょうし Safari の対応状況も気にしないことにします
今のところ Safari では Import Assertion や adoptedStyleSheets は未対応なので正しく動かないです
長かったですね
まぁ個人的にはもう数年前から 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 は未対応なので正しく動かないです