2007年5月11日金曜日

growlStyleをいじっていた….[え]

ほんとうはgrowlViewを調べたいのだがこちらが簡単そうなのでちょこちょこっといじってみることにした.

サンプル以外にもStyleが登録されているところがある
Growl
WebKit style creation
http://growl.info/documentation/webkit.php

Custom Growl Style
http://resexcellence.com/growl/


でここのChat BubbleをみていてTigerたん("伺"とかもね)を思い出した.
ちょこっといじればできそうな気がしたのでトライ.
どうせやるなら題材としてはOSたんがいいかな?と思いOSたんをのぞいてみる.
OSたん保管庫
http://nijiura-os.hp.infoseek.co.jp/

MACたん保管庫 (2007/05/30付けで跡地になってた…)
http://evo7gt-a.hp.infoseek.co.jp/osmac/


いろいろなやんでnotifyとしてのお仕事が目的なのでデザインとしてこちらを選択.
(跡地になったのでもうない…)
http://evo7gt-a.hp.infoseek.co.jp/osmac/img/os/color/os_c016.jpg

#突っ込みたいでしょうが流してください.

でいろいろとやっているうちにフト以前どこかのblog記事でCSSだけで角の丸いDIV領域が描けるというのを読んだのを思い出す.
#Chat Bubbleは画像で吹き出しを用意している.

Googleしてみるとすぐに発見できた.でもみた記事とは違う気がする…まぁいいか.
Nifty Corners - PLAYNOTE
画像なしで角を丸くするCSSテク
http://www.playnote.net/archives/000392.html

でその参照先:
Nifty Corners
rounded corners without images
http://www.html.it/articoli/nifty/index.html
http://www.html.it/articoli/nifty/nifty1.html

これだと画像を用意する場合と異なりmessageの量が長くなったとしても描画領域が許す範囲で調整される.

でいろいろとやってみてCSSっていろいろできるんだねぇと感心しながらようやく完成した.

途中インストール済みのgrowlViewをダプルクリックしてまたインストールしてしまい(Dialogで確認してくれたのにねぇ…)見事自身を削除して作業が一端パァーになったのは内緒.

#書きながら「CSSで吹き出しをつくる」って記事があったことも思い出した.
##まちがってた「CSS+Javascript」でした.growlViewではjsは動かないっぽいね.(Info.plistで設定とかないかしら
phpspot開発日誌
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
http://phpspot.org/blog/archives/2006/06/javascript_14.html

wg
Bubble Tooltips
http://web-graphics.com/mtarchive/001717.php
サンプル
http://web-graphics.com/mtarchive/BubbleTooltips.html


#掲載に問題があるだろうから画像はなしにしとく.
ーー
blurをかけたので掲載してみる.

0 件のコメント: