Windows Vista ガジェットを作ってみた

先月、「JavaScript勉強し出す」というエントリーをしましたが、その後もコツコツと勉強していっており、なんとかWindows Vistaのガジェットを作るところまできました。

Vistaのみ動くガジェットなので、まだまだXPが多い現状を考えると需要は少ないですが、せっかく作れるようになったのでちょっと配布しようかと思います。ベタですがアナログ時計で。(プログラムも簡単だし…)

ガジェットのサンプル

このコンテンツをご覧になるには最新のFlashプラグインが必要です。 Adobeサイトより最新のFlashプレイヤーをダウンロードしてください。 またJavaScriptも必要になりますので、ブラウザの設定でJavaScriptを有効にしてください。 色々とすいません。

Download

インストール方法

  1. 上の「Download」から「choco_clock.gadget」というファイルをデスクトップなりハードディスクのどこでも良いので保存します。
  2. 「choco_clock.gadget」をダブルクリック、「インストールする(I)」でサイドバーに追加されます。
  3. インストーラの「choco_clock.gadget」はもういらないので消去してもらって構いません。

とまあ説明するほどでもなかったのですが一応。

背景のカスタマイズ

「角丸にする」「ドロップシャドウを付ける」の選択ができます。

  1. ガジェットの右上にあるレンチマークをクリック。背景の設定
  2. プルダウンで4つの背景が選択できます。背景の選択
  3. OKで選択した背景が反映されます。

実際のイメージは以下のようなかんじです。

ノーマル(ドロップシャドウ有)の画像ノーマル(ドロップシャドウ有)
ノーマル(ドロップシャドウ無)の画像ノーマル(ドロップシャドウ無)
角丸(ドロップシャドウ有)の画像角丸(ドロップシャドウ有)
角丸(ドロップシャドウ無)の画像角丸(ドロップシャドウ無)

余談ですがインストールしたガジェットは以下のフォルダに保存されます。

C:\Users\ユーザー名\AppData\Local\Microsoft\Windows Sidebar\Gadgets

インストールした方は「choco_clock.gadget」というフォルダができているはずなので、中のファイルを開けると色々と仕組みが丸見えになります。ガジェット独自のタグも多少ありますが、ほとんどが基本的なhtmlやJSでできているというわけです。

Photoshopのフェード機能を有効活用

前回のフェードの使い方があまりにもあれだったので、今回はもう少し使えるものを紹介。

その前にちょっと、ぼかし(ガウス) フィルタについて

ぼかし(ガウス)はPhotoshopユーザにとってはお馴染みの機能ですね。フィルタ → ぼかし → ぼかし(ガウス) で半径の数値をいじって、ぼかし幅を調節するフィルタです。

ここからはちょっと細かいことになるのですが、まずは1ピクセルの黒いドットを描いてみるとします。

1ピクセルのドット

(分かりやすいように1600%拡大表示しています)

これに、ぼかし(ガウス) 半径0.1pixel を適用してみます。

ぼかし(ガウス)0.1pixel

何か全く変わっていないような気がしますが、実は本当に何も変わっていません。ぼかし(ガウス)はスライダーで半径0.1pixel~250.0pixelまで動かせますが、この最小の0.1pixelでは何も変わりません

では、ぼかし(ガウス) 半径0.2pixel にしてみましょう。

ぼかし(ガウス)0.2pixel

パッと見は変わっていないように見えます。が、よーく見ると変わっています。数値でいうと、RGB=0,0,0 だった黒いドットが RGB=35,35,35 になり、その1ピクセル外側の真っ白だった部分 RGB=255,255,255 が RGB=247,247,247 と微量ではありますが変化しました。

今度は、ぼかし(ガウス) 半径0.3pixel にしてみます。(初期の状態から)

ぼかし(ガウス)0.3pixel

これは明らかに変化がありました。これこそまさにぼかしです。黒いドットの数値も RGB=123,123,123 で半分近くまで薄くなりました。

「う~んでも、これはちょっとぼかしすぎたかな?」「半径0.25pixelくらいがいいんだけどなー」と思った方がいるかもしれませんね。ところが実際に数値入力で半径を0.25pixelにしても、四捨五入されて0.3pixelと同じ結果になってしまいます。

ここでフェードの登場です!

上のぼかし(ガウス)半径0.3pixelを適用後、Ctrl + Shift + F ( Macは + Shift + F ) を押します。

ぼかし後、フェード

あとはフェードの不透明度を調整して、お好みな感じに仕上げてやればオッケー!これは使えますね。

まとめ

フェード機能を使うヤツは優柔不断で細かい。

Photoshopのフェード機能について

最近 Photoshop のフェードという機能がマイブーム。

あまり知られていないような機能ではありますが、私の使っている古いバージョンの Photoshop 6.0 では、編集メニューの上から4つ目という意外と目立つところにある機能です。CSなど最近のバージョンでも、おそらく同じようなところにあると思います。

ショートカットキー
Ctrl + Shift + F ( Macは + Shift + F )

このフェード、どういった機能かというと、直前にやったフィルタやトーンカーブを 0~100% でフェードイン・フェードアウトできるというもの。ちょっと例をあげてみましょう。

サンプル画像

例えばこの画像をトーンカーブで明るくするとします。

トーンカーブ
サンプル画像トーンカーブ後

ちょっと明るくしすぎました。ライトが飛んでしまってます。

ここでフェード登場! Ctrl + Shift + F

フェード画面

この数値をいじってやることで、フェードがかかります。

例えば50%のフェードだと、

フェード50%
サンプル画像フェード後

1枚目と2枚目の中間の画像ができるわけです。

注意しないといけないのは、これは単に1枚目の画像の上に2枚目の画像を50%の不透明度で重ねただけの状態なので、例えばセルの大きさ10でモザイクフィルタをかけた画像にフェード50%かけることで、セルの大きさ5のモザイクフィルタになるわけではありません。

「じゃあ、最初っから抑えておけばいいだけでしょ?」

「その発想はなかった・・・」