このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第19回

画像の色から背景色を決定!jquery.adaptive-backgrounds.js

2015年01月08日 11時00分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

jquery.adaptive-backgrounds.js


 「jquery.adaptive-backgrounds.js」は、指定した画像のドミナントカラーを抽出し、親要素の背景色として適用するjQueryプラグインです。

 ドミナントカラーとは配色全体の印象を支配する色のことで、主調色とも呼ばれます。ドミナントカラーを背景に使う手法で有名なのはiTunesですね。下記の画像を見てわかる通り、CDジャケットのドミナントカラーを背景色に指定することで、アルバムの印象を視覚的により強めることができます。

 jquery.adaptive-backgrounds.jsプラグインはCanvas 要素を使うので、Google ChromeなどのモダンブラウザーとInternet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、 jquery.adaptive-backgrounds.jsをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

 利用するWebページのheadタグ内で、jQuery本体と、ダウンロードした「jquery.adaptive-backgrounds.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.adaptive-backgrounds.js"></script>
</head> 
//(中略) 

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 jquery.adaptive-backgrounds.jsを読み込んだ後、adaptiveBackground.run()メソッドを実行します。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.adaptive-backgrounds.js"></script>
<script>
$(document).ready(function(){
  $.adaptiveBackground.run()
});
</script> 
</head>
//(中略)

 続いてHTMLを記述します。このプラグインでは、カスタムデータ属性を利用します。用意した画像に、以下のようにカスタムデータ属性を付与しましょう。

HTML


//(中略)
<div class="img-wrap01">
<img id="img" src="images/01.jpg" data-adaptive-background="1" width="750" height="500">
</div>
//(中略)

 上記のように、imgタグに直接書くこともできますし、CSSの背景画像としても指定できます。CSSで利用する場合はさらにdata-ab-css-background="1"を付け加えます。

HTML


//(中略)
<div id="img01" style="background-image: url(images/01.jpg);" data-ab-css-background="1" data-adaptive-background="1" width="750" height="500"></div>
</div>
//(中略)

 値の「1」 は、固定です。以下のようになれば成功です。

適用前

適用後

step3 オプションによるカスタマイズ

 jquery.adaptive-backgrounds.js はオプションでカスタマイズできます。オプションは、プラグインを実行するときに引数を指定し、オブジェクトを作成して指定します。


//(中略)
<script>
  var default = {
      // ここにオプションを書いていく
      selector: '[data-adaptive-background="1"]',
      parent: null
  }
$(document).ready(function(){
  $.adaptiveBackground.run(default)
});
//(中略)

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

オプション 説明 デフォルト値
selector img要素に指定するカスタムデータ属性の名前と値の組み合わせを変更します。 data-adaptive-background="1"
parent 背景色を適用したいセレクターを指定します。指定しない場合は直近の親要素に適用されます。 null
normalizeTextColor true にすると背景色が暗すぎたり明るすぎたりした場合にテキスト色を調整します。 false
normalizedTextColors 「normalizeTextColor」が有効な場合、暗すぎる場合のテキスト色と、明るすぎる場合のテキスト色を指定できます。 dark: '#000', light: '#fff'
exclude 指定した色の間の色で、ドミナントカラーを決定します。 'rgb(0,0,0)', 'rgba(255,255,255)'
lumaClasses 輝度によって与えるclass名を指定します。 light: "ab-light", dark: "ab-dark"

 以下のように完了時の処理を指定できます。

JavaScript


//(中略)  
$.adaptiveBackground.run({
  success: function() {
    // ここに処理を書く
  }
});
//(中略) 

 すべてのイメージに対してこのコールバックが呼ばれてしまうので設定時は注意が必要です。

step4 画像の色を取得する

 jquery.adaptive-backgrounds.jsはデフォルトでは画像のドミナントカラーを背景色として指定するプラグインですが、画像で使われている色を20色抽出して値としても取得できます。

 JavaScriptがある程度書ける方であれば、単純に背景色を指定するだけでなく、画像の色を基にサイトの配色を動的に変更したり、コンテンツに反映したり、もっと幅広く利用できます。

 たとえば以下の記述で、明度の違う20色の値が入った配列を取得できます。

JavaScript


//(中略)  
$("img#img01").on("ab-color-found", function(payload){
    console.log(payload.palette);
});
//(中略) 

コンソールログに出力した図

 あらかじめ色を指定しなくてもコンテンツに応じて色を変えられるので、表現の幅が広がります。

 具体的な利用例はデモで確認してください。

 いかがだったでしょうか。画像主体のサイトやギャラリーサイトなどで利用できそうですね。


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング