WhiteBrowserのskinを作成
■アイデア
動画管理ソフトのWhiteBrowserは、パソコン上にある動画のサムネイルを自動作成してくれて、
サムネイルと動画を紐づけた形で管理できるようにする便利なソフト。
その中にデフォルトで入っているDefaultGridというskinは、動画一つにつき一個のサムネイルを作成して
タイル状にズラっと並べるデザインなので、シンプルで良い。
他にWhiteBrowser Skin Libraryを見ていて、
・動画のパッケージがあればそれも一緒に表示してくれる「PakeDouble」
・さらにパッケージをクリックすると拡大表示してくれる「ExtTagBrowser」
などのskinも良いと思った。
折角なので、この三つのskinを部分的に組み合わせて、以下のようなskinを作成してみた。
要するに、見た目はDefaultGridと同じだが、詳細なサムネイルも見たければ見られる、というもの。
そしてパッケージ画像も扱えるようにする。
これで、小さなパッケージ画像が画面上にズラリと並び（パッケージが無ければサムネイルが並び）、
画像をクリックすると大きなパッケージ画像＋サムネイル画像（パッケージが無ければサムネイル画像だけ）
が見られるようになる。
サムネイルと動画を紐づけた形で管理できるようにする便利なソフト。
その中にデフォルトで入っているDefaultGridというskinは、動画一つにつき一個のサムネイルを作成して
タイル状にズラっと並べるデザインなので、シンプルで良い。
他にWhiteBrowser Skin Libraryを見ていて、
・動画のパッケージがあればそれも一緒に表示してくれる「PakeDouble」
・さらにパッケージをクリックすると拡大表示してくれる「ExtTagBrowser」
などのskinも良いと思った。
折角なので、この三つのskinを部分的に組み合わせて、以下のようなskinを作成してみた。
(1) 動画一つにつき4列 x 2行のサムネイル画像を作成する。 (2) そのサムネイルの1列1行目の画像だけをCSSで切り出して、DefaultGridの形でズラっと並べる。 見た目はあたかも、動画一つにつき一つのサムネイルしか存在しないように見える。 (3) そのサムネイルがクリックされたら、Lightboxみたいなウィンドウを開き、 4列 x 2行の完全なサムネイルを表示する。
要するに、見た目はDefaultGridと同じだが、詳細なサムネイルも見たければ見られる、というもの。
そしてパッケージ画像も扱えるようにする。
(4) もし動画ファイルと同じ名前の.jpgファイル（パッケージ画像）が存在すれば、 DefaultGrid状に並べる時に、縮小したパッケージ画像をサムネイル代わりに表示する。 (5) 縮小パッケージ画像がクリックされたら、Lightbox風のウィンドウを開き、 元のサイズのパッケージ画像を表示する。 その下に、4列 x 2行のサムネイル画像も一緒に表示する。
これで、小さなパッケージ画像が画面上にズラリと並び（パッケージが無ければサムネイルが並び）、
画像をクリックすると大きなパッケージ画像＋サムネイル画像（パッケージが無ければサムネイル画像だけ）
が見られるようになる。
■設置方法
パッケージ画像をDefaultGridのように並べるのでskin名は「PakeGrid」にした。
出来上がったものがこれ → PakeGrid.zip
設置方法は以下の通り。
基本的なデザインはDefaultGridをそのまま拝借して、パッケージ画像の扱い方はPakeDoubleと同じにして、
パッケージ画像の拡大方法はExtTagBrowserのアイデアに便乗してhighslide.jsを使う、
というオリジナリティの無い代物である。
しかし個人的には満足したので、skin作りはこれでお終い。
出来上がったものがこれ → PakeGrid.zip
設置方法は以下の通り。
(1) 上記のzipを解凍して出来たPakeGrid/フォルダを、WhiteBrowserのskin/フォルダの下に置く。 (2) 拡大画像を表示するために、ExtTagBrowserと同じくhighslideを使うので、 http://highslide.com/からhighslide一式のzipをダウンロードする。 そのzipを解凍して出来たhighslide/フォルダを、WhiteBrowserのskin/フォルダの下に置く。 （やり方は、ExtTagBrowserと同じ）
基本的なデザインはDefaultGridをそのまま拝借して、パッケージ画像の扱い方はPakeDoubleと同じにして、
パッケージ画像の拡大方法はExtTagBrowserのアイデアに便乗してhighslide.jsを使う、
というオリジナリティの無い代物である。
しかし個人的には満足したので、skin作りはこれでお終い。
■追記（2012/03/07）
パッケージ画像全体をそのまま縮小して並べると、小さくて見づらい気がして来た。
そこで、パッケージ画像の表側（画像の右半分）をCSSで切り出してサムネイル表示する事にした。
また、パッケージ画像を動画と同じフォルダに同じ名前で入れておくと、
エクスプローラで見た時に動画なのか画像なのかパッと分からないのが嫌だった。
そこでWhiteBrowserのインストールフォルダの直下のpackage/というフォルダ内に、
動画ファイル名と同じ.jpgがあれば、それもパッケージに使用する事にした。
（ただし動画と同じフォルダにパッケージ画像があれば、そちらが優先的に使用される）
これが修正版 → PakeGridv2.zip
パッケージ画像が存在しない場合は余白が間抜けだが、気にしない事にする。
CSSで画像の一部を切り出せるのはとても便利。
そこで、パッケージ画像の表側（画像の右半分）をCSSで切り出してサムネイル表示する事にした。
また、パッケージ画像を動画と同じフォルダに同じ名前で入れておくと、
エクスプローラで見た時に動画なのか画像なのかパッと分からないのが嫌だった。
そこでWhiteBrowserのインストールフォルダの直下のpackage/というフォルダ内に、
動画ファイル名と同じ.jpgがあれば、それもパッケージに使用する事にした。
（ただし動画と同じフォルダにパッケージ画像があれば、そちらが優先的に使用される）
これが修正版 → PakeGridv2.zip
パッケージ画像が存在しない場合は余白が間抜けだが、気にしない事にする。
CSSで画像の一部を切り出せるのはとても便利。