Macのウィジェットアプリ「Übersicht」がステキ

Übersicht

ウィジェット機能は Mac 標準の Dashboard や GeekTool があるようですが（使ってないけど）、この Übersicht はステキ感で溢れています。Windows の Rainmeter に近いイメージですね。日本語の情報があまりないようなので、僕が調べたことを残しておきます。

Übersicht はドイツ語で、「概要」とかそんな意味らしいです。ロゴに発音記号が書いてあるけど…読めないわこれ。ともあれまずはこの美しい壁紙の入手からです。

Tones by Slurpaza on deviantART

Übersicht の使い方

ダウンロードしてアプリケーションフォルダに入れて起動
Übersicht がメニューバーに常駐する
デスクトップ中央にサンプルウィジェットが表示される
ウィジェット配布サイトから好きなものを選んでダウンロードする
メニューバーのアイコンから Open Widgets Folder を選択
widgetsフォルダの中に zip 解凍したフォルダごと入れる
デスクトップのどこかにそのウィジェットが表示されてる
ウィジェットを無効化するときはwidgetsフォルダから別の場所に移動すればよい

※このアプリの対応OSは OS X 10.9 Mavericks 以降です

ウィジェットを作る・カスタマイズする

シェルスクリプトで取得したデータを、CoffeeScript or JavaScript (+jQuery) で動的に生成した HTML にはめ込んで CSS でスタイリングしている
文字色やサイズなど、CSS で実現されているスタイリングは簡単（自分基準）にカスタマイズできる
試してないけど、流行りのアイコンフォントも使えるんじゃないかな
ダウンロードできるウィジェットは SVG を使っているものが多い。画像も使える
デバッグに Web Inspector が利用できる。メニューバーのアイコンから Show Debug Console を選択
現状、表示位置は CSS の top とか left で指定するしかない（近々アップデートありそう*1）
現状、クリックとかはできない。表示に特化している。RSSフィード表示してクリックができなくて Issue が立ってる *2。作者は悩んでいるっぽい。

試してみた

フルサイズを表示 (2560x1600・3MB)

いくつか気になったものを適当に詰め込んでみました。たくさんあるとダサいですね。

導入したもの

simple-clock :: シンプルで大きい時計
- 表示フォーマットを24時間表記%H:%M %pに変えた。表記は何が使えるかわからなかったので A-Za-z を試したらいろいろ変わった
calendar :: カレンダー
- 文字サイズを大きくしたら全部キレイに大きくなって嬉しかった
to-do-list :: ToDoリスト
- ホームディレクトリにToDo.listというテキストファイルを作るとそれが読み込まれる。1行が1タスクとなり、- 未完了タスク、+ 完了タスクというルールで記述する
Weather :: 天気
- Übersicht 作者のウィジェット。こちらも forecast.io の API Key が必要
Pretty Weather :: 可愛らしい天気
- かわいい。SVG メインであまりいじれない。利用には http://forecast.io の API Key が必要
NetworkInfo :: ネットワーク情報
- 白っぽくしたけどアイコンは画像だったので黒いまま
Inspirational Quote :: 心を揺さぶる言葉
- 文字を大きくしてイタリックにして幅を長くしてみた
Wunderlist Tasks :: Wunderlistのタスク表示（上の画像には表示してない）
- Wunderlist の内容を表示してくれる。これいい。リスト間隔を縮めてたくさん表示できるようにした

Web Inspector を開いて気づいたんだけど、これおそらく Safari *3 のやつ。普段使わないから知らないけど。で、実はデスクトップ全体が HTML の body になっていて、ウィジェット1つ1つは div になってる。Web Inspector 開いた状態で内部的に縦スクロールを発生させてどれかひとつのウィジェット上でスクロールしてみると全体が動くのでわかると思う。