WKWebViewの最新情報

WebコンテンツをAppのインターフェイスに組み込むためのフレームワーク「WKWebView」の最新情報をご覧ください。JavaScriptフルスクリーンAPIの使用方法、CSSビューポートユニット、検索操作の詳細について解説します。また、コンテンツブロックの制御に関する改善点、暗号化されたメディアの埋め込み、Webインスペクタの使用についても解説します。

リソース

関連ビデオ

WWDC22

SafariとWebKitの最新情報

ダウンロード

♪メロウなヒップホップ音楽♪ ♪ 「WKWebViewの最新情報」にようこそ WebKitチームのエンジニアの Alex Christensenです今年は新たにAppで使える多くの Webテクノロジーが追加されましたしかし始める前に Appに適したテクノロジーを使用しているか確認しましょう App内でブラウザのような体験をしたいそして深いカスタマイズが必要ないのなら SFSafariViewControllerの使用をおすすめします Appがまだ非推奨の UIWebViewを使っているならより高速で応答性の高い WKWebViewに移行しましょう UIWebViewは将来のリリースで削除される予定です WKWebViewは Webコンテンツを操作する Appで使用するAPIです CSSベースのUIや JavaScriptで Appの一部を書いたりできます App-bound domainsを使用して独自のWebコンテンツとのやり取りもできます独自のブラウザを開発することも可能ですどのような用途であっても常に新しい機能が追加されよりリッチな Web Appの作成が可能です今年のWKWebViewでは 4つのカテゴリの新機能が利用可能です Webコンテンツの新しい操作方法コンテンツブロッカー用の新機能暗号化メディアとリモートWebインスペクタですまず Webコンテンツ操作用の新しいAPIについてご説明します iOS 16ではAppが Webコンテンツを操作する方法が3つありますフルスクリーンAPIを使う方法新しいCSSビューポートユニットを使う方法検索操作sを使う方法ですフルスクリーンから始めましょうこれまで長年 JavaScriptはブラウザで動画やキャンバスゲームなどの HTML要素をフルスクリーンにすることができましたが App内でも可能になりました簡単な例として電話でどう見えるかを説明します JavaScriptがフルスクリーンを要求しその後にユーザーや JavaScriptが解除できます App中で必要なことは WKの設定で .isElementFullscreenEnabledを trueにして webkitRequestFullscreenなどのフルスクリーンAPIを使用する Webコンテンツを読み込むだけですそのままでもうまく動作しますが App内での遷移をカスタマイズしたい場合は WKWebView.fullscreenStateの値を観察し Webコンテンツがフルスクリーンになったり戻るタイミングを Appで知ることができます WebKitのフルスクリーンAPIを Appで使用する方法は以上です

動的なビューポートサイズに応じて Webコンテンツをレイアウトできる CSSユニットも用意されました svh　lvh　dvhなどがCSSユニットに新たに用意されていますこれにより最小　最大動的ビューポートに基づいたレイアウトの変更が可能です Safariを例に Appでどのように使用できるかを見てみましょう Safariで最初にページを開くと Webページのホストと複数のボタンが下に表示されますスクロールするとビューポートが大きくなりボタンがスライドして見えなくなります Svh　lvh　dvhはビューポート異なるサイズを測定するのに便利な単位です AppがWKWebViewのビューポートを変更する場合ビューポートのサイズ範囲をあらかじめ WebKitに知らせる必要があります Swiftでは 1つの関数呼び出しで WebKitに最大および最小のエッジインセットを通知し Webコンテンツが Appで正しくレイアウトされるようにできます iOS 16ではWKWebViewの検索操作sのサポートを導入しています多くのWKWebView Appでは大量のテキストをロードしユーザーーがそのテキストを検索することがあります WKWebView .findInteractionEnabledを Trueに設定するとユーザーは使い慣れたUIと command + Fのようなショートカットを使ってテキストの検索ができますこの機能をオンにするにはコードを1行追加するだけです WKWebView .findInteractionを通じて UIFindInteraction オブジェクトにアクセスして検索パネルの表示や非表示次や前の結果への移動をプログラムで行うこともできますぜひお使いのAppでお試しくださいコンテンツのブロックについては Safariでコンテンツブロッカーを実装するために使用するAPIである WKContentRuleListに新しい機能を追加しましたここではサンプルサイトのiframeにを埋め込んでいます以前はリクエストされた URLとトップフレームのURLに対し正規表現を使って読み込みをブロックするか別のアクションを実行するかを決めることが出来ましたしかし時にはあるルールを特定のiframe内部の読み込みにのみ適用させたい場合もありますこの場合は現在のフレームのURLに対して正規表現を実行することができますウィキペディアを含むフレームからの画像のみをブロックするルールを書きたいと思いますそのためにはこのようにJSONに if-frame-urlを追加します JSONを以前と同様にコンパイルし WKWebViewConfigurationに適用しますするとこの正規表現はリクエストを行うフレームの URLに対して実行されますこのブロックルールは if-frame-url正規表現に一致するフレームからのリクエストにのみ適用されますここではウィキペディアの iframe内の画像の読み込みをブロックしていますコンテンツブロッカーの実装を真剣にお考えの方は declarariveNetRequestの新機能を含む Safari Extensionsに関するWWDCセッションをご視聴ください iPadOS 16のWKWebViewのもう1つの新機能は暗号化メディアです Encrypted Media Extensionsと Media Source Extensions APIを使用するコンテンツをiPadOS上の Appで使用可能になりましたつまり AppleTV+のようなプレミアムコンテンツを macOSと同様にiPadOSでも使えるのです AppがWebブラウザエンタイトルメントを持っている場合リモートWebインスペクタは iOS上のSafariと同様に製品版Appで動作するようになりますコードの追加や変更は必要ありませんサードパーティブラウザで Webインスペクタを有効化する方法は Safariと同様ですまずiOSデバイスの Safariの設定で Webインスペクタを有効にします次にMacのSafariの高度な設定で「開発」メニューを有効にします Macと電話をつなぎ macOSのSafariの「開発」メニューからデバイスを検出します WebインスペクタにはWebコンテンツのデバッグ用ツールが多数あります DOMの探索や JavaScriptの実行とデバッグページ読み込みのタイムライン表示もできます Webサイトをお持ちの方はリモートWebインスペクタを使い iOS上のサードパーティブラウザでご自身で検査とデバッグが可能になりました以上が今年 WKWebViewに追加された主な新しいAPIですぜひご自身の Appでお試しください Appに最適なAPIを使うこともお忘れなく WKWebViewで何かできないことがあれば Feedback Assistantで機能に関するリクエストをご提出くださいお寄せいただいたリクエストを読んだうえで開発の優先順位を決定しています Webプラットフォームのさらなる追加機能については「Safari Web Extensionsの最新情報」と「SafariとWebKitの最新情報」も忘れずにチェックしてみてくださいご視聴ありがとうございました残りのWWDCもお楽しみください ♪

2:26 - Fullscreen API support

webView.configuration.preferences.isElementFullscreenEnabled = true

webView.loadHTMLString("""
<script>
    button.addEventListener('click', () => {
        canvas.webkitRequestFullscreen()
    }, false);
</script>
…
""", baseURL:nil)

let observation = webView.observe(\.fullscreenState, options: [.new]) { object, change in
    print("fullscreenState: \(object.fullscreenState)")
}

3:50 - CSS viewport unit range inputs

let minimum = UIEdgeInsets(top: 0, left: 0, bottom: 30, right: 0)
let maximum = UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0)
webView.setMinimumViewportInset(minimum, maximumViewportInset: maximum)

4:17 - Using UIFindInteraction with WKWebView

webView.findInteractionEnabled = true

if let interaction = webView.findInteraction {
  interaction.presentFindNavigator(showingReplace:false)
}

5:46 - WKContentRuleList if-frame-url

let json = """
[{
    "action":{"type":"block"},
    "trigger":{
        "resource-type":["image"],
        "url-filter":".*",
        "if-frame-url":["https?://([^/]*\\\\.)wikipedia.org/"]
    }
}]
"""

WKContentRuleListStore.default().compileContentRuleList(forIdentifier: "example_blocker",
    encodedContentRuleList: json) { list, error in
    guard let list = list else { return }
    let configuration = WKWebViewConfiguration()
    configuration.userContentController.add(list)
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。