<img>画像をモノクロに変換しマウスオーバーでカラーに変化するjQueryプラグインを作りました

shot.jpg

クリスマスに何してたかって言うと、jQueryプラグインを作ってました。。

サンプルはこちら。
タイトルの通り、画像をモノクロに自動で変換して、マウスが乗ったらカラーに変化するってやつです。HTML5のcanvasを使ってます。
命名「jquery.monochromer.js」
まず、どんな事が出来るかっていうと、、、
  • カラー画像をセピア調、ブルー調、コントラスト強めのグレー調など、「古い写真」のイメージに変換できる。
  • モノトーンなのですが、CSSの16進数カラー値をそのまま使う事が出来るので、ぶっちゃけどんな色でも使える(カラーのフィルターをかぶせたような感じでとらえてくださいませ)
  • 「フワッと」変移するのか「パッと」変移するのか、スピードをミリ秒で指定出来る(ここはjQueryのアニメーションでおなじみのミリ秒をそのまま)
  • 「最初にモノクローム → (元の)カラー画像」だけでなく「最初に(元の)カラー画像→モノクローム」というように、変移の順番を逆にできる。
で、HTMLコーディングは以下の通り
<ul id=”photoNav”>
<li><a href=”#”><img src=”images/image01.jpg” alt></a>
<li><a href=”#”><img src=”images/image02.jpg” alt></a>
<li><a href=”#”><img src=”images/image03.jpg” alt></a>
<li><a href=”#”><img src=”images/image04.jpg” alt></a>
<li><a href=”#”><img src=”images/image05.jpg” alt></a>
</ul>
よくある光景ですね、ただしHTML5的なマークアップなので、終了タグを省略したりしてます。
使い方は簡単です。
まず、プラグインとサンプルをダウンロードしてください。
で、解凍して、index.htmlのソースを見てください、正直HTMLが分かる方なら全然簡単です。
<head>要素内にjQueryを読み込みます。
さらにその下にjquery.monochromer.jsを読み込みます。そして<li>要素に対してmonochromer()を実装します。
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.4.4.min.js”></script>
<script type=”text/javascript” src=”js/jquery.monochromer.js”></script>
<script type=”text/javascript”>
$(function () {
$(“ul#photoNav li”).monochromer();
})
以上で動作します、ただし注意が1点。
HTML5 canvasのセキュリティ仕様の問題で、ローカル環境では動作しません、サーバに上げて確認してください。
あと、HTML5仕様なので完全にIE8以下を無視しています。
なのでその場合<![if !IE ]>〜などで対処してください。
IE8以下では普通の画像リンクで対応できるというワケです。
では、次に細かい指定ですが、上記の通り色が変えられたり、変移スピードが指定出来たり、マウスオーバーの前後の状態を逆転できます。パラメータを指定しましょう。
$(function () {
$(“ul#photoNav li”).monochromer({
speed: 300,
color: “sepia”,
type: false
});
})
◎変移スピード(speed)
 文字通り、マウスオーバーして色が変わるまでの時間をミリ秒で決められます。
 1000で1秒を意味します。デフォルトでは300ミリ秒(0.3秒)です。
◎変色させたい色(color)
 キーワードとCSSでおなじみ#付きの16進数の2種類が用意されています。
 キーワードは以下の通り。
 gray, lightgray, sepia, blue, green
color: gray
color: lightgray
color: sepia
color: blue
color: green


といった感じで、キーワードで色を指定すると、その通りに変わってくれます。
さらに、もっと細かく設定したい場合、CSSのカラー値(#ff0000で赤、など)を指定してください。
原色に近いほど効果が得られやすいでしょう。

 

color: #ff0000
color: #0033ff
color: #00ff33


最後にtypeプロパティですが、初期状態を「変色している状態で表示」か「マウスオーバーして変色か」をtrue, falseで切り分けられます、デフォルトはtrueです。 

よってこの場合▼
$(function () {
$(“ul#photoNav li”).monochromer({
speed: 300,
color: “sepia”,
type: false
});
})
li要素内の最初のimg要素に対して、
typeがfalseなので、通常時が普通のカラー画像(そのまま)でマウスオーバー時に
セピア調に、300ミリ秒で変色していく。といった感じです。

SafariでHTML5 Video、Oggを再生させてしまうコンポーネント

スクリーンショット(2010-12-07 21.57.01).png
僕のMac Safari 5.0.2で、「http://html5test.com/」にアクセスしてみた所、「Ogg Theora support」に「Yes」のチェックが入っていました。
だから、Ogg形式の動画をHTML5のVideoで試した所、SafariでOggが再生出来ました。
これは他のMac主要ブラウザ、全部がOgg対応、ワンビデオ、マルチユースだ!と、ぬか喜びをしてしまってたんです。。
で、デジクリの連載でご一緒させてもらっている古籏一浩さん[http://www.openspc2.org/](大先生!)に「SafariでOggはサポートしてないよ〜」と言われて拍子抜けしてたんですが、そう言われても動いているし。。。

古籏さんいわく、「Ogg再生のプラグインが入っているのでは?」と言われ、もしかしたら、、、と疑わしい箇所を調べた所、、、!!

ogg1.jpg

ライブラリ/QuickTime/XiphQT.component

わーなんだこりゃ?いつ入れたんだ?
これはQuickTimeコンポーネント、QuickTimeでOggを再生させるための物らしいが、これをインストールすると、何とSafariでもHTML5 VideoにてOggを再生する事が出来たというもの。

思い切ってXiphQT.componentをゴミ箱に削除してみました。
すると、、、

スクリーンショット(2010-12-07 21.50.43).png


これでいいのだ。。これで、、、

もしもSafariをOgg対応のにしたい方は是非!
ちなみにダウンロードは以下の場所から。

最後に古籏さん、ありがとうございます。
ちなみに同じ日にヤマトネタ投稿してるし・笑