iOSにおけるSafari Web Extensionについて

♪ ♪ 今日は “iOSにおけるSafari Web Extension について” にようこそ 私はデービッド・ケサダ Safariチームのエンジニアです 今日はiOS 15の Safari Web Extensionを ご紹介します Web Extensionとは 強力なブラウザExtensionで ブラウジングを とても多様に カスタマイズできます 標準のWeb技術である HTMLやCSS JavaScriptで構築できます WebExtension APIは以前から 主要ブラウザで使われており いったん作れば それら全ブラウザにデプロイし 多くのユーザーに届けられます そして Web Extensionが iOS 15に来ることで さらなるユーザーに 広がります ではSafari Web Extensionの デモを iOS上でお見せします Sea Creatorという Extensionです 元はMacのブラウザ用 ですが iOSに移植すべく 準備してきました このExtensionは 海の生物の

豆知識を表示し 海の生物の名前を絵文字化し 読み物を楽しくします iPadで見てみましょう Sea Creatorを入れて Safariで開きます Safariで記事を 閲覧中に― Sea Creatorを 開き― 絵文字でページを 楽しくしたいと思います アクションメニューを開き― 新しいExtensionリストを開くと― 使えるExtensionが 一覧でき Sea Creatorもあります ではオンにします Sea Creatorの もう一つの機能は もっと目立ちます カスタムページが 新規タブに表示されます 後ほど見てみましょう アクションメニューで Sea Creatorをオンにし すぐ使えます このときSafariは Sea Creatorが サイトにフルアクセスして いいか確認します このパーミッションは Macと同じモデルを iOSに入れています ユーザーがExtensionの アクセスを完全管理できます 詳細は後ほど まずSea Creatorを 動かしてみましょう このように 文字を絵文字に 変換しました 私が見たい通りです ポップアップでは 累計で 変換した単語数が 表示されます このページだけでなく Sea Creatorは このサイト全体で使えます 他のページに遷移しても Sea Creatorが 絵文字を入れます 再度Extensionを 開かなくても 一度始めれば使えます Sea Creatorには もう１つ機能があり 新規タブを開くと この派手なページで 今日の豆知識が表示 今日はヒトデです ここでもカウンタが 変換した絵文字数を 表示します クールです 以上Sea Creatorを iOSでお見せしました このセッションでは iOSでのSafari Web Extensionの 作成方法をお伝えします Sea Creatorを 例として 既存のExtensionを iOSへ 少しの変更で移植します ブラウザExtensionを 書いたことがなくても大丈夫 Web Extensionの仕組みを 概説し その作成方法を 説明します デバッギング方法と Extensionを より良いものにする ベストプラクティスを解説します 最後に プライバシーについて パーミッション モデルとの関係を お話します 最初に Web Extensionを作るところです iOSで動くものをです その仕組みを 見てみましょう Safariでは Web Extensionは Appの一部です Web Extensionの インストールすることとは Appのインストールすることです 他のiOS Appと同様 Safari Web Extensionも App Storeにあります XcodeにはExtensionの 出荷に必要な全てがあります iOSのSafari Web Extensionを 作る際は 次の３つのどれかに あてはまるでしょう １つは最初から 作る場合 または別のブラウザ用の Extensionを Safariに移植する場合 またはすでに Safari Web Extensionが Mac用にあり iOSに移植する場合 それぞれのケースを 説明します まず新たに Web Extensionを作る場合 Xcodeのテンプレートで とても簡単に作れます 新規プロジェクトを作り Safari Extension App テンプレートで Web Extensionと それを内包するAppも作れます テンプレートによって 典型的なWeb Extensionに必要な 全てのリソースとともに Extensionを用意できます これを出発点として そこにあるものを カスタマイズし 必要に応じて パーツを取捨選択します 次に 他のブラウザ用の Web Extensionが ある場合 Safari Web Extension Converter が使えます Xcodeプロジェクトを 既存のExtensionから作れます コマンドで コンバーターを走らせ 既存のExtensionのリソースの パスを指定すると 新しいXcodeプロジェクトが 出来上がります これでExtensionがネイティブAppに パッケージされます Xcode 13では Safari Web Extention Converterは iOSとmacOS両方に デフォルトで対応します 新規プロジェクトは デフォルトで 既存のExtensionの リソースを コピーでなく 元のパスから参照します 最後にすでに Xcodeでの macOS用 Safari Web Extensionがある場合 コンバーターで iOSにも対応させられます コンバーターで “—rebuild-project” オプションを指定し Xcodeプロジェクトへの パスを入れます するとコンバーターが プロジェクトに iOS対応のExtensionと それを内包するAppを追加します 実際にコンバーターが 動くところを Sea Creatorの iOS対応を例に見てみます

Sea Creatorの Xcodeプロジェクトです MacのSafari用でして Macのみ対応なので 直したいと思います ターミナルを開き xcrun safari-web-extention-converter とタイプし “—rebuild-project” オプションを使い Xcodeプロジェクトの パスを入れ コンバートします 既存のプロジェクトについて 詳細の確認があり クロスプラットフォーム版で 上書きするか聞かれます コンバーターを走らせると 互換性の問題を 指摘してきます ここで 警告してきたのは 永続的な バックグラウンページ iOS非対応の部分です 後で直します でもまずは コンバーターを動かします

完了すると プロジェクトが開きます iOSとmacOS両方の AppとExtensionの フォルダがあります 共有Extensionグループで リソースフォルダを 見てみます ここにSea Creatorの コアがあります Web Extension APIが 初めての人へ 後で言及するので これらパーツを 紹介します まずmanifest JSONファイルで Extensionの構造を 記述します 重要な情報である Extensionの名前や アクセスするWebサイト 対応する機能 つまり さっき見たような ポップアップや 新規タブなどです 次にバックグラウンド スクリプト Extensionが有効なとき ブラウザが バックグラウンドで 動かすことで ブラウザや他のパーツの 様々なイベントを Extensionが聞き取れます Sea Creatorは バックグラウンドで ページに表示した 絵文字数を数えています 次に別のスクリプト コンテンツスクリプトです ブラウザはこれを 自動的に ユーザーが行くページで 走らせます Extensionにはいくつも コンテンツスクリプトがあり manifestで どのページで どれが動くか指定します このスクリプトにより Extensionは ページを直接操作し カスタマイズできます Sea Creatorの コンテンツページは実際 生き物の名を絵文字に 置き換えます その後メッセージを バックグラウンド スクリプトへ 送ることで カウンタを更新します ExtensionにはHTMLや CSS JavaScriptもあり 新規タブページや ポップアップでも使います 最後にその他のリソース ローカライズした文字列や アイコン グラフィックスも あります これら全てが集まり Sea Creatorになります コンバーターのおかげで 全て ネイティブAppの プロジェクトに まとまりました プロジェクトを動かし Sea Creatorをすぐに Safariで使えます ツールバーに行って iOS版Sea Creatorを 選び Appを起動する場所を 選択すればできます 今つながっている iOSデバイスがないので iPhoneシミュレーターを 使います

Runボタンをクリック Xcodeがプロジェクトを ビルドし シミュレーターと Appを動かします

これがコンバーターで 作った Sea Creator Appで― Sea Creator Web Extensionも 入っています 先ほど見たように Extensionの有効化は Safari内で直接できます でもAppで言われているように 設定からも Extensionを管理できます お見せしましょう 設定に切り替え

Safariを選び Extension Sea Creatorを 選択 ここにSea Creatorの 情報と オンにするスイッチが あります スイッチが グレーアウトしていて まだExtensionをオンにできません 問題があるようです だからロードできません 調べてみる必要があります そしてデバッギングの 話になります プロジェクトをビルドし Extensionを インストールしたのは 素晴らしい第一ステップですが もうひとつ不可欠なのは うまく行かないとき 原因を深堀りすることです Web Extensionの エラーの特定は簡単で Web Inspector等の ツールを使い デバッグしていきます 設定を再度見ると エラーが― 下にあり iOSのExtensionは 非永続的なバックグラウンドページ を持つ必要があるとあります 見覚えがあります 先ほどコンバーターも 言ってました ここでは実際直します Xcodeに戻り manifestを開き backgroundセクションで “persistent”: false キーを追加します バックグラウンド部分で この変更の詳細は 後ほどお伝えします 今はこれで エラーがなくなったはず 修正したので 再度Appを動かし シミュレーターに 更新版をインストール

再度Sea Creator Appです エラーは１つだけのようです なのでSafariを開いて 設定は開かなくていいです

Safariを開き Extensionリストを開き Sea Creatorがあります 今度はオンにできそうです Sea Creatorの 新規タブを使う選択肢も あります ではiPhoneで どう見えるか 見てみましょう これを新規タブに設定し

Extensionリストを閉じ 新規タブを開きます 期待通り Sea Creatorの 新規タブです でも文字が小さすぎて 見栄えが悪いです iOSでこのExtensionを 動かすのは初めてで コンテンツがまだ iPhoneに 合わないのは仕方ないです これを直すには Web Inspectorで ページを精査し 心当たる部分を 直します Web Inspectorを 開くには MacでSafariを開き Safariの詳細設定で 開発メニューを 表示させます

開発メニューでは iPhone シミュレーターを選択し 調べたいページを 選びます Sea Creatorでは 選択肢が２つあります バックグラウンドスクリプトを 直すときは こちらを選びますが 今回は 新規タブページを見ます なのでこちらを 選択します

Web Inspectorに入りました まず直したいのは― ページ全体のサイズです デフォルトではiPhoneの Safariはページを デスクトップブラウザの ように表示し 大きなコンテンツを スケールダウンして 全体を画面に収めます でもその挙動では 文字が小さくなりすぎます なのでよくある方法を とります iPhoneのWebデザインでは viewportタグで Safariに この方法でスケール しないよう指示 Head要素を選択し Childエレメントを追加 viewportタグに コンテンツを追加 タグを入れると ページは直接更新します シミュレーター内で 変更を反映します 文字サイズが読みやすく なりました でも画面に入りません これが次の問題です このページの要素を 調べて このレイアウトの 理由を探します

bodyタグを見て ここにdivがあります 全コンテンツが ここにあります よく見ると 横のスタイルシートの サイドバーで この要素の幅が 850に固定されています それは デスクトップなら 横幅が広いし 文字が折り返します でもiPhoneは違います 幅が狭いので ここではむしろ コンテンツの最大幅を 決める方が 固定幅より良いと思います そのルールをここで 編集できます widthをクリック max-widthに変更 シミュレーターのページが 変更を反映します 幅がiPhoneに 合うようになりました 文字も画面に収まっています 見た目はよくなりましたが この変更は このInspector セッションの間のみ有効です この変更を保存して なくさないようにしたいです スタイルシートの 更新版の保存は 簡単にできます Command+Sを 押すだけで 変更したルールを 保存できます new_tab_page.cssを プロジェクトで 上書きします

しかしviewportの変更は 静的なリソースでなく ライブのページに書きました だから元のソースに 同じ変更が必要です このタグを選択し コピーして Xcodeに戻り 新規タブのソースを開き

コンテンツを貼り付けます

次にSea Creatorを 動かせば 更新版ソースと スタイルシートが使われ きちんと見えます 以上 Web Inspectorで Extensionの中身を見て 仕組みを理解し 変更を加え 更新する方法でした 次は新規タブを 見ていきますが 開発の後段では 当然iOSで 全体のテストが必要です それには同じツールと テクニックを使います iOSでSafariの Extension設定を開き Extension構成の エラーを 確認します Sea Creatorの 致命的エラーは 永続的バックグラウンドページ でした でも致命的でない エラーも あるかもしれません このような詳細は Xcodeのデバッグビルドの 設定にのみ表示されます App StoreやTestFlightの コピーでは表示されません Web Extensionに変更を加えるには Appをデバイスまたは シミュレーターで 再度動かして 更新します Web Inspectorでは ExtensionのWebコンテンツの 問題を精査できます Web Inspectorに アクセスするには MacのSafariの 詳細設定で 開発メニューをオンに するのをお忘れなく デモではシミュレーターを 使いましたが iOSデバイスを使う場合 デバイスのSafariの 詳細設定で Web Inspectorサポートを 有効にする必要があります Web Inspectorの詳細と 最新機能を知るには Web Inspectorの セッションをご確認ください iOSのSafari Web Extensionを作成し 基本的なデバッグも したので いくつか ベストプラクティスや 開発時に 注意すべき点を ご説明します 関係しそうな トピックは５つあります まず非永続的バックグラウンド ページについて Extensionの バックグラウンドスクリプトが 動く時に ページが ロードされます このページにより Extensionは ブラウザや他のパーツが 送るイベントを処理できます でも読み込んだままだと 負荷がかかります メモリや電力を使い 有効化された 全てのExtensionを 別のタブで 動かすようなものです これらページを 読み込みっ放しでは ムダが大きいです でもこのページを 非永続的にすることで つまりExtensionが 実際動く時のみ 読み込まれ 一定時間アイドルなら 読み込みを 解除するようにすれば パフォーマンスコストは Extensionが実際 働いている時だけかかります これは大事です バックグラウンドページは iOSでは非永続的である必要があります システムメモリや バッテリーが 貴重なので Xcodeの Extensionテンプレートには 非永続的バックグラウンド ページを持つようになっています なのでiOSで使えます 既存のExtensionで 永続的バックグラウンド ページある場合 Sea Creatorも そうでしたが 非永続的に変える必要が あります manifestの バックグラウンドセクションで "persistent:" を FalseにすればOK その他 ベストプラクティスや 注意点など Extensionの 非永続的バックグラウンド ページについて詳細は "Safari Web Extension における改善点" セッションをご確認ください 次は レスポンシブデザインに ついて Sea Creatorで 見たように iOSにExtensionが 入ることで Webコンテンツが 今まで想定していなかった 環境で表示される ことになります Sea Creatorの 新規タブのように― ExtensionのWebコンテンツの レイアウトは iPhoneとiPadで テストしましょう レスポンシブデザインによって 複数の画面サイズに対応できます ただ考えるべきは 画面サイズだけでは ありません iOSで見栄えの良い コンテンツを作るための 注意点を説明します Extensionのコンテンツが フルページで 大事な要素が 画面下部に集まっていると Safariのタブバーや デバイスのホームインディケータで 隠れてしまうかもしれません CSSの用語では この端の方の部分は コンテンツが一部 隠れてしまう可能性があり ”アンセーフエリア”と 呼ばれます 一方viewportの 使える部分は ”セーフエリア”とされます CSSの環境変数を使うと セーフエリアを計算でき 大事な要素の配置を セーフエリアにしやすいです これはiPhoneだと 横持ちの時も重要です その場合セーフエリアは 画面の左右になるでしょう 同じようなCSSで viewportに合った変数を 指定することで コンテンツを めいっぱい表示しつつ 重要な情報は セーフエリアに配置できます

“Safari 15のためのデザイン” では これらAPIで コンテンツをiOSに 適応させる方法を説明します iPadやデスクトップブラウザでは Extensionに ポップアップページがあると 適度なサイズの ポップオーバーで 表示されるのに 慣れているかもしれません でもiPhoneでは Safariはページを シートとして表示し コンテンツにとっては 驚きかもしれません シートはデバイスの 横幅いっぱいに広がり コンテンツの想定よりも 高さが高くなるかもしれません この初期の Sea Creatorでは 画面端からの 余白が少なく 背景色はボディでなく 個々の要素についています だから文字がつぶれて 背景はページ全体を 埋めていません でもその後アライメントや 余白を調整し 少し余裕を持たせました 今bodyの背景色を指定し シート全体を埋めようと しています Extensionにポップアップが あるなら 同様の変更が 必要ないか 検討してください Safariは横持ちでも 同じような 見せ方をします Extensionのインターフェースは これらの設定で 必ずテストし 空間が増えてもいい レイアウトにしましょう デザイン関係で 最後に Dynamic Typeについて Dynamic Typeは 文字等の要素の サイズ調整を可能にします コンテンツを小さく 収めたり 大きく見やすくしたり できます インターフェースは 文字サイズを変えてテストし どんなサイズでも 正しく見えるよう 確認します Dynamic Typeを フル活用できるよう WebKitには ユーザーの 文字サイズ設定を 尊重するフォントが 豊富で リサイズ可能です これらのフォントを使い 文字を読みやすく しましょう Safariの他のUIのように なので大事なのは ExtensionのWebコンテンツを SafariのUIを念頭に 作ることです フルページのコンテンツは iPhoneでテストし 画面サイズに適合するか 確認し SafariのUIと 画面の下の部分で 干渉しないように ポップアップも iPhoneでテストし シートスタイルでも きちんと見えるか確認してください 幅広いDynamic Type サイズでの テストもしましょう ユーザーの設定に合うことを 確認します Safariの新UIでの Webコンテンツデザインに 関しては “Safari15のためのデザイン” のセッションをどうぞ 次は ポインタイベント 今あるExtensionが マウスイベント処理で 任意のクリックやドラッグを 扱う場合 同じイベントは iOSでのタップでは 送られません Pointer Events APIが 必要です Mouse Events APIと 似ていて― マウス入力と同じように 動きますが Pointer Events APIは タッチや Apple Pencilの入力も 伝えます 次にWeb Extension Windows APIについて デスクトップブラウザでは 複数ウィンドウを開けます Extensionでは browser.windows APIで ウィンドウを扱えます iPadも同様で Safariの複数ウィンドウを 開けます 各Safariウィンドウは フルスクリーンでも スプリットビューでも 他のAppと並んでいても 他のSafariでもいいです 内部では 各ウィンドウは iOSでは”シーン”と 呼ばれます Windows APIを 使う場合 Safariの各シーンは 実は２ウィンドウ あります １つは通常のもの １つはプライベート iPhoneでも同じです Safariに１シーンしか ない場合でも browser.windows.getAll APIで 開いているウィンドウを 問い合わせると APIはこの２つの ウィンドウオブジェクトを 返します 最初のウィンドウでは incognitoがfalseで focusedがtrue つまり今見ている ウィンドウが 通常ブラウジングで プライベートではないと いうことです ２つめのウィンドウには Safariのシーンに プライベートのタブが あります プロパティも１つ目とは 違います incognitoがtrue focusedがfalseです ではSafariを プライベートに切り替え windows.getAllを 再度呼ぶと APIは違うウィンドウ オブジェクトを返します focusedプロパティが 両ウィンドウで変わり ２つ目のウィンドウに focusがあります

これはiPadも同じで １つのSafariシーンは ２つのウィンドウで表されます Safariのスプリットビューで ２つ目のシーンを開くと― APIは４ウィンドウを レポートします Extensionから windows.onCreatedイベントを見ると スプリットビューを開くとき ２つのイベントを検知します 各Safariシーンで ２つの新規ウィンドウが 開きます このAPIを使うときは これを覚えておきましょう 最初は予想しない もう一つのウィンドウが あるからです このウィンドウの モデルに加え windows APIには いくつか制約があり Extensionにも影響するかも しれません ウィンドウを 作成 削除 ステータス更新する メソッドは使えません iOSではウィンドウの 配置を 管理するのは ユーザーで AppやExtensionでは ありません windows.onRemovedイベントは ファイヤしません ユーザーがSafariを Appスイッチャーから― 閉じる場合は それはウィンドウを真に 閉じたり削除したりせず ユーザーが後で途中から 戻れるよう残っています これらの制限は ウィンドウ自体に関してで その中のタブにでは ありません browser.tabs APIでは Web Extensionは 個々のタブを 追加 削除 更新できる 権限があります ベストプラクティスの最後に 機能検知を 既存のExtensionを iOSに移植する際 一部のAPIが使えないと 気づくかもしれません たとえば先ほどの windows APIなど でも他にも コンテクストメニューや WebRequestなどが あります 既存のExtensionの必須ではないパートが これらAPIを使う場合 機能検知を使って 使えないケースの 処理をさせましょう 無条件にこれらの APIを呼ぶのでなく コードに条件を付けます これらAPIの存在に応じてです それでExtensionの一部を くっきり除外でき サポートするブラウザを 柔軟にできます このパターンは 新しいAPIが加わり それを取り入れるときも 使えます それらはすぐに 全ブラウザで 使えるわけでなく ユーザーが使っている 古いブラウザでも 使えないかもしれないからです 以上ベストプラクティスです Safari Web Extensionの 多くをカバーしましたが 一番大事な話題を 最後に残しました プライバシーです プライバシーは 我々の仕事の大きな部分で 我々はユーザーが 透明性やコントロールを 個人データの処理に関し 持つべきと考えます それはSafariがすること 全てにも言えます Web Extensionは 大量のデータを 閲覧行動から 得られます だからそれが許されるか どのWebサイトで可能かは ユーザーが決めるべきです 今まで他のブラウザは Extensionに対し 全Webサイトで フルアクセスを オンにしてすぐ 許可してきました それは最初に Extensionのお試しだけでも プライバシーを犠牲に させるようなものです Safariは透明性と コントロールを ユーザーに提供します オプトインモデルで Extensionはユーザーが同意した サイトにだけ アクセスできます Sea Creatorでも 少しお見せしました オンにしてもすぐには ページを改変せず 改変できたのは Safariに明示的に 伝えてからです ”このExtensionを ここで使いたい” ”このExtensionに アクセスさせていい”と Extensionにアクセスを 渡してからは Safariはタブバーで このページでExtensionが 動いていると表示し Extensionが私の 閲覧行動を見ている可能性を 伝えました でもExtensionにアクセスを 許可していない サイトでは その表示は消えます だから私はExtensionが このページでは動いてなく 私の行動が見えないと わかります このパーミッションモデルの 詳細を見てみます ユーザーはExtensionに オプトインします 特定のWebサイトで 使おうと決めたとき Safariはユーザーに ダイアログで同意を求め はっきりと Extensionがアクセスしたい Webサイトを示します これはユーザーがExtensionを アクションメニューで 選んで呼び出すとき またはキーボード ショートカットを使います この同意はプライバシーに 関わるAPIを使うには必要です 厳密には URLやタブのタイトルを 明らかにするAPIが その情報を渡すのは ExtensionにそのURLへの パーミッションがある時だけ Cookies APIは Extensionに対し パーミッションのある サイトの Cookieしか 読み書きさせません JavaScriptやスタイルシートの インジェクションも やはりExtensionが パーミッションを持つ サイトでしか 許可されません Extensionのスクリプトが これらAPIを呼ぶ場合 必要なパーミッションが なく まだユーザーに 聞いていない場合 Safariは完了ハンドラを 呼ぶのを待ち 画面上部に 邪魔にならない バナーを出します これでユーザーは Extensionが 何らかのアクセスを 要しているとわかります そしてリクエストされる サイトを見て アクセスを 許可するかどうか 判断できます Extensionが必要とする 以上の許可を 求めるのはやめましょう ある種のExtensionでは このパーミッションの 考え方は 必要以上かもしれません 例えば個々のページを 共有 コメントする Extensionでは いつでもどこでも サイトへのフルアクセスが 必要なわけでなく 必要なパーミッションは その都度あればいいのです そんなとき 便利な解決策は activeTab パーミッションです ExtensionがactiveTab パーミッションを要求すると Safariは自動で ユーザーが明示的にExtensionを 使っているタブでの パーミッションを与えます このパーミッション範囲は 現在のサイトの 現在のタブだけに限られます ユーザーがそのタブで 他のサイトに行けば 取り消されます このパーミッションの 承認はプロンプトが出ません ユーザーの長期的 コミットが不要なので

この機能を使うには manifestのパーミッション部分に activeTabを入れます まとめるとSafariでは ユーザーがつねに Extensionが動けるサイトの コントロールを 持つのです なのでExtensionは 自動的には 全ページでは 動きません 多くのExtensionで activeTabパーミッションは ユーザーが使用中のページに アクセスする 良い方法です それ以上のアクセスで 煩わせることもありません このコンセプトは Safari Web Extensionを サポートする 全プラットフォームで共通です macOSでの実際の動きを ExtensionでのactiveTab使用 について見るには WWDC 2020のSafari Web Extensionのセッションをどうぞ 以上プライバシー保護の パーミッションモデルでした 今日お話した 他のこととともに iOSのSafari Web Extensionと その開発に使える ツールについて 全体像が伝わればと思います これからiOS 15のSafariに 新たなWeb Extensionが 加わるのが楽しみです すでにMacで愛されている ものもあれば まだ見ぬ新たな Extensionもあります Extension開発が初めてなら このセッションと 関連付いた リソースの確認をお勧めします そこでサンプルコードを ダウンロードしたり 自分で試したりできます Web Extension APIに ついては Appleの 開発者向け文書や MDN Web Docsで読めます Web Extensionを他のブラウザや MacのSafariで すでに開発している人は Xcode 13で Safari Web Extension コンバーターを試しましょう 既存のExtensionをiOSに 対応させましょう バグ報告や提案 互換性問題があったら 我々へフィードバックを 送ってください feedbackassistant.apple.comへ コンタクトしたい または質問したいときは Apple Developer Forums でもOKです 最後にもう一度 他のセッション２つを お勧めします “Safari Web Extension における改善点” は 新たに加わったAPIについて “Safari 15のためのデザインは” Webコンテンツの見栄えを iOS 15のSafariで 良くする方法です ありがとうございました 良いWWDCを [音楽]