DoBeDo のテーマを作ろう

DoBeDo ToDo Widget
iCal の ToDo 項目を表示・編集できるダッシュボードウィジェット、私はデスクトップに表示できるモードにしてカレンダーウィジェットとセットで常時表示しています。
Webkit + CSS3 で作られた LimeChat for OSX テーマ「Vicutake」に触発されて、Webkit が使われている DoBeDo のテーマを作ってしまおうと企んでしまいました。

LimeChat for OSX と違い DoBeDo には作成したテーマを読み込む機能がついていないので、中のファイルをいろいろといじることになります。

DoBeDo をインストールする

DoBeDo サイトからダウンロードして解凍、ダブルクリックでインストールします。
私は Leopard なので最新版の 4.3.0 をインストールしました。Tiger 対応の古いバージョンでは以下の内容と異なる場合があり、検証もしておりませんのでご了承ください。

新しいテーマファイルを作る

インストールしたウィジェットファイルは /Users/ (ユーザ名) /Library/Widgets 以下にあります。
DoBeDo.wdgt を右クリックしてパッケージの内容を表示して、もともとあるテーマファイルをコピーして任意の名前に変更します。以下の例では plat をコピーして riszw というテーマを作成しています。

  1. /DoBeDo.wdgt/styles/plat/ をコピーしてフォルダ名を riszw に変更。
  2. /DoBeDo.wdgt/styles/riszw/plat.css を riszw.css にリネーム。
  3. /DoBeDo.wdgt/styles/riszw/images/ 以下の画像はテーマ作成しつつ編集していくことにするのでそのまま。

これでテーマファイルの準備ができました。

新しいテーマファイルを読み込める状態にする

/DoBeDo.wdgt/styles/ に新しいテーマファイルフォルダを作成しただけではテーマとして読み込んでくれません。他のファイルを編集してテーマとして認識できるようにします。

/DoBeDo.wdgt/dobedo.html

14 行目辺りを編集する。

<link rel="stylesheet" type="text/css" href="styles/riszw/riszw.css" id="riszw">

をコピーして、次の行に

<link rel="stylesheet" type="text/css" href="styles/riszw/riszw.css" id="riszw">

を追加。

DoBeDo.wdgt/dobedo.js

14 行目辺りを編集する。

,["Platinum", "plat"]

をコピーしてすぐ後ろに

,["Riszw", "riszw"]

を追加。

Dashboard を再起動する

ここまで終わるとテーマとして認識してくれるはずですが、DoBeDo の設定画面を見ても反映されていません。
DoBeDo だけを再起動する方法がわからなかったので、ターミナルから Dashboard を再起動してみます。Dock を再起動すると Dashboard も一緒に再起動される仕組みのようです。

killall Dock

再起動後に設定画面を見ると新しく追加した Riszw テーマが選択肢に出てきました。
CSS をいじるたびに再起動しないと反映されないようなので、テーマ作成中も killall しまくりになります。LimeChat for OSX みたいにログ表示状態の HTML が取得できればいいのに(´・ω・`)

CSS をいじる

あとは /DoBeDo.wdgt/dobedo.html とにらめっこしながら CSS を書きつつ killall 大会です。
SafariのCSS3拡張 – iPhone 3G DevWiki
角丸とかアニメーションとか試してみたところできました。セレクタも div[id$=Middle] で Middle で終わる id がついた div とか指定できるのですごく楽です!

CSS3 をいじっていると早くブラウザに普及したらいいのにー!と思ってしまいますが、ブラウザで動くのが当たり前になるよりも先に、今まさにアプリの中で実装されているので未来の技術ではないんだと感じました。
まさかダッシュボードウィジェットの中身が HTML と CSS と JavaScript だったなんて考えたこともなかったよー。

JavaScript で XML の内容を取得して表示、ウェブではフィードをページ内に表示するなどで使われていますが、アプリでは他のアプリの XML データを読み込んで表示なんてことができるのではないかと妄想。
デザインカンプをせっせとスライス切ってコーディングするだけではなく、この知識がもっと幅広く役立つかもしれないと思うと夢がひろがりんぐヽ(・ω・)ノ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です