Safari 9.0の新機能の概要

以下の機能がSafari 9.0から追加されるそうです。
ホヤホヤ情報なのとざーっくり訳なので、間違ってたらごめんなさい！

<a href="https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html">Safari 9.0</a>developer.apple.com

Secure Extension Distribution

OS XのSafariの機能拡張が、すべてAppleでホストされるようになって(Safari Extensions Galleryっていうらしい)、より安全に使えるようになります。

Safari Extensions Galleryで公開された拡張は自動アップデートされて、
以下の2行を拡張のマニフェストに追加することでその恩恵が得られるとのこと。

<key>Update From Gallery</key>
<true/>

Safari Extensions Galleryに置かず、独自に拡張を公開することも引き続き可能だが、そっちは自動アップデート対象外。

ただし、Safari Extensions Galleryに作った拡張を再度アップロードする必要はあって、ココからやれよとのこと。

使ったことないのであんまりありがたみがないですねー。

Force Touch Trackpad Mouse Events

新しいマウスイベントでwebkitForceってのが増える。
トラックパッドの感圧タッチ系のイベント。

感圧タッチ？フォースタッチ？について詳細は以下リンクより。

Responding to Force Touch Events from JavaScript

event.webkitForce
webkitmouseforcewillbegin
webkitmouseforcedown
webkitmouseforceup
webkitmouseforcechanged
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN

これらを組み合わせて使うことで、トラックパッドのイベントを拾えるらしい。

ちなみに

さっきの参考リンク先に書いてあるコードを抜粋。

function getEventData(ev) {
  // そもそも対応してるかチェック
  if ('webkitForce' in ev) {
    // 比較用の押し具合たち
    var forceLevel      = ev['webkitForce'];
    var clickForce      = MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN;
    var forceClickForce = MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN;

    if (forceLevel >= clickForce && forceLevel < forceClickForce)
      // 普通のクリック
    } else if (forceLevel >= forceClickForce) {
      // トラックパッドなクリック
    }
  }
}

うーん、使うのかコレは！

Content Blocking Safari Extensions

iOS

iOSのSafariに、Content Blocking Safari Extensionsってのが追加されます。
以下のようなtrigger/actionの配列を書いたJSONを追加することで、柔軟にあれこれ不要なコンテンツをブロックできるとのこと。
Safariはこれをパースしてバイトコードとして効率的に使うので、ユーザーの邪魔にはならないと。

以下の例では、webkit.orgで画像をブロックするようにしてる。

[
    {
        "action": {
            "type": "block"
        },
        "trigger": {
            "url-filter": "webkit.org/images/icon-gold.png"
        }
    },
    {
        "action": {
            "selector": "a[href^=\"http://nightly.webkit.org/\"]",
            "type": "css-display-none"
        },
        "trigger": {
            "url-filter": ".*"
        }
    }
]

"webkit.org/images/icon-gold.png"はブロックして、
"http://nightly.webkit.org"配下に向いたaタグをdisplay: noneにしてる感じ？

これすごい嫌な予感するのは私だけでしょうか。

OS X

この機能は同じくOS XのSafariでも利用可能で、Safari Extensions BuilderにContent Blockerって設定箇所が新設されてるのでそこからJSONを追加する。

ちなみに、"onbeforeload"イベントと"canLoad"メッセージがdeprecatedになるらしい。

content blockingとかしたことないからよくわからない・・。

Shared Links

iOSとOS XのSafariで、共有リンクにリンクを転送できるようになります。
OS X用のサンプルコードが載ってましたが割愛。

あの機能・・使ってる人いるん？

HTML5 Media

AirPlay

Safari 9.0からは、JavaScriptからAirPlayが操れるように！
"WebKitPlaybackTargetAvailabilityEvent"を使ってAirPlayが利用可能かを判断します。

if (window.WebKitPlaybackTargetAvailabilityEvent) {
    video.addEventListener('webkitplaybacktargetavailabilitychanged', function(ev) {
        switch (ev.availability) {
        // 使えるとき
        case "available": 
        // ...
        break;
        // 使えないとき
        case "not-available":
        // ...
        break;
        }
    });
}

Picture in Picture Support

PiP(ピクチャーインピクチャー)ってのは、テレビの右隅に別の映像流すみたいなアレです。
業界用語でワイプとかいったりするアレ。

video要素に対して以下のようにすれば、それができるようになるとのこと。

if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === 'function') {
    // PiP切り替え
    pipButtonElement.addEventListener('click', function() {
        video.webkitSetPresentationMode(video.webkitPresentationMode === 'optimized' ? 'inline' : 'optimized');
    });
} else {
    pipButtonElement.disabled = true;
}

これはちょっと気になる。

SFSafariViewController for iOS

特にカスタマイズしない人向けの、WKWえbViewやUIWebViewの代わりにどうぞとのこと。
単純なページを表示するためのもので、表示したあとはDoneボタンで即アプリに戻れるらしい。
推測ですが、ブラウザバックとかリロードとかもできないんかね？

ただ気になる一文があって、

The Safari View Controller shares cookies and other website data with Safari, and has many of Safari's features, like Safari AutoFill and Safari Reader.

本家SafariとCookie共有するってほんとかしら。

WebViewだけでも判別するのに苦労してるのに追い打ちってことでいいですかね。

Icons for Pinned Tabs

Chromeとかでお馴染みのタブを固定するアレ。
そのピン止めされてるときに、アイコンを表示できるように。

<link rel="icon" sizes="any" mask href="website_icon.svg">

他の既存の要素と干渉しないように、他のより前に書けよとのこと。

<meta name="theme-color" content="red">

これを追加すると、アイコンが表示されるところのテーマカラーが設定できるとのこと。
設定値はおなじみのCSSのcolorです。

またmetaタグ増えた・・・

CSS Scroll Snapping

コンテンツがスクロールされたとき、要素にスナップするかどうかが指定できるように。
スナップは、カルーセルとかでちょっとだけ動かして、やっぱり離した時に、端っこがキレイにピタッとなるアレです。

-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y:
-webkit-scroll-snap-points-x:
-webkit-scroll-snap-destination: 50% 50%;
-webkit-scroll-snap-coordinate: 0% 0%;

これらを指定するらしい。

CSSスクロールまわりの闇がまたひとつ増えるのかどうか、私気になります。

Backdrop Filters

CSSのbackdrop-filterで使えるフィルタの種類が増える。

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

エフェクトの仕様はこちら。

Filter Effects Module Level 1

Responsive Design Mode

Chromeで端末モデルをエミュレートして表示確認できるアレみたいなやつ。

Apple謹製！っていわれても、ちゃんとtouchイベントとかエミュレートしてくれるかのが気になります。

Web Inspector Redesign

Web Inspectorにタブ機能が！
これであっち見て閉じてこっち見て閉じてあー！ってならなくなります。

あとはフレーム単位で描画パフォーマンスをチェックできる機能がつくのかね？

ECMAScript 6 Enhancements

ES6きたよ！

Classes
Computed Properties
Weak Set
Number Object
Octal and Binary Literals
Symbol Objects
Template Literals
Unprefixed CSS Properties

全部じゃないけどきた！

Unprefixed CSS Properties

以下のものに関しては、さよならwebkitなプレフィックス。

transition
transition-delay
transition-duration
transition-property
transition-timing-function
animation
cursor: zoom-in;
cursor: zoom-out;
perspective
perspective-origin
transform
transform-origin
transform-style
@keyframes
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-delay
animation-fill-mode
order
align-content
align-items
align-self
justify-content
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
break-after
break-before
break-inside
columns
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
alt

transition/transform、animation、flexあたりがよく使うとこかね？
まぁどうせ意識して書かないのでいいんですけど・・。

以上

そんなに衝撃的なのはなかった気がする。
間違いあったら教えてくださいー。