SafariとWebKitの新機能

(音楽)

(拍手) 皆さん　こんにちは

どうも 楽しんでいますか？ 次々と新発表が飛び出すので ワクワクしますよね 私はシュローカ･キニ Developer Publicationsで 働いています つまり私はコード以外に 文章も書けるんです (笑い声) デベロッパの助けとなる ドキュメントを作っています 今日はSafariとWebKitについて お話しします 最新のSafariで 最新技術を使いたいという― Webデベロッパは よく聞いてくださいね Webビューや機能拡張を 使用する方にも― 耳よりな話です 他分野の方も ぜひ聞いてください 新機能で より快適な ブラウジングを楽しめますよ

前回の発表から さらに― 大きく向上しています 今回は最新技術による安全で 高機能なアプリケーションを いくつかご紹介しましょう 多くが無料ですよ ではセキュリティに関する発表から 始めましょう

WKWebViewです “WKWebViewなら 2014年からある”と― 思われたでしょう ですが改めて紹介します UIWebViewは 非推奨になるからです (拍手) Webコンテンツの ネイティブ環境での表示が 難しい時などに WKWebViewがお勧めです UIWebViewを知っていれば 切り替えも簡単ですし macOSでもiOSでも 開発時間が減らせます WKWebViewは どちらでも使えるからです UIWebViewや Webビューとは違い― 両方でコードを共有できるのです さらにWKWebViewは 独立しているため― Web処理に問題があっても アプリケーションに影響しません 重いWebコンテンツで 処理が遅れることもないのです たとえWKWebViewが故障しても― アプリケーションに 被害は及びません WKWebViewは高い安全と 性能を提供します たとえ面倒でもWKWebViewに 替える価値があるのです

次は機能拡張に関する発表です Safariの機能は― この数年で大きく進化しました Safari Extensionの歴史を 振り返ってみましょう アプリケーションの拡張という 概念がない2010年に― Legacy Safari Extensionを発表 Safari Extension Builderで .safariextzファイルを作り Safari Extensions Gallery経由で 拡張機能を公開していました Legacy Extensionは 閲覧データにアクセスできたため 詐欺などで悪用されてしまいます これらから守るのに 手を打つ必要がありました そして2014年が 新たな節目となります macOSとiOS向けの アプリケーション拡張を発表 App Extensionは― Safariではなく アプリケーション拡張です しかし これが 大きな変化を生みました 他のアプリケーションに 機能が拡張できる上に― Xcodeで作成できるのです そこで私たちは― この優れた概念をSafariに 適用しようと考えます 当時はアドブロッカーが人気で 2015年にContent Blockerを導入 Xcodeで作成できる App Extensionで macOSとiOSで使えます 特別な構造で高速化を実現 Legacy Safari Extensionより 速くブロックします 閲覧速度に影響することはないし 閲覧履歴にアクセスしないので 安全です App Extensionの利点は多く すべてSafari Extensionに 取り入れようと考えました そうすれば双方を生かせます Safariの機能拡張に加え― アプリケーションも拡張します そして2016年― macOSにSafari App Extensionが登場 Xcodeで作成できる Safariの拡張機能です App Storeで無料または 有料で出品できるので― 請求処理の心配も要りません 2010年のLegacy Extensionと比べて― Safari App Extensionは とても便利です Legacy Safari Extensionを お持ちなら― ぜひ切り替えてください アドブロッカーも Content Blockerへ それでは― Legacy Safari Extensionの 悪用対策は？ Safari 12から Legacy Extensionは― Gallery外ではサポートされません Galleryで提供されるものは まだ使えます 非推奨の canload APIを使う 拡張は例外で デフォルトで無効となります Galleryへの提出は 2018年末まで可能です しかし翌年には さらに新しくなり いずれはSafari App Extensionに完全移行します この２つの機能拡張モデルの 開発方法は― ドキュメントをご覧ください Developer Publicationsが 掲載しています (拍手)

ここまでWebビューと― 機能拡張について発表を行いました 以降は主にWeb開発に 関わる説明です まずはSubresource Integrityです デベロッパがコンテンツを HTTPSで提供した場合― 第三者サーバからのコンテンツが 含まれる可能性があります 例えばCDNサーバです 双方がHTTPS通信なら 安全かも知れません データの機密性や整合性を― 確保できるからです しかし第三者が感染していたら どうなるでしょう？ あり得る話です この場合 感染したサーバに対して HTTPSは安全を確保できません そのため 改ざんされたスクリプトが 提供される危険があります Subresource Integrityは これを防ぎます 方法はハッシュ化です まずはScriptやLink要素に Integrity属性を付与 値はハッシュ関数を適用して 生成します 読み込み時に 別のハッシュ値を計算 ２つが一致しなければ スクリプトは実行されません こうして改ざんファイルの 読み込みを防ぎます ハッシュ値が一致しない限り― 実行されないのです 機能を失わないよう フォールバックを追加しておけば リソースを再ロードできます

これで悪意あるファイルから ユーザを守れます そしてITPはユーザの プライバシーを保護します 正式名はIntelligent Tracking Preventionです ユーザ追跡を減らす Safariの機能で Cookieやサイトデータを 制限するものです Cookieの保存には ２つ条件があります 外部サイトがCookieを 利用できるのは― ユーザのサイト訪問から24時間 そして最初の24時間を含め 30日間のみ― Cookieは独立ストレージに 保存されます ですが今回 制限を厳しくしました 24時間のCookie利用期間は 撤廃されます しかし独立ストレージには 保存されます デベロッパにとって 外部埋め込み機能は― ワークフローに重要なものです では どうするかと言うと― Storage Access APIを使います

外部埋め込み機能が― 当事者Cookieにアクセスするには 許可が必要です 許可がない場合 プロンプトが表示され― Cookieへのアクセス可否を ユーザに問い合わせます アクセスの判断を委ねることで― ユーザがCookieを 管理できるようになるのです これでプライバシーを守りながら ブラウジングできます

次はAutomatic Strong Passwordsです 他のセッションでも ご覧になりましたよね この機能は最高ですよ アカウントを登録するのに 常に強力なパスワードを 設定できます これは便利です パスワード管理については 私も実は苦手です それほど強固ではなく 他で使ってる場合もあります この機能に手間はかかりません ログイン画面に行けば ヒューリスティックが決定します ですが機能させるには 入力フィールドに― autocomplete属性を 追加してください

パスワードは長さが20文字で― 大文字 小文字 数字 ハイフンを含みます この機能を どのサービスにも 適合させるには― パスワードに条件が必要です そこでpasswordrules属性を使用し パスワード要件を追加します デベロッパWebサイトに ValidationToolがあります これで互換性テストができますし 独自のパスワードルールが 開発できます

Security Code AutoFillも 先日 紹介しましたね 多くの人が無料で得られる 便利な機能です 面倒だと思うんですよ アプリケーションと メールを行き来して 認証コードを覚えて 入力するなんて でもSafariが― 認証コードを 入力候補に出してくれたら？ とても楽ですよね これもヒューリスティックを 使うので無料です しっかり機能させ 入力候補を出すためには autocomplete属性に one-time-codeと設定します 詳細についてはオンラインで― Security Code AutoFillの セッションをご覧ください

以上がセキュリティです WKWebViewに切り替え Content Blockerと Safari App Extensionに移行 改ざんファイルを提供しない Subresource Integrity ITPはStorage Access APIで プライバシーを確保 Automatic Strong Passwordsと Security Code AutoFillは 安全で便利な機能です

ここまで大丈夫ですか？

次はパフォーマンスに関する 機能です まずはFont Collection 冒頭でも言いましたが― 私の名前はシュローカ･キニ 英語の名前ではありません

デーヴァナーガリー文字では こうなります フォントは様々ですが 文字はすべて同じです 今年はWOFF2とTrueType コレクションをサポート 同類フォントを １コレクションにすれば 複製テーブルを 文字コード表から省けます 例えばビルトインフォントの PingFangは― コレクションを使えば ファイルを84％縮小できます なぜなら 同じ文字セットのフォントは テーブルを共有しているからです

次の機能Font-Displayは 変更が不要です Webコンテンツで カスタムフォントを使用し 表示されなかったとします すると フォントの表示まで プレースホルダを使い― 画面上のコンテンツの位置が 保たれます しかし この設定をやめて 自分で調整したい場合は Font-Displayディスクリプタを 使用します 別の値を使って 他のフォントや― キャッシュのフォントを 指定したりできます

動画のパフォーマンス向上には ビデオを使います 私は この爆発の壁紙が 気に入っています カッコいいのですが静止画です 本当は“バーン！”と出てほしい 動きのあるGIFなら完璧です しかし読み込みが遅く バッテリーを消費します それにビデオより パフォーマンスが落ちます

Safariにおいてmp4は img要素でサポート 再生にはビルトインの ハードウェアデコードを使います 読み込みは速く バッテリーの消費も削減 CSSの背景プロパティでも mp4を使えます この技術は簡単に導入できます 古いブラウザに非対応の バージョンにもです 古いブラウザはmp4に対応しません しかし便利なことに 既存の技術で― フォールバック画像を表示するよう 指定できるのです

続いてイベントリスナーに 移りましょう いいですか？ 優れたデフォルト機能と カスタマイズ性を持っています タッチスクリーンの操作は― スクロールをします その度にタッチイベントが発生 これによりスクロールが 妨害されてしまいます 例をご覧ください

左の方が右よりも 妨害されていますね ほぼ停止してます では右は何が違うのでしょうか Passive Event Listenerです これは documentやwindow bodyの要素で有効になります そしてタッチイベントが ブラウザに指示します “妨害を受けず スクロールを続行せよ”と 追加要素をPassiveにしたい場合は Passiveプロパティを Trueに指定します このフラグの指示によって― ブラウザはイベント処理の完了を 待ちません これで滑らかに スクロールできるのです

次はAsync Image Decodingの 非同期呼び出しです 通常 画像のデコードは同期的です メインスレッドをブロックし すべての画像を読み込んで 表示します これではユーザとの対話も 遮断されます しかし非同期デコードなら スレッドを並行処理するので 対話はブロックされません 非同期呼び出しは デフォルトで１ページ目から機能し 大抵のWebコンテンツを カバーします しかし特殊なケースも あり得ます Webページにタイルマップがあれば 読み込みにズレが生じます 画像が多ければタイルの表示が 遅れるかも知れません そしてアプリケーションの スライドショー スライドをフェードインさせるのに 同期デコードでは 間に合わないかも知れません

それで 突然切り替わる でも非同期デコードなら きれいにフェードインします こうしたケースでは ２つの対処法があります １つはimg要素に decoding属性を追加する もう１つはJavaScript APIの― HTMLImageElement.decode メソッドを使います これがpromiseを返し― DOMへの追加タイミングを 知らせます

そして非同期呼び出しの継続は Beacon APIをサポートします 通常はunloadイベントに データを送ろうとした場合― 非同期リクエストは無視されます そのため読み込みの遅い 同期リクエストを使います でも今はBeacon APIがあります Safariが起動していれば データをサーバに送るだけです 間違いなく届きます

たくさん話しましたが 実際に機能を見たいですよね これよりジェーソンに 実演してもらいます よろしく (拍手) どうも デベロッパの ジェーソン･サンドマイヤーです 僕は工芸が好きで休日に バードハウスを作ってます 最近 作品を紹介するのに ブログを始めました 自分でフォントや色も選び 仕上がりに満足しています このデザインもですが― ユーザに優れた機能を提供できて 誇らしく思います WebKitとSafariの新たな機能を ブログにも活用してみます とても簡単ですよ

MacBook Proでサイトを開きます

そして…　おっと ちょっと 何したの？

上品なブログじゃなくなったな

正しいURLなのに…

原因はきっとこうだ

このサイトを始めた時― 友人にブロゴスフィアは 危険だと言われました

これは破壊工作ですよ スタイルシートを 誰かに替えられました でもバックアップがあります さらにSubresource Integrityの機能で 今後の安全を確保します

まずは新しいintegrity属性を linkタグに追加 スクリプトにも使えますが― まだ変更を加えるので 追加は後にします

この属性の値は ハッシュアルゴリズムで― 表示するファイルの チェックサムを生成したものです

すでにSHA-256ハッシュを 用意してます 次がハイフン そしてハッシュ値を表すBase64 これを保存します そしてページをリロード スタイルがありません ファイルとHTMLのハッシュ値が 一致しないので― Safariがブロックしました

CDNに接続します デスクトップのバックアップです バックアップをCDNへドラッグし ファイルを置き換えます そしてリロードすれば元通りです (拍手) どうも Subresource Integrityがあれば こうしてサイトを保護できます

続いてパフォーマンスを 見てみましょう

サイトの どのリンクが クリックされたかが分かれば デザインに生かせます

そこでクリックのデータを 確認できるよう― ハンドラを設定しておきます

しかし他のページに飛ぶ リンクを押すと 遅れが生じることに気が付きました リンクをクリック

開くのに１秒ほどかかりました

これは ハンドラの 同期リクエストにより Safariがブロックされるからです 同期リクエストは ブラウザがリクエストを― 中止しないようにします しかしサーバの反応は遅くなります 僕はデータがサーバに届けば 反応は気にしません そんな時は Beacon APIが最適です

まずはBeacon APIが ブラウザで使えるかをチェック sendBeaconメソッドを確認します 使えなければ 元の方法で続けます そこで使えます

エンドポイントを渡します dataもです

保存してサイトへ リロードします これで すぐに飛びます リンクをクリック 開きました XMLHttpRequestと比べて コードが短く安定しています これで よりスムーズに サイトが見られます

(拍手) どうも

次はiPadの問題を見てみましょう

サイトはクロスフェードの スライドショーにしています

右矢印をタップすると進みます

気付いたでしょうか 画像が一瞬 白くなりました もう少し進めます

コードを確認してみましょう 改善できるはずです

これがスライドショーのクラス setCurrentSlideに注目します これがボタンのクリック時に 呼び出されるメソッドです

各スライドは すぐに映らないので クリックすると 次の画像だけ読み込みます

ここでの問題は― 移行だけが すぐ行われることです 画像を待ちません 画像がロードできても 表示にはデコードが必要です そこで画像のロードと デコードを待つように― 調整したいと思います HTMLのimg要素に 新たなdecodeメソッドを― 加えれば改善できます img要素のリファレンスです

decodeメソッドが 画像を非同期でデコード 処理が完了した時点で promiseを返します

そしてコールバックとして transition関数を渡しました

iPadに戻ります

リロードでページを更新 これでスムーズに進みます

画像が白くなりません

(拍手) Macに替えます

サイトの最後のページには― 鳥のアニメーションGIFを 載せています

これは かなり大きな容量です このGIFは ７MB強ありますが 画質は良くはありません でもH.264でエンコードされた mp4があるので これを直接 サイトに使います HTMLに戻り画像を探します ありました ファイルの拡張子を mp4に変えます リロード これで―

高質の動画に変わりました 容量は約１MBですが― GIFより尺が少し 長くなっています

src属性でも使えるので― フォールバック画像を ブラウザに提供できます

以上が新たな機能のうちの ４つになります

これらを活用すれば ユーザも喜ぶでしょう ではシュローカに新機能の 紹介を続けてもらいます (拍手)

ありがとう ブロゴスフィアの非情さを 初めて知りました

気を付けてね

おさらいしましょう フォントコレクションで ファイルサイズを縮小 Font-Displayは カスタムフォントを調整できます img要素でビデオを使えば パフォーマンスが向上 Passive Event Listenerで スクロールが円滑に Beacon APIやImage Decodingで 非同期呼び出しを使えば メインスレッドの遅れを防げます

最後のトピックは― ユーザ体験を向上する新機能です まずはドラッグ＆ドロップです ドラッグ＆ドロップは APIのアップデートで向上 ディレクトリ単位で アップロード可能です 圧縮も必要ありません さらにHTML テキスト URLの― MIMEタイプの読み書きを サポートします iOSにおいては Data Transfer APIもアップデート ドラッグ＆ドロップ動作を カスタマイズできます 例えば ショッピングカートに 商品をドラッグしたい場合は 動作をカスタマイズ img要素をドラッグし― 要素名と金額を カートにドロップします このように カスタマイズすることで より豊かな操作ができるのです

APIの話に移ります Payment Request APIと Apple Payです Apple Payは単なる 支払い方法ではなく 電子決済を 考え直させるものです 支払いの際に カード情報が渡らないので より安全に支払いができます 標準APIでのサポートを 望む声が多く上がったので 力を合わせて取り組み 実現しました Apple PayはW3C標準のAPIで 利用可能です

(拍手) これでオプションが増えました しかしApple Payを使うには― 変更が必要です 例えば 既存の決算フローでははく インターフェースに Apple Payボタンを追加します 現在 Payment Request APIで 使える機能は数点です きめ細かなエラー処理と 提携カードと音声表記の処理です これらはApple Pay JSだけで 使えます Apple Payで この機能が必要であれば Apple Pay JSを使いましょう

もう１つ対応したAPIは Service Worker APIです

ユーザのネット接続に 問題がある場合… 不安定だったり 接続しなかったりする時― Service Workerなら 体裁よく処理できます Service Workerは 固有のオリジンで登録 オフラインでキャッシュが使えて スクリプトのリクエストも 傍受します すべてのページが 同じインスタンスを持つので 複数のタブを同時に開けます リクエストもすべて 同じスクリプトで傍受され 不変のリソースを維持できるのです Service Workerで Webページが安定します Webアプリケーションでも SFSafariViewControllerでも 不安定な接続環境にも 対応できるのです

次はiPad向けの Fullscreen APIです Safari内の要素をカスタマイズし フルスクリーン調整ができます その要素をクリックすれば フルスクリーンにできるのです (拍手) 動画では自動判別し キャンセルボタンを表示 コンテンツが再生していれば ボタンが消えます

キャンセルボタンによる コンテンツの遮断は― CSSの環境変数 fullscreen-inset-topで防げます さらにfullscreen-auto- hide-delayを使って ボタンと同時にコンテンツを 隠すこともできます

残り２項目となりましたが まずはARです ARの話は何度も聞いてますよね ARモデルをUIに追加すれば― サイトでAR Quick Lookが 利用できます コードも長くなく― アンカータグを書き ARにrel属性を指定 USDZにhrefリンクを指定し フォーマットをARモデルへ モデルの画像を含んだ imgかpicture要素を追加 すると画像はこうなります 画像の上部に アイコンが表示され― クリックでARが 利用できることを示します これでWebサイトに 深みを加えられます

詳細はセッションをご覧ください 「Integrating Apps and Content with AR Quick Look」です

最後はwatchOSです WebサイトはMacBook― そしてiPad ポケットサイズ画面の iPhoneでも見られます 今度は さらに小さな画面です

watchOSでサイトが見られます (拍手) 私はもう大歓迎です 母からレシピが 送られてくるんですが Eメールを見ながら 料理はできません でも今後は腕の上の画面で レシピが見られるんです レスポンシブデザインで watchOSの画面でも よく見えます Webサイトの さらなる最適化も可能です WWDCの動画「Designing Web Content for watchOS」を ご覧になってください

先ほどのジェーソンのブログも― これらの機能で さらに質を上げられるはずです 彼を呼んで実演してもらいましょう よろしく (拍手) どうも 僕は読者が工芸を始めやすい ブログを目指しています

iPadに替えますね

そこで作業に必要な物の リストを載せました さらに便利さを追求して― ショッピングリスト機能を 加えようと思いました 読者はブログから買い物ができるし 僕も小遣いが稼げます

ドラッグ＆ドロップ機能を 加えれば― 品物をショッピングリストに 移せます

iPadでも問題ありません

ではコードを見てみましょう

それほど手間はかかりません Data Transfer APIを使って― 各品にdragstartイベントを 加えます

そしてリストである ドロップゾーンには― dropイベントを追加 これが保存されたテキストを― Data Transfer APIから取得し shopping-list要素に加えます

さらに要素を ドロップしたいエリアに― dragoverイベントを追加 これでデフォルトイベントを防ぎ 指定のドロップを可能にします これだけでショッピングUIが完成 MacやiPadで しっかり機能します

ショッピングリストができたので あとは購入方法です

Payment Request APIで Apple Payを提供します

HTMLとCSSで サイトに加えましたが― Apple Payボタンは デフォルトで隠しています ユーザのデバイスが― Apple Payに対応する場合のみ 表示します その確認は―

ApplePaySession.canMake Paymentsメソッドを使用

対応可ならボタンを表示します

ボタンにイベントを追加

関数内にPaymentRequest インスタンスを生成し 処理を開始します

PaymentRequestがダメなら Apple Pay JSです

これがコンストラクタです 引数は３つ入れられます

まず 支払い方法の データオブジェクトを追加

これにApply Payの識別子や オプションが含まれています

その下は支払いに関する詳細で ここで細かな処理を指定します サイト名や総額や商品名などです

僕はリストの各品を ５ドルに設定しました

最後はオプション引数に― 処理を完了するのに必要な ユーザ情報を記述します

iPadに戻して 商品をリストに入れます

全情報を渡したので― シートを表示するのに 別のメソッドを呼び出します

これがshowメソッドで promiseを返します Face IDやTouch IDで ユーザが処理を― 認証した時にです ここで決済処理を行います

そして 処理が成功 または失敗したかの値で completeを呼び出します

iPadを確認

できました (拍手) さらに決済セッションの取得など 数ステップあります 詳細については― Apple Developer Webサイトの セッションをご覧ください

僕のブログには― 何かが欠けていると気付きました

完成作品です そこで画像を加えようと思います でも静止画ではなく― 実際の環境にある作品を 見られるようにしたい iOS 12の 新しいAR Quick Lookなら 数コードで実現できます

HTMLを開きます ここなら最適です 早速 画像を追加し― バードハウスのモデル USDZファイルにリンク ARのrel属性と共にです

iPadに戻ると― いい感じの完成品が載っています AR Quick Lookのアイコンを タップすると―

モデルを動かしたり 実際の環境に置いたりできます これなら感覚がつかめます (拍手) とても簡単にできるので―

セッションを見てみてください あとはシュローカに任せます どうも (拍手)

ありがとう　ジェーソン いい感じのモデルでしたね あれを見てバードハウスを 作ってみようかと思いました 実行するかは別です

おさらいです ドラッグ＆ドロップと― iPadのフルスクリーンの カスタマイズ Payment Request APIで Apple Payをサポート Service Worker APIで オフライン作業 ARモデルでサイトに 深みを与えられ― それをApple Watchで 見られます

これまでに機能の参照先を お伝えしました ですが質問のある方は― ラボに寄っていってください セッションのリンクから― 今回のドキュメントと 関連セッションをご確認ください Webに関する機能は 豊富にあります Appleは絶え間なく― SafariとWebKitの サポート向上を行っています これによりWebやネイティブ 拡張のデベロッパが 最高のユーザ体験を 提供できるのです セッションへの参加を感謝します このあともWWDCを 楽しんでいってください (拍手)