Safari

WWDC26:Safari 27とWebKitの進化

※本サイトは、アフィリエイト広告および広告による収益を得て運営しています。購入により売上の一部が本サイトに還元されることがあります。

Safari 27用WebKitの新機能

Safari 27用WebKitの新機能

Appleが、WWDC26において「Safari 27用WebKitの新機能」を公開しています。

ウェブ開発者にとって、ブラウザごとの挙動の差異やバグに対する「ワークアラウンド(回避策)」の実装は、避けては通れない苦行でした。特にSafariにおいて「この機能さえ意図通りに動けば……」と、特定ブラウザ向けのコードを書き足す瞬間の虚しさは、誰もが共感するところでしょう。

しかし「Safari 27」(WebKit)の登場は、その歴史の転換点となります。

今年のWebKitチームは、単に流行の新機能を追加することよりも、「既存機能の品質向上」に比類なき情熱を注ぎました。

実はこの「クオリティ重視」の動きは、先行するSafari 26.xのサイクルから着々と積み上げられてきたもので、開発者が長年抱えてきた「ブラウザの限界」という常識を、WebKitがいかにして塗り替えたのか。その裏側にある技術的進化を深掘りします。

16ビットの壁を突破:絵文字化けを解決した「賢すぎる」回避策


互換性の確保

互換性の確保

長年、ウェブには「16ビットの壁」という深刻な問題が潜んでいました。JavaScriptで古くから使われている fromCharCode メソッドは、16ビット以下のデータしか扱えません。しかし、近年の複雑な絵文字は17ビット以上のデータを必要とします。

その結果、データが16ビットに「切り捨て(Truncation)」され、意図した絵文字が全く別の無関係な文字へと化けてしまう現象が多発していました。

WebKitチームはこの問題に対し、世界中のサイトに修正を強いるのではなく、ブラウザ側で解決するという独創的なアプローチを採りました。

「WebKitは、コードポイントが16ビットを超える文字が入力された際、ウェブサイトに数値を送るのを完全にやめました。代わりに、絵文字をそのまま『テキスト』として送るようにしたのです。数値ではないため切り捨てが発生せず、今や誰もが、どのサイトでも『顔を覆って泣く絵文字(face holding back tears)』を思い通りに入力できるようになりました」

この「数値を介さない」という英断により、レガシーなコードを抱えるサイトでも、最新の表現力が守られるようになったのです。

自作セレクトボックスからの解放


Customizable Select

Customizable Select

HTMLの select 要素のカスタマイズは、ウェブ開発における長年の「聖杯」でした。デザインを統一するために、アクセシビリティを犠牲にしてまで複雑なJavaScriptライブラリを導入し、自作UIを構築してきた「負の歴史」に、ついに終止符が打たれます。

Safari 27で導入される Customizable Select は、appearance: base-select を適用するだけで、その可能性を劇的に拡張します。

・真の自由度
picker 擬似要素によってメニュー全体のスタイルを、さらに picker-icon や check-mark といった新しい擬似要素によって細部までCSSで制御可能です。
・レイアウトの革新
select 内に画像や詳細説明を配置できるだけでなく、GridやFlexboxを使ってオプションのレイアウトを組むことさえ可能になりました。
・堅牢な基盤
完全にカスタムな見た目を実現しながら、標準のフォームコントロールが持つアクセシビリティと信頼性をそのまま享受できます。

JavaScript不要:CSS Grid Lanesで実現する純粋なメイソンリーレイアウト


Grid Lanes

Grid Lanes

これまで「メイソンリー(レンガ状)レイアウト」を実現するには、高価な「JavaScript税」を支払う必要がありました。しかし、Safari 26.4から導入が始まった CSS Grid Lanes は、この複雑な配置を純粋なCSSだけで完結させます。

gridlanes.webkit.org のデモを見れば、その実力は一目瞭然です。特筆すべきは、開発者の体験(DX)を劇的に向上させるWeb Inspectorの進化です。

・視覚的なデバッグ
要素の「順序番号(order numbers)」を表示し、構造を即座に把握できます。
・フローの制御
ユーザーがタブキーで移動する際の挙動を決定する「フローの許容範囲(flow tolerance)」を微調整でき、アクセシビリティの高い体験を直感的に構築可能です。

パフォーマンスを犠牲にすることなく、デザインの自由度を手にする。これこそがモダンウェブの進むべき道です。

Webの3D革命:モデル要素とVision OSへの没入体験


HTMLに 3Dモデルを組み込み

HTMLに 3Dモデルを組み込み

ウェブはついに、2次元のスクリーンの外へと踏み出します。新要素 <model> は、<img> や <video> と同じ手軽さで3Dコンテンツを埋め込むことを可能にします。

特にVision OSとの連携は、ECやエンターテインメントのあり方を根本から変える可能性を秘めています。 例えば、劇場のチケット予約サイトを想像してください。ユーザーは <model> を通じて、自分が予約しようとしている「座席からの眺め」を、まるでその場にいるかのような没入型環境(Immersive website environments)で確認してから購入できるのです。

source タグによる複数フォーマット対応や、JavaScript APIによる制御など、<model> はウェブの次元を文字通り一つ引き上げる武器となるでしょう。

Safari Web 拡張機能のパッケージ化と配布


Safari web extension packager

Safari web extension packager

ブラウザ拡張機能の開発において、最大の障壁は「Macを持っていなければSafari対応ができない」というハードウェアの制約でした。WebKitはこの「Mac税」を取り払い、真の相互運用性を実現しました。

新登場の「Safari web extension packager」により、XcodeやMacを持たない開発者でも、使い慣れたブラウザから App Store Connect に直接アクセスし、Safari向け拡張機能をパッケージ化・配布できるようになります。

「一つのコードベース、一つのマニフェスト」という理想が、ついに現実のものとなったのです。

品質の再定義がもたらすウェブの未来

今回のアップデートの真の衝撃は、個々の新機能以上に、WebKitが積み上げた 「1,400項目以上の機能改善とバグ修正」 という圧倒的な数字にあります。これはチームにとって過去最高の記録です。

彼らは、20年以上使われてきた「ブロックおよびインラインレイアウト」 エンジンをゼロから書き直し、蓄積された技術的負債を解消しました。

また、W3CのSVGワーキンググループを再始動させ、SVG2におけるFX/FY属性の曖昧さを排除するなど、ウェブ標準そのものの品質向上をリードしています。

「ブラウザの限界だ」と諦めていたことは、実はもう過去の話かもしれません。

ブラウザがあなたの最高のパートナーとなった今、あなたならどの「不可能」を最初に形にしますか? WebKitの進化は、あなたの想像力を解き放つ準備が整ったことを告げています。



Google で優先するソースとして追加

関連記事

この記事のハッシュタグ から関連する記事を表示しています。

新着記事