今日は、Google Spreadsheet でカラーコード表を作成する方法についてお伝えします。
デザイナーさんが作成したカンプをコーディングで再現する作業過程で「使われている色がカラーコード表でまとめられていたら良いのに」と思い、こちらの方法にたどり着きました。
期待動作としては、
セルにカラーコードを入力すると、セルの背景色が自動的にそのカラーコードの色に変わるというものです。
そして、期待した通り、
Google Spreadsheetならいとも簡単にこの動作が実現できました!
以下、実際の方法をご紹介しますね。
Google Spreadsheet でカラーコード表を作成する手順
1. Google ドライブで「Googleスプレッドシート」-「空白のスプレッドシート」をクリックします。
⇒ 新規Googleスプレッドシート画面が表示されます。
2. 「ツール」-「スクリプトエディタ」をクリックします。
⇒ スクリプトエディタ画面が表示されます。
3. 下記のスクリプトを入力し、任意の名前を付けて保存します。
ここでは、プロジェクト名に「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を入力してみます。
すると、こんな感じで該当の背景色が自動設定されました。
思い通りの動作!便利で素晴らしいです!!
なお、こちらの方法については、acidlemonさんの以下記事で教わりました。
【参考記事】
Google Spreadsheetに#FFFF00などと色コードを入れたら自動で背景色をその色にする
beatsync.net
acidlemonさん、
まさにドンピシャの方法、
情報共有、本当に感謝です!!
以上、今日は Googleスプレッドシートで実現するカラーコード表作成方法についてでした。
便利なので、ぜひお試しくださいませ。