読者です 読者をやめる 読者になる 読者になる

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

Mac

Übersicht

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

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

Übersicht の使い方

  1. ダウンロードしてアプリケーションフォルダに入れて起動
  2. Übersicht がメニューバーに常駐する
  3. デスクトップ中央にサンプルウィジェットが表示される
  4. ウィジェット配布サイトから好きなものを選んでダウンロードする
  5. メニューバーのアイコンから Open Widgets Folder を選択
  6. widgetsフォルダの中に zip 解凍したフォルダごと入れる
  7. デスクトップのどこかにそのウィジェットが表示されてる
  8. ウィジェットを無効化するときは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 :: 天気
  • Pretty Weather :: 可愛らしい天気
  • NetworkInfo :: ネットワーク情報
    • 白っぽくしたけどアイコンは画像だったので黒いまま
  • Inspirational Quote :: 心を揺さぶる言葉
    • 文字を大きくしてイタリックにして幅を長くしてみた
  • Wunderlist Tasks :: Wunderlistのタスク表示(上の画像には表示してない)
    • Wunderlist の内容を表示してくれる。これいい。リスト間隔を縮めてたくさん表示できるようにした

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

おわりに

僕にも昔デスクトップカスタマイズにハマった時期がありました。システムに負荷かかってそうだし、結局、大きい時計と大きいカレンダーの2つに落ち着くんだけどね。

自分の Mac を手に入れてワクワクしている人がこれに興味をもって、CSS や JS の知識を身に付けるのに役立てば嬉しいな~と思います。

Übersicht ダウンロード(公式サイト)

Übersicht - http://tracesof.net/uebersicht/

Übersicht Widgets(ウィジェット配布サイト)

Übersicht Widgets - http://tracesof.net/uebersicht-widgets/