はてさて6月第一週目の週間ブックマークです。

今週は「PHPでPhotoshopのpsdファイルが扱えるライブラリ」だったり、「各種ブラウザの表示デバッグが行えるサービス」だったりと、革新的な新しい雰囲気の情報が目に付きました。

どんどんとWEBの世界とローカルの世界が近づいているような気がします。

そんなこんなで今週のブックマークの目次です。

• jQuery プラグイン
• class属性にバリデートルールを記述するバリデーション用プラグイン「validationEngine.js」
• ブラウザの幅に合わせてカラムの大きさや数を自動調節するプラグイン「Smart Columns」
• ブラウザの左上に固定されるタブメニューを表示させるプラグイン「Advanced docking」
• jQueryと組み合わせて動作する、(X)HTML+JavaScriptフレームワーク「jGlycy」
• PHP Tips
• PhotoshopのPSDファイルを画像に変換して、ブラウザに出力してしまうPHPライブラリ「PHP PSD Reader」
• ブラウザ関連情報
• ブラウザの世界シェア率に関する最新データが見られる「MARKET SHARE」
• モバイル関連情報
• モバイルサイトのデザインギャラリー「モバミル」
• デザイン関連情報
• ダークな色味のWEBサイト30選
• 気になったウェブサービス
• 各種ブラウザ、各種OSのWEBページ表示テストが行える、Adobe社発のオンラインサービス「Adobe BrowserLab」
• ネタ的ななにか
• ”これに手を出したら人生終わったと言えるようなものといえば？”
• ”人間を超えた驚異の身体能力、Damien Walters Showreel 2009”

それでは下記、各ブックマークの詳細ですっ。

jQuery プラグイン

class属性にバリデートルールを記述するバリデーション用プラグイン「validationEngine.js」

form内のinputやtextareaのclass属性に、そのままバリデートルールを記述するタイプのjQueryプラグインを、idea*ideaさんが紹介しています。

正規表現でオリジナルなルールも作成できるようので、よりカッチリしたバリデートがしたい場合なんかに使えそうですね。

[本家：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/]

ブラウザの幅に合わせてカラムの大きさや数を自動調節するプラグイン「Smart Columns」

愛するSoh Tanakaさんの新作jQueryプラグインを、これまた愛するcolissさんが紹介しています。

このプラグインは、可変するボックス内にfloatで並べたブロック要素を、そのボックスのサイズに合わせて綺麗にサイズと並列数を調整してくれるという、デザイナー視点に立ったプラグインです。

Soh Tanakaさんのこういう発想とか観点には、ホント毎回感服させられます。

[本家：http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/]

ブラウザの左上に固定されるタブメニューを表示させるプラグイン「Advanced docking」

ブラウザのサイドバーのような挙動のタブを実装するためのプラグインを、PHP & JavaScript Room:さんが紹介しています。

見慣れた挙動ですので、ユーザーにも使い方が分かりやすいのではないでしょうか。

[本家：http://www.jankoatwarpspeed.com/post/2009/06/01/Advanced-docking-using-jQuery.aspx]

jQueryと組み合わせて動作する、(X)HTML+JavaScriptフレームワーク「jGlycy」

jQueryを使う方なら一度はお世話になったコトがあるであろう、jQuery日本語リファレンスのなかのひとが作成した、jQueryを一層カンタンに使うためのライブラリです。

使いたいjQueryプラグインと同時に、この「jGlycy」を読み込むコトで、独自プロパティ「jg」が使えるようになります。

このプロパティの値を、読み込んだjQueryプラグインの関数名と同じにすれば、JavaScriptを記述するコトなく、プラグインの機能が使えるようになる、と。

ちょっと説明がgdgdで申し訳ありませんが、jQueryのプラグインをそのまま使用するのに比べ、余計なidやclassを付記しなくても良くなるので、htmlソースの見晴らしが良くなるという利点があります。

さらに、JavaScriptが全く分からなくても使用できるような感じなので、新米コーダーさんでもアッサリ使えちゃいそうな。

もし会社の新規ページ作成テンプレートにパッケージされちゃってたら、作者の方のいうとおり、「え？jgってXHTML標準の機能じゃないんですか？」ってなると思います。

PHP Tips

PhotoshopのPSDファイルを画像に変換して、ブラウザに出力してしまうPHPライブラリ「PHP PSD Reader」

こいつは面白い！Photoshopで作成されたpsd形式のファイルを、画像に変換→ブラウザに出力するというコトを可能にするPHPライブラリを、PHPSPOT開発日誌さんが紹介しています。

デザイナーからクライアントにデザインを送る際の手間を省くコトもできそうですね。

イラストレーターのaiファイル版も公開されたら、合わせてかなり面白いコトが出来そうです。

[本家：http://www.catswhocode.com/blog/php-display-adobe-psd-files-on-a-web-page]

ブラウザ関連情報

ブラウザの世界シェア率に関する最新データが見られる「MARKET SHARE」

IEやFirefoxなどといったウェブブラウザの、世界的なシェアに関する最新データを掲載しているサイトです。

ブラウザのシェア率以外にも、OSや検索エンジンのシェアなども取り扱っています。

WEBマーケティングなんかの、最新の動向をチェックしたい際に利用できるのではないかと。

モバイル関連情報

モバイルサイトのデザインギャラリー「モバミル」

実は探すと結構少ない「モバイルサイトのデザインギャラリー」というジャンルで、今週初めて知ったサイトです。

一部のサイトキャプチャーでは右半分が欠けちゃったりして、まだまだ進化の途中といった感じですが、ホントに数少ないモバイルデザインギャラリーを担うべく頑張って欲しいサイトです。

ちなみにこのサイト、WEB業界では羨望の的であり革新の雄である面白法人カヤックさんが作成した模様。

いやー、ホント面白いなーこの会社は。

デザイン関連情報

ダークな色味のWEBサイト30選

黒や茶色の艶やかなカラーをメインとしたサイトを、30サイト集めたエントリーです。

黒や茶色といった暗色は、シンプルだからこそ奥が深く、難しさのあるカラーですので、こーゆーデザインギャラリーはとても参考になります。

気になったウェブサービス

各種ブラウザ、各種OSのWEBページ表示テストが行える、Adobe社発のオンラインサービス「Adobe BrowserLab」

あのAdobe社が満を持して放つ、ブラウザのデバッグ用オンラインサービスです。

各OSの各ブラウザでの描画表示を、１アプリケーション内で見比べられるというのは、デザイナー・コーダーといった方々にはかなり重宝するのではないでしょうか。

現在は無料でテストできる期間ですが、将来的には有料とするようです。

しかし、デバッグのためにわざわざMACを用意したり各ブラウザの各バージョンを揃えるコトを考えたら、抜群の費用対効果だと思います！

[本家：https://browserlab.adobe.com/]

ネタ的ななにか

”これに手を出したら人生終わったと言えるようなものといえば？”

カメラアングルの魔力、撮影者の技術のせいだと思いたい。

でも、終わってもいい、、、かも、、、。

”人間を超えた驚異の身体能力、Damien Walters Showreel 2009”

リアル超人w