Übersicht（ユーバーズィヒト）はMacのデスクトップウィジェットアプリGeekToolを1億倍強くした感じのもの。当然フリー。GeekToolよりも安定していて、しかも高機能。
こんな感じのデスクトップが整備できる。左上にはコンピュータの情報、真ん中上にはカレンダーと予定、右上には時計と天気、右下にiTunesで再生している曲名を出してみた。なお壁紙はしらたま。
Übersichtはめちゃめちゃ強いのだが、全世界でも（たぶん）そんなにユーザーが多くない。ウィジェットのダウンロード数からも明らかだ。日本語の記事に至っては2つしかなくて、スクリプトの解説すらほとんどない。
このÜbersichtを開拓していこう。ただし比較的難易度が高いので、それだけは注意してほしい。
インストール〜ウィジェットの配置
ダウンロードして、zipを解凍して、アプリケーションフォルダに移動して、起動。brew-caskでも配布されているっぽいのでそちらでもよい。
先ほど書いたように、Übersichtには公式のウィジェットストアがあり、そこからウィジェットが無料でダウンロードできる。クオリティがまちまちだが、ダウンロード数の多いものを選んでおけば結構親切なReadmeとともについてくるので、デザインや好みで選ぶとよい。
ウィジェットをダウンロードするとzipがついてくる。このzipを展開するとたいていフォルダになっている。それをタスクバーの「ü」アイコンからOpen Widgets Folderをクリックして開いたフォルダ（~/Library/Application Support/Übersicht/widgets/）に移動すると、自動的にデスクトップ上にウィジェットが配置される。
ウィジェットのディレクトリ、ログイン時起動などは設定からいじれる。
スクリプトを書き換える（簡易編）
ウィジェットの説明にはだいたい配置方法などが書かれている。位置や内容を変えたいときは、これを参考にすると良い。.coffeeのスクリプトファイルをいじることになるが、これは好きなテキストエディタで開けば十分だ。
なお、配置方法が書かれていない時はガチで内容を理解して書き換えるか、諦めるかしよう。ディレクトリを削除すれば、ウィジェットも削除できる。
スクリプトを書き換える（実践編）
Übersichtは簡単にいえば、デスクトップ全体がSafariになっている。ウィジェットフォルダ内の全 .coffee もしくは .js ファイルを読み込んで実行する。
ブラウザになっているため、当然画像とテキストしか貼れないGeekToolには圧倒的優位を誇る。しかしその分技術力も必要なためユーザーが少ないのだろう。なにせ位置を変えることすらスクリプトを書き換えなければならない。
さらに問題なのが、記述言語がCoffeeScriptというところだ。cssもCSによる。CSはだいたいJavaScriptと似ているのでそこそこの知識が使えるのだが、ブロックをインデントで記述するなどの変な仕様もあってこれまたハードルが高い。JSでもウィジェットを作れるのだが、配布されているウィジェットのほとんどはCSで書かれているので、結局はCSを書かざるをえない。
つまりは「JavaScriptはそこそこ書けて、CSSもそこそこ理解してるよ」っていう人しか本当には使えないというわけだ。ハードル高すぎ。
さて、実際のスクリプトの中身を見てみる。必要な要素は5つ。command, refreshFrequency, style, render, update。これだけ抽出すると、以下の様な感じになる。
command: "echo 'Hello World!'"
refreshFrequency: 600000
style: """
top: 50px
left: 50px
background: rgba(#000, .3)
"""
render: (output) -> """
<div id="test-widget">
<p class="content"></p>
</div>
"""
update: (output, domEl) ->
$(domEl).find('.content').text(output)commandは文字列で定義される。これがrefreshFrequency（ミリ秒）ごとにシェルで実行される感じ。呼び出し終わるとupdate関数が実行される。updateの引数はoutputとdomElで、それぞれcommandの標準出力と、ウィジェットのHTMLの要素になっている。
renderは実際のHTMLの内容。適当に外枠を作っておき、中身をupdateで更新するのが一般的な流れ（だと思う）。
update内でHTMLを書き換えるときは、$(domEl).find(‘hoge’).text(‘fuga’) などとするのが良い。直接$(‘hoge’) で検索すると、他のウィジェットを侵食する可能性がある。
styleの中身はCSSっぽいものを記述する。“”” は「ここから次の“”” までが文字列ですよ」の意味。中で“ などをエスケープしなくて済む。
ここまで説明すれば、あとは実際のコードを読めばわかるはずだ。最後に右上の時計のスクリプトを載せておく。
command: "date \"+%Y%n%m%n%d%n%a%n%H%n%M%n%S\""
refreshFrequency: 2000
render: -> """
<div id="simpleClock">
<div class="clock">
<span class="hour"></span>:<span class="minute"></span>
</div>
<div class="date">
<span class="year"></span>.<span class="month"></span>.<span class="day"></span> <span class="wod"></span>
</div>
</div>
"""
update: (output, domEl) ->
zerotrim = (str) ->
str.match(/^0*(\d+)$/)[1]
updateElem = (sel, text) ->
$(domEl).find(".#{sel}").text(text)
date = output.split('\n')
updateElem 'year', date[0]
updateElem 'month', date[1]
updateElem 'day', date[2]
updateElem 'wod', date[3]
updateElem 'hour', zerotrim(date[4])
updateElem 'minute', date[5]
style: """
color: #fff
font-family: Helvetica Neue
font-weight: 100
text-shadow: 0 0 5px #999
text-align: right
right: 50px
top: 25px
#simpleClock .clock
font-size: 9rem
line-height: 8rem
#simpleClock .date
font-size: 2.5rem
font-weight: 200
"""
実際に運用するときは、ウィジェットをダウンロードしてそれを鬼改変するのが丸い。僕のウィジェットもgistに載せてみたので、参考にしながら自分なりのウィジェットを配置して、最強のデスクトップ環境を作ろう。
