WWDC 2017 で WebRTC、WebAssembly に対応したと発表された Safari 11 について書かれている What's New in Safari から読み取れるテクノロジーについて、調べてみました。

次期バージョン Safari 11 が、次期 macOS/iOS の 10.13 (High Sierra) と 11 に搭載されることが発表されました。

主な対応箇所は以下の通りで、

• ウェブ会議機能の追加
• Metrics の改良
• WebAssembly に対応
• WKWebView API の追加
• その他の新機能

とのことです。順番に見ていきましょう。

WebRTC 標準 を使用して P2P でのウェブ会議機能が作れるようになります。(appear.in みたいなやつ)
WebKit のベースとしているバージョンなどに差があるため、Chrome / Firefox とは微妙に違った実装・インターフェースになっているので adapter.js を使ってラップするのが一般的です。
slack や勉強会の遊び程度でしか使ったことがないのでこれを使ったプロダクトを作ってみたいものですね。

カメラとマイクアクセスが使用可能になる Media Capture API への対応が発表されました。
Chrome と同じように、動作には https が必須です。Safari 11 はさらに厳しく、現時点では localhost でも動作しません。
Safari Technology Preview の方では Develop → WebRTC メニューで「Allow Media Capture on Insecure Sites」にチェックを入れることで動作するようにできます。

コード分析ツール、ネットワークのパフォーマンスチェックのための新しいツールが追加されて、コードが細かくチェックできるようになりました。

• WebSocket のメッセージやコネクションの解析ができるようになりました。
• WebInspector で 右から左へレイアウト (RTL) ・言語への対応が強化されました。
• DOM と XHR でのブレークポイントが追加できるようになりました。

このあたりは最新の WebKit に追従していく感じですね。
iOS の実機テストなどがよりしやすくなっていいことです。

C、C++ などで書いたコードをコンパイルした .wasm バイナリをブラウザで実行することが可能な WebAssembly サポートが追加されました。 Flash みたいなもんですね

バイナリなので、ウェブアプリがコンパクトかつ高速に読み込み・動作するようになるといった特徴があります。

• see also: 「WebAssembly」がITの未来に変革もたらす｜Google、Apple、Microsoft、Mozillaが共同で開発した新概念

主に WebView で HTML ページを開いた場合の機能対応強化です。iOS では WebView には、WKWebView と UIWebView というコンポーネントがあり、今回は WKWebView を用いた WebView を使っている場合のみとなります。

WKWebView は UIWebView よりもできることが少なかったけど、今回からまた少し色々便利になります。

とくに URL Scheme への対応が面白いです。
WebView で <img> タグをネイティブが持っている画像を呼び出す場合、URL Scheme を使うなどが可能になりました。

ネイティブとの統合機能が影響するアプリを開発している場合はチェックしておくと良さそうです。

• see also: UIWebViewを使わない理由とWKWebViewを使う理由
• see alos: iOS 11 WKWebView 3大新機能 (WWDC 2017)

ここからは What's new in Safari 11 ではその他扱いになっていたところですが、詳しく見ていきましょう。

dragstart, dragenter, dragover, dragexit, dragleave, dragend, drop
これらの DOM event が追加されます。

iOS 11 の iPad ではアプリ間でのドラッグ&ドロップがサポートされるので、ブラウザである Safari も当然サポートとなるようです。

PC ブラウザのように、テキストなどをドラッグするだけで自動で処理するウェブツールやフォーム、ウェブアプリが作れるようになるので、楽しみですね。

「Variable Font」とは、今までは 100, 400, 700 といった単位で設定できた font-weight が、もっとシームレスに変更できる的なフォントで、対応しているフォント (font-family)である必要があります。Apple の San Francisco などは対応しているようです。

• see also: sample を Safari Technology Preview で見ると、font の太さがアニメーションしているところがみれるはず

CSS で塗りや線を書くことができるプロパティが強化されます。
paint-order (塗り順), stroke-linejoin (線のつなぎかた), stroke-linecap (線の端), stroke-color, stroke-width, stroke-miterlimit (つなぎ目の調整)が追加されます。

どうでもいいけど linejoin とか miterlimit とか単語のつなぎ目が一切わからない命名、これこのままいくのでしょうか・・・これ言いだすと JavaScript の touchstart とかもそうですが・・・

iOS のホーム画面に追加して立ち上げたウェブページの場合、meta tag などのコンテキスト設定によってアプリ的に表示できるアレの、機能が強化されます。
あまり使われることはないと思いますが、ホーム画面に追加してねバルーンなどでうまく誘導してあげて追加してもらえたら、よりよい体験にできるかも。

高速にボタンが連打できるようになるやつ

スクロールが簡単にスクロールスナップしてくれる CSS プロパティ

• WebCrypto API の最新バージョンがサポートされます。
  • 「WebCryptography API」は暗号に関するブラウザテクノロジー。
  • 最新の暗号アルゴリズムが追加されています。
• セキュリティの強化
  • クロスサイトトラッキング(別オリジン間)を cookie を使用して追跡できなくなります。
  • CORS (cross origin access) からの file:// アクセスがブロックされます（開発メニューからの解除は可能）。
• Safari Extension のセキュリティ強化
  • Safari Plugin 開発向けに、URL を分析してコンテンツをブロックするかどうかの判断ができるようになります。

mac OS Sierra 10.12.6 など現時点で stable な macOS 環境下でも使用可能なので Safari 11 Beta や Safari Technology Preview を利用してみると楽しいかもしれません。

冒頭にもリンクを書きましたが、詳しくは What's New in Safari を読み進めてみると理解が深まるでしょう。

App Develop もされる方は WWDC 2017 Videos も時間があったら少しづつ見ていくと良いかもしれません。