Sleipnir を Opera っぽくしてみたよ


1日に Opera10 がリリースされて、早速使ってみました。タブをサムネイルで見れたり、スピードダイアルもカスタマイズが可能になったりと、なかなか使いやすくなっていましたね。久しぶりに Opera に触ってみましたが、スキンのデザインとかツールバー・タブバーの位置関係、ボタン配置など、ユーザーインターフェースがよく考えられていて使いやすいというのが感想です。


そこで今回は、SleipnirOpera のようなユーザーインターフェースにならないかと試行錯誤してみました。




まず、目標にした Opera のインストール直後の状態がこちら


そして、試行錯誤して Sleipnir をカスタマイズした結果がこちらです。




うん。ぱっと見 Opera に見えなくもないぐらいには近づいたのではないでしょうか。



カスタマイズ内容

さて、以下は何をやったかを紹介します。

1.スキン

何はともあれ見た目なので、Opera からリソースを引っ張ってきてOperaっぽいスキンを作りました。

2.ExSearchBar

タブバーの下にアドレスバーや検索バーが配置されているのが Operaユーザーインターフェースの特徴の1つだと思います(Chromeもそうですね)。Sleipnir の標準ツールバーではタブバーの下に配置することは不可能なので、今回は ExSearchBar を使わせてもらいました。ExSearchBar は プヨぷよさんが公開されている Sleipnir 用非公式プラグインで、機能盛りだくさんな検索バーです。デザインをいじって見た目を Opera っぽくし、ボタンも追加しました。ただ、ExSearchBar にはアドレスバーを表示することはできないので*1、アドレスバーはメニューバーの横に表示させておくことにしました。
ちなみに、ExSearchBar は Sleipnir 標準の検索バーやツールバーよりも便利な機能が搭載されていて(サジェストやフォルダ登録など)ものすごく便利なので個人的におすすめです。

3.各種バーの配置換え

SleipnirOpera ではタブバー・エクスプローラバー(パネル)・標準ツールバーといった各種バーの配置が大分違うので、これも Opera に合わせます。Sleipnir では plugins.ini をいじってやると可能です*2。今回は、以下のような感じです。
=========================
[Dock]
Dock1=TabDock.fx
Dock2=ExplorerBarTabDock.fx
Dock3=ExplorerBarDock.fx
Dock4=ExSearchBar.fx
=========================
また、Sleipnirツールバーをいじって、メニューバーとアドレスバー以外は非表示にしておきます。

4.スピードダイヤル

スピードダイヤルも、Opera の大きな特徴の一つですね。SpeedDial for Seahorseを導入し、cssをいじって見た目も近づけました。

5.その他


これぐらいでしょうか。さすがに、タブバー中にサムネイルを表示させたりは無理ですが、見た目といくつかの機能に関してはかなり近づけたかと思います。
実用上こんなにOperaっぽくする必要はないと思うのですが、この記事が、「Sleipnir いじってみようかな」と思うきっかけになってもらえればうれしいです。


感想

今回、Operaユーザーインターフェースに改めて触れて、また、Sleipnir のそれと比べてみて、色々思うところがありました。以下は、つらつらと Sleipnir のインターフェースやスキンに関する雑感です。

  • タブバーの下部に標準ツールバーを配置するユーザーインターフェースは思ったよりも使いやすいですね。Sleipnir でも「標準ツールバーのDockバージョン」があったら便利だと思います。ただ、これはブラウザ全体の設計思想にかかわる問題かもしれないので難しいところかなとも思います。タブバーの下部に標準ツールバーを配置するなら、そこに配置されるボタンは一つのウィンドウ(タブ)の操作に関すること(戻る・すすむ等)に限られるのが本来で、Sleipnir の標準ツールバーにデフォで用意されている「右をすべて閉じる」等のボタンがあってはいけないような気もしますし。
  • スキンに関しては、どうしても実現できないものがありました。まず、タブバー下部のアクティブタブにつながる領域。これによって、非アクティブタブを背面にあるように見せて、アクティブタブと非アクティブタブを区別しやすくしていると思うのですが、Sleipnir ではタブの高さを固定して使わない限りスキンで表現するのは難しいですね。「タブバーの背景画像を上端からだけでなく、下端から適用させる」といったオプションが欲しいです。
  • Sleipnir はタブの幅・高さを自由に変えられる関係上、スキンを引き延ばすために、タブにきれいなグラデーションをかけたり、上下のちょうど半分で色を変えるといった表現が難しいです。これもなんとかならないかなと思います。
  • エクスプローラバーの上部だけではなく、内部の背景色も変更したいですね。白一色では単調ですし、エクスプローラバーは画面に対して占める領域が広いので、背景色が変更できれば大分印象が変わると思います。また、エクスプローラバースプリッターとエクスプローラバーを一体化した表現というのもやれたらいいですね。
  • Opera のタブバー右端にある、ClosedTabボタンは便利ですね。Sleipnir でいうと、RecentlyHistoryメニュー(最近閉じたページの一覧)や、PopRecentlyHistoryアクション(最後に閉じたページを開きなおす機能)に相当すると思うのですが、常にタブバー右端に見えていることによって、まずその機能が存在することが一目でわかりますし、自然と頻繁に使うようになります。タブバーのホイールクリックでPopRecentlyアクションを実行できることを知らない人もいるようですし、ClosedTabボタンはあってもいいかなと思いました。せめてタブバーの右クリックメニューにRecentlyHistoryメニューを標準で用意してもいいのでは。*4


さて、今回は以上です。またしてもマニアックなネタでした

*1:検索ボックスにマウスオーバーすると、アドレスをツールチップで表示する機能や、URLを入力すると検索せずに移動する機能は搭載されています

*2:この辺りを参考にどうぞ

*3:「右クリックしながらリンクを下に移動」で新しいウィンドウで開くといった機能

*4:これはFirefoxでも標準機能だったかと