WWDC 2015 - Safari の新機能
What's New in Web Development in WebKit and Safari の内容で iOS9 向け。
発表されたこと
- Backdrop Filter
- Scroll Snap Points
- Class Syntax
- Template Literals
- Object Literal Property Shorthand Syntax
- @supports
- :matches
- AirPlay on OSX
- Picture in Picture
- iOS Multitasking
- Force Touch API
Backdrop Filter
backdrop-filter:blur(10px); でそのタグの背景にフィルターを適応します。
filter では背景の上のおいて使う場合面倒な処理をする必要がありましたが CSS で可能になります。
Control Center のすりガラスの様な表現をネイティブの UIVisualEffectView よりも簡単に使うことができます。
Scroll Snap Points
iTunes Store のトップ上部のように決められたエリアでコンテンツがスナップされます。
IE 10 で実装されているものと同じです。
Class Syntax
他のプラットフォーム同様、クラスが使えるようになりました。
Template Literals
Object Literal Property Shorthand Syntax
JS 内でテンプレート文字列を記述できるようになりました。
@supports
他のプラットフォームで実装されている機能です。
CSS や JS で CSS のプロパティが使えるか使えないか調べることができます。
過去記事参照
:matches
id, class などにマッチするものに適応させる疑似クラスです。
AirPlay on OSX
2年前に iOS で実装されたものと同ようで、後々公開されるセッションでくわしく説明されるそうです。
Picture in Picture
後々公開されるセッションでくわしく説明されるそうです。
ストリーミング動画再生で使うらしく、PiP 表示の際は大きいサイズでは容量が大きすぎるため、小さい動画を用意して再生する必要があるとのことです。
iOS Multitasking
レスポンシブに対応していれば、特に考える必要はないと思われます。
Force Touch API
ブラウザでも Force Touch が使えるようで以下のような流れだそうです。
mouse force will begin (mouse down)
mouse force down
mouse force up
mouse up (mouse click)
変更がおきるとは mouse force changed
イベントリスナで呼び出すことができるのがこちら
mouseforcewillbegin
mouseforcedown
mouseforcechanged
mouseforceup
リスナから返ってくる値が e.webkitForce で力の値が返り、以下が力の初期値とのこと。
最小値： MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
最大値： MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
基本は mouseforcechanged で圧力を調べる形となると思います。
Force Touch は最初はネイティブでしか実装されないと思っていたので驚きです。
■ ぴーえす1
今年実装される機能だそうです。
Class Syntax
Inheritance
Computed Properties
Template Literals
Tagged Template
Octal and Binary Literals
Symbol Object
Object.assign
Weak Sets
こちら、Project Spartan など他のプラットフォームでは実装済みのものです。
■ ぴーえす2
その他 Safari 絡みで面白そうなセッション
Using Safari to Deliver and Debug a Responsive Web Design
WWDC 2015 - Videos - Apple Developer
CloudKit JS and Web Services
