Rediscover Safari developer features

ハイライト

今年の Safari の開発者ツールスイートには、シミュレーターの統合、Vision Pro ワイヤレスデバッグ、アプリ内 Web コンテンツ検査が追加されています (isInspectable)、機能フラグ設定が再設計され、Web 開発者が Mac 上でクロスプラットフォームのデバッグとテストを完了できるようになりました。

主要内容

開発者向け機能を有効にする

Safari の開発者向け機能を初めて使用する場合は、Safari の設定でそれらの機能を有効にする必要があります (01:39)。 Safari > 設定 > 詳細を開き、「Web 開発者向けの機能を表示」にチェックを入れます。

Web インスペクターを開く簡単な方法

Safari は、主要なツールを見つけやすくするために [開発] メニューを再設計しました (02:34)。 Web インスペクターを開くには 2 つの方法があります。

開発メニュー: 「Web インスペクターを表示」を選択します。
右クリックメニュー: ページ上の任意の場所を Control キーを押しながらクリックし、[要素の検査] を選択します。要素が直接選択され、インスペクターが開きます。

要素選択モードでは、マウスオーバーすると要素のセレクター、レイアウト情報 (マージン、形状のアウトライン)、およびアクセシビリティの役割 (03:24) が表示されます。

Responsive Design Mode

レスポンシブデザインモードは、さまざまな画面サイズでページのパフォーマンスをテストするのに役立ちます (04:56)。あなたはできる：

ビューポートの端をドラッグしてサイズを調整すると、ページのコンテンツが自動的に再配置されます。
正確な幅と高さの値を入力します
ピクセル比を変更して高解像度画面をテストします

ビューポートの高さがウィンドウを超える場合、Safari は表示を自動的に拡大縮小します (たとえば、実際のサイズの 78% に)。

Safari から直接シミュレーターを開く

今年の新機能: iOS、iPadOS、xrOS シミュレータを Safari から直接開いて Web ページをテストできる機能 (06:52)。

操作パス: [開発] > [シミュレータで開く]。実行中のエミュレータがリストの一番上に表示されます。エミュレータが実行されていない場合、システムは自動的にエミュレータを起動します。

シミュレーターの Safari は、macOS バージョンとは異なるレイアウト動作を示します。たとえば、同じ幅の場合、iOS Safari のビューポートのパフォーマンスは大きくなります。スムーズスクロールやダブルタップによるズームなど、iOS 固有のインタラクションをテストすることもできます。

シミュレータ内のページは、Web インスペクタを使用して検査することもできます。[開発] メニューで対応するシミュレータを見つけ、検査するページを選択します (08:27)。

実機デバッグ

iOS および iPadOS デバイスは、ケーブルまたはワイヤレスネットワーク経由でデバッグできます (09:33)。

有線接続:

デバイスで [設定] > [Safari] > [詳細設定] を開き、Web インスペクターを有効にします。 2.データケーブルでMacに接続します。
Mac Safari の [開発] メニューでデバイスを見つけ、確認したいページを選択します

ワイヤレス接続:

開発メニューから「ネットワーク経由で接続」を選択します
デバイスと Mac が同じネットワーク上にあることを確認します
データケーブルを取り外し、ワイヤレスデバッグを続行します。

Vision Pro のデバッグ

xrOS デバイスは、Mac Safari からのデバッグもサポートしています (11:24)。ペアリングプロセス:

Vision Pro で [設定] > [アプリ] > [Safari] > [詳細設定] を開き、Web Inspector を有効にします。
[設定] > [一般] > [リモートデバイス] で画面を開いたままにします。
Mac Safari の [開発] メニューで、デバイスのサブメニューから [開発に使用] を選択します。
Vision Pro に 6 桁のペアリングコードが表示されます。それを Mac に入力します。
ペアリングが完了したら、ワイヤレスでデバッグできます。

ペアリングすると、要素選択モードは Vision Pro もサポートします。デバイス上のターゲット要素を見て、ピンチして選択します (12:56)。

アプリ内の Web コンテンツを検査可能にする

iOS 16.4 / macOS 13.3 / xrOS 以降、アプリは WKWebView と JSContext をアクティブにチェック可能にすることができます (13:41)。

import WebKit
import JavaScriptCore

let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webConfiguration)

if #available(macOS 13.3, iOS 16.4, *) {
    webView.isInspectable = true
}

let jsContext = JSContext()
jsContext?.name = "Context name"

if #available(macOS 13.3, iOS 16.4, tvOS 16.4, *) {
    jsContext?.isInspectable = true
}

キーポイント:

isInspectable = trueSafari の [開発] メニューに WKWebView を表示する
JSContextの推奨設定name、「開発」メニューで複数のコンテキストを区別しやすくするため
この API は、運用環境のデバッグを容易にするために、アプリのリリースバージョンでも利用できます。

WebDriver 自動テスト

Safari は、クロスブラウザー自動テスト用の WebDriver をサポートしています (14:34)。 WebDriver は、自動化されたコマンドを受け入れ、要素の検索、アクセシビリティロールの取得、JavaScript の実行、スクリーンショットの取得などの操作をサポートするローカル HTTP サーバーです。

Selenium を使用した Python の例:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.safari.options import Options as SafariOptions

options = SafariOptions()
driver = webdriver.Safari(options=options)

driver.get("https://webkit.org/web-inspector/")

search_element = driver.find_element(by=By.ID, value="search")
search_element.send_keys("device")

assert(driver.find_element(by=By.LINK_TEXT, value="Device Settings"))

driver.quit()

キーポイント:

オートメーションウィンドウのタイトルバーがオレンジ色で表示され、オートメーションによって制御されていることを示します。
テストは iOS/iPadOS シミュレータおよび実デバイス上で実行可能
Safari の WebDriver 実装にはブラウザ固有のコードは必要ありません

Feature Flags

Safari は、将来の Web プラットフォーム機能をプレビューするために、機能フラグ設定 (以前は実験的機能) を再設計しました (17:01)。

機能フラグはトピック (アニメーション、CSS、JavaScript、メディアなど) ごとに編成されており、検索可能です。各機能には 4 つの状態があります。

ステータス	説明	デフォルトのスイッチ
安定	Safari ではデフォルトで有効になっていますが、互換性をテストするために手動で無効にすることができます。オン
テスト可能	標準仕様のフィードバックのための早期実装	閉じる
プレビュー	この機能はより完全であり、Safari Technology Preview	ではデフォルトでオンになっています。オフ
開発者	WebKit の動作を調整するか、非推奨の API を再度有効にする	必要に応じて

キーポイント:

Safari テクノロジープレビューは約 2 週間ごとにリリースされ、最新の機能を事前に体験できます
Safari を更新すると、機能フラグが自動的にデフォルト値にリセットされます
検索機能により、関連する特徴をすばやく見つけることができます (たとえば、「色」を検索すると、色に関連するすべての特徴が見つかります)

詳細

高解像度画像の処理

レスポンシブデザインモードでは、ピクセル比の変更と、さまざまな解像度での画面のテストがサポートされています。 Web 開発者が高解像度の画面に対応するには 3 つの方法があります (06:20):

HTML srcset：

<img
  src="astronaut_1x.jpg"
  srcset="astronaut_2x.jpg 2x, astronaut_3x.jpg 3x"
/>

キーポイント:

srcデフォルトの画像です -srcset異なる解像度のバージョンをリストし、ブラウザはデバイスのピクセル比に基づいてそれらを自動的に選択します。

CSS image-set：

.starfield {
  background-image: image-set("stars_1x.jpg" 1x, "stars_2x.jpg" 2x);
}

キーポイント:

image-set写真が必要な場所ならどこでも使用可能
ブラウザは適切な解像度バージョンを自動的に選択します。

CSS resolution media query：

@media (min-resolution: 2dppx) {
  .divider-line {
    border: 0.5px solid grey;
  }
}

キーポイント:

dppxCSS ピクセルあたりのデバイスのピクセル数を表します。
高解像度画面に合わせて枠線の太さなどのスタイルを調整可能

Web インスペクターの実践的なヒント

カラーピッカー: スタイルサイドバーのグラデーションプレビューをクリックし、カラーピッカーを使用して画面上の任意の場所から色を選択します (03:54)
変更を元に戻す: Web インスペクターで Command-Z を押すとスタイルの変更を元に戻すことができます (04:21)
要素の選択: 要素の選択モードでは、要素をクリックすると、インスペクターでその要素が自動的に選択されます。

重要ポイント

デバッグスイッチをアプリの Web ビューに追加

やるべきこと: アプリのデバッグ設定ページにスイッチを追加し、オンにして WKWebView を設定します。isInspectable = true- 実行する価値がある理由: Xcode に接続せずに、Safari を使用してアプリ内の Web コンテンツを確認できます。 QA と設計者は直接デバッグできる
起動方法: WKWebView作成後の設定に従って設定しますwebView.isInspectable = isDebugModeEnabled

クロスプラットフォーム回帰テストには WebDriver を使用します

やるべきこと: Selenium + Safari WebDriver を使用して、macOS、iOS シミュレーター、実デバイスを対象とした自動テストを作成します。
価値がある理由: WebDriver はクロスブラウザー標準であり、同じテストスクリプトのセットを Safari、Chrome、Firefox で実行できます。
開始方法: Selenium をインストールします。pip install selenium、使用webdriver.Safari()ドライバーの作成

機能フラグを使用して新しい CSS 機能を事前にテストします

対処法: Safari テクノロジープレビューで CSS Masonry Layout などのプレビュー状態機能を有効にし、事前に適応させます。
価値がある理由: これらの機能は、約 2 年以内に Safari の安定版でデフォルトで有効になる予定です。事前にテストすることで、Web サイトの互換性を確保できます
開始方法: Safari テクノロジープレビューをダウンロードし、[開発] > [機能フラグ] で目的の機能を検索して有効にします。

レスポンシブデザインモードで極端なサイズをテストします

対処法: Safari のレスポンシブデザインモードで画面より大きいビューポートサイズをテストし、レイアウトが崩れないことを確認します。
実行する価値がある理由: ユーザーは外部モニターで Safari を使用しているか、ウィンドウをズームしている可能性があり、極端なサイズでのレイアウト品質が重要です
開始方法: [開発] > [レスポンシブデザインモード] に入り、非常に大きな幅と高さの値を入力し、コンテンツの再配置を確認します。

Rediscover Safari developer features

ハイライト

主要内容

開発者向け機能を有効にする

Web インスペクターを開く簡単な方法

Responsive Design Mode

Safari から直接シミュレーターを開く

実機デバッグ

Vision Pro のデバッグ

アプリ内の Web コンテンツを検査可能にする

WebDriver 自動テスト

Feature Flags

詳細

高解像度画像の処理

Web インスペクターの実践的なヒント

重要ポイント

関連セッション

コメント