xcursorgenでフォクすけ(foxkeh)カーソルを作ってみる

tksmashiw2008-07-16

X11マウスカーソルを作成するプログラムはいくつかあるが、xcursorgenはその中でももっとも基本的なCUIプログラムだ。使用法はmanpage of xcursorgen及びX11マウスカーソルテーマGrounationのSourceフォルダを調べれば把握することが出来る。

今回はmozilla japanが提供するFirefoxのテーマ、フォクすけ*テーマから、ページロード中のフォクすけが走る画像を拝借して、wait状態のカーソルを作ってみた。xcursorgenを含むxorg-x11-appsに加えて、gifからpngの変換にImageMagickを使用しているため、あらかじめインストールしておく。

$ []sudo yum install xorg-x11-apps ImageMagick[]
$ []wget 'http://releases.mozilla.org/pub/mozilla.org/addons/6198/foxkeh_theme-1.0-fx.jar'[]
$ []mkdir ~/foxkeh_theme; cd ~/foxkeh_theme[]
$ []unzip ../foxkeh_theme-1.0-fx.jar[]
[]~/foxkeh_theme以下にテーマを展開。[]
$ []mkdir work ; cd work[]
[]作業ディレクトリworkに移動。[]
$ []convert -extent 48x48 -resize 32x32 ../chrome/skin/browser/Throbber2-busy.gif foxkeh_busy.png[]
[]ページ遷移中のフォクすけが走るアニメーションをPNGに分解。[]
[]サイズは標準的な32x32に変換する。[]
[]「-extent 48x48」を付けないと、各画像がまちまちな大きさのPNGに分解されてから[]
[]32x32にリサイズされる事に注意。[]
$ []ls[]
[]foxkeh_busy-0.png  foxkeh_busy-4.png  foxkeh_busy-8.png[]
[]foxkeh_busy-1.png  foxkeh_busy-5.png  foxkeh_busy-9.png[]
[]foxkeh_busy-2.png  foxkeh_busy-6.png[]
[]foxkeh_busy-3.png  foxkeh_busy-7.png[]
$ []vim foxkeh_busy.conf[]

foxkeh_busy.conf:

#先頭が'#'の行はコメントとして扱われる。
#項目は左から、名目上の(nominal)サイズ(実際の画像のサイズとは無関係)、
#ホットスポット(実際にカーソルが指す位置)のX座標、Y座標、
#使用するpng画像、その画像を表示する時間(単位はms、省略時は50になる)。
#同じサイズの項目がひとつならアニメーションしないカーソルになり、
#今回の様に同じサイズの項目が複数あればアニメーションカーソルになる。
32 4 8 foxkeh_busy-0.png 60
32 4 8 foxkeh_busy-1.png 60
32 4 8 foxkeh_busy-2.png 60
32 4 8 foxkeh_busy-3.png 60
32 4 8 foxkeh_busy-4.png 60
32 4 8 foxkeh_busy-5.png 60
32 4 8 foxkeh_busy-6.png 60
32 4 8 foxkeh_busy-7.png 60
32 4 8 foxkeh_busy-8.png 60
32 4 8 foxkeh_busy-9.png 60


$ []xcursorgen foxkeh_busy.conf foxkeh_busy_cursor[]
[]foxkeh_busy_cursorという名のカーソルが作られる。[]
$ []ls[]
[]foxkeh_busy-0.png foxkeh_busy-4.png foxkeh_busy-8.png[]
[]foxkeh_busy-1.png foxkeh_busy-5.png foxkeh_busy-9.png[]
[]foxkeh_busy-2.png foxkeh_busy-6.png[] []foxkeh_busy.conf[]
[]foxkeh_busy-3.png foxkeh_busy-7.png[] []foxkeh_busy_cursor[]
$ []cd ~/.icons/[][]使用中のテーマ/[][]cursors[]
$ []mv watch watch~[]
[]watchカソールをバックアップ。[]
$ []ln -s ~/foxkeh_theme/work/foxkeh_busy_cursor watch[]
[]foxkeh_busy_cursorへリンクをはる。[]
Firefoxを再起動してCSS:cursor - MDCのwaitと書かれた部分をマウスオーバーすると、走るフォクすけが表示される。(冒頭のスクリーンショット*1


参考記事:


追記2008/07/17
foxkeh_busy.confの説明追加。


追記2008/07/19
xcursorgen.cの内容にもとづき、foxkeh_busy.confの説明を加筆修正。


追記2008/08/24
(nominal) sizeについて、foxkeh_busy.confの説明を再度修正。

*1:マウスカーソル付きのスクリーンショットを撮る方法はあまりない。今回はVirtualBoxでマウス統合を無効にして撮った。仮想マシンを使う以外に、recordMyDesktopを使うことも出来るようだ。(未検証)
byzanzというツールでも出来るらしい。