HTMLとCSSだけでGrowlのディスプレイスタイルは作れる

mac growl


Growl - Webkit Style Creation for Growl
に、HTMLとCSSだけで、独自のGrowlディスプレイスタイルを作る方法が書かれていたので自分でやってみました。以下の記事ではHTMLとCSSだけでGrowlスタイルを自作する手順を説明します。

Growlディスプレイスタイルのディレクトリ構造


まず、Growlディスプレイスタイルのディレクトリ構造は以下のようになっています。

<stylename>.growlStyle [directory]
	Contents [directory]
		Info.plist
		Resources [directory]
			main.css
			template.html


は自分の好きな名前に置き換えます。Info.plistファイルの内容については次の項で説明します。
main.css と template.html が無い場合はデフォルトのcssとhtmlが使用されるのでなくても構わないですが、main.css はほぼ必須です（あとで理由を見せます）。


Growlディスプレイスタイルに必要なのはたったこれだけです。ね、簡単そうでしょ？

さっそく作ってみる

まずは、Info.plist を作ります。

冒頭のページに掲載されている内容をそのまま持ってきました。
この中で変更が必要なのは以下の箇所です。
あと、「Growlディスプレイスタイル」って書くのがメンドウなので、これ以降、単に「スタイル」と記述します。

CFBundleName
スタイルの名前です。GrowlのPreferenceペインに表示されます。
CFBundleGetInfoString
スタイルの簡単な説明です。
CFBundleIdentifier
スタイルを識別する名前です。 com.Growl.WebKit.<stylename> という形式で（<stylename>は自分のスタイル名に置き換えて）記述します。
CFBundleShortVersionString
スタイルのバージョンです
CFBundleVersion
ここもスタイルのバージョンです。上のバージョンと具体的に何が変わるのかよくわかってませんスミマセン。
GrowlPluginAuthor
作者の名前です。
GrowlHasShadow
スタイル全体にドロップシャドウをかけるかどうか
GrowlPaddingX
水平方向のパディング（単位：px）
GrowlPaddingY
垂直方向のパディング（単位：px）

このあと、普通は template.html や main.css を作成するんですが、とりあえずここまでにしておきます。

とりあえずインストール

ここまでできれば、とりあえずスタイルとして動作する状態になりました。このままインストールしてみます。

Finder でスタイルが格納されているディレクトリを見ると、<sytlename>.growlStyle が以下のようGrowlのアイコンで表示されていると思うので、これをダブルクリックします。

すると、自動的にinfo.plistの内容から、Growlディスプレイスタイルだと判断されてGrowlにインストールされます。

試しにプレビューを見てみます。

でかすぎますね。

でも、これでとりあえずのスタイルは完成しました。これをベースにHTMLとCSSを調整してカッコ良くしていきます。

吹出し風のスタイルにする

Twitter用に吹出し風のスタイルにしてみることにしました。

Pure CSSな吹き出し - Weblog - hail2u.net


このページにCSSだけで吹出しを作る方法がが解説されています。この記事を参考に先ほどのスタイルの Resources ディレクトリに template.html ファイルを作成してみました。以下のようなコードになりました。

本来、CSSは main.css と外出しにするべきですが。めんどくさくなったので、template.html の中に直書きしてしました。ですので、main.css はありません。

template.htmlの中の %で囲まれたキーワードは、それぞれ、アイコン画像(image), タイトル(title), テキスト(text)に置き換えられます。以下のように Safari（などのWebKit系のブラウザ）で確認しながら調整するといいかもしれません。　

template.htmlを保存したら、先ほどと同じようにインストールします。（すでにインストールされているものを「上書き」するかどうか聞いてきたら「はい」を選択します）

改めてプレビューで見てみると以下のような感じに...


まだ改善の余地はありますが、ひとまずここまでにしたいと思います。

最後に、今回作成したGrowlディスプレイスタイルのファイル一式を Github で公開していますので、そのリンクを晒しておきます。

https://github.com/snaka/snaka-growl-webkit-style

参考