カラーコード　⇔　RGB 変換するツールを作りました！

公開日：2017/08/24

更新日：2019/09/17

カテゴリー: プログラミング

以前、

カラーコードをRGBに変換
RGBをカラーコードに変換

するツールを作ったのですが、最近改良したので開発ログを残しておきます。

カラーコード⇔RGBの変換

作成したツールはカラーコード　⇔　RGBの変換！です（センスのある名前を考えるのが面倒なのでまんまの名前ですｗ）。

仕組み的にはこんな感じです。

フォームにカラーコード or RGB を入力
「変換」ボタンをイベントに設定してjQueryで入力値を取得
取得した入力値をajaxでサーバーに投げる
サーバー（PHP）側でカラーコード⇔RGBの変換を行う
結果を画面に出力する

ツールの設計

このツールは、

HTML
javascript・jQuery
PHP

からなります。

HTML

カラーコードと RGB を入力するフォームをこのように作りました。

カラーコードを入力するフォーム

カラーコード（16進数）を入力するフォームはシンプルにこのようにしました。

<form id="colorcode">
<p>
<input style="width:200px;" name="colorcode" type="text" value="" />
<input type="submit" value="変換" />
</p>
</form>

RGBを入力するフォーム

「赤」「緑」「青」の10進数データの入力が必要なのでRGBを入力するフォームはこのようにしました。

<form id="rgb">
<p>
赤：<input style="width:50px;" name="rgb_red" type="text" value="" />
緑：<input style="width:50px;" name="rgb_green" type="text" value="" />
青：<input style="width:50px;" name="rgb_blue" type="text" value="" />
<input type="submit" value="変換" />
</p>
</form>

画面をシンプルにするためにスライドトグルにしていますが、その方法は「スライドトグル」で検索すればやり方はたくさん出てくると思います。

javascript・jQuery

利用者が「変換」ボタンを押したときにスクリプトが動作するように次のようにしました。

jQuery(function($){
	//カラーコード→RGB
	$('form#colorcode').submit(function(event){
		// HTMLでの送信をキャンセル
		event.preventDefault();

		//カラーコードを取得
		colorcode = $(':text[name="colorcode"]').val().replace("#", "");

		//送信データ
		var formData = new FormData();
		formData.append("colorcode", colorcode);

		//ajax送信
		//省略
	});

	//RGB→カラーコード
	$('form#rgb').submit(function(event){
		// HTMLでの送信をキャンセル
		event.preventDefault();

		//RGB値を取得
		rgb_red = $(':text[name="rgb_red"]').val();
		rgb_green = $(':text[name="rgb_green"]').val();
		rgb_blue = $(':text[name="rgb_blue"]').val();

		//送信データ
		var formData = new FormData();
		formData.append("rgb_red", rgb_red);
		formData.append("rgb_green", rgb_green);
		formData.append("rgb_blue", rgb_blue);

		//ajax送信
		//省略
	});
});

「#colorcode」要素を持つフォームの「submit」ボタンが押された→入力されたカラーコードを取得
「#rgb」要素を持つフォームの「submit」ボタンが押された→入力されたRGB値を取得

して、あとは取得したデータをajaxを使ってサーバー側に投げます。

特に工夫したといえるほどのものではありませんが、カラーコードの入力では「#」の有り無しが考えられるので、

//カラーコードを取得
colorcode = $(':text[name="colorcode"]').val().replace("#", "");

のように、replaceメソッドを使って「#」無しに統一して取得するようにしています。

PHP

サーバー側（PHPでは、ajaxでPOSTされたデータ（カラーコード or RGB）を受け取り、次のようにそれぞれ変換を行います。

	//POST送信されてきたデータを取得
	$colorcode = $_POST['colorcode'];
	$rgb_red = $_POST['rgb_red'];
	$rgb_green = $_POST['rgb_green'];
	$rgb_blue = $_POST['rgb_blue'];

	//データの形式をチェックして処理分岐
	if($colorcode){
		//カラーコードをRGB数値に変換する
		  //さらにカラーコードの形式をチェックするためすべて小文字にする
		  $colorcode = mb_strtolower($colorcode);

		  //文字数と16進数のチェック（カラーコードは6文字で16進数）
		  if(strlen($colorcode) != 6 || preg_match("/[^0-9abcdef]/", $colorcode)) $error_message = "カラーコードを正しく入力してください";

		  //「******」という形になっているはずなので、2つずつ「**」に区切る
		  //そして16進数を10進数に変換するhexdec関数で変換して配列に格納する
		  $return_data_array['data']['red'] = hexdec(substr($colorcode, 0, 2));
		  $return_data_array['data']['green'] = hexdec(substr($colorcode, 2, 2));
		  $return_data_array['data']['blue'] = hexdec(substr($colorcode, 4, 2));

		  //以下略

	}elseif($rgb_red != "" && $rgb_green != "" && $rgb_blue != ""){
		//RGB数値をカラーコードに変換する
		  //さらにRGB値のチェック（RGB値はそれぞれ数字オンリーで2桁以下）
		  if(preg_match("/[^0-9]/", $rgb_red) || strlen($rgb_red) > 3) $error_message = "「赤」の数値を正しく入力してください";
		  if(preg_match("/[^0-9]/", $rgb_green) || strlen($rgb_green) > 3) $error_message = "「緑」の数値を正しく入力してください";
		  if(preg_match("/[^0-9]/", $rgb_blue) || strlen($rgb_blue) > 3) $error_message = "「青」の数値を正しく入力してください";

		  //「$rgb_red」「$rgb_green」「$rgb_blue」をそれぞれ
		  //10進数を16進数に変換するdechex関数を用いてカラーコードを作成する
		  $colorcode = str_pad(dechex($rgb_red), 2, "0", STR_PAD_LEFT);
		  $colorcode .= str_pad(dechex($rgb_green), 2, "0", STR_PAD_LEFT);
		  $colorcode .= str_pad(dechex($rgb_blue), 2, "0", STR_PAD_LEFT);

		  //以下略

	}else{
		//エラー
		$error_message = "フォームに正しいデータを入力してください";
	}

ポイントは、