Safari 27用WebKitの新機能

こんにちは！Jen Simmonsです WebKitに関する 最新情報をお届けします。 WebKitはSafariを支える ウェブブラウザエンジンです。 WebKitとSafariのチームは 今年も精力的に活動してきました。 取り組んできた内容を 皆さんと共有できることを嬉しく思います。 ウェブサイト、ウェブアプリ、 ウェブコンテンツを制作する皆さんへの 影響についてもお話しします。 すでに多くの新しいウェブ技術を リリースしています。 CSS Grid Lanesを含む Navigation APIや Largest Contentful Paintなど、多数あります。 Safari 27の最初のベータ版には 60以上の新機能が追加されています。 Customizable Selectや img sizes=autoなどが含まれます。 レイアウト用のstretchキーワードなど さらに多くの機能があります。 このセッションの後半では 最も注目すべき新機能を 5つご紹介します。 CSS Grid Lanesの可能性を ぜひご覧ください。 Select UIのカスタマイズ方法を学び、 Model Elementが ウェブにもたらすものを探求し、 さらに多くをご覧いただけます！

しかしまず、ウェブ開発者の皆さんが 最もワクワクするであろうことは 私のチームが今年 WebKitの品質向上に注いだ取り組みです。 ウェブ開発者の皆さんから 苦労されていると聞いています。 私たちのブラウザエンジンの問題を 回避しなければならない場合です。 皆さんはより多くを期待しています。 その声は届いています。 そこで私たちは 品質を大幅に向上させることを 既存のウェブプラットフォーム機能において 目指しました。 今年はそこに集中し、 まったく新しい機能を 大量に実装することより 優先しました。 これまでの成果を振り返ると、 いくつかの明確なテーマが 浮かび上がります。 それぞれから一つずつ 簡単にご紹介したいと思います。 まず、互換性についてです。 この取り組みの大部分は ユーザーに直接影響することに 重点を置いています。 実際のウェブサイトが 実際のユーザーに正しく動作すること。 皆さんのユーザーは 私たちのお客様でもあります。 そして、素晴らしい体験を していただきたいと思っています。 チームに特定のウェブサイトについての 報告が届きました。 ユーザーが絵文字を入力すると、 まったく違う文字が表示されてしまいました。 なぜでしょうか？ 通常、ユーザーがキーを押すと、 ブラウザはUnicode番号を ウェブサイトに送信します。 このAの番号は 7ビットのデータを使用します。 一部のウェブサイトでは キーボード入力を JavaScriptで処理するために インターセプトしたいと考えています。 何十年もの間、ウェブサイトは .fromCharCodeメソッドを使用して それらの数値を 文字に変換してきました。 .fromCharCodeは 16ビット以下のデータを処理できます。 長い間、Unicodeが成長しても それで十分でした。 しかし、多くの絵文字が登場しました。 これらの新しい文字には より大きな番号が割り当てられました。 この文字には17ビットが必要です。 .fromCharCodeをまだ使っている ウェブサイトではその番号が切り捨てられて 16ビットになります。 それがまったく異なる文字に マッピングされてしまいます。 では、どうすべきでしょうか？ すべてのウェブサイトに .fromCharCodeの使用をやめるよう求める？ それは現実的ではありません。 ユーザーは今すぐ絵文字を入力したいのです！ そこで私の同僚たちは 巧みな回避策を採用しました。 ユーザーが16ビットを超える コードポイントの文字を入力すると、 WebKitはその番号を ウェブサイトに送信しません。 絵文字はテキストとして届きます。 番号なし、切り捨てなし。 これで誰でも 「涙をこらえる顔」の絵文字を どのウェブサイトでも入力できます。 これは私たちがユーザーを直接助けるために 行った多くの変更の一例です。 しかし、ウェブ開発者としては 仕事をもっと楽にしたいですよね。 私のチームはまた、WebKitの 基盤を再構築する作業も行っています。 いくつかの領域で。 時には技術的負債を解消するために ゼロから始めなければなりません。 この深層での作業は 表面上は見えないかもしれませんが、 これらの基盤の上に構築された すべてのものをより信頼性の高いものにします。 一例として：block-in-inlineレイアウトがあります。 ブロック要素がインライン要素の中に ネストされることは頻繁にあります。 このようなレイアウトを処理するコードは 20年以上経過していて、 複雑に絡み合い メンテナンスが困難になっていました。 そこで新しいアーキテクチャアプローチで ゼロから書き直しました。 おそらく気づかないでしょうが、 この作業で多くの問題が修正されました。 私のチームはまた、特定の領域で 大きな進歩を遂げるために深く取り組んでいます。 メディアとビデオ再生、スクロール、 SVG、アクセシビリティ、WebRTC、 HTMLテーブルさえも！ これらの各領域には 異なるアプローチが必要でした。 SVGを例に取ってみましょう。 真の進歩を遂げるには、 ウェブ標準に より明確さと詳細さが 必要でした。 しかし、活動中の SVGワーキンググループがありませんでした。 そこで私のチームメンバーが その道を加速させました。 新しい標準化活動を 復活させてリードすることで。 例えば、ウェブ開発者が 放射状グラデーションのSVGを作成し、 fxとfy属性で 焦点を明示的に定義しない場合、 何が起きるでしょうか？ SVG 1では、fxとfyの 初期値を説明する仕様のテキストが 曖昧で、 ブラウザごとに 異なる解釈がされていました。 今、SVG 2では すべての曖昧さが取り除かれました。 初期値が明確に定義されています。 Safari 27でWebKitを更新しています。 これまでにSVGに75以上の 改善を加えており、 まだやるべきことが確実にあります。 私のチームが取り組んでいる 多くの改善は ウェブ標準への より良い準拠を目的としています。 長く使われてきたウェブ技術の 相互運用性を強化するため、 そして新機能の進化に 追いつくためでもあります。 新しいものとして： CSS random関数があります。 これはランダムな値を 生成するのに使用できます。 このコードで、widthとheightに ランダムな長さが設定されます。 ランダムな値に名前を付けて 再利用できます。 しかし当初、名前は インスタンスごとにスコープされていました。 boxクラスが呼び出されるたびに 新しいランダム値が計算されました。 randomはSafari 26.2でリリースしましたが、 その後、開発者たちからもっと改善できる のではないかという意見が出ました。 CSSワーキンググループでの 議論の後、 これらの名前はデフォルトで グローバルに再定義されました。 今では、これらすべてのボックスが 同じランダムなサイズになります。 Safari 26.5で 名前のスコープを更新しました。 私たちはまだ唯一サポートしているブラウザなので 改善する余地がありました。 Anchor PositioningやView Transitionsなど 最近の変更に追いついています。 そして 古い機能も 強化しています。 ウェブ標準にさらに合致させるための 更新が数百件あります。 どのブラウザでも動作するウェブサイトを より簡単に作成できるようにしたいと考えています。 そして5つ目の改善領域は： 統合です。 多くの改善により、個別の機能が 正しく連携して動作するようになります。 2014年に、WebKitはHTMLの sizes属性のサポートをリリースし、 レスポンシブ画像を 実現しました。 2018年には、CSSのmin()関数と max()関数のサポートをリリースしました。 しかし、その際に なぜかsizes内でのmin()とmax()の サポートの実装を 見落としてしまいました。 この問題を報告してくださった 開発者の皆さんに感謝します。 2020年にclamp()が登場した時も 同様に対応しませんでした。 今年はこれを振り返り Safari 26.4でギャップを埋めました。 これらは私たちが見つけて修正し続けたい と思っている問題の種類です。 私たちは、人々が私たちのプラットフォームで ウェブを利用するときの体験を 深く大切にしています。 ブラウザエンジンは巨大で、 私たちは開発者からの フィードバックと貢献に頼って 問題点を特定し、 優先事項を決めています。 App Store内の数百万のアプリが ウェブ技術を活用しており、 WebKitとJavaScriptCoreに組み込まれています。 iOS、iPadOS向けのアプリを含め、 macOS、visionOS、そしてwatchOSまで！ 私たちはウェブを大切にしています。 そして、私たちの取り組みが皆さんの成功に 本当の違いをもたらすことを心から願っています。 この取り組みにより、昨秋以来 1100件以上の機能改善に 取り組むことができました。 これは私たちの記録です。 ぜひプロジェクトをテストしてみてください。 最新バージョンのSafari Technology PreviewまたはSafari betaで。 問題が発生している場合は issueを報告してください。 まだやるべきことがあることはわかっています。 品質向上の取り組みについて いくつかの例しか紹介できませんでした。 詳細については Safariリリースノートをご確認ください。 品質改善は今年のチームの 大きな取り組みの一部ですが、 それだけではありません。 本当にエキサイティングな 新機能もリリースしました。 このセッションの残りでは いくつかをご紹介します。

まずCSS Grid Lanesから。 Safari 26.4でリリースされました。 純粋なCSSで古典的な マソンリーレイアウトを作成できます。 JavaScriptは不要です。 これまで考えたことがなかった ユースケースにも対応できます。 コードはシンプルで、CSS Gridの トラック定義のすべてのパワーを含んでいます。 そして、逆方向でも動作します！

gridlanes.webkit.orgにある Grid Lanesのフィールドガイドをご覧ください。 さまざまな設定をクリックして 動作を体験し、 多くのデモを探索してください。 Safari Web Inspectorを使って レイアウトをよりよく理解して調整しましょう。 Order Numbersを有効にして アイテムの順序を確認できます。 flowtorleranceを調整して コンテンツをタブで移動する際の ユーザー体験を 洗練させるのに非常に役立ちます。 「Learn CSS Grid Lanes」を視聴して、 Brandonがレイアウトの作成方法を 詳しく説明しています。

Customizable Selectも ウェブにやってくるエキサイティングな機能です。 Safari 27は 要素を変革します。 ウェブサイトやウェブアプリに合わせた 完全カスタムデザインを これまで以上に簡単に実装でき、 優れたアクセシビリティが 自動的に提供されます！ まず、appearance: base-selectを CSSで要素に 適用するところから始めます。 すぐにコントロールはフォントファミリーを含む より多くのCSSを継承し始めます。 テキストカラーや背景カラーも含みます。 また、新しい::pickerという 疑似要素にもappearance: base-selectを適用します。 これにより、ユーザーがコントロールをタップしたときに ポップアップするオプションメニューを スタイリングできるようになります。 他の新しい疑似要素により コントロールの特定の部分を ターゲットにできます。 ::checkmarkや::picker-iconなどです。 内に追加の HTMLを追加できます。 詳細を説明するサブテキストや 各オプションを表す画像などです。 実際のHTMLフォームコントロールを使用する メリットを活かしながら、 アクセシビリティと堅牢性を備えています。 GridやFlexboxを使って オプションをレイアウトしたり、 CSSを駆使して従来のドロップダウンメニュー とはまったく異なる外観にすることも可能です。 Timが「Rediscover the HTML Select Element」 セッションで詳しく教えてくれます。

昨年、visionOS用Safariに 新しいHTML要素をリリースしました。 Safari 27では、が iOS、iPadOS、macOSにも登場します。 、、と並んで メディアファイルを扱う 要素ファミリーに加わります。 今回はHTMLに 3Dモデルを組み込みます。 ウェブサイトにモデルを追加することで、 ユーザーが商品を確認したり、 オブジェクトを空間でプレビューしたり、 クールな体験を楽しんだりできます。 マークアップは期待通りの方法で動作します。 シンプルに保つこともでき、 他のメディア要素と同様に を使って 異なる形式の複数の ファイルにリンクできます。 オプションでenvironmentmapなどの 属性を含めて モデルにカスタム照明を 提供できます。 またはstagemodeを使って デフォルトのインタラクション動作を設定できます。 JavaScriptでモデルをターゲットにして 幅広い可能性を開くことができます。 またはでモデルを囲んで iOS & iPadOSのユーザーが 商品を自分の空間で 体験できるようにします。 3Dモデルの作成と使用については さらに多くのことが developer.apple.comで確認できます。 何年分ものドキュメント、 動画、サンプルプロジェクトが 可能性を詳しく説明しています。 「Get started with HTML Model Element」を 視聴して詳細を学んでください。 Alekseiが3Dモデルの入手方法、 ウェブ向けの最適化方法、 JavaScriptでの操作方法を説明します。

visionOS 27では、は 没入型ウェブサイト環境でさらに進化します。 ユーザーはSafariでウェブサイトにアクセスし、 タップして没入型環境を開き、 提供するモデルの中に入ることができます。 没入型ビデオゲームを作った場合、 潜在的な顧客がプレビューできる 方法を提供できます。 サイトで劇場のチケットを販売しているなら、 任意のプラットフォームで 席からの眺めを見せることができ、 visionOSでは 劇場全体を体験できます。 モデルを操作するための 新しいImmersive APIがあります。 Fullscreen APIと同様に動作します。 詳しくは 「Explore immersive website environments in visionOS」を視聴してください。 Jeanが劇場をどのように作ったかを 紹介してくれます。

そして、Web Extensionsについてです。 少し前まで、ブラウザ拡張機能を作るには 各ブラウザ向けに 完全に別々のプロジェクトを作成する必要があり、 コードも使用するAPIも異なりました。 それが多くの拡張機能が 1つのブラウザしか対応しない理由でした。 2017年頃から状況が変わり始めました。 MozillaがFirefoxアドオンの サポートを廃止し、 クロス互換性のある 未来にコミットしました。 2020年にSafari 14が Safari Web Extensionsのサポートをリリースしました。 そして2021年には、 W3C WebExtensionsコミュニティグループの 設立を主導し、 これらのアイデアを 公式ウェブ標準にする取り組みを始めました。 今日、相互運用可能な 拡張機能の未来という夢が現実になりつつあります。 1つのコードベースで 拡張機能を作成でき、 1セットのスクリプト、1つのマニフェスト。 すべてが相互運用可能なHTML、 CSS、JavaScriptで、 ウェブの他の部分と同様です。 各ブラウザのユーザーに 拡張機能をパッケージ化して 配布する方法を知っているだけで OKです。 しかし、Xcodeを使わない場合や Macがない場合でも、 どうやってSafariユーザーに 拡張機能を配布できるのでしょうか？ 今なら、Safariウェブ拡張機能 パッケージャーを使用できます。 これにより、App Store Connectを使って 拡張機能をパッケージ化して配布できます。 どのウェブブラウザからでも、 どのオペレーティングシステムでも。 今日、Safariユーザーへのリーチが これまで以上に簡単になりました。 developer.apple.comのドキュメントを読んで 方法を学べます。 「Create web extensions for Safari」を 視聴してKiaraが案内してくれます。 ゼロからウェブ拡張機能を 構築する方法、 そしてApp Store Connectの 使い方もわかります。

最後に、MapKit JSについて 簡単にご紹介したいと思います。 これはウェブサイトやウェブアプリに インタラクティブなマップを 埋め込むためのツールです。 ユーザーのプライバシーを 保護しながら。 すべてのブラウザ、あらゆる オペレーティングシステムで動作します。 詳細はdeveloper.apple.comで ご確認ください。

チームは今年たくさんの仕事をしました。 WebKitは改善で いっぱいです。 これらの取り組みが皆さんの仕事を より充実したもの、より成功したもの、 より簡単なものにし、 そして、もっと楽しいものに なることを心から願っています！ webkit.orgのウェブサイトをご覧ください。 Safariのすべてのリリースにある 新機能についてすべて学べます。 Safari 27の内容について さらに詳しく学んだり、 ウェブ技術についての他のWWDCセッションを 視聴して深く掘り下げたり、 bugs.webkit.orgでissueを 報告することができます。 皆さんからのご意見をお待ちしています。 そして、ウェブ上でプロジェクトを作る皆さんの 仕事をどうサポートできるかを 知りたいと思っています。 ご視聴ありがとうございました！