LimeChatのテーマ作成で遊ぶ、WebKitのCSS3

iPhoneの購入と同時にWebKitを触り始めたのですが、CSS Level 2と3の一部の機能を、何の不安も無く使える製作過程に感動しました。ちょっと未来のテクニックを先取りして発見しちゃったような気分にもなりました。

(中略)

MacのLimeChatがWebKitを使っていて、CSSで自由にテーマを編集できることを思い出し、ひとつ実験的なものを作ってみました。:after, :beforeプロパティから、WebKitが独自に先攻実装しているCSS3のAnimation、Transition, Transformプロパティ、IE6がくたばれば使える透過PNGを使ったエフェクト、新たな色の値のRGBAプロパティバリューなど、CSSの記述も今まで馴染みの無い不思議な感じになってたりするので、興味のある方はテーマを使ってみて下さい。

Mac OSX LimeChat ver.1.0 用テーマ

Mac OS X 用の IRCクライアントLimeChatを手に入れる。

テーマファイルのダウンロード

• Mac OSX LimeChat 1.0 用 テーマ Vicutake.zip ver.0.8

適用方法

ダウンロードしたvicutake.zipを解凍すると以下のファイルが出てきます。

• vicutakeフォルダ (アイコン等の画像ファイル)
• vicutake.css (デザイン、アニメーション定義CSS)
• vicutake.yaml (あんまいじくれない領域のデザイン定義)

LimeChatの環境設定(Preferences)からThemeタブを選択し、Open in Finderボタンを押すとテーマファイルの置き場所が開くので、そこに先に解凍して出てきたファイルを全部つっこんでください。その後、再度環境設定画面を開き直しCurrent theme項目から vicutake　を選択してください。

以下の画像のようになっていれば正常に適用されています。

画像ではわかりませんが、Joinイベントでは行がクルリと回ったり、キーワードがボインボイン脈打ったりと色々と愉快でうざいかもしれないアニメーションが指定してあります。動きも含めてすべてCSSで定義しているって思えないかもしれません。興味のある方は一時だけでも使ってみて下さいね。気分悪くなったらすぐにさっきのThemeタブから元に戻せますから安心してください。

ブラウザで表示を見る

テーマの作成は、Riszwとその仲間達に色々とアドバイスもらい、LimeChat for OSX のテーマを作ろうで公開しているテンプレートを元にCSSを書きました。ありがとごじます！

Safari 4であれば、以下のページでIRCのインターフェイスとほぼ同じ画面で確認することができます。また、アニメーションはWebKit Nightly Buildsでより奇麗に見られるようになっています。

• WebKitで表示を見ると良い確認用ページ。Firefoxはまぁまぁだけど動かない、IE6,7でみちゃダメ！

今よりももっと細かく正確に、ビジュアルのデザインルールをCSSの記述ルールに置き換えられるコーディングができるようになると思うと、とってもわくわくしますね。CSS3のアニメーション関連のプロパティは面白かったので、他の便利なテクニックと合わせてここで紹介していく予定です。

では、また１年後ぐらいに。