これはクソアプリ Advent Calendar 2025３日目の記事です。
昨日は @nabettu さんでした。
明日は @genshun9 さんです。
はじめに
この季節がやってきたか…今年も！クソアプリ！作らなくては！！
流行に便乗したい！
ということで、普通はお絵かきアプリや写真加工アプリのツールとして存在する色選択ダイアログだけ作りました！！
色を選べるだけ！それを使って何かができる訳じゃ無い！
本当にムダなアプリができました。
ムダに豪華な４種類のカラーセレクタを搭載！！
特に円形セレクタはカッコイイですよね！
Painter で初めて見たときから虜でした！
他は概ね古の Photoshop 4 辺りを真似ています！
マルチプラットフォーム対応！
今回も Delphi で作ってるので、Windows / macOS / iOS / Android で動くんですよね！
便利～（Delphi が。このアプリは便利じゃない）
動作デモ
アニメーション GIF なので色がおかしいのは目をつむってください
せっかくだから、え、えーあいも組み込みたい！
AI も！組み込みましタァ！
選択した色についての情報を教えてくれます！！
便利～！（便利ではない）
動作デモ
マウスアップしたら強制的に教えてくれます！
API 使用料が溶ける…！！
技術的な解説
円形セレクタ、四角形セレクタ、ともに Pixel 単位で色を計算して TBitmapData を使って色を書き込んでいます。
これは単なるメモリ領域への書き込みとなるので非常に高速です。
そして、今回は知らないと描くのが難しい HSV の内部の三角形について解説します。
HSV 三角形
HSV カラーピッカーの三角形領域では、頂点ごとに異なる彩度・明度の値を割り当て、内部ではそれらが自然に混ざるように描画する必要があります。
ここで便利なのが バリセントリック（重心）座標 です。
三角形内の任意の点を「3 つの頂点の重み」で表現でき、この重みがそのまま 色補間の比率 として使えます。
バリセントリック座標
三角形 ABC の内部の点 P は、次のように表せます。
P = uA + vB + wC \quad (u+v+w=1)
ここで重要なのは次の 2 点です。
- u, v, w がすべて 0 以上 → P は三角形内部
- u, v, w の値をそのまま 色の混合比率として使える
HSV の三角形はこの性質と非常に相性が良く、内部判定と色補間を同じ枠組みで簡潔に扱えます。
バリセントリック座標の計算方法
Delphi による計算方法は以下です。
function CalcBarycentric(
const P: TPointF; // 三角形の内部か検査する点
const A, B, C: TPointF; // 三角形の頂点
out U, V, W: Single): Boolean; // バリセントリック座標を受取る
begin
var Denom :=
(B.Y - C.Y) * (A.X - C.X) +
(C.X - B.X) * (A.Y - C.Y);
// 三角形が成立していない場合
if Denom = 0 then
begin
U := -1;
V := -1;
W := -1;
Exit(False);
end;
// バリセントリック計算
U := ((B.Y - C.Y) * (P.X - C.X) + (C.X - B.X) * (P.Y - C.Y)) / Denom;
V := ((C.Y - A.Y) * (P.X - C.X) + (A.X - C.X) * (P.Y - C.Y)) / Denom;
W := 1 - U - V;
// 三角形内部なら True
Result := (U >= 0) and (V >= 0) and (W >= 0);
end;
HSV 三角形への適用
HSV ピッカーでは
A：彩度 0 / 明度 100
B：彩度 100 / 明度 100
C：彩度 0 / 明度 0
のように 3 点を決めます。
内部を U・V・W の重みで混ぜることで、自然なグラデーションが形成されます。
上記バリセントリック計算で得られた U, V, W を使って次のようにある点 P の色を表現できます。
Color := ColorA * U + ColorB * V + ColorC * W;
SmartCore AI Components Pack
今回 AI を組み込むにあたって SmartCore AI Components Pack というコンポーネントを使いました。
エンバカデロ・テクノロジーズ謹製のコンポーネントで GetIt から取得できます。
SmartCore AI Components Pack は、AI のソース（ChatGPT や Gemini）を抽象化して、繋がっている先がどの AI なのかを気にせず、リクエストを投げて返答を得られる仕組みです。
接続する AI 毎に実装を変えたりする必要がありません。
本来は Delphi 13 用なのですが今回は Delphi 12.3 で利用しています。
Delphi 13 で落としたファイル群を Delphi 12.3 のパスが通るところに置いておけば問題無く使えます。
なお、なぜ Delphi 13 で作らず、Delphi 12.3 だったかというと、まだ Delphi 13 の Community Edition が出ていないためです。
Community Edition でもビルドできるように、あえて Delphi 12.3 を使いました。
SmartCore AI Components Pack について詳しくは Developer TV の SmcartCore AI Components 紹介回をどうぞ。
Developer TV は毎月最終週の火曜日に生放送されているエンバカデロ・テクノロジーズさんの番組です。
Delphi といった開発ツール、データベース製品などの情報を提供しています。
コミュニティ
Developer TV 紹介ついでに、Delphi のコミュニティ紹介です。
Delphi Discord Server が開設されています。
質問や最新の情報なんかが飛び交っているので、是非お気軽にご参加ください！
Delphi Discord Server 紹介ページ
※招待リンクではありません。招待リンクは遷移先ページに記載されています。
他のコミュニティはこちらから。
Delphi Community Edtion - 参考になるコミュニティ
ソース・バイナリ
リポジトリ
ソースは下記にアップされています。
https://github.com/freeonterminate/ColorSelectorAdvent2025
直下にある PK.Graphic.* が今回作成したカラーセレクタです。
ご興味があったらご覧ください。
Delphi 12 でビルド可能です。
恐らく無料の Community Edition でもビルド可能です。
せっかくだから無料の Delphi Community Edition をインストールして試してみるのもいいんじゃないですかね！？
OpenAI の API キーは APIKey.inc というテキストファイルに文字列形式（両端にシングルクオートを付ける）で書いてください。
※APIKey.inc ファイルはリポジトリには入っていないので、ファイルを作成してください。
'sk-honyarararara-01234567890123456789'
実行ファイル
Windows 用の実行ファイルは下記からダウンロードできます
https://github.com/freeonterminate/ColorSelectorAdvent2025/releases
おまけ（お絵かきアプリ遍歴）
僕は学生時代からお絵かきアプリを多数作っています。
AD&P
最初に作ったお絵かきアプリがこれ。
高校生の頃に作った SHARP PC-E500 用のフルスクリーン・グラフィックエディタ。
画像はポケコンジャーナル掲載時のページ！
なお、言語はアセンブリです。
echat
前世紀は、echat (お絵かきチャット@ラウンジ) というサービスをやっていました。
環境は Delphi、サーバ側は Java です（サーバは tyoshiza さん作）
検索したら↓こんな残骸が見つかりました…
デジタルカメラお絵かき工房
また、仕事で最初に作ったお絵かきアプリは PCPICO というハードウェア用のお絵かきアプリでした。
もちろん、Delphi 製。
echat2
他にも色々作りましたが、ほぼ完成していながらリリースされなかった echat2 というものが今回のカラーセレクタの原型です（趣味のプロダクトです）
こちらも当然 Delphi 製。
全く同じカラーセレクタが見えますね！！
描画機能だけでいうと大体 Photoshop 4 ぐらいの機能があり、さらにそれにお絵かきチャットの機能を載せよう！という壮大なプロジェクトでした。
シングル動作は問題無いのですが、チャットも半ばまで作ったものの当時はサーバを作るのが大変で世に出なかったのでした。
今だったら AI にサーバを作って貰えるのに！
今回のアプリはこのカラーセレクタを FireMonkey でリライトしたものです！
ということで、またいつか Delphi FireMonkey でお絵かきソフト作りたいなあ。
みなさんも、良いクソアプリライフを！
クソアプリ履歴
2024 ゲームパッドで起動するランチャー作った
2023 完全に間違えた消しゴムマジック！
2021 KusoGame
2020 Delphi で KUSO アプリを作った件
2019 クソアプリを作った件
追記
2025/12/09
FireMonkey がデフォルトで提供しているカラーセレクタ TColorPanel と、TColorPicker & TColorQuad を使って作る HLS セレクタを載せて合計６個のカラーセレクタを使えるようになりました。
