次期「Safari 10.0」で新しく追加される機能まとめ

2016年後半にも登場が予定されているAppleの新OS「macOS」および「iOS 10」などの標準ブラウザとなる「Safari 10.0」の新機能や仕様がAppleの開発者向けページで公開されています。

Safari 10.0
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html

【Web API】
◆IndexedDBのサポート
IndexedDBを実装することで、W3Cの勧告基準に完全対応。これにより、オフラインで使用するWebアプリケーションの構造データを保存するためおよび、クライアント側で大量のデータをキャッシュするリクエストを行うAPIを利用可能に。

◆プログラマティックな切り取りとコピーに対応
プログラム上で切り取りとコピーを行うJavaScriptコマンド document.execCommand('cut') と document.execCommand('copy') をサポート。

◆CSP 2.0
コンテンツセキュリティポリシーにおける基準のレベル2が含まれたことでサポートを強化。

◆Shadow DOM
Shadow DOMバージョン1規格に準拠。ページ内のスクリプトとスタイル間でコンフリクトする恐れなしに機能させることが可能。

◆ES 6
「ES6」とも呼ばれる「ECMAScript 2015」が完全にサポートされ、JavaScriptの大きな進化がSafariにも反映される。

◆ES国際化
ECMA-402として知られているECMAScript Internationalization API規格の統合により、クライアントサイドの数字・通貨・日時フォーマットに対し、ユーザーの言語やロケール、提供されている言語やロケールを反映できる。

◆DOM 互換性アップ
Safari 10は多くのブラウザやサイトと同じようにして互換性でW3Cのテストをパスすることを保証しており、他ブラウザとの互換性もあり。

◆3D Touchイベント
iOS向け3D Touchで、touchforcechangeイベントはタッチの圧力が変化した際にのみ呼び出される。このイベントはOS XnoWebkitにおけるwebkitmouseforcechangedと同等のもの。touchオブジェクトにおけるforceプロパティの値は0.0から 1.0となる。

◆WebGL
・iOSでantialiasコンテキスト作成パラメータをサポート。デフォルト状態の値はtrue。
・iOSで、alphaコンテキスト作成パラメータで値falseをサポート。
・ページあたりのアクティブなWebGLの総数が16個に限定される。上限に達した後は、新規コンテキストが追加される際に最も古いコンテキストが破壊される。

【メディア再生】
◆iOSでインライン動画を自動プレイバック
・webkit-playsinlineが指定されている場合、iPhoneのSafariは動画のインライン再生を許可する。プロパティが存在しない動画はフルスクリーン再生を開始するが、ユーザは動画をピンチインすることでインライン状態での再生を継続することができる。
・iOSにおいて、音声トラックが含まれない動画や音声トラックがオフになっている動画は、ページが読み込まれた際に自動で再生することが可能。

◆OS Xにおけるピクチャ・イン・ピクチャ対応
・OS X向けSafari 10で「ピクチャ・イン・ピクチャ」をサポートし、再生中の動画を分離して別ウィンドウで表示し、他のアプリが動作中でもページの最も前面に表示させることが可能。
・Safariデフォルトのビデオコントロールにピクチャ・イン・ピクチャコントロールが追加。
・カスタマイズされたHTML5ビデオコントロールが使われている場合は、JavaScriptプレゼンテーションモードAPIを使うことでピクチャ・イン・ピクチャ機能を追加することが可能。

【テキスト機能】
◆WOFF 2.0サポート
新しいWeb Open Font Format (WOFF) 2.0によりWebフォントの圧縮率が向上するため、フォントの転送に必要な帯域幅が減少する。

◆フォントの読み込み
・ウェブデベロッパはCSS Font Loading Module Level 3仕様を使い、フォントフェースを作成およびスクリプトから読み込み、フォントのローディング状態をトラッキングすることが可能。
・Webフォントは、レンダリングされたテキストの文字がフォントのUnicode rangeに含まれる場合にのみダウンロードが可能。

【レイアウトおよびレンダリング】
◆object-positionプロパティのためのCSSサポート
object-positionプロパティのコントロールを別要素と交換可能に。例えばコンテナボックス要素内にあるvideo、img、objectなど。これによりobject-positionとbackground-positionプロパティは同様の方法として利用可能。

◆SVGパスでクリッピングをサポート
より凝ったシェープをクリップすることができるようになり、「CSS Shapes Level 2 specification」で定義されているベジェ曲線でのパスセグメントとevenodd・path()のシェープが利用可能に。

◆カラーレベルで#RGBAと#RRGGBBAAサポート
「CSS Color Level 4 specification」で定義されている#RGBAと#RRGGBBAAが利用可能に。

◆border-imageで新しい値を利用可能に
border-imageのCSSプロパティにroundとspaceの値をサポート。

◆image-renderingで新しい値を利用可能に
image-renderingプロパティでcrisp-edgesとpixelatedの値をサポート。接辞は-webkit-crisp-edgesと-webkit-optimize-contrastで、値はcrisp-edgesに適用。

◆RTL（アラビア文字など横書きで右から左に文字を配置する）のサポート
スクロールバーの位置やフォームコントロール出現時にdirectionのCSSプロパティに合わせることが可能に。

◆より広い色域でのメディアクエリーのサポート
CSSかpicture要素にメディアクエリーの適用ができ、デバイスによってより広い色域が表示可能な場合にコンテンツに対して異なるプレゼンテーションスタイルが適用可能。例えばP3ディスプレイのカラースペースを適用する場合は以下のようになる。

@media (color-gamut: p3) { … }

◆CSSブレイクプロパティ
CSSのプロパティでbreak-after、break-before、break-insideをサポート

◆CSSで接頭辞なしになるものあり
以下のCSSは「-webkit-」なしで動作可能。
・filter
・cross-fade
・image-rendering

【Web Inspector】
◆WebDriverのサポート
OS X上のSafariでWebDriverをサポート、Webコンテンツのテストを全自動化可能。DOM要素の操作やブラウザの挙動のコントロールのインターフェースについてセットが提供される。DevelopメニューからRemote Automationが有効化でき、サーバー側では「/usr/bin/safaridriver」を使って起動すれば利用可能。ライブラリ統合などについての情報は「Selenium WebDriver」参照。

◆メモリデバッグ
Web Inspectorのタイムラインを一新し、ウェブアプリのメモリ使用率・ヒープアロケーションのスナップショットのプロットが可視化可能に。これらのツールによりメモリ最適化を行ってパフォーマンスをアップするエリアを特定することが可能

◆高速なサンプリングプロファイラー
新しいJavaScriptプロファイラーは高速なパフォーマンスで、デバッギングツールが無効化している間も高精度にコードを動かしながらサンプリング可能。スクリプトの動作はフルJITアクセラレーション（実行時コンパイラ）速度で正確にタイムラインに記録される。

【Native APIs】
◆ウェブサイト向けApple Pay
顧客に簡単かつ安全でプライバシーを確保した支払方法をグッズやサービス向けに提供可能。例えば食料雑貨店・服・チケット販売・予約などで利用可能。ユーザーはシングルタッチで支払ができ、ユーザー自身のiPhoneのTouch IDを使ってApple Payでの支払が可能。もしくはApple Watchのサイドボタンのダブルクリックで支払可能。Apple Payをウェブサイトに統合して使うには「ApplePay JS Framework Reference」を参照。

◆WKWebViewのプレビューアクション
・WKWebViewでリンクプレビューをカスタムビューコントローラーでサポート。アプリ内で3DタッチのPeekとPopを使うことができ、Safariのポップアップの代わりになり、プレビューアクションはカスタマイズ可能。また、WKUIDelegateクラスの「webView:shouldPreviewElement:」「webView:previewingViewControllerForElement:defaultActions:」「webView:commitPreviewingViewController:」に新メソッド適用。

・WKWebViewの「allowsLinkPreview」プロパティはiOS 10.0以降では「YES」をデフォルトに。

◆Safariビューコントローラー
iOS 10のSafariビューコントローラーはバーの背景色変更をサポート。iOS 9で既に登場しているUIコントロール要素と色変更は統合され、Safariビューコントローラーでユーザーに対して見かけのアプリ内体験をカスタマイズ可能。

◆キーボード表示時でのWKWebViewの動作関連
iOS 10でWKWebViewのオブジェクトがSafariのネイティブ動作とマッチするようになり、キーボード表示時の「window.innerHeight」プロパティがアップデートされ、「resize」イベントは呼び出されないように変更。

【Safari App Extensions】
OS XネイティブのSafari拡張機能をApp Storeで販売したり配信することが可能。iOS向けのコンテンツブロッカー（広告ブロックなど）をOS Xにポート可能。OS XのアプリはSafariに拡張可能で、Webコンテンツにスクリプトをインジェクションしたりスタイルを適用したり可能。拡張機能についての詳細は「Safari App Extension Programming Guide」参照。