目次
サンプル・プログラム
| CSScolor.php | サンプル・プログラム(1) 本体 |
| colorName2hex.php | サンプル・プログラム(2) 本体 |
| pahooInputData.php | データ入力に関わる関数群。 使い方は「数値入力とバリデーション」「文字入力とバリデーション」などを参照。include_path が通ったディレクトリに配置すること。 |
| pahooColor.php | 色に関わるクラス pahooColor。 色に関わるクラスの使い方は「PHPでCSSカラー一覧を表示する」「PHPで補色関係を色相環に描画」を参照。include_path が通ったディレクトリに配置すること。 |
| バージョン | 更新日 | 内容 |
|---|---|---|
| 1.0.0 | 2024/12/21 | 初版 |
| バージョン | 更新日 | 内容 |
|---|---|---|
| 1.0.0 | 2024/12/21 | 初版 |
| バージョン | 更新日 | 内容 |
|---|---|---|
| 1.8.0 | 2024/11/12 | validRegexPattern() 追加 |
| 1.7.0 | 2024/10/09 | validURL() validEmail() 追加 |
| 1.6.0 | 2024/10/07 | isButton() -- buttonタグに対応 |
| 1.5.0 | 2024/01/28 | exitIfExceedVersion() 追加 |
| 1.4.2 | 2024/01/28 | exitIfLessVersion() メッセージ修正 |
| バージョン | 更新日 | 内容 |
|---|---|---|
| 1.0.0 | 2024/12/21 | 初版 |
CSSカラー名＝RGBコード変換プログラムの実行例
準備
CSScolor.php
53: // 初期値(START) =============================================================
54: // 表示幅（ピクセル）
55: define('WIDTH', 600);
56:
57: // 一覧表のカラム数
58: define('MAX_COLS', 6);
59:
60: // 色に関わるクラス：include_pathが通ったディレクトリに配置
61: require_once('pahooColor.php');
62:
63: // 初期値(END) ===============================================================
テキスト入力やバージョンチェックは外部ファイル "pahooInputData.php" に分離しており、include_path が通ったディレクトリに配置すること。
色に関する処理はユーザー定義メソッド "pahooColor.php" に分離しており、こちらも include_path が通ったディレクトリに配置すること。
解説：CSSカラー名＝RGBコード変換テーブル
pahooColor.php
20: /**
21: * コンストラクタ
22: * @param なし
23: * @return なし
24: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-40.shtm
25: */
26: function __construct() {
27: // エラー解除
28: $this->errmsg = '';
29: // CSSカラー名＝RGBコード変換テーブル・ファイル名
30: $this->fnameColorTable = dirname(__FILE__) . '\cssColorTable.json';
31:
32: // CSSカラー名＝RGBコード変換テーブルを読み込む
33: $contents = @file_get_contents($this->fnameColorTable);
34: if ($contents === FALSE) {
35: $this->_makeColorTable();
36: } else {
37: $this->colorNameTable = json_decode($contents, TRUE);
38: }
39: }
この処理を行うのがユーザー定義メソッド makeCSScolorTable だ。
pahooColor.php
135: /**
136: * CSSカラー名＝RGBコード変換テーブル・ファイルを生成する
137: * @param string $outfname = 生成するファイル名
138: * @param string $url = CSSカラー名を公開しているサイト（W3C公式）
139: * @return bool TRUE：生成成功／FALSE:失敗
140: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-40.shtm
141: */
142: function makeCSScolorTable($outfname, $url) {
143: // SSL証明書の検証を無効化する
144: $context = stream_context_create([
145: "ssl" => [
146: "verify_peer" => false,
147: "verify_peer_name" => false,
148: ]
149: ]);
150: $infp = @fopen($url, 'r', FALSE, $context);
151: if ($infp === FALSE) {
152: $this->seterror($url . ' にアクセスできません');
153: return FALSE;
154: }
155:
156: // ファイルを読み込む
157: while (! feof($infp)) {
158: $str = fgets($infp);
159: // CSSカラー名を取得する
160: if (preg_match('/data\-dfn\-for\=\"\<color\>\,\s*\<named\-color\>\"[^\>]+\>([^\<]+)\<\/dfn>/ui', $str, $arr) > 0) {
161: $colorName = (string)$arr[1];
162: $str = fgets($infp);
163: // RGBコードを取得する
164: if (preg_match('/\<td\>(\#[0-9a-fA-F]+)/ui', $str, $arr) > 0) {
165: $rgbCode = (string)$arr[1];
166: } else {
167: $rgbCode = '';
168: }
169: // 配列に代入する
170: $this->colorNameTable[$colorName] = strtolower($rgbCode);
171: }
172: }
173: fclose($infp);
174:
175: // 輝度の大きい順に並べ替える
176: uasort($this->colorNameTable, function ($a, $b) {
177: $rgbA = $this->hex2rgb($a);
178: $rgbB = $this->hex2rgb($b);
179: $yA = $this->rgb2luminance($rgbA);
180: $yB = $this->rgb2luminance($rgbB);
181: return ($yA < $yB) ? (+1) : (-1);
182: });
183:
184: // ファイルにJSON形式で書き込む
185: $json = json_encode($this->colorNameTable);
186: $res = file_put_contents($outfname, $json);
187: if ($res == FALSE) {
188: $this->seterror($outfname . ' に書き込めません');
189: return FALSE;
190: }
191: return TRUE;
192: }
仕方がないので、1行ずつ読み込んで、正規表現でマッチングさせて必要なデータを取り出すようにした。
最終的に、下記のような形で連想配列に格納する。
$colorNameTable[CSSカラー名] = #ではじまる16進コードここで残念なお知らせ――たとえば AliceBlue は2つの単語からなるので分かりやすいように、キャメルケースで指定することが多いのだが、CSS Color Module Level 4 に掲載されている名前は全て小文字で、どこで単語が区切られているのかも分からない。英単語辞書を引いて処理するのも大変なので、オリジナルのままファイルに保存することにした。
解説：RGBコードから輝度を計算する
pahooColor.php
449: /**
450: * RGBコードから輝度を計算する
451: * @param string $hexcode = RGBコード（#ではじまる16進数6桁）
452: * @return float 輝度
453: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-40.shtm
454: */
455: function hex2luminance($hexcode) {
456: if (($rgb = $this->hex2rgb($hexcode)) == FALSE) return FALSE;
457:
458: return $this->rgb2luminance($rgb);
459: }
pahooColor.php
230: /**
231: * RGBコードを r, g, b成分に変換する
232: * @param string $hexcode = RGBコード（#ではじまる16進数6桁）
233: * @return array RGB成分
234: * 'r' => Red成分（0～255）
235: * 'g' => Green成分（0～255）
236: * 'b' => Blue成分（0～255）
237: * FALSE : 引数が間違っている
238: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-20.shtm
239: */
240: function hex2rgb($hexcode) {
241: if (preg_match('/\#([0-9A-Za-z]{2})([0-9A-Za-z]{2})([0-9A-Za-z]{2})/i', $hexcode, $arr) == 0) {
242: $this->seterror($hexcode . ' はRGBコードではありません');
243: return FALSE;
244: }
245: if (count($arr) != 4) {
246: $this->seterror($hexcode . ' はRGBコードではありません');
247: return FALSE;
248: }
249:
250: $rgb = array();
251: $rgb['r'] = hexdec($arr[1]);
252: $rgb['g'] = hexdec($arr[2]);
253: $rgb['b'] = hexdec($arr[3]);
254:
255: return $rgb;
256: }
pahooColor.php
420: /**
421: * RGB成分から輝度を計算する
422: * @param array $rgb RGB成分
423: * 'r' => Red成分（0～255）
424: * 'g' => Green成分（0～255）
425: * 'b' => Blue成分（0～255）
426: * @return float 輝度／FALSE：引数の異常
427: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-40.shtm
428: */
429: function rgb2luminance($rgb) {
430: // 引数のバリデーション
431: if (! $this->validateRGB($rgb)) {
432: $this->seterror(__FUNCTION__ . ' に渡したRGBのいずれかの値が異常です');
433: return FALSE;
434: }
435:
436: $rf = $rgb['r'] / 255;
437: $gf = $rgb['g'] / 255;
438: $bf = $rgb['b'] / 255;
439:
440: // sRGBから輝度計算
441: $r2 = ($rf <= 0.03928) ? $rf / 12.92 : pow(($rf + 0.055) / 1.055, 2.4);
442: $g2 = ($gf <= 0.03928) ? $gf / 12.92 : pow(($gf + 0.055) / 1.055, 2.4);
443: $b2 = ($bf <= 0.03928) ? $bf / 12.92 : pow(($bf + 0.055) / 1.055, 2.4);
444:
445: // 輝度の加重平均
446: return (0.2126 * $r2 + 0.7152 * $g2 + 0.0722 * $b2);
447: }
解説：CSSカラー名＝RGBコード変換テーブルを取得する
pahooColor.php
194: /**
195: * CSSカラー名＝RGBコード変換テーブルを取得する
196: * @param なし
197: * @return array CSSカラー名＝RGBコード変換テーブル／FALSE：取得失敗
198: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-40.shtm
199: */
200: function getCSScolorTable() {
201: return $this->iserror() ? FALSE : $this->colorNameTable;
202: }
解説：カラー一覧を作成する
CSScolor.php
139: /**
140: * カラー一覧を生成する
141: * @param string $colorNameTable CSSカラー名＝RGBコード変換テーブル
142: * @param object $pcc pahooColorクラスのインスタンス
143: * @return string カラー一覧部分のHTML文
144: */
145: function makeTable($colorNameTable, $pcc) {
146: $html = "<table id=\"colorChart\">\n";
147: $cols = 0;
148:
149: foreach ($colorNameTable as $colorName=>$rgbCode) {
150: if ($cols == 0) {
151: $html .= "<tr>\n";
152: }
153: $textColor = ($pcc->hex2luminance($rgbCode) >= 0.5) ? 'black' : 'white';
154: $html .= sprintf("<td style=\"text-align:center; background-color:%s; color:%s;\">%s<br>%s</td>\n", $rgbCode, $textColor, $colorName, $rgbCode);
155: $cols++;
156: if ($cols >= MAX_COLS) {
157: $html .= "</tr>\n";
158: $cols = 0;
159: }
160: }
161: $html .= "</table>\n";
162:
163: return $html;
164: }
表のカラムの
カラー一覧は、カラー名をカラムの背景色にするが、カラー名と16進コードは白または黒文字で表示する。背景色と混ざらないように、前述の輝度計算メソッド rgb2luminance を利用し、輝度が 0.5 異常だったら黒文字で、そうでなければ白文字で表示する。
CSSカラー名とRGBコードを相互変換するプログラムの実行例
解説：CSSカラー名を RGBコードに変換する
pahooColor.php
204: /**
205: * CSSカラー名を RGBコードに変換する
206: * @param string $colorName カラー名
207: * @return string RGBコード（#ではじまる16進数6桁）／FALSE：カラー名ではない
208: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-40.shtm
209: */
210: function colorName2hex($colorName) {
211: // 空白文字を取り除き，すべて小文字にする
212: $colorName = strtolower(preg_replace('/\s+/ui', '', $colorName));
213:
214: return isset($this->colorNameTable[$colorName]) ? $this->colorNameTable[$colorName] : FALSE;
215: }
まず、引数で渡された CSSカラー名 $colorName から（単語間の）空白を取り除き、すべて小文字に変換し、CSSカラー名＝RGBコード変換テーブル $colorNameTable のキーとして存在していれば RGBコードを返す。
解説：RGBコードを CSSカラー名に変換する
pahooColor.php
217: /**
218: * RGBコードを CSSカラー名に変換する
219: * @param string RGBコード（#ではじまる16進数6桁）
220: * @return string カラー名／FALSE：該当するカラー名がない
221: * @参考URL https://www.pahoo.org/e-soul/webtech/phpgd/php06-gd-40.shtm
222: */
223: function hex2colorName($hex) {
224: // すべて小文字にする
225: $hex = strtolower($hex);
226:
227: return ($colorName = array_search($hex, $this->colorNameTable)) ? $colorName : FALSE;
228: }
まず、引数で渡された RGBコード $hex をすべて小文字に変換し、CSSカラー名＝RGBコード変換テーブル $colorNameTable の値として存在していれば CSSカラー姪を返す。
参考サイト
- PHPで補色関係を色相環に描画：ぱふぅ家のホームページ
そこで今回は、PHPを使って CSS Color Module Level 4 の情報を読み込んで、「PHPでカラーチャートを表示する」のサンプル・プログラムのように CSSカラー一覧を表示するPHPプログラムを作ってみる。あわせて、CSSカラー名とRGBコードを相互変換するプログラムも作る。