読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

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 内でテンプレート文字列を記述できるようになりました。

js-next.hatenablog.com

 

@supports

他のプラットフォームで実装されている機能です。
CSS や JS で CSS のプロパティが使えるか使えないか調べることができます。

過去記事参照

browser.hatenablog.com

 

:matches

id, class などにマッチするものに適応させる疑似クラスです。

css4.biz

 

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

https://developer.apple.com/videos/wwdc/2015/?id=710

スポンサーリンク