テーマをつくってみよう

sawfish の標準テーマは /usr/share/sawfish/{version}/themes/ 以下にありますが、この中の適当なテーマディレクトリを見るとわかるように sawfish のテーマは README[.{lang、ja など}]、theme.jl、画像ファイルから構成されていることがわかります。そしてテーマをつくるとは主にこの theme.jl を書く作業ということになります。

theme.jl をスクラッチから書くのは少し大変なので今回は sawfish-themer というプログラムでテーマをつくる方法について紹介します。

sawfish-themer って何?

sawfish-themer はテーマツクールともいうべきツールです。比較的簡単に GUI 操作でテーマをつくり、実際に試すことができます[1]

themer を使う前に

themer は基本的には theme.jl を書き出すだけのためのツールですのでまずアイコン画像などを別に用意します。

アイコン画像を用意する

アイコン画像は GIMP や Povray などを駆使してつくるか、他のウィンドウマネージャなどのテーマ用のアイコン画像を流用します。

今回はアイコン画像は gtk の ThinGradinet テーマのものを元にしてつくることにしました。ThinGradient には GIMP のレイヤーの情報も含んだ ThinGradient/gtk/arrow.xcf という画像ファイル[2]が存在するので、それから各種ボタン用のアイコン画像をつくります。

図 4-8. GIMP でレイヤーを使ってアイコン画像を編集

画像の大きさについては、タイトルバーや枠などに使うときにはスケールされます。しかしボタンに使うときは画像ファイルそのままのサイズになりますので注意して下さい。またファイル形式は sawfish がサポートしている画像形式[3]のすべてが可能です。しかし、ほとんどのテーマではPNGファイル形式を使っていますので同じようにPNG形式にすることをお勧めします。

図 4-9. できたアイコン

ディレクトリを準備

テーマの名前をその由来から gtk テーマと同様に ThinGradient とし、~/.sawfish/themes/ThinGradient/ディレクトリをつくりました。

themer でテーマづくり

themer を起動します(sawfish-themer &)。

"概要"を編集

テーマ名と概要の個所を編集し、ThinGradientという名前で~/.sawfish/themes/ThinGradientディレクトリに保存しました(図 themer-about)。このとき概要部分には日本語入力も可能ですが、必ず英語で書くようにして下さい[4]

そして今のうちにボタン配置などをおおまかに考えておきます。このテーマについては筆者の個人的な趣味で、タイトルバーの左からメニューボタン、タイトルバー、最大化ボタン、閉ボタンを並ばせることにしました。

図 4-10. Themer/about編集

"パターン"を編集

次に各クラスで使うパターンを編集します。

追加ボタンをクリックし、適当な名前をつけ、それぞれのクラスに対してその状態毎に使う画像ファイルや色を指定していきます。これはすべて一対一に対応させる必要はなく、特に枠クラス(*-border)では画像は実際には適当な大きさにスケールされるので title クラスの画像ファイルを流用できます。

図 4-11. Themer/pattarn 編集

"フレーム"を編集

追加ボタンをクリックして適当な名前のフレームをつくり、そのフレームタイプに対してボタンなどの配置を決めていきます。まずは default タイプについて指定することにします。

*-edge となっている部分には座標値を入れる必要がありますが、座標値はフレームで囲むウィンドウの境界から外部に向うときに - 、内部に向うときに + となります。

例えば title については、メニューなどのボタン画像の大きさ(16x16)に合せる必要がありますので left、right、top-edge の数値はそれぞれ図(Themer/frame編集)のよう(left-edge=16、right-edge=32、top-edge=-16)にしました。また background には先程設定したパターンを指定し、foreground(テキストの色) には黒色を指定します。

図 4-12. Themer/frame編集

次に default タイプの設定をコピーして、transient および shaded タイプなどについて同様に指定していきます。これらのフレームタイプは default の設定から適当に編集する(例えば transient なら menu-button や title を消す)だけでいいので簡単にできます。

割り当てを編集

次にできたフレーム指定をどのフレームタイプに割り当てるかを設定します。

図 4-13. Themer/割り当て編集

例えば default タイプを先程編集した default フレームに割り当てるには次のようにします。

  1. 追加をクリックし、type で割り当て:メニューから default タイプを選択します

  2. 先:エントリに割り当て先 default フレームを指定します

試してみる

一通りできたら試行してテーマを試してみます。図(Themer/試行)のように考えていたとおりのウィンドウフレームが表示されれば成功です[5]。ボタンの配置などがおかしい場合はもう一度フレーム編集に戻って特に *-edge の数値をまちがえないように指定し直します。

図 4-14. Themer/試行

themer によるテーマのつくりかたについては以上です。より高度なカスタマイズを施すには theme.jl をエディタなどで編集して rep コードを書いて拡張していくことになります。例については標準テーマの theme.jl および s.t.o. ([6])のテーマなどを参考にして下さい。

ところで先週紹介したワークスペース名を表示する rep コードの紹介のさいに作者を紹介するのを忘れていましたが、Martin Kavalec、Bruce Harada 両氏が慣れない Lisp に苦労して(お二人は Lisp 初心者だそうです)つくったそうです。

筆者自身もまだまだ Lisp 初、中級者の域を越えていませんが最近では Lisp(Scheme)の有名な本、"計算機プログラムの構造と解釈" を読むのに没頭しています。Lisp に興味のある方には Emacs Lisp のチュートリアルなどに加えてこの本もぜひお勧めしたいと思います。

注意

[1]

sawfish-themer は libglade という、XML ファイル(usr/share/sawfish/{version}/themer.glade)から UI を構築するライブラリを使っています。環境によっては多くのライブラリに依存することを嫌って sawfish に themer が組み込まれない形でコンパイルされていることがあるかもしれません。その場合は themer を利用するために libglade を使えるように sawfish を再コンパイル、インストールする必要があります。

[2]

GIMP ではレイヤーなどの編集時の情報をそのままこのフォーマットで保存することができるようです。アイコン画像をつくるとき、背景の画像は一番下のレイヤーにして保存し、その上にさらに別のレイヤーをつくってさまざまな画像(例えば閉ボタンの×の画像など)を同時に複数レイヤーにつくって保存すれば一つのファイルからさまざまなアイコンを生成できて便利です。

[3]

コマンドラインで ldd `which sawfish` を実行すると sawfish がどのような画像処理ライブラリにリンクされていて、どのような画像形式が可能か見ることができます。

[4]

日本語を書けるのはREADME.jaというファイルになりますが、これは themer では編集できません。したがってREADME.jaを書きたければ別に用意する必要があります。

[5]

ここで表示されるウィンドウは default フレームタイプに対するものです。

[6]

最初の回に紹介しましたが、s.t.o. = sawmill themes org.(http://sawmill.themes.org)です。