前回の「幾何学パターン画像生成アプリ」では、最大6色までカラーパレットを登録して使えるようにしました。ところが、その“パレット作り”が地味に面倒。
「この色いいな」と思った瞬間に、サッと6色集めて、まとめてコピーできたら最高じゃないですか。
そこで今回は、画面上の色を拾って、そのまま6色ストックできる カラーピッカーアプリ をXcodeで自作することにしました。
そもそもカラーピッカーって何？
カラーピッカーは、PCやスマホの画面上から目的の「色」を取得して、カラーコード（HexやRGBなど）を確認・コピーできるツールです。
macOSには標準で Digital Color Meter（デジタルカラーメータ） というユーティリティが入っています。Hexなどのカラー値は、アプリ上でコピー操作もできますし、ショートカットでテキストとしてコピーすることもできます。
…ただ、基本は 1回で1色 なんですよね。
「幾何学パターン画像生成アプリ」は最大6色パレット。1色ずつ拾って、1色ずつコピーして、6回貼って…って。
これを6回やっていると、頭が空（カラー）になってきて、さすがに面倒になってきます。
今回作ったカラーピッカーの要件
狙いはシンプルです。「自分が欲しいところだけ、気持ちよく」。
- 画面上のピクセルカラーをマウスポインタ位置からリアルタイムで取得
- クリックで Hex（#RRGGBB） を登録
- 登録は 最大6個
- 登録したカラーは右クリックで削除
- ドラッグ＆ドロップで並び替え
- コピーボタンで 6個をカンマ連結してコピー（スペースなし）
例：1#6E2A97,#EBA2DA,#F8A36A,#87C570,#037349 - クリアボタンで全削除
- さらに表示として
- マウスポインタ周辺の拡大（×8、中心が分かる十字付き、ぼかさない）
- 現在の色面
- 現在のHex表示
そして重要ポイントがもう一つ。
macOSで画面のピクセルを読むには、環境によって 「画面収録（Screen Recording）」権限 が必要になります。これが無いと色が取れなかったりするので、未許可でもクラッシュせず、設定場所を案内するUIも必須にしました。
ChatGPTに“コーディングエージェント”として動いてもらう
今回の進め方は、前回と同じく、初心者なので、そっちでやってね。という感じでChat GPTに投げました。
- 自分は Swift / SwiftUI初心者
- 手でちょい直しすると壊しがち
- だから「差分」じゃなく ファイル丸ごと置き換えで進める
- ビルド → 実行 → Preview → テストまで、毎回ちゃんと回す
- 失敗したら「原因→修正→再ビルド→再テスト」をエージェント側で完結
この後下記のような要件定義が作られました。（長くなるので見出しだけ掲載します）
- アプリ仕様（最重要）
- 目的
- 要件まとめ
- 重要：権限と技術要件
- 画面構成（SwiftUI）
- 操作仕様
- 実装方針（壊れにくさ優先）
- 納品物
つまずいたのは、コードより「言葉」だった
最初のビルドでは「カラーがストックに登録できない」問題が出ました。
ここでCodexと何度も何度もやり取りしたんですが、なかなか直らない。
途中で、回答に違和感があって問いただしたら原因が判明。
こちらの「色が取れない」は、
- 自分の意味：色面には出ているけど、クリックしてもストックに入らない
- 相手の認識：そもそも色面に表示されない（色が取得できていない）
この齟齬が、ずっと修正を空回りさせていました。
認識が一致した瞬間、スッと直る。
結局いちばん大事なのは「何が起きていて、何が起きていないか」を言語化することなんだな、と痛感しました。
使ってみて見えた改善点（そして改良）動き始めると、今度は「使い心地」が…
- 6色満杯でクリックすると「最大6個です」ダイアログ
→ 何度も出ると邪魔なので、画面内メッセージに変更 - 登録したカラーを後から変更したい
→ 変更できないと修正が面倒なので、カラーパネルを表示・反映 - 6スロットの一部が隠れてスクロールが必要
→ “隠すUIが今っぽい”のは分かるけど、作業効率が落ちるので 全部見えるレイアウトに寄せる - クリックで色を拾うと、ブラウザ操作中にも誤登録される
→ Caps Lock＋クリック で取得、という“誤爆しにくい組み合わせ”を導入
「汎用ツール」だと丸くまとめるところを、今回は完全に自分仕様に振り切れたのが気持ちよかったです。
今後の改善アイデア
いまの時点でかなり満足していますが、次の展開も見えています。
- 6色のセットを「パレット」として保存・呼び出しできるようにする
- コピペではなく、アプリ間連携で自動的に受け渡す（将来的に）
アプリのDIYという実感
市販アプリは、当然ながら汎用的に作られています。便利だけど、機能が増えるほど重くなったり、UIが変わって使いにくくなったりもする。
「自分には不要な機能」や「そこだけ足りない」があっても、今までは工夫して付き合うしかありませんでした。
でもXcode 26.3の“エージェンティックな開発”が入ってきたことで、自分の手癖に合わせた道具を、自分で作れる感じが一気に現実になった。
今回のカラーピッカーはまさにそれで、RGB/HSB/CMYK全部対応とか、倍率を×2×4×8で選べるとか、登録数を増やすとか、ヘルプ整備とか……そういう“立派な汎用化”は一旦置いといていい。
必要なものだけ作って、使って、直して、また使う。
道具って、本来そういう距離感がいちばん気持ちいいのかもしれません。
コメント