My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

Google Spreadsheet でカラーコード表を作成する

今日は、Google Spreadsheet でカラーコード表を作成する方法についてお伝えします。

デザイナーさんが作成したカンプをコーディングで再現する作業過程で「使われている色がカラーコード表でまとめられていたら良いのに」と思い、こちらの方法にたどり着きました。

期待動作としては、
セルにカラーコードを入力すると、セルの背景色が自動的にそのカラーコードの色に変わるというものです。

そして、期待した通り、
Google Spreadsheetならいとも簡単にこの動作が実現できました!

以下、実際の方法をご紹介しますね。

Google Spreadsheet でカラーコード表を作成する手順

1. Google ドライブで「Googleスプレッドシート」-「空白のスプレッドシート」をクリックします。
 ⇒ 新規Googleスプレッドシート画面が表示されます。

2. 「ツール」-「スクリプトエディタ」をクリックします。
 ⇒ スクリプトエディタ画面が表示されます。

3. 下記のスクリプトを入力し、任意の名前を付けて保存します。

f:id:sntkk3:20180922232427p:plain

ここでは、プロジェクト名に「ColorCode」という名前を付けて保存しました。

スクリプト

function onEdit(event) {
  rowColor();
}
function rowColor() {
  var range = SpreadsheetApp.getActiveRange(
);
  var col = range.getColumnIndex();
  var row = range.getRowIndex();

  value = range.getValue();
  if (value.indexOf("#") == 0 && value.length == 7) { // #xxxxxx で7文字!!
    range.setBackgroundColor(
value);
    // 色の濃さを確認
    if (getChannelLevel(value) > 400) {
      range.setFontColor("#000000");
    } else {
      range.setFontColor("#FFFFFF");
    }
  }
}
function getChannelLevel(baseColor){
  baseColor = baseColor.replace('#', '');
  if (baseColor.length != 6){ return '#000000'; }
  var totalValue = 0;
  for (i = 0; i < 3; i++){
    channelValue = parseInt(baseColor.substr((i * 2), 2), 16);
    totalValue += channelValue;
  }
  return totalValue;
}


4. スプレッドシート画面に移動し、カラーコードを入力してみます。

(例) #CCFFFFを入力してみます。
すると、こんな感じで該当の背景色が自動設定されました。
f:id:sntkk3:20180922233148p:plain


思い通りの動作!便利で素晴らしいです!!

なお、こちらの方法については、acidlemonさんの以下記事で教わりました。

【参考記事】
Google Spreadsheetに#FFFF00などと色コードを入れたら自動で背景色をその色にする
beatsync.net

acidlemonさん、
まさにドンピシャの方法、
情報共有、本当に感謝です!!


以上、今日は Googleスプレッドシートで実現するカラーコード表作成方法についてでした。

便利なので、ぜひお試しくださいませ。