- 作品名：
- 「
カラリスト 色見 本子 」 - 作者名：
- はりまお
- 制作環境：
- Core i7-4770 3.40GHz + 8GB RAM
- Windows 10 Pro (64bit)
- 開発言語：
- Visual Basic 2010 Express Edition SP1
- 動作環境：
- .NET Framework 4 Client Profile
- 形態種別：
- フリーソフトウェア（オープンソース）
画面写真
※画像をクリックすると、原寸大で表示されます。
※画像をクリックすると、原寸大で表示されます。
Visual Basic 中学校さんの「投稿プログラム」コーナーにて掲載していただいております。（2014年01月11日〜）
このサイトでは、「HSV飛行士」を同梱して配布しています。
| 名前 | バージョン | 概容 |
|---|---|---|
| Colorist.exe | 1.9.1.2 | 本体 |
| preset.csv | ユーザ書式のプリセット | |
| readme.txt | 説明文（本文と同じ内容） | |
| 重要.txt | ソースの利用に関する注意（下記） | |
| Colorist | ソース収録フォルダ（不要なら削除可） |
ソース フォルダを配布するにあたって、"obj"フォルダを削除しています。
そのため、VBでプロジェクト（ソリューション）を開くと、ユーザーコントロールを使用しているフォームにエラーが出てしまいます。
一旦ビルドしてから、開き直してください。これで正常になると思います。
| 名前 | 概容 |
|---|---|
| memo.dat | 覚え書きの内容（終了時に生成される） |
.NET FrameworkのSystem.Drawing名前空間にあるKnownColor列挙体の色を確認したり、パレットをいじって色を作ったり、色の名前やARGB値（カラーコード）を取得したりできます。
要するに、色を使うときに役立ってくれる頼もしいやつです。VBはもちろん、CやHTMLなんかでも活躍してくれるかも知れません。
本作を使用するためには、『.NET Framework 4 Client Profile』が必要です。お使いのWindowsに導入されていない場合は、予め Microsoft Update 等で入手（無料）しておいてください。
インストールするには、ダウンロードした圧縮ファイルを、新たに作成したフォルダに解凍してください。
アンインストールは、インストールしたフォルダごと全て削除するだけです。
レジストリの変更や、インストールフォルダ以外へのファイル作成は、一切行っていません。チョコットだけのお試しも（あくまで自己責任ですが）大丈夫です。
"Colorist.exe"をダブルクリックすれば、起動できます。終了するには、ウィンドウの右上にあるをクリックしてください。
 |
(1) | 色リスト |
|---|---|---|
| (2) | 色コレクション | |
| (3) | パレット | |
| (4) | ステータス | |
| (5) | 機能ボタン | |
| (6) | 覚え書き | |
| (7) | バージョン情報 |
「色リスト」と「色コレクション」には、全ての色が登録順に一覧表示されます。何れかの色をクリックすると、「パレット」や「ステータス」にその内容が書き出されます。
「色リスト」は、以下のタブで分類されています。分類名は、MSDNでの名前がややこしかったので、勝手に命名して使用しています。
「パレット」では、ARGBの各要素のトラックバーを動かしたり、その下のサンプルバーをクリックしたりして、自由に調色できます。
右端にあるサンプルボックスを右クリックすると、背景色を変更できます。半透明の色を作成するときの確認にご利用ください。
また、左クリックすることで透明色が合成された結果をパレットに取り込むことができます。色の合成は、 ウィンドウ色 ＋ 背景色 ＋ パレット色 となります。ウィンドウ色の透明度は無視されます。
「ステータス」には、上下2段で「パレット」の色を様々な表現方法で表示します。それぞれをクリックすれば、クリップボードにコピーされます。
上段は、定番の表現方法を用います。色の名前・HTMLでの名前・数値の3種類が表示されます。無名の場合は、ARGB値が表示されます。
各ドロップダウンメニューから、表示設定ができます。数値では、ARGB値の入力もできます。
下段は、ユーザ書式を用います。ユーザ書式では、各種パラメータを自由な書式で出力できます。
ドロップダウンメニューを開くことで、プリセット（予め用意された雛形）を選択したり、書式を作成したりできます。
プログラム内部では《String.Format》を使っていますので、作成テキストボックスの上に記してある書式項目の割り当てを参考にしながら、お好みの書式を記述してください。ただし、作った書式を保存する機能はありませんので、必要ならプリセットファイルに記述してください。プリセットの詳細は、“○プログラムについて”の“●プリセット書式”を参照してください。
上段右端のボタンは、RGB値送信機能である【色要 伝達郎】を呼び出します。【色要 伝達郎】は、外部アプリケーションのRGB値入力欄（Windowsの標準である【色の設定】ダイアログを想定、例えばペイントの『色の編集』）に「パレット」のR,G,B値を自動入力してくれます。
使い方は、まずボタンをクリックして【色要 伝達郎】を出しておきます。続いて、外部アプリケーションのR値欄にフォーカスを持って行き、【色要 伝達郎】のボタンをクリックするだけです。このとき、「色見 本子」のメインウィンドウをアクティブにしないよう注意してください。
この機能は、キーボード操作をエミュレートするものなので、全ての外部アプリケーションに通用するとは限りません。具体的には、各値の入力欄が、TabキーによってR→G→Bの順にフォーカスが遷移し、かつ、Ctrl+Aキーで数値を全選択できるようになっている必要があります（このようになっていても、上手くいかない場合があります）。
具体的なエミュレート内容は、以下の通りです。
ボタンを押せば、Windowsでお馴染みの【色の設定】ダイアログを使って色を作成できます。
,ボタンは、「パレット」の色の反転色や補色を作成します。
ボタンでは、「パレット」の色に近い定義色を照合します。近い色に含める範囲の境界値は、下の入力欄で指定できます。
結果は、「色リスト」の[[照合結果]]タブに近い順に一覧されるので、望みのものを選んでください。照合結果に表示されるカッコ内の数字は、対象色との“近さ”を表し、小さいほど近く"0"なら同じ色ということになります。
「覚え書き」には、「パレット」のARGB値を一時的に記憶させておくことができます（色名は記憶できません）。登録内容に変化があった場合は、終了時に保存するか確認されます。
ボタンを押して登録し、登録された色をクリックすると「パレット」に再現されます。不要な色は、ボタンで消せます。で、順番を入れ替えられます。
「パレット」の色要素ごとにあるサンプルバーは、《Drawing2D.LinearGradientBrush》を使って単純にグラデーションを描画しているだけです。その都合上、トラックバーと色が厳密に一致しているとは限りません。とは言え、誤差は小さいと思うので目安としてなら十分利用できると思います。
サンプルボックスの色を取得する際の透明色の合成は、“線形補間”によるアルファブレンドです。
「ユーザ書式」のプリセットは、外部ファイルにCSV形式で定義します。ファイル名は"preset.csv"で、実行ファイルと同じフォルダに置きます。文字コードは、シフトJISです。
レコードを構築するフィールドの意味は、以下の通りです。
[フラグ]には、以下の3種類があります。
| 種類 | 概容 |
|---|---|
| "/" | 注釈のレコードです。無視されます。 |
| "!" | 起動時の書式に使用されるレコードです。 （複数ある場合は一番最後のレコード、ない場合は先頭のレコードが選択されます。） |
| "-" | 上記以外の特別な役割のないレコードです。 |
「ステータス」（特に下段側）には、ちょっと問題があります。
マウスカーソルを持っていくとツールチップ（ToolTip：簡易説明文フキダシ）が表示されるのですが、画面下端で表示する（ウィンドウを全画面表示しているときなど）とマウスカーソルと重なってしまい、点滅を繰り返してしまう場合があります。
マウスカーソルをずらすと改善する場合もありますが、上手くいくとは限りません。どうしても改善しない時は、ウィンドウを移動してください。
（マウスカーソルの上側に表示してくれるようにしてくれれば良いのですが・・・。というか、こういうメニュー的なコントロールを下部で使用すること自体想定外なんでしょうけど。《ToolStripContainer》で移動できるようにすることも考えたのですが、〔色を選択〕→〔パレットで調色〕→〔クリップボードへコピー〕という“上から下への流れ”を考えて止めました。）
「覚え書き」の内容は、"memo.dat"という名前で、実行ファイルと同じフォルダに作成されます。中身は、シフトJISのプレーンテキストファイルです。
色コレクションに表示される“色チップ”には、色名が書かれます。当然その文字色は、いろんな色の上に重なってもちゃんと読める色でないとなりません。この色選択を、いちいち手作業でやるのは嫌なので、自動化に挑みました。が、そこには血と汗と涙が吹き出るイバラの道が待ち構えていたのです（大ウソ）。
まず、『RGBの各値を255でXor』する方法で色を反転してみました。ところが、128周辺の中途半端な値は変化が小さくて読めないものが出てくる。これでは使えません。
今度は、『RGBの各値を128でXor』してみました。前回の問題は回避できたけど、《Color.Transparent》（透明色）が背景色と同化して読めません。しかもこれらXor方式では、いろんな色がとっ散らかるため目がチラチラして落ち着かないというなんともしがたい欠点があります。これも満足できません。
『それなら、色チップの色の明暗（と言っていいのかな？）具合で白と黒を使い分ければ良いのでは・・・』と、路線変更したものの、そもそも“色の明るさ”とは何なのか？ ヘッポコ作者にそんな知識の持ち合わせなど当然ありません。
とりあえず、画像を白黒に変換するときの単純手法『R,G,Bの各値の平均を求める方法』でやってみました。例えば、128（色要素の最大値255の半分）を閾値として、平均値がそれ未満なら“暗”・それ以上なら“明”とするのです。ところが、閾値をあれこれ調整してみてもどうにも微妙なものが出てしまい、なかなか上手くいきません。またもや決定打になれず。
さてどうしたものかと悩んでいたとき、「ハッ！」と昔使っていた減色ソフト（名前を忘却、ゴメンなさい）のことを思い出しました。減色するためには、“近い色を探す”わけですが、このソフトのReadMeには近似色を探す簡単な方法がちゃんと記載されていたのです。なんと有難いことか。で、その方法とは「比べたい2色のRGB値をXYZ座標とみなして“2点間の距離”の公式に当てはめ、出てきた解が色の近さと言える」ということだったと記憶している。
早速この方法を借りて、『黒からの距離 ＝ 明るさ』として閾値を微調整（黒(0,0,0)と白(255,255,255)の距離 ÷ 2(中間) ± 調整値α）したら、結構好い感じになったので正式採用となりました。
.NETの《Color》構造体はHSB(HSV)値も得られることから、そのBrightness値を使用して明暗判定を行い方法も試みました。結果は悪くなかったのですが、『2点間の距離』方式の方が何となく良好だったのでそちらに落ち着きました。
これら明暗判定方式でも透明度を考慮できませんが、そもそも透明色は1つしかないので決め打ちで対処しました。よって、色チップを配置する《FlowLayoutPanel》の背景色を変更したら、それに合わせる必要があります。
VB2008からVB2010へ移行したので、自動的に対象フレームワークが.NET Framework 4に切り替わっているはずですが、プロジェクトファイル（"〜.vbproj"）を見てみると、“<RequiredTargetFramework>3.5</RequiredTargetFramework>”など“3.5”という記述が散見されます。これってどういう意味なんでしょうか？ もしかして、.NET Framework 3.5も必要ってこと？ ネットで検索してみても答えを見つけられませんでした。
VBとかHTMLとかで何か書いたりしてていつも思うのが、「定義色ってギョ〜サンあるけど、いったいどんな色なんやろ？」とか「あんな色のRGB値って何やろか？」とか。ほんと困っちゃう。
RGB値の凄く大雑把な見当はつけられても、頭の中で細かい調整なんて不可能。最近のVBは、色の名前をインテリセンスで一覧表示してくれてすこぶる便利になったけど、実際にどんな色なんかは全然わかんないまんま（プロパティ ウィンドウの色指定はわかり易くなってるのに）。グラフィックエディタなんかで色を作ってもいいんやけど、そのためだけに立ち上げてメニューを辿って操作してRGBの各値をコピーしてなんて、超〜面倒臭い。想像しただけでもゾッとする。しかも、Windows標準の【色の設定】ダイアログは、16進数表示してくれへんし・・・。
そんなこんなで、「あぅあぅ、色見本＆調色ソフトが欲しいよぉ〜！！」ってなっちゃったんで、本作を創ってみちゃいました。
色チップの文字色の項で触れた白黒変換についてちょっと調べてみたところ、単純に平均値を取るだけでは実際の見た目と差が出てしまうみたいやね。
例えば緑(0,255,0)と青(0,0,255)は平均値が同じなのに、見た目には緑の方が明るいよね？ これは、色によって明るさに与える影響力が違うからだそうな。そこで、実際には『明るさ ＝ Ｒ × 0.299 ＋ Ｇ × 0.587 ＋ Ｂ × 0.114』という式を使うことが多いそうです。早速、この計算式で実験してみたところ・・・一歩及ばずな感じ。なぁ〜んだ。
でもまぁ、『2点間の距離』方式のおかげで“近似色照合”機能が生まれた訳やから、えぇ〜としょ。
それにしても、《ComboBox》でデータを持ったアイテムを扱ってみたり、《ComboBox》や《ListBox》に色箱を描画してみたり、《ListBox》の内容をソートしてみたり、なかなか興味深い制作過程やった。当初の地味な感じの完成予想に反して、基本から一歩踏み出したようなことがいろいろできて、すごく勉強になったし面白かった。