WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

画像をモザイクインさせるjQueryプラグイン MosaicIn.js

      2015/12/08

画像を表示するときによく使われるエフェクトにフェードインがあります。何もないところから、徐々に画像や要素を浮かびたたせる手法です。jQueryは要素の表示と非表示にフェードインが実装されていてこれを手軽に利用できます。フェードインに似た効果として、スライドインやワイプイン、ズームインなどがありますが、そうしたアニメーションをサポートするJavaScriptライブラリがWeb上にたくさん公開されています。

jQuery単体ではできないことでも、質・量ともに豊富なjQueryプラグインの中から探せば大抵見つかりますし、CreateJSTweenJSのような大型のライブラリもあり、他にあげればきりがないほどです。Ajax黎明期はDOMでアニメーションさせることがとにかく目新しくて、テキストや画像にちょっとした効果を出すエフェクトライブラリが重宝されていました。しかし、現在はというと、HTML5に始まる新技術をブラウザがサポートし始めたのをきっかけに、それまでライブラリをダウンロードしてあれこれ苦労して実装していたことが、少しの手間で当たり前にできるようになりました。たとえば、モダンブラウザでCSS3が実装されたことで、HTML要素にエフェクトをつけるのにわざわざスクリプトを書く必要がなくなりました。かつてのScript.aculo.us.jsのようなエフェクト全般をフォローする大型のライブラリは廃れて、代わりにjQueryプラグインに代表される、機能を限定したシンプルで軽いライブラリが増えました。より本格的なライブラリは、CanvasWebGLを使用した高度なアニメーション機能を持つのが主流になっています。

いまは歴史の中に埋もれてしまいましたが、Prototype.jsのアニメーションライブラリに前述したScript.aculo.us.jsというのがありました。これは高機能でしたが、jQueryPrototype.jsが負けたことで、そろって姿を消してしまいました。また、自分が前に関心を持っていたライブラリにUIZE.jsがあります。これは今でこそWebで当たり前になった高度なグラフィック機能を5年以上前にJavaScriptベースで実現していたものすごいライブラリというかフレームワークでした。ただ、日本では全く話題になりませんでしたが。。。JavaScriptなのに別の言語かと見まがう難解な仕様が普及しなかった原因だと思いました。自分もしっかり挫折しましたし。ちなみにUIZE.jsの名誉のために付け加えるとこのUIZE.jsはGithubにあがっていて、まだサポートされている現役のライブラリです。

画像をモザイクインできるjQueryプラグイン

どうでもいい前置きが長くなりましたが、新しくjQueryプラグインを作成したのでご紹介します。画像をフェードインならぬモザイクインさせるプラグインMosaicIn.jsです。ページ上の画像をはじめ荒いモザイク状に分解して、それを徐々に細かいモザイク状に変形しつつ元の画像に遷移させます。Flashでは一般的なエフェクトらしいです。

これは主観ですが、透明度を操作するフェードインに比べて、モザイクイン処理の方が視覚的にやわらかい印象があります。それがこのプラグインを使用するメリットだと考えています。多くのWebサイトで画像を表示するとき、エフェクトを使っているとしたらほとんどがフェードインです。かといって、ズームや回転などの変形その他のエフェクトに切り替えると、視覚的に過剰に刺激的だったりかえってユーザーに不快感を与えるものになりがちです。そのなかでモザイクインは、フェードインほどありふれた効果ではなく、それでいて視覚的にわだかまりを残すような過剰感もなく使えるエフェクトではないかと思います。

⇒フェードインは古い! これからはモザイクイン効果を使おう jQueryプラグイン MosaicIn.js

PCの使用を想定し、最新のモダンブラウザであるChromeFirefoxIE11でテストしました。モザイク処理にCanvasのいまだ試験的技術であるimageSmoothingEnabledプロパティを用いているため、古いバージョンのブラウザではモザイク処理されず「ぼかし」状態から表示されるいわゆるブラーインになってしまう場合があります。これまた主観ですが視覚的にみてブラーイン効果はあまり心地よくありません。なお、将来的に万一このプロパティが廃止されるとただのブラーインJSになります(笑)。Androidブラウザ等モバイルでのチェックはしていません。また、Canvasを認識し処理できるブラウザでないと機能せずIE8では動きません。

(注)このプラグインは画像を動的にモザイク処理しながら表示するエフェクト機能が主旨になっていて、画像をモザイク処理するプラグインではありません。もし、画像にモザイク処理を静的にほどこしたいという場合、jQueryプラグインPixelate.jsを使用しましょう。

 - JavaScript/Ajax, ブラウザ , , , ,