ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
Safari機能拡張の新機能
Safariの機能拡張の最新の改善点について紹介します。 新しいAPIについて説明し、Safariアプリ機能拡張のサイトごとの権限を確認し、機能拡張がプライベートブラウズと各プロファイルで適切に動作するための実装方法を共有します。
リソース
- Adding a web development tool to Safari Web Inspector
- Developing a Safari Web Extension
- MDN Web Docs - Web Extensions API
- Safari Release Notes
- Submit feedback
関連ビデオ
WWDC23
WWDC22
WWDC21
-
ダウンロード
♪ 心地よいヒップホップ音楽 ♪ ♪ こんにちはみなさん 「Safari機能拡張の新機能」へようこそ 私はDavid Johnson― Appleの Safari機能拡張エンジニアです 本日は Safari機能拡張の最近の開発について ユーザー体験の改善と 新しい機能を紹介します まず App Storeで利用できる 2,000を超える Safariの機能拡張を作成し 共有していただき ありがとうございます iOSでのSafari機能拡張の需要は 特に目を見張るものでした WWDC21で紹介されて以来 頻繁にApp Storeの トップカテゴリに入っています 機能拡張によりユーザーは macOS, iOS, and iPadOSで ブラウジング体験をカスタマイズできます Safari機能拡張は 4つのタイプがあります コンテンツブロッカーや Share Extension App Extension(アプリ拡張機能) および Web機能拡張です Safari 17はこれらすべてを 引き続きサポートしています しかし ブラウザのカスタマイズの未来は Web機能拡張にあります Appleは 他の主要なブラウザベンダーとともに Web機能拡張の標準化に取り組んでいます このコラボレーションは 互換性の向上と 開発を効率化し すべてのブラウザで 使い慣れたユーザー体験を 保証することを目的としています Appleは W3C WebExtensions Community Groupで他社と協力しながら 共同議長を務めています 他のブラウザ および拡張機能のデベロッパと連携して この標準化の取り組みを推進することで より強力で 統一されたWeb機能拡張のエコシステムを 構築しています 本日のトピックに入る前に SafariのWeb機能拡張に関する― 2つの重要な情報をお伝えします 1つ目は Safari 17は Manifest V2とV3の両方の機能拡張を 引き続きサポートします Manifest V3には 今後も新機能を追加していきますので 機能拡張に適切な場合は更新してください 2つ目は Web拡張機能は プラットフォームを超えて Safariの機能拡張を構築する 最良の方法です Web機能拡張を使用すると 単一の共有コードベースを使用して iOS iPadOS macOSそしてxrOS上の Safariの機能をカスタマイズできます つまりiOSとiPadOSで利用できる Web機能拡張は xrOSでも利用できるようになります xrOSのWeb機能拡張は 期待どおりに動作し スクリプトの挿入 バックグラウンドコンテンツの実行― ポップオーバーの表示など― iOSの機能拡張と 同じ機能を備えています 機能拡張がxrOSでの ブラウジング体験をどのように 改善するのか今後が楽しみです xrOS上のSafariについて詳しくは 「Meet Safari for xrOS」を ご覧ください 以上の発表が終わったところで― 本日の残りのセッションの内容を紹介します まず いくつかの新規および 更新されたExtension API と それらがSafari機能拡張を どう強化するのか詳しく説明しましょう 次に Safariアプリ機能拡張の サイトごとの権限について説明し ユーザーがさらにブラウジング体験を コントロールできるようにします 最後に Safariプロファイルと プライベートブラウジングの 両方との互換性を 確保する方法を見ていきます まずは 新しいExtension APIです コンテンツブロッカーは Webページを クリーンアップし 煩わしいものを除去し スクリプトの読み込みを ブロックする優れた方法です コンテンツブロッカーは JSONで定義されたルールを使用して どのWebサイトが訪問されたかという情報に アクセスすることなく― コンテンツをブロックまたは非表示にします Webページのコンテンツを宣言的に 非表示にするのは難しいかもしれません そのため コンテンツブロッカーは :has() セレクターをサポートします :has() セレクターは コンテンツ ブロッカーが 子要素に基づいて親要素を 正確にターゲットにすることができるため 非常に優れています このルールの例では クラス.postを持つ要素のうち― クラス.paid-promoを含む子要素を 持つものをすべて非表示にしています Webページのコンテンツを非表示にしたり ネットワークリクエストを ブロックしたりする機能拡張は 最も人気のある種類の機能拡張の1つです そのため Safariはユーザーに 安全でプライベートな ブラウジング体験を提供する 革新的で 効果的な機能拡張を作成するため サポートを続けています ネットワークリクエストの ブロックまたは変更を Web機能拡張で行いたい場合 Declarative Net Requestの 更新を確認してください Declarative Net Requestは Web機能拡張が ネットワークリクエストを ブロックおよび変更できる法を提供する 強力なAPIです コンテンツブロッカーと同様に 機能拡張はJSON形式でルールを提供し 残りはSafariが処理します 特にバッテリー駆動のデバイスでは 電力効率を高めることができます これらのルールは宣言的なので 拡張機能は ユーザーがアクセスする Webページにアクセスする必要がないため ユーザーのプライバシーと セキュリティが向上します Safari 16.4の Declarative Net Requestの 大きなアップデートの1つは 拡張機能でリクエストヘッダーを 変更できるようになった点です この例では example.comへの すべてのリクエストに対して― カスタムUser-Agentヘッダーを 設定するアクションを定義しました このアクションタイプは ヘッダーを設定するだけでなく 新しい値を追加したり 既存の値を削除したり あるいはHTTPリクエストから ヘッダーを完全に削除したりすることで ヘッダーを変更できます ネットワークリクエストの変更は 強力なツールですが いくつかの重要なポイントがあります まず マニフェストで declarativeNetRequest WithHostAccess許可を 宣言する必要があります Safari 16.4では リダイレクトアクションにも この権限が必要になりました 機能拡張には ヘッダーの変更や リダイレクトアクションを適用するため サイトごとのアクセス許可も 付与する必要があります これにより ユーザーはサイトごとに― データをコントロールできるようになります これらの点を考慮することで ユーザーに合わせた 体験を提供し― 強力かつプライバシーに配慮した― コンテンツブロック機能拡張を作成できます Declarative Net Requestを使用する― 機能拡張を構築している場合 ブロックしたリクエストの数を― ユーザーに知らせることができます 新しい― declarativeNetRequest .setExtensionActionOptions API― を使用し ブロックされた読み込みの数 などのアクション数を表示するよう バッジ テキストを設定できます この例では displayActionCountAsBadgeText オプションをtrueに設定します これが現在 このAPIの唯一のオプションです 機能拡張バッジは 実行されたアクションに基づいて 自動的に更新されます これにより ユーザーは閲覧履歴を非公開にしたまま― 拡張機能のアクティビティと効果を― 簡単にモニターすることができます 今回は 拡張機能の動作を よりコントロールできるようにする― スクリプトAPIの アップデートについて説明します registerContentScriptの APIセットを使用すると プログラムによって登録や更新 または削除が可能な コンテンツスクリプトを作成できます 特定のページや条件を指定して コンテンツスクリプトに 適用することができるのです この例では webkit.orgに一致するページに 挿入するスクリプトを登録しています このスクリプト登録は セッションをまたいでも持続されます この新しいAPIは 拡張機能マニフェストで定義された 静的コンテンツスクリプトを 補完するもので コンテンツスクリプトの管理が より柔軟になり 拡張機能に より高度な機能を 作成できるようになります Safari 16.4ではWeb機能拡張に セッションストレージ領域である 新しいストレージ領域も追加されました セッションストレージへの データの保存と取得には 他のストレージ領域と同じ 使い慣れた機能が使用されます このAPIを使用すると ブラウザ セッション中に データをメモリに保存できます 非永続的なバックグラウンドページの 読み込みの間に データにアクセスするための 高速かつ効率的な方法を提供します ローカルストレージとは異なり― セッションストレージは ディスクに永続化されず Safariが終了するとクリアされます そのため セッションストレージは 復号化キーや認証トークンなど ローカルストレージに保存すべきでない― 機密データやセキュリティ関連データの 保存に有効です 最後に 機能拡張のさまざまなUI要素に 適切なアイコンサイズを用意するのは 面倒なことだと思います そのため Safari 16.4 以降では どのサイズでも美しく見える― 単一の SVGアイコンを 作成できるようになりました Safariは機能拡張のアイコンの サイズ調整を適切に行なってくれるので デベロッパはその他の事項に集中できます これらのAPIアップデートは 今年のSafari機能拡張の 改善の一部にすぎません では Safariのアプリ機能拡張と サイト単位の権限を説明します Web機能拡張による サイトごとの権限について すでに詳しい場合は アプリの拡張機能でも 同じように機能します ユーザーは Webサイトを閲覧する際に 拡張機能に Webサイトへのアクセスを許可できるため― プライバシーとコントロールが強化されます 機能拡張が初めて有効になったときは ユーザーがアクセスする どのサイトにもアクセスできません 機能拡張が 初めてページにアクセスしようとすると Safariは機能拡張の ツールバー項目にバッジを付け― 機能拡張が現在のページへの アクセスを求めていることを ユーザーに警告します ユーザーが このツールバーの項目をクリックすると その拡張機能が持つ アクセス権の情報が表示され 「1日だけ許可」または 「常に許可」の オプションが与えられます 権限が付与されると 機能拡張のツールバー項目が色付きになり 機能拡張が現在のページに アクセスできることを示します Safari 17にアップグレードし すでにSafariアプリの拡張機能を 有効にしている人は それらの拡張機能に関する すべての権限が移行されます また プライバシーを強化する オプションを提供する バナーも表示されます 「Webサイトごとに確認する」を選択すると すべてのSafariアプリ機能拡張 の権限がリセットされ ユーザーは アクセスする各サイトへのアクセスを 機能拡張に許可できます Safari 17では この変更をサポートするために採用する― 新しいAPIはありませんが 時間をかけて機能拡張の前提条件を確認し Safari 17で機能拡張が どのように動作するかテストしてください ユーザーは すべてのSafariアプリ機能拡張が アクセスできるWebサイトを 完全にコントロールできます ユーザーが許可を与えると 機能拡張は自動的に サイトにアクセスできるようになります 許可はいつでも付与または 取り消すことができます すべての機能拡張で ツールバーの項目が デフォルトで表示されるようになりました Safariで機能拡張のアイコンが どのように表示されるかを確認して 適切に色付けできる― PDFベクターアイコンを提供します 最後に プロファイルと プライベートブラウジングの両方での 機能拡張の動作に関する アップデートについて説明します Safari 17では ユーザーは他のブラウジングコンテキストで 拡張機能をオフにすることなく プライベートブラウズウインドウと タブにアクセスできる― 機能拡張をコントロール できるようになります スクリプトを挿入したり ユーザーがアクセスしたページの情報を 読み取る機能拡張は デフォルトではオフになっています しかし コンテンツブロッカーのような コンテンツにアクセスしない― 機能拡張は プライバシーに関する 追加の懸念がないため― 自動的に プライベートブラウジングで許可されます これは macOSのSafari設定の アップデートされた拡張機能ペインで iOSでも同様のアップデートがあります プライベートブラウジングで この拡張機能を許可する― 新しいオプションがあります 機能拡張が有効になっている場合 Safariの設定からワンクリックで その機能拡張がプライベートブラウジングに アクセスできるようになります ブラウジングデータを 分離するためのものです プロファイルには 個別の履歴や Cookie― およびWebサイトのデータが含まれます ユーザーは プロファイルごとに どの機能拡張を有効にするかを 選択することもできます これには 新しいタブページ機能拡張が含まれます もちろん これらの設定は iCloudを通じてユーザーのすべての iPhone iPad Macで同期します Safari設定の機能拡張ペインも アップデートされ 拡張機能が有効なプロファイルが リストされるようになりました ここではSea Creator機能拡張が 職場プロファイルと学校プロファイルの 両方で有効であることがわかります 拡張機能がプロファイルで有効になると その拡張機能の まったく新しいインスタンスになります つまり 各インスタンスは異なるUUIDと バックグラウンドページ― そしてストレージを持つことになります ただし サイトごとの権限は プロファイル間で共有されます つまり ユーザーは 拡張機能にアクセスを 1度許可するだけで済みます プロファイルで実行する場合― 拡張機能は そのプロファイルに関連する ウインドウ タブ― およびその他のデータにのみ アクセスできます 機能拡張が ネイティブホストアプリと通信する場合― アプリが複数のプロファイルから メッセージを受信することを予期し それらのプロファイル間の データの分離を尊重していることを 確認してください beginRequest(with context)の 呼び出しをアプリが受けると userInfoディクショナリを デコードします 機能拡張がプロファイルで有効な場合― キ―SFExtensionProfileKeyの プロファイル識別子の値が存在します 拡張機能にはプロファイルごとに 固有のインスタンスがあるため そのバックグラウンドコンテンツを 個別に検査することができます Safari 17の開発メニューから Web機能拡張バックグラウンド― コンテンツのメニュー項目に移動し 機能拡張ごとにグループ化された バックグラウンドページと サービス ワーカーを 確認できます 各機能拡張には プロファイルごとに 検査可能なコンテンツがリストされます 今年のSafariデベロッパ向け機能の 改善の詳細については 「What's new in Web Inspector」と 「Rediscover Safari developer features」をご覧ください 要約すると SafariはWeb機能拡張を標準化し 革新的で効果的な機能拡張を作成するための 新しいAPIを 提供することに取り組んでいます WECGのディスカッションにぜひ参加し Web機能拡張の未来の形成に ご協力いただければ幸いです アプリ拡張機能に対するサイトごとの権限と :has()セレクターなどの 新機能のサポートにより ユーザーに安全でプライベートな ブラウジング体験を 提供する拡張機能を作成できます これらの新機能を活用し プロファイルとプライベート ブラウジングの両方で 適切に動作するように 機能拡張を アップデートすることを忘れないでください 最後に Safari 17で 拡張機能をテストするときに フィードバックアシスタントを介して フィードバックをお送りください ご視聴ありがとうございました WWDCをお楽しみください ♪
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。