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

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

YosemiteのSafari8が予想以上に良かった件

mac

最近公開された最新のMac OSX Yosemiteをインストールしました。

Yosemiteには最新のsafari8.0がインストールされており、レンダリングエンジンにWebkit2が搭載され、chromeより2倍高速とのことです(自称でしょうが)。

私はMac OSX Leopardからずっとchrome一筋だったのですが、試しに起動してみたsafariが予想以上によかったのです。


以下、chromesafariをやや開発者目線で比較していきます。

Yosemite上のsafariの見た目

まずは見た目です。
f:id:treeapps:20141019224907p:plain
f:id:treeapps:20141019225748p:plain
yosemiteになって、OS全体が綺麗な曇り半透明なUIになったので、Safariも早速半透明になりました。画像右上の部分はimacの画像の色が透けていますね。だからなんだよ!という話もありますが、綺麗なUIというのはとてもいいものです

UIは重要

UIなんてどうでもいい?実用的なら見た目はどうでもいい?
ならあなたは今更InternetExplorer5のUIを許せますか?
f:id:treeapps:20141019230232g:plain
無駄に巨大なボタン、メニューバーとボタンの機能の重複、青いバーのスペースの無駄、スクロールバーの醜悪さ、等など、UIの悪い部分を結集させたようなのがIEです。

Windowsで有名なブラウザであるSleipnirは昔からずっと綺麗なUIを追い求めており、UIの重要性をよく解っているブラウザです。

私はSleipnirのデザインは好きではありませんが、方向性には共感しています。
ボタンだらけでごちゃごちゃせず、スッキリしているのに見た目が綺麗なUIは使いやすく、使いたくなりますね。その点はsafariも同様にスッキリ無駄の無いUIだと思います。

ちなみにchromeのUIとの比較ですが、

safariの圧勝

だと個人的に思っています。
chromeはUIについて対して気を使っていないように見えます。

レンダリング速度

「◯倍高速!」等は各社公称していますが、比較対象を微妙に古くしたりして当てにならない部分があるので体感で比較します。

safariの勝ち

です。htmlの描画は特に高速です。体感で明らかに速いです。javascriptについては差は感じませんでした。

しかしこれは現状であって、そのうち結果が入れ替わったりすると思います。
私の勘違いで無ければ、chromeは随時高速化していくブラウザで、safariはある時点(OSのverup等)で一気に高速化する、という特徴を持っているので、次回は結果が変わるかもしれません。

アドオン

さて、問題のアドオンです。これはもう比較になりません。

chromeの圧勝

です。safariは数えるくらいしかアドオンがありません。

開発ツール

safariなら、Command + Option + I で、
chromemも、Command + Option + I で、
Webインスペクタが表示されます。

両者の比較ですが・・・・

chromeの圧勝

です。これは残念ながら比較になら程の差です。会社で開発する時はこれがあるのでchromeを使わざるを得ません。

ファイルダウンロード時のステータスバー表示

これは個人的な好き嫌いですが、chromeだとダウンロードをすると以下のようになりますよね。
f:id:treeapps:20141025130902p:plain
このダウンロードバーが邪魔なんです。メニューバーとタブバーの高さを足したくらいの高さで、ダウンロードすると強制的にこれが表示され、自分で☓ボタンをクリックしないと消えないのです。これが本当に嫌です。。。私はダウンロードする度にダウンロードバーを非表示にしています。これがあるとニコニコ動画で全画面表示した時に画面が小さくなるので本当に邪魔・・・・

一方safariは以下のようになります。
f:id:treeapps:20141025132814p:plain
ちょっと解りづらいですね。

  1. ダウンロードを開始する。
  2. ダウンロードした場所にコンパス??のアイコンが表示される。
  3. コンパスアイコンはアニメーション移動して右上のダウンロード表示枠に移動してコンパスは消える。
  4. ダウンロード表示枠には今DL中の全てのファイルの合計進捗状況(プログレスバー)が表示される

という感じです。個別のDL状況はここでは見えませんが、chromeのようにでかいDLバーが表示されないので、画面がスッキリしてとてもいい感じなのです。この挙動はver8以前からもあったのですが、わたし的にはこの挙動は嬉しい。

ということで、

safariの圧勝

です。

プロセス管理

chromeは結構昔からマルチプロセスアーキテクチャになっていて、1タブ1プロセスで起動し、1プロセスがkillされても他プロセス(タブ)に影響を与えないという安全な設計になっていました。Safariもいつの間にかマルチプロセスになっていました。

chromeのショートカットはsafariだとどうやるの?

完全に手探りですが、私が頻繁に使うコマンドを、chromesafariで比較してみます。
以下は全てmac版でwindows版とは異なります。

アクション chrome safari
新しいタブを開く Command + t Command + t
次のタブを選択する Command + Option + → Command + Shift + }
前のタブを選択する Command + Option + ← Command + Shift + [
1番目のタブを選択する Command + 1 無い
タブを閉じる Command + w Command + w
アドレスバーにフォーカスする Command + l Command + l
次を検索 Command + g Command + g
キャッシュ無視リロード Command + Shift + r Command + r
Webインスペクタ Command + Option + i Command + Option + i
マウスジェスチャー Smooth Gestures SIMBLE Gesture
N版目のタブを選択する

N番目のタブを選択するショートカットだけ、safariにありませんでした。
私はこれ結構使うのです。会社ではmacbook airを使っていて、メーラーをWeb版Gmailを使ってます。gmailは必ず1番目のタブに表示するようにしているので、Command + 1で選択しているのですが、無いですね。。。Command + N は片手で行えるのがとてもいいのです。

前後のタブを選択する

safariでの注意点ですが、実は「Command + Option + ←→」でも動きます。が、新規タブ(Command + T)にはフォーカスできない等、微妙に残念仕様となっているので、新規タブも関係なくタブを移動できる「Command + Option + []」を使うといいです。

マウスジェスチャー

これはsafariのSIMBLE Gesturesの方が良い挙動だと思います。
chromeはブラウザのAPI仕様の問題で、アンカーリンク上でのジェスチャー等、一部挙動がおかしいのです。SIMBLEの方にはそういったおかしな挙動が見受けられません。また、SmoothGesturesはジェスチャーが効かない場合(ローカルのhtmlファイルを開いた場合やbodyタグの外側?)があります。

レンダリングエンジン

chrome safari
blink Webkit2

となっています。webkitは元々アップルが開発したもので、去年くらいまではchromewebkitを使っていました。しかしgooglewebkitから余計なコードを削減したり、appleのせいでやりたい事ができない!、等があり、webkitをフォークしてblinkを開発し始めました。

googleは「余分なコードを大量に削除した!安定性が増した!高速化した!」と言ってますが、今回のSafari8ではchromeの方が全体的に遅いので、まだまだblinkにフォークした結果が現れていないのかもしれませんね。

しかし私的には、より分離して依存をなくしていくようなblinkをあまりいいとは思いません。私としては、OSにどっぷり依存して、OSネイティブでパワーを完全に使い切って欲しいな、と思います。

会社ではどちらを使う?自宅ではどちらを使う?

会社では文句無しにchromeです。理由は前述した開発ツールにあります。

自宅ではsafariです。UIの綺麗さを味わったりレンダリング速度の速さを味わえます。
ただ、アドオンの件があるので、自宅でもchromeを使うのも全然有りだと思います。実際私は両方つかっています。

雑感


ブラウザを変えてみて、safariにアドオンが無くて困ったよ。

だが思うんだ。その作業、ブラウザ上で行う必要あるの?、と。

自分が欲しいのは「adsenseの料金表示」と「はてなブックマーク通知」なんだ。


それは言えるかもしれないな。macには通知センターという強力な通知機能がある。ブラウザではなくmacのアプリとして通知機能を開発して、通知センターで通知すればブラウザ依存せずに済む、という考え方もあるかもしれない。まあそうなるとmac版限定アプリになるけどな。


macの場合、chrome独自の通知表示よりも、OSネイティブの通知センターの方が綺麗で高機能だから、通知系の機能(twitter,adsense,はてブ等)をブラウザのアドオンで開発するという固定観念はそろそろ捨てた方がいいかも。


そうなると通知アプリだらけになって酷い事になりそうな気もするが、なんかいい解決方法は無いものかね。

↑このやりとりは後に以下の記事を書き、半分くらいは目標を達成できました。

Xcode5徹底解説 for iOS/OSX

Xcode5徹底解説 for iOS/OSX

AngularJSリファレンス

AngularJSリファレンス

入門Backbone.js (Programmer's SELECTION)

入門Backbone.js (Programmer's SELECTION)