WKWebViewの追加機能の詳細

♪ （WKWebView追加機能の詳細） こんにちは 私はミーガン・ガードナーです WebKitチームのエンジニアで 今日はWKWebViewの追加機能 について見ていきたいと思います その前に まずテーマを確認しましょう WKWebViewとは何か なぜAppで使う必要があるのか お話します URLをクリックすると Webページが読み込まれ そのコンテンツを操作 できることが期待されます URLの読み込み コンテンツのレンダリング およびそのコンテンツでの JavaScriptの実行は 非常に複雑な作業です そこで我々はその作業のほとんどを WKWebView内で カプセル化しました あなたのためだけではなく WKWebViewはiOSの全て 及びMacOSの大半の Webコンテンツを 表示するためのビューです これにはSafariも含まれます その為、AppでWebページを 表示するには WKWebViewの追加が必要と 想定されるでしょう でも ちょっと待ってください そのコンテンツで 何をしますか？ Webページの表示が必要で コンテンツに対する カスタマイズしたインタラクションは あまり必要でない場合 SFSafariViewControllerで 十分だと考えられます これはApp内の 小さなSafariの様なものです このビューを使用することは 信じられないほど簡単ですが トレードオフもあります それは Webコンテンツとの インタラクション がほとんどできないことです しかし今年 SafariViewControllerで 少しだけ追加で できることが増えました ユーザーは今まで SafariViewControllerコンテンツの 共有シートを介して App Extensionを実行できますが 自分のAppのためだけに 構築された特別な機能の場合は すこし扱いにくくて ユーザーにとって 分かりにくいものでした そのためiOS 15では 新しいAPIを追加したことによって SafariViewControllerで App Extensionの一つを カスタマイズしたボタンから 実行できるようになりました このボタンをAppのShare Extension の1つにマッピングできます また 実行するExtensionを そのボタンで 最もよく表現できる画像も 設定可能です ユーザーは 直接ツールバーから ページ上のJavaScriptの実行も含めて App Extensionを実行できます しかしこれはまだ非常に限られた インタラクションに過ぎません そこで WKWebViewの登場です WKWebViewを使用すると 表示されているコンテンツで 多くのことを実行できます コンテンツの読み込み 操作および コンテンツとのインタラクションのために 多くのAPIがあります Webコンテンツを表示したい場合 もしくは複雑なインタラクションが 必要な場合 WKWebViewが役に立ちます WKWebViewはコンテンツとの インタラクションを目的としている為 私たちは常にそれを より簡単に行えるように努めています WebViewのコンテンツへの アクセスと操作に役立つAPIを 簡単に採用できるようにすることで より多くのワークロードを 引き受けます 今年はWKWebViewに 新しい便利な機能を追加するために 一生懸命取り組んできましたが 今日はそれらのいくつかについて お話したいと思います 最初に JavaScriptを挿入せずに Webコンテンツとやり取りし 操作することのできる いくつかのAPIについて 説明します 次に、以前はSafariでしか 利用できなかった機能に アクセスできるようにする いくつかのAPIについて 説明します これにより Appでより 深いブラウザのような体験 を実現できます JavaScriptの利用を オプトアウトできる これらのAPIについて 説明する前に JavaScriptを避けたい 理由を確認しましょう JavaScriptは大好きです！ Webにおける言語です！ ですが JavaScriptの 挿入は複雑です インジェクションを介して クロスする必要がある ネイティブとWebの間の インターフェースは 行き来するのが難しく 面倒な場合があります また 意図しない 予想外の結果が起こったり 複数のWebソースから コンテンツを 扱う際の管理も難しくなります 可能であれば そんな悩みは避けたいですね 挿入されたJavaScriptと 互換性がない 機能もたくさんあります 昨年 「App-boundドメイン」 と呼ばれる新機能を 導入しました これにより App内で複雑なインタラクションを 許可するドメインを 指定できます App-boundドメインは ユーザーのために Appでの セキュリティとプライバシー保護を 向上させます ただし この利点を得るために JavaScriptをWebViewに 挿入することはできません これを行うと 機能が 無効になります JavaScriptを挿入することを 選択した場合 Apple Payのように WebViewで アクセスできなくなる 価値の高い機能があります そこで新しい 複数のAPIを追加し WebView内のコンテンツとの インタラクションを容易にし JavaScriptの挿入を しなくても良いようにしました これら新しいAPIには ３つのカテゴリーがあります まず Webサイト向けの ページのテーマカラーと 関連するカラーにアクセスするための 簡単な方法を用意しました 次に テキストの インタラクションを無効にし WebViewでメディアの再生を 制御できるようにする方法を用意しました まず テーマカラーをみてみましょう 昨年 不可欠な内部Appの 一つであるブラウザペットについて お話したことを 覚えているかもしれません ブレイディ・エイドソン によって書かれ Safari Webサイトで WebKittensとPupsから フィードを 組み合わせるAppです さて 利用可能なすべての 新しいAPIを使用して ブレイディと私は 元気をくれる 猫と犬を最大限に楽しむために この重要なツールを更新する必要 があると判断しました WebKitten Webサイトの エンジニアの一人が ダイナミックなテーマカラーの 追加を決めました それは季節によって変わり ペットの大切な写真に 芸術的なセンスを加えます これをAppにも 反映させたかったのですが コードを複製したく ありませんでした 幸い これをとても容易にする 新しいAPIがあります ここで見られるように headerViewのカラーを Webサイトのテーマカラーと 同じものに設定できます この新しいAPIを使用して 同僚のエンジニアが WebKittens Webサイトに 入れた作業を活用します Webサイトのエンジニアは 将来新しいテーマを 追加することもでき それらは私の方で追加作業なしで Appに反映できます themeColorが設定されていない場合 将来のシードでは 代替としてのbackgroundColor を計算し表示します underPageBackgroundColor として同様に使用できます Safariはこれを使って どうやって AppとWebページをブレンドし 外観を作るかお気づきかもしれません この値に書き込むことで Webコンテンツの終わりまで スクロールする際の 背景のカラーを カスタマイズすることもできます 次に テキストのインタラクション について話しましょう 最近 Safari Webサイトの WebKittensとPupsに ビデオを追加しました それらのビデオ再生時に テキスト選択コントロールを 誤ってアクティブ化することがあると ブラウザペットのユーザーは クレームを言っています 私たちはそれを望んでいません！ 幸いなことに 新しいAPIがあります WebViewでのテキストインタラクションを すばやく簡単に無効にできます シンプルです WebViewを設定するときに WebViewの作成のために 使用する設定で textInteractionEnabledを falseに設定してください これで そのWebViewの全ての テキストインタラクションがオフになります テキスト選択コントロールは メディアコントロールの 邪魔にはならず 子猫のビデオを混乱なく 再生することができます メディアコントロールと言えば メディア再生コントロールに複数の 素晴らしいアップデートがあります！ 以前はメディアを一時停止 または中断したい場合 それはWebViewで 再生されているため JavaScriptを挿入する 必要がありました また DOMから特定の要素を見つけ それを制御できるように する必要があります しかし 今では WebView内の メディアの状態を 容易に制御するシンプルな APIがあります すべてのメディアを簡単に 一時停止したり すべてのメディアウィンドウを 閉じたり ページ上のメディアの ステートを取得できます または メディアを中断すると setAllMediaPlaybackSuspended がfalseに設定されるまで メディアは再生停止 ユーザーコントロールは 無効になります どうこれら新しいAPIに もっと身近なものにするか そしてどれほど簡単に使用できるか ブラウザペットでこれらの 新しいメディア制御APIを どう利用するか ブレイディに引き継いで お見せします ありがとう ミーガン WebKitチームのエンジニア ブレイディ・エイドソンです ミーガンが触れたように Safari Webサイトの WebKittensとPupsの両方に 最近 ビデオを 投稿する機能が追加されました 静止画だけでなく ブラウザペット Appにも ビデオが追加されました 現在のAppの見た目は 次のとおりです これらのボタンは 私が追加した さまざまな機能の ネイティブのUIボタンです ページ上部のバナーは Webコンテンツです そしてWebサイトの テーマカラーを設定しました ミーガンが言及したWebViewの themeColorプロパティを 使用しました 一旦 ビデオが追加されると 一部の人はビデオを 自動再生させたくない と言いました この一時停止ボタンは それらに対応するためのものです このボタンの動作を見てみましょう

犬ではなく 子猫のビデオだけが 一時停止になりました そして 再生ボタンを押しても 何も起こりません コードを見てみましょう

前にこれらのビデオを 一時停止しようとする場合 このJavaScriptが 私の唯一のオプションであり それには問題がありました ２つの異なるWebサイトの Webページの構造を 理解する必要があり また その構造は 絶えずに変化しています たとえばPups Webサイトの このJavaScriptは 以前は機能していましたが 現在は機能していません 幸いなことに 今ではもっと良い方法があります まずWebViewで pauseAllMediaPlaybackの 呼び出しを実行しました

これはページのすべての メディア要素で JavaScript関数の pauseを呼び出すことと同じです

そしてそれはうまく機能します しかし ページを更新すると どうなるかに注意してください ビデオが再び再生されます 新しいページが読み込まれ これらのビデオは 一時停止されません もっと粘着性のある挙動が 必要な場合は setAllMediaPlaybackSuspendedを 使用します それを試してみましょう

ビデオが一時停止し ページを更新した後でも 停止したままになっていることに 注目してください それは この設定が WebView自体の プロパティであり その中のコンテンツでは ないからです また 再開することもできます これら新しいAPIのおかげで Appに優れたメディア体験を 追加する柔軟性が得られます お戻しします ミーガン ありがとう ブレイディ！ ペット達 素晴らしく見えますね 新しいメディアコントロールで さらに良くなります これがJavaScriptの 使用を回避できる WKWebViewの 新しいAPIです これらにより 皆さんのAppと Webコンテンツとのインタラクションを 以前よりもさらに簡単に 書けるようになることを 願っています 次に 複数のブラウザレベル APIを確認します 以前はSafariでしか 利用できなかった機能に アクセスできるようになります ここで取り上げるAPIには ３つの領域があります 最初は 単純なHTTPS オーバーライドフラグです 次はメディアキャプチャや- Web上でよく知られている- 今WebViewで 完全に利用可能な getUserMediaです そして最後はダウンロードを 管理するための新しいAPIです これはWKWebViewに 関連して機能し Appでのダウンロードを 許可し 管理できるようにします それでは HTTPSから始めましょう Web上のセキュリティと プライバシーは 常に重要で あなたと あなたのユーザーの セキュリティとプライバシーの 保護をより簡単にするため 私たちは常に 新しい方法を探しています これはWebを閲覧するための より安全でより強固な方法であるため トラフィックを HTTPSに移行することを 業界で広く求められています 多くのトップサイトは HTTPSをサポートしています 接続をHTTPから HTTPSへ動的に アップグレードするものもあります iOS 15および macOS Monterey以降では HTTPSをサポートしていることが 分かっているサイトにおいて HTTPリクエストを アップグレードします この追加のセキュリティを 取得するために 何もする必要はありません！ ただしローカルデバッグするために オフにする必要がある場合は 構成に設定する 簡単なフラグがあります うまくいっていれば これは必要ありません 設定する場合はここにあります ただし基本的に本番のコードでは するべきではありません 次に メディアキャプチャで 何が起こったかを確認しましょう iOS 14.3から WKWebViewに対して getUserMediaが有効になり WebRTC機能がApp内で 使えるようになりました そして私たちはそれを さらに改善しました！ カスタムスキームハンドラから Webコンテンツをロードする場合 WebサイトのURLからの リクエストを表示するのではなく リクエストの発信元として ユーザーリクエストプロンプトに Appが表示されます これによりユーザーのための 体感がより直感的になり シームレスになるはずです プロンプトをURLからの リクエストのままにしたい場合は カスタムスキームハンドラなし でロードするだけです プロンプトは今までのように 表示されます Webコンテンツを 操作するとき カメラとマイクの権限について いつ どのように ユーザーにプロンプトを表示するか 決定できる新しいAPIもあります 通常のエンタイトルメントと プロンプトを介して カメラとマイク用の ユーザー権限を取得したら 許可プロンプトを表示するか どうかを決定できます 自身が管理し信頼する Webコンテンツに向けて 独自プロンプトの実装と ユーザーの以前の応答を記憶するため これを使用できるのです WKWebViewで UIDelegateを 作成し 設定すると カメラまたはマイクの使用許可を 得るためユーザーに プロンプトを表示する タイミングを決定できます このデリゲートを実装しない場合 ユーザーは今までと同じように プロンプトを受け取り続けます ただしプロンプトを スキップしたい場合 Webサイトとの 以前のインタラクションから ユーザー設定を保存してあるので このデリゲートでそれが スキップ可能になります ブラウザペットにこの新APIを どのように活用したでしょう？ 私たちの制御を 超えた状況であるため 毎月開催される Pupsin theParkのミートアップを チームはキャンセル しなければなりませんでした 私たちの愛するわんこを お互いに共有する 要求を満たすために ブレイディと私はブラウザペットへ 仮想ドッグパークを 追加することにしました 社交的で可愛いわんこに 触れられるのです これには WebRTC機能設定のための getUserMediaの使用が含まれます そして お互いに 私たちわんこ友達が リアルタイムに チャットできます！ UIDelegateを設定するとき サーバーからのリクエストは ユーザーがカメラとマイクの使用を Appに既に許可している場合に 許可するであることが わかっています 自分のWKWebViewで このデリゲートを設定することで そのプロンプトをスキップできます しかし それだけではありません！ このユーザーメディアを 開始および停止するには JavaScriptを 実行する代わりに ステートを取得 設定できます JavaScriptなしでの メディアコントロールと インタラクションする方法と同様です これは カメラだけでなく マイクでも機能します これらの新しいAPIを もっと身近なものにするか そしてどれほど簡単に使用できるか その仮想ドッグパークを ブラウザペットに追加した方法を 見せてくれるブレイディに 戻しましょう ありがとう ミーガン ミーガンが言ったように 私たちの時代にふさわしく バーチャルドッグパークを 稼働させる必要がありました ブラウザペットAppを もう一度見てみましょう 通話ボタンに気付いた方も いらっしゃるかもしれません タップしてみましょう 私たちの友人の家でホストされた バーチャルドッグパークに すぐに接続できます 接続ボタンをタップして 楽しみに参加しましょう さて このAppでカメラを使用するのが 今回初めてであるため ブラウザペットにおける システムワイドの プロンプトが表示されます 許可を選択しましょう そして２番目のプロンプト- これは表示している Webサイト固有のもので- システムにおける現在の デフォルトの動作です これも許可しましょう ここでgetUserMediaが 動作します しかしミーガンが言ったように 体験をさらに良くするために WKUIDlegateに変更を 加えることが できるかどうかを見てみましょう

デリゲートでは バーチャルドッグパークの コンテンツを提供する ホストを確認するだけです メディアキャプチャアクセスを 許可します それがブラウザペットを どのように変えるか見てみましょう

すごい プロンプトはありません そして 私たちがデリゲートを 使用した方法では 将来のコンテンツが 他のホストからのものである場合や カメラにアクセスしようとする場合 ユーザーの安全と プライベートを維持します ビデオチャットをしているので ミュートボタンを試してみましょう ご覧のとおり カメラフィードが落ちました また録画インジケータに 気付くでしょう ステータスバーの中のもの が消えました ミュートを解除することで カメラフィードを元に戻せます そして録画インジケーターが 戻ります これは簡単でした JavaScriptは必要ありません すべきことはミーガンが言ったように webView.setCameraCaptureState に接続することだけでした これは APIでどのように WKWebView Appで メディアキャプチャを 簡単にカスタマイズできるか 体験してもらっただけです お戻しします ミーガン ありがとう ブレイディ！ 素晴らしいペット達みんなと 引き続き お会いできてうれしいです 最後に ダウンロードに ついて話しましょう ブラウザペットのユーザーは 友達や家族と一緒に これらのかわいい動物の写真を 共有できるようにしたいと 言ってきました ただし Appleの従業員のみが ブラウザペットAppの使用を 許可されていました 幸い APIを追加しました これによりWebViewからの ダウンロードを許可および管理でき ファイルの共有が これまでになく簡単になります！ Webからダウンロードを 開始する方法は３つあります Webコンテンツが ダウンロードを開始できます サーバーによってダウンロードを 開始でき Appでもダウンロードを 開始できます Webコンテンツによるダウンロードは JavaScriptによって同様に開始できます このJavaScriptを 実行すると ダウンロードナビゲーション アクションを開始し ナビゲーションデリゲートを 呼び出し shouldPerformDownloadを trueに設定します ダウンロードを許可する 必要がある場合 他のロジックと一緒に- この値を使用して 決定する必要があります- サーバーは WebViewで loadRequestを呼び出した後 このようにHTTPで ダウンロードを開始できます これが起こると WKNavigationResponseでは 「attachement」を含む値を伴う Content-Disposition ヘッダーフィールドがあります もしそうなら WKNavigationActionPolicyDownload をdecisionハンドラからリターンすべきです これにより ダウンロードを開始します 最後にAppにて 現在のページのコンテキストで 何をダウンロード するかを決定できます このように NSURLRequestを使用します どの方法を使用する場合でも WKDownloadオブジェクト を取得する際に そのオブジェクトにデリゲート プロパティの設定が必要です バイトをディスクに書き込む 場所を指示できるようにします そうしないとダウンロードは 自動的にキャンセルされます ダウンロードが失敗した場合 デリゲートに メソッドを実装するならば 再開するためのデータが渡されます その後WebViewから そのデータを使用してダウンロード を再開できます この新しいAPIを使用することで 簡単な方法を 提供できるようになりました 子猫をダウンロードする際に 写真に保存せずに ファイルにダウンロードできます これらはブラウザレベルの APIです これによりあなたと ユーザーにAppで リッチなWeb体験をするための より多くのオプションを 提供できると思います まあ なんという旅だったでしょう！ 今日 私たちは一緒に たくさんのことを確認してきました JavaScriptを 挿入する代わりに 使用できるいくつかの APIについて説明しました さらに強力なブラウザレベルの 機能についても説明しました 新しいテーマカラーや テキストのインタラクションや メディア再生APIが より利用しやすくなりました Appでより 豊かな体験を提供することを より簡単かつ安全にするために 自動HTTPS接続や getUserMediaプロンプトの 簡単かつ安全なコントロール そしてWKDownloadの追加により Appでダウンロードを 簡単に管理できます 今年サポートする 更なる新しいWeb APIの詳細は 「高度なWebコンテンツの開発」 セッションで 確認いただけます またWebコンテンツの デバッグと改善の新しい方法については 「Webインスペクタの改善点」 をご確認ください AppやWebに最適な Webコンテンツ作成に 役立つ２つの 素晴らしいセッションです Webはまだ成長しており 同様に私たちも成長しています 今年実装したAPIの多くは 開発者のフィードバックに 基づいたものです したがって希望される APIがある場合は 私たちにお知らせください！ Appleとの フィードバックに加えて webkit.orgに連絡を取る 複数の方法があります Slackワークスペースから メーリングリストなどです WebKitはオープンソースなので 自身でWebKitをチェックアウトし ビルドし学ぶことができる場所でもあります またバグも報告できます 私たちの新しいAPIの 探求について ご参加いただきありがとうございます WWDC21を引き続きお楽しみください！ 明るい音楽