Apple Geeks 第170回

JavaScriptで"感圧タッチ"もOK - OS X／iOSの「Safari 9」はここが新しい!

　本連載「Apple Geeks」は、Apple製ハードウェア／ソフトウェア、またこれらの中核をなすOS X／iOSに関する解説を、余すことなくお贈りする連載です（連載目次はこちら）。

　UNIX使い向けを始め、Apple関連テクノロジー情報を知りつくしたいユーザーに役立つ情報を提供します。

今度の「Safari」はここが見どころ

　SafariといえばWebブラウザだが、その中核はOS XとiOS共通のHTMLエンジン「WebKit」であり、Apple製品におけるコアテクノロジーのひとつとなっている。

　これまでAppleは、メジャーバージョンアップにタイミングをあわせてSafari／WebKitの改良を進めてきた。それはEl Capitanの「Safari 9」も同様で、過去に比べると長足の進化を感じさせる新機能やエンジン部分での変更は少なめだが、着実に歩を進めていることは確かだ。

El Capitanとともに「Safari 9」が登場

JavaScriptを使いForce Touchイベントを取得できる
感圧タッチ機構のサポート

　筆頭に挙げられるのは、感圧タッチ機構のサポートだろう。検証できる環境は最近発売されたMacBookとMacBook Pro、あるいは10月に発売されたばかりの「Magic Trackpad 2」くらいのものだが、早い話がSafariで「Force Touch」を利用できるのだ。JavaScriptを使いForce Touchイベントを取得できるというもので、比較的容易に実装できることから、Force Touch対応マシンが普及すればメジャーな機能として定着する可能性は高い。Webアプリの操作性も大きく変わることだろう。

今度の「Safari 9」はForce Touchに対応、JavaScriptを使いイベントを取得できるようになった。「Magic Trackpad 2」で検証できる

　AirPlayの制御も、JavaScriptから行えるようになった。接続可能なAirPlay対応デバイスが存在するかどうかをチェックし、接続などの操作をSafariの画面上から行うことが可能になったのだ。この機能はすでにYouTubeが実装しているので、ここに書くよりアクセスして実際に試したほうが早いだろう。

Safariの画面上からAirPlayを制御できるようになった

段落の先頭1文字を大きく表示し目立たせる
イニシャルレター機能

　CSS方面での機能強化も見逃せない。視覚的にインパクトがあるのは、イニシャルレター機能だろうか。段落の先頭1文字を大きく表示して目立たせる、英文の組版でよく見かけるあれだ。従来もCSSの疑似要素である「:first-letter」を使うか、先頭文字を＜span＞や＜b＞で区切るといった方法で表現できたが、Safari 9では新設の「-webkit-initial-letter」を使い、文字サイズを行数で指定できるようになった。日本語組版には縁が薄い機能だが、英文では利用する機会もありそうだ。

CSSに「-webkit-initial-letter: 2」として、イニシャルレターを2行分に設定してみた

背景に対してフィルタ処理をかける
「-webkit-backdrop-filter」

　背景に対してフィルタ処理をかける「-webkit-backdrop-filter」も追加された。用意されたフィルタは「blur」や「brightness」「drop-shadow」など10種類。ダイアログを半透過表示したり、活用方法はさまざまだ。効果はWebKitのデモページで確認できるため、El CapitanのSafariでアクセスしてほしい。

背景に対してフィルタ処理をかける「-webkit-backdrop-filter」のサンプル