Webデベロッパのための新機能

(音楽)

(拍手) おはようございます　デヴィンです 本日はWebKitの新機能を お伝えします 内容が多いので早速 始めます Webデベロッパにとって 今年は新情報が豊富ですので 様々なトピックに触れていきます Webに特化したAPIや よりネイティブな感覚を与える 新手法など それではダークモードから ご紹介します 初めて導入したのはmacOS Mojave そして今年は iOS 13にも導入されます

つまりデスクトップ モバイル どちらの環境でも適用できます それほど複雑ではありません Webコンテンツには 簡単に適用できます 見てみましょう darkを含むcolor-scheme値を CSSのrootに加えます するとページ全体に ダークモードが適用されます デフォルトのテキストや 背景のカラーなどが 暗めのテーマに自動更新されます しかしカスタムスタイルの場合 手動での更新が必要です Media Queryを prefers-color-scheme:darkと指定 他のMedia Queryと同様なので ダークモードでのみ スタイルが適用されます

これでカスタムスタイルであっても ページ上を 暗めのテーマに統一できます CSS適用外の画像には picture要素が使えます 同じMedia Queryを使えば 通常時とダークモード時で 画像が自動的に入れ替わります とてもシンプルです 他にもJavaScriptの matchMedia APIを使う場合 同様のMedia Queryで 対応できます 他のWebコンテンツでも この手法でダークモードが使えます クールなWebサイトに 仕上がりますよ 詳細については WebKitのブログや WWDCの動画をご覧ください ダークモードの情報を お伝えしています

ダークモードの 適用方法については以上です 簡単ですね

続いては非常にシンプルなAPI Web Shareです ネイティブのShare Sheetを 呼び出せます

標準化されるため SafariでもWKWebViewでも 共有できます 特にiOSに注目して シェアシートを改良しています

使い方は navigator.shareを呼び出すだけ シェアが完了したか 却下されたか Promiseが返ってきます しかし このAPIはユーザの タップ操作に反応するため

他の操作では即拒否されます

Web Share APIの実用はすでに 主なWebサイトで確認できます 例えばTwitter ダークモードも実装済みです シェアアイコンをタップすると リンク付きのシェアシートが開きます iOS 12.2以降で試してみてください

Web Share APIでした ネイティブ機能を簡単に呼び出せます

ではメディアの新機能に移ります ユーザのデバイスに 最適なコンテンツを表示させたいなら Media Capabilities APIが使えます ビデオコーデックが サポートされているか 処理速度や電力効率に適切かを 判断できます コンテンツ情報をより深く理解して 表示できるのです

ビデオコンテンツと言えば macOS CatalinaやiOS 13も アルファチャンネルをサポートします

HEVCでエンコードしたビデオに 透明度を加えられます 例えばこう活用します ダークモードが有効なら ビデオを別のコンテンツと 境目なく統合できます 通常時とダークモード時の ２種類に分けず 透明な背景のビデオ１つで済みます このビデオは どの端末でも使用可能 特別なシンタックスや MIMEタイプは不要です

しかしアルファチャンネルが有効か 事前に確認しましょう 旧バージョンのiOSやmacOSは要注意 Media Capabilities APIを使う場合 capabilitiesに アルファチャンネルのキーが必要です

macOS Catalinaでの使用方法を含め アルファチャンネルの詳細は HEVCビデオ作成の動画をご覧ください

P2Pのチャット機能を備えた Webサイトでは スクリーンショットも重要です Safari 13では getDisplayMedia APIが使えます これを呼び出すと ユーザにスクリーンショットの許可を 促します 許可が得られると Promiseがキャプチャ部分の メディアストリームを返します 標準のメディアストリームと 同じなので WebRTCを使って画面を共有できます

これらメディア新機能が macOS CatalinaやiOS 13 Safari 13に導入されました

それでは次に新ツールです すべてのプラットフォームで Webコンテンツの性能を 高められます コンテンツを開発する上で バッテリーの浪費や 不必要なアクションは避けたいところ

そんな障害の原因を把握するため Web Inspectorに 新型CPU Timelineを搭載 実行可能な情報を表示するので 効率的な処理を促せます WebKitのブログやWWDCの動画を ご覧いただけば この機能の詳細を確認できます きっと開発に役立つはずです

次はiOS向けのWebDriver

自動回帰テスト向けの 標準フォーマットを iOS 13搭載のiOSデバイスで 利用できます WebDriverで自動回帰テストを行い コンテンツの動作を確認できます どんなプラットフォームにも対応します 機能はmacOS上と同等です 詳細は Apple Developer Webサイトにあり ブログにも投稿予定です

次は 構造化データの 保存方法についてです

過去にもIndexedDBと WebSQLを紹介しました Safari 13ではWebSQLは削除されました 現代のWebブラウザでは IndexedDBが主流です 私たちも標準準拠に近付けていますので 早めにIndexedDBへ移行することを お勧めします

最後はApple Payについて 非常に手軽な決済手段です お伝えすることは２つ １つ目 今回 ペイメントリクエストAPIを使い 全機能をサポート より標準化した形で Apple Pay JSのすべての性能を Webコンテンツに導入します ペイメントリクエストAPIに 切り替えれば Apple Pay JSの性能が加わり 今後も進化を続けます ペイメントリクエストAPIの 使用方法について 詳細は後ほど投稿するWebKitブログを ご覧ください ２つ目

WKWebViewでApple Payが使用可能に どうも (拍手) より多くのアプリケーションで 使えます 配慮する点もあります ユーザはApple Payで購入する時 Webページと直接通信していると 思うでしょう トランザクション中やその前に 通信に邪魔が入ってはいけません そのため Apple Payの使用や スクリプト挿入の実行時は 条件を満たす必要があります 見てみましょう

WKWebViewの現行ページに スクリプトを挿入済みなら Apple Payは機能しません

また すでにcanMakePaymentsを 呼び出している場合 スクリプト挿入はできません エラーとなるでしょう

しかし現行ページの制限なので 最上位ナビゲーションで解消します

説明しましょう

Apple Payボタンを表示したりする前に canMakePaymentsを 呼び出すことが重要です 表示したApple Payボタンが 使えないといった― 問題を回避するためです

アプリケーションの場合は WKUserScriptやevaluateJavaScriptなど スクリプトの挿入を 実はしない方がいいのです 同機能のWebKit APIがあるので スクリプトの挿入は全く必要ないのです 挿入すると Webコンテンツの性能を 落としかねません

Apple Payは以上です

Webデベロッパ向けの新情報を 簡潔にお伝えしました iPadのデスクトップ表示に関する セッションでは Webプラットフォームの 新機能をご紹介 デスクトップ感覚でiPadを使えます

有意義なセッションになれば光栄です 今後 最高のWebコンテンツに お目にかかれることを期待しています よい一日を (拍手)