本連載は分散型マイクロブログ用オープンソースソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。

Misskeyの開発を行う上では、「⁠活用したいがまだ一部のブラウザにしか実装されていない」技術がよくあります。JavaScriptを用いると非対応ブラウザでも再現可能なものもありますが、ネイティブに実装されているに越したことはありません。

今回は、今後それらの技術が広く実装されることに期待を込め、各主要ブラウザの対応状況も示しつつ簡単に紹介します。

なお、対応状況を示すアイコンの意味は、✅＝完全対応、⚠️＝部分対応または不安定、❌＝未対応とします。

技術一覧

CSS: interpolate-size

interpolate-sizeを使うと、要素のheightをauto値へトランジションさせることが可能になります。

例えばコンテンツの高さが動的なアコーディオンの開閉アニメーションが簡単に実現できます。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

CSS: field-sizing

field-sizingを使うと、テキストボックスで内容の行数に合わせて自動で高さを伸長できるようになります。

今まではJavaScriptで同様の挙動を実現していました。

• Chrome系 ✅ / Firefox ❌ / Safari ✅

CSS: sibling-index()

sibling-index()は、要素が何番目にあるかをカウントできるCSS関数です。

これを利用すると要素が順番に表示されていくアニメーション（スタッガーアニメーション）を作るのが容易になります。

• Chrome系 ✅ / Firefox ❌ / Safari ✅

CSS: corner-shape

corner-shapeを使うと、角丸の形状を変えられるようになります。

近年デザインで用いられることが増えている「Squircle」（⁠通常の角丸より丸みを感じられる形状）も再現可能になります。

今まではSVGを使ったり、CSS上で複雑なマスクを定義する必要がありました。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

CSS: shape()

shape()は、クリッピングなどに使用するシェイプを定義できる関数です。

同じくシェイプを定義できるpath()関数はすでに存在していますが、shape()では各ポイントの座標を%で定義できるのでレスポンシブなシェイプ表現が可能になっています。

• Chrome系 ✅ / Firefox ❌ / Safari ✅

CSS: Anchor positioning

Anchor positioningを使うと、特定の要素を元に要素の位置決めをできるようになります。

これを使うと例えばツールチップのような、ほかの要素の位置に合わせてコンテンツを表示する実装が簡単になります。

Misskeyでは既に細かな部分で採用しています（あいにくFirefox非対応のため、全面的な採用は保留しています。注：本記事執筆直前にFirefoxでも基本的なサポートが入りました⁠）⁠。

• Chrome系 ✅ / Firefox ⚠️ / Safari ✅

CSS: Scroll anchoring

Scroll anchoringは、要素がページ途中に追加されてもスクロール位置がずれないように取り計らってくれる仕様です。

• Chrome系 ✅ / Firefox ✅ / Safari ❌

CSS: Scroll driven animations

Scroll driven animationsを使うと、スクロールに対応してアニメーションできるようになります。

奥行きがあるように見せるパララックスエフェクトがJavaScriptなしで実現できます。

• Chrome系 ✅ / Firefox ❌ / Safari ✅

CSS: Scroll triggered animations

Scroll triggered animationsを使うと、スクロールをトリガーとしてアニメーションの再生ができるようになります。

Scroll driven animationsと混同しないようにしてください。

違いとしては、Scroll driven animationsではスクロールが途中で止まるとアニメーションもそれに応じて途中で止まるのに対し、Scroll triggered animationsではスクロールが途中で止まってもアニメーションは最後まで再生できます。

出来立てホヤホヤの仕様でまだMDNの記事もありません。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

CSS: Container scroll state queries

Container scroll state queriesを使うと、スクロール状態に応じたスタイルを当てられるようになります。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

CSS: Container size and style queries

Container size and style queriesを使うと、CSS変数の値に応じてスタイルを設定できるようになります（style query⁠）⁠。

• Chrome系 ✅ / Firefox ❌ / Safari ✅

CSS: attr()

attr()自体は昔からありますが、content以外の箇所でも使えるようにする仕様は最近追加されました。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

CSS: Gap decorations

Gap decorationsを使うと、FlexレイアウトやGridレイアウトの要素間（gap）のスタイルを行えるようになります。

今までグリッド間に罫線を表示したければトリッキーな方法に頼るしかありませんでした。

Edge発の新しい仕様です。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

CSS: Grid Lanes

Grid Lanesを使うと、いわゆる「メイソンリーレイアウト（石積みレイアウト⁠）⁠」をCSSネイティブに実現できるようになります。

今まではJavaScriptライブラリが必要でした。

出来立てホヤホヤの仕様です。

• Chrome系 ❌ / Firefox ❌ / Safari ✅

API: Navigation API

Navigation APIは、History APIをSPA向けに強化したもので、ページ遷移がブラウザバックによるものかどうかなども検知可能になります。

History APIは使用する際のメンタルモデルが直感的ではなかったり、ブラウザナビゲーションの「戻る」や「進む」に応じたページのトランジションを行いたい時があったため筆者が切望していたAPIです。

• Chrome系 ✅ / Firefox ❌ / Safari ⚠️

API: Vibration API

Vibration APIは、触覚フィードバックを行えるようにするAPIです。

Safariでは本APIは非対応ですが、JavaScriptを使って触覚フィードバックを行わせること自体は（非公式的に）可能で、Misskeyでも実験的機能として利用できるようにしています。

例えばXではいいねボタンを押すと「コツッ」としたフィードバックが得られるように、適切に利用すると小気味よいユーザー体験を生みますので、PWAとしての利用時だけでも解禁されてほしいと思っています。

なお、より「触覚フィードバック」に特化したAPI（Web haptics API）を作ろうという動きもあり、筆者はどちらかというとこちらに期待しています。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

API: Battery Status API

Battery Status APIを使うと、バッテリー状態を取得できるようになります。

バッテリーが少ない状態では負荷の高いアニメーションを無効にするといった動作が可能になります。

現行の仕様ではフィンガープリンティングのリスクがあるようなので、こちらもPWAだけで使用できるなど仕様の改定は必要かもしれません。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

API: toDataURL

toDataURL自体はすべてのブラウザにありますが、webp出力に対応しているブラウザは限られます。

• Chrome系 ✅ / Firefox ✅ / Safari ❌

API: View Transition API

View Transition APIを使うと、ページ遷移の際にリッチなアニメーションを実現できます。

• Chrome系 ✅ / Firefox ⚠️ / Safari ✅

API: WebGPU

WebGPUは、WebGLの後継仕様で、より近代的にGPUを扱えるようになります。

レンダリング時のオーバーヘッドも減っているため、パフォーマンス向上も期待できます。

MisskeyではまだWebGLを使用していますが、趣味の別のプロジェクトでは早速WebGPUを活用しています。

• Chrome系 ✅ / Firefox ⚠️ / Safari ✅

API: Translator and Language Detector APIs

Translator and Language Detector APIsを使うと、ブラウザ上で、ローカルのAIを利用して文字列の言語の判定と機械翻訳を行えるようになります。

Misskeyには投稿の翻訳機能がありますが、これはサーバー側で外部の翻訳サービスにリクエストを行って実現していて、金銭的にもコストがかかります。

ユーザーのブラウザ上で翻訳が完結できればサーバーの負担をゼロにできますし、プライベートな内容を外部サービスに送信する必要もなくなるのでプライバシーも保護できます。

今のところChromeのみの対応ですが、Misskeyでは実験的機能として一足先に利用できるようにもしています。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

API: Web share target API

Web share target APIを使うことで、WebサイトをPWAとしてインストールしている状態でOSの「共有」を行った際に、共有先としてそのWebサイトが選択肢に表示できるようになります。

• Chrome系 ✅ / Firefox ❌ / Safari ❌

API: Declarative Web Push

Declarative Web Pushを使うと、ServiceWorkerを用意することなくWebプッシュの受信ができるようになります。

Misskeyではプッシュ通知のためだけに複雑なServiceWorker実装を持っているため、これが広く採用されれば実装を簡略化できますし、無駄がなくなるのでパフォーマンス向上も期待できます。

• Chrome系 ❌ / Firefox ❌ / Safari ✅

API: contextmenu event

contextmenu eventは、マウス操作では右クリックで当該イベントが発火しますが、iOSデバイスだと発火させる術がありません（デスクトップ版Safariでは実装されています⁠）⁠。

他ブラウザ同様、要素を長押ししたときに発火してほしいと思っています。

新しい仕様というわけではないですが、重要性が高い割にはまだ一部で実装されていないということで選びました。

• Chrome系 ✅ / Firefox ✅ / Safari ⚠️

120fpsレンダリング

近年は120fpsといった従来の60fpsより高速なフレームレートで描画できるデバイスが増えています。

そのようなデバイスでは、通常Webページのスクロールも120fps以上で行われ、非常に滑らかに描画してくれます。

しかし、SafariではCSSのトランジションなど、スクロール以外の描画に関しては意図的に60fpsに制限されています（実験的機能の設定で制限を解除することは可能⁠）⁠。

ネイティブアプリのUIはすべて120fpsなのにWebページだけ制限されているのは残念ですし、実際閲覧していても動作がスムーズではなく良い体験ではないので、ぜひ制限を撤廃してもらいたいものです。

なんらかの懸念があるのであれば、これに関してもPWAとしてインストールしたときだけ撤廃する等でも良いと思います。

• Chrome系 (不明) / Firefox (不明) / Safari ⚠️

おまけ: scrollend event

scrollend eventは、スクロールが終了したときに発火するイベントです。

Safariが最近対応したことで晴れて全主要ブラウザで対応となりました。

• Chrome系 ✅ / Firefox ✅ / Safari ✅

おまけ: Keyboard Lock API

Keyboard Lock APIは、任意のキーボードの入力をキャプチャできるAPIで、SafariがTechnology Preview 234で実装しました。

以前、UX上の懸念の声も聞かれたため、今のところ「ほしい」とは思っていませんが、最近Safariが実装した機能ということで紹介しておきます。

ゲーム等、インタラクティブなコンテンツには便利なのかもしれません。

• Chrome系 ✅ / Firefox ❌ / Safari ✅

おまけ: Digital Credentials API

Digital Credentials APIを使うと、プライバシーを守りながらWebサイト上で本人確認を行えるようになります。

一般的なWebサービスにおいて今まで本人確認は、身分証明書や自撮り写真をアップロードすることで行われてきましたが、本来不要な情報まで相手に送ることになったり、事業者側で適切に情報を管理する必要があるなどリスクがありました。

そうした問題を解決するためにW3Cによって専用のAPIが策定されました。

Misskeyでは今のところ本人確認機能はないため採用予定はありませんが、Webがより便利・安全になる機能ということで注目しています。

• Chrome系 ✅ / Firefox ❌ / Safari ✅

所感

すこし前までは、Safari（WebKit）は新しいWeb技術への追従が遅れていることから「現代のIE」などと言われていました。

しかしこうして見ても分かるように、近年はむしろ追従に積極的な姿勢に変わってきています。

それどころか、WebGPU、Declarative Web Push、CSS Grid Lanesといった新しい技術の仕様策定・実装も率先して行うようになってきています。

直近のInterop（ブラウザ間の相互運用性向上の取り組み）でも成果を強調していて、いちWeb技術者としてこの動きは歓迎しています。

筆者は今まで「AppleはWebをよりリッチにすることに対してインセンティブがないので消極的なのではないか」と穿った見方をしていましたので、この姿勢に転じたことは意外でした。

Edgeについても、中身はChromiumベースですが、Gap decorationsを発表したように、新しい仕様の策定にも意欲的です。

一方、FirefoxはChromeやSafariと比較して実装の遅れが目立っています（最近全ブラウザで対応されたものでも、Chrome、Safari、Firefoxの順で実装されたものが多いです⁠）⁠。

ChromeやSafariが実装していても、セキュリティ・プライバシー上の理由でFirefoxでは意図して実装が見送られているものも中にはありますが、単に開発が追い付いていないために未実装となっているものも多い印象です。

ChromeはChromeで、事業が売却されるという話もあったりなかったりしているので、そうなった場合今後の開発がどうなるのかは気になります。

まとめ

今回は一部のブラウザに実装されているWeb技術の中でも、筆者が実際に活用したいと感じているものをピックアップして紹介しました。

まだ実際のプロダクトで採用するのは難しいと思いますが、何か気になる技術はありましたでしょうか。

各ブラウザの公式開発ブログを見ると、最新の実装状況であったり実装スタンスをキャッチアップできますのでおすすめです。

そして今年2月にはInterop 2026が発表される予定ですので、こちらも動向に要注目です。