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