第 4章sawfishのテーマをつくる
今回は sawfish の最大の特徴の一つである、テーマについてそのつくりかたを簡単に紹介します。テーマをつくるというと非常に大変そうに思われる方も多いかもしれませんが、sawfish では themer という GUI ツールを使えば比較的簡単につくることができます。ぜひみなさんも自分だけのオリジナルテーマをつくってみてはいかがでしょうか。
冬の寒さが感じられるようになってきましたがみなさんはどうお過しでしょうか。筆者は春まで札幌にいて、今は東京に住んでいます。そして東京は冬でも暖かく、雪もつもらないようですので、札幌の一面の雪の世界と身を切るような寒さを少し恋しく思う今日この頃です。
ところで、前回 blackbox を使うようになったと書きましたが、結局今は sawfish + GNOME に戻しています。両方を実際に使った上で比べてみると、軽さでは確かに blackbox が優っていますが、やはり GNOME 環境の便利さ、sawfish の柔軟性に慣れてしまうとこちらの方がはるかに快適に感じます。sawfish (+ GNOME) と blackbox ではたしかに目指しているところは違うでしょうが、とっつきやすさや操作性などを総合的に考えると昨今 GNOME や KDE などの統合デスクトップ環境を使っている人が増えたのも納得できると改めて実感しました。
さて、今回は前回の予告どおり sawfish のテーマとそのつくりかたの概要について簡単に紹介します。
テーマって一体何?
テーマって何?
そもそもテーマ機能というのは何のためにあるのでしょう? 外観のかっこよさのため? 何となく流行しているから? スクリーンショットをとるため :-)?
アプリケーションなどがテーマを切り替える仕組を用意する理由はいろいろあるでしょうがまず第一にユーザーの好みに合せて外観を変えるためということがあげられるでしょう。例えば、今は誰もが持つようになった携帯電話でストラップをつけたり、プリクラの写真を貼ったりして自分好みにカスタマイズしている方は多いでしょうし、会社のデスクや家の机のまわりを飾っている(写真を置いたり、絵はがきやポスターを飾ったり)のもよくあることです。コンピュータの画面の中の `デスクトップ' も同じように飾りたくなるのは当然です。
もう一つ、テーマ機能が用意される理由として UI (ユーザーインターフェース)そのもののデザインをユーザが使いやすいように改造できるということもあげられるのではないかと思います。これは実際のハードウェアでは難しくなるためかあまりなじみがないかもしれませんが、例えば読者の中には車のハンドルやシフトノブなどを自分が運転しやすいものに変えている方もいることでしょう。
UI といえば、Windows 系の OS のデスクトップでは、ウィンドウのタイトルバーには一番左側にメニューボタンのアイコンがあり、右側に最小化、最大化、閉ボタンなどが並んでいます。筆者は Windows 系の OS はめったに使いませんがたまに使うときはいつもこのウィンドウのボタン配置を使いにくいと感じます。例えば筆者はちょっとウィンドウをどけたいと思うときは最小化ではなくシェード機能を多用します[1]。なぜならウィンドウを最小化してしまうと元に戻すときに(標準では)下の方にあるバーから選択しなければなりませんし、シェードではウィンドウのある場所で操作でき、より簡単に感じるからです。
このように標準の UI に不都合を感じたとしてもsawfish では UI そのものをカスタマイズして自分好みにすることが可能です。ショートカットキーについては以前の回で触れたようにほとんど無制限に指定できますし、ボタンの配置、大きさ、種類などは今回触れるテーマ機能によって自在に変更できます。
また sawfish に限らず最近では UI の変更まで含めたカスタマイズが可能なテーマ機能をもつアプリケーションも珍しくなくなっています。例えば Mozilla には XUL という XML 言語でのテーマ機能を持っていますし、gqmpeg や xmms にはスキンというテーマ機能があります。GNOME や KDE ではデスクトップ全体に渡ってメニュー部分の設定など細かな UI のカスタマイズが可能になっています。
しかし UI をカスタマイズできるということにはデメリットもあります。UIで万人受けするものをつくるのは非常に難しいことでしょうし、あまりに自由度が大きいと混乱も増します。例えばショートカットキーなどあまりにカスタマイズしすぎると覚えること自体が大変になりますし、また 10 人中 9 人の人がこれはメニューボタンのように見える、と判断するものが実際には最大化ボタンであったりしたら面倒です。そこでテーマをつくるときにも独断的でない、使い勝手を考えながらつくるようにする必要があります[2]。
なおUIのデザインについては Interface Hall of Shamehttp://www.iarchitect.com/mshame.htmなどは非常に示唆に富んでいて興味深いです[3]。
sawfish でのテーマ
話がすこし大きくなりましたが、以降 sawfish のテーマについて具体的に紹介していきます。
sawfish の場合、テーマ(theme)とは単に一連のウィンドウフレームのスタイル指定のことです。それ以外の背景や効果音のカスタマイズといったものは含まれていません。そしてスタイルとはウィンドウフレームを飾るさまざまなパーツ(タイトルバー、ボタン、枠など)の指定のことです。結局テーマとはさまざまな状態についての個々のパーツの定義をまとめたものであるということになります。
フレームのスタイルをつくるときにはまずどのウィンドウタイプかをまず決定し、各部分のパーツについて画像などを指定していきます。そして各パーツについてはどの状態についての指定かを定義する必要があります。
フレームタイプ(フレームの種類、ウィンドウメニューでの [フレームタイプ] に対応)には具体的には次のようなものがあります。
表 4-1. フレームタイプ
| default | 通常のウィンドウで使い、タイトルバーとフレーム枠を持ちます |
| transient | ダイアログウィンドウなどで使い、フレーム枠だけを持ちます |
| shaped | 矩形でないウィンドウに使い、タイトルバーだけを持ちます |
| shaped-transient | ウィンドウの上の部分のフレーム枠だけを持ちます |
| shaded | 通常のウィンドウをシェードしているときに使います。タイトルバーだけが表示され、ウィンドウの内容は表示されません |
| shaded-transient | shadedに似ていますが、こちらはtransinetのようにウィンドウの上の部分のフレーム枠だけが表示されます |
(他にも icon と dock がありますがこれらはテーマには直接関係しないので割愛します)
実はこれらのタイプすべてについてスタイルを定義しなければならないというわけではありません。筆者がこれまでに見たテーマの中ですべてのフレームタイプについてスタイルを定義しているものはあまり見たことがありません。だいたい標準で使われるもの(defalut、transient、shaded)などについてだけ定義すればいいでしょう。さらに、もしテーマについて未定義のフレームタイプがある場合は、sawfish-ui の外観(Appearance)の個所でフレームタイプフォールバックという項目を編集することで未定義のフレームタイプの代用にどのフレームタイプを利用するかを指定することができます。
フレームパーツには原理的には何でも定義できますが、人それぞれ好き勝手に定義してしまうと操作するときに混乱しますし、すべてのパーツについて例えばそれがボタンならクリックしたらどうなるといった、属性を一々定義するのはとても面倒です。そこでいくつかのデフォルトの属性をもつフレームパーツがクラス(Class)[4]としてあらかじめ定義されています。
表 4-2. クラス
| title | button(ボタン)およびborder(枠)を除いたタイトルバー部分 |
| menu-button | ウィンドウメニューをポップアップするためのボタン |
| close-button | ウィンドウを閉じるためのボタン |
| iconify-button | ウィンドウをアイコン化するためのボタン |
| maximize-button | ウィンドウを最大化するためのボタン |
| top-border | フレームの上の部分のリサイズのための細い枠 |
| left-border | フレームの左側部分のリサイズのための細い枠 |
| right-border | フレームの右側部分のリサイズのための細い枠 |
| bottom-border | フレームの下側部分のリサイズのための細い枠 |
| top-left-corner | フレームの左上部分のリサイズのための小さな枠 |
| top-right-corner | フレームの右上部分のリサイズのための小さな枠 |
| buttom-left-corner | フレームの左下部分のリサイズのための小さな枠 |
| buttom-right-corner | フレームの右下部分のリサイズのための小さな枠 |
そして、個々のフレームパーツの状態には次のようなものがあります。
表 4-3. state
| inactive(休止状態) | アクティブでない(フォーカスされていない)状態 |
| focused(フォーカス時) | フォーカスされた状態 |
| highlighted(強調表示) | マウスポインタが該当する部品の上に来ている状態。このときの画像や色などを変えることができます。 |
| inactive-highlighted(休止状態 - 強調表示) | フォーカスされていない、かつ強調表示された状態。入力フォーカスモードを enter-{only,exit} にしているときはこの状態は存在しません。 |
| clicked(クリック時) | クリックされた状態 |
| inactive-clicked(休止状態 - 強調表示) | フォーカスされていない、かつクリックされた状態。inactive-highlighted と同様に入力フォーカスモードをenter-{only,exit} にしているときはこの状態は存在しません。 |
必ずこれらすべてについてアイコン画像などを指定しなければならないというわけではありませんが、それぞれの状態について画像を用意することで例えばボタンをクリックしたときに凹む様子を表したりすることができます[5]。