オンラインの画像を解析してiTunes 11風に仕上げる「AlbumColors.js」
AlbumColors.jsはJavaScriptを使ってiTunes 11のカバーアート風のデザインを実現するライブラリです。
iTunes 11になってUIが様変わりしましたが、その中で注目を集めているのがアルバムのカバーアートからマッチした背景、テキストカラーを抽出する機能です。同様の機能をJavaScriptで実現してしまうのがAlbumColors.jsです。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.21.17.png)
デモです。Last.fmからアルバムアートを取得して、それにマッチしたカラーリングを行っています。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.21.25.png)
類似色、反対色、そしてもう一色の三色を抽出しているようです。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.21.34.png)
背景色がかなりマッチしているのでかっこうよく仕上がっています。
[](http://images.moongift.jp/2012/12/Screenshot 2012-12-17 10.21.40.png)
それぞれそれっぽく仕上がっているのではないでしょうか。
AlbumColors.jsは画像のURLを引数に渡すと、3つの配列が返ってきます。それぞれRGBの要素をもっているので、そのまま色情報として使えるようになっています。iTunes風の使い方の他、画像から色情報のピックアップをするライブラリとしても面白いソフトウェアです。
AlbumColors.jsはJavaScript製、The University of Illinois/NCSA Open Source Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
印象深いデザインがあり、それを真似るのは容易いことです。iPhone以前にああいったインタフェースのデバイスはなく、一気に各社が真似して増えました。しかしそれではイノベーションとは言えません。誰もがやらなかったようなデザイン、機能を実現してこそ意味があります。
iTunesについても同様です。iTunes 11の表示を真似するライブラリ、デザインテンプレートが既に数多く出回っています。それらを真似し、そのエッセンスを感じてみてください。その中から自分なりの新しいデザインが見えてくるかも知れません。