(※冷静に読み返して支離滅裂だったので、大幅に再編集しました 2016.5.14※)


技術的な話というほどでもない話です。

子供にプログラミングを教えていて、序盤の方で壁にぶつかるんですよ。
ぶっちゃけ壁というレベルなのかどうかも怪しいですが。とにかくぶつかるのですよ。
私だけなのか、他の人もそうなのか知りませんが。普通に子供に教える経験のある人が「なんでそんな事で?」「そんなことも教えられないの?」「それくらい、サクッと説明できないと駄目だよね」って当たり前に呆れる、当たり前に駄目だしする、そういうところで壁にぶつかるんですよ。
その一つが「RGBでの色指定です」。
 

Bracketsで作業していれば楽チン

最初に、HTML/CSSを教えていた時に、色指定でつまずく人が続出したんですよ。
エディタはBracketsを使っています。タイピングが多少怪しくてもエディタ付属の補完機能があるし、そんなに難しい操作ではないと思ったんですよ。
色を指定する箇所で[ctrl]+[e]押下すると色指定ウインドウ出てくるし、色指定の属性入力するなりコロン(:)を入力し直すなりすると一覧出て来ます。
ショートカットが分からなくても、多少出鱈目混じりに直感的に操作していても、この画面に辿り着くだろうと思っていたんですよ。けれど、そうもいきません。さっき表示された補完機能が見えないとか、色指定していたのに色指定の操作をしていたことを忘れて「何か変な画面が出た」と言い出したり。同時多発で質問が飛んだりするわけですよ。

検索すれば一発…でもないが…

そもそも補完機能に頼らなくても、「色 16進数」となかんとか検索すれば、気の利いた一覧表が出てきます。
例えば、こんなの↓ですね。これを使えば良い話でしょう。

出典: http://www.colordic.org/
ところが「違う!これとこれの間くらいの色を選びたいんだ!」などと言い出す訳ですよ。
「そこ、キレ気味に言う必要ないだろ」とか「細けェな…」とか「モニタによって色の見え方が違ったりするんだけど、それ、大丈夫かな…」というのはさておき、今見ている画面上でもっと微妙な色を指定したいということのようです。画面上で多彩な色が表現されている訳ですから、指定したい気持ちは分かります。

それで現在、私が困っているのが「Processingでの色指定」でして。良い方法を知らなくて(後で知りました)、「とりあえず、みんなBracketsを知っているからBracketsで良いかな」と思ったんですよ。でも、任意の色を選択するためだけに「Bracketを立ち上げて」と言ってもなかなか理解してもらえないんですね。他に方法を知らないからどうしたやらです。

後日談:Processingでの色選択方法を教わりました

メニューバーの「ツール」→「色選択」で10進数・16進数両方取得出来るそうです。



こんな簡単にできる方法も知らないから「なんでそんなこともできないの?」って、彼方此方から言われちゃうんでしょうね。

一番手っ取り早いのは脳内でスライダーを呼び出して操作する

手っ取り早いのは、頭の中でRGB指定のスライダーをイメージして左右にスライドさせることでしょうか。色指定って、RGBの値を0から255(0xFF)まで個別に指定するだけじゃないてですか。スライダーの精度は個人差があるので一様には保障できかねますが、左に行けば暗くなって右側に行けば明るくなる仕組みさえ分かっていれば、少なくとも大雑把な指定はできます。そのあとの微調整は手動で出来ますよね。結果的には高精度で好みの色を再現できると思うんですよ。

…と説明したら、「そんなことできるの!?」と驚かれました。「えっ!そこ、驚くところだったんだ…」って、私が逆に驚きました。。
いや、私、就職しない理由の一つが「記憶力がなさすぎて共通言語(専門用語)を覚えられない」ことがありまして。単語が分からないから、会話が成立しないんですよ。しかも頭の回転が遅いから、分かりやすい単語を使ってくれているのに、それを理解出来なくて困らせちゃう訳ですよ。スライダーって、別に暗記しなくても良いじゃないですか。色名覚えるよりはずっと簡単だと思うんですが。あれっ、色名覚える方がずっと簡単?私そんなに覚えられないんだけど…おかしいな…。

Windowsのペイント、意外に頑張ってるぞ

BracketsやProcessingを使ってない時でも色指定が必要な時ってあると思うんですよ。
ちょっと良い例が思い浮かばないのですが、熱狂的なシンプルなテキスト信者の方や、是が非でもBracketsやオーサリングソフトを使いたくない、職場等の都合でアプリケーションをインストール出来ない場合があると思うんです。ありますよね(若干強制)。
そういう場合はWindowsのペイントを使うのはどうでしょうか。Macや他OSの人丸無視で難ですが。

16進数に拘らなければ「color: rgb(255,0,0);」などと10進数で指定できるので電卓の出番はありませんが、16進数にしたい場合は右下の「赤(R)」「緑(G)」「青(U)」の数値をメモっておいて「電卓」で16進数に変換するんです。

Webブラウザ搭載の開発者向けツールを使う

(※ツッコミを受けたので後から付け足しました)
Webブラウザの開発者ツールで色指定するという方法もあります。例えばChromeが分かりやすいでしょうか。

元のソースを直接いじることも・擬似的にいじることも(うっかり保存防止ができる)どちらも出来ます。

ただ、英単語を見るだけで拒絶反応を起こす人や、根本的にChromeを入れたくない人には困難かと思います。

参考

じゃあAdobe製品でも購入したらどうだ

他のやり方も考えられます。Photoshopなどについてる「カラー」ウインドウです。

画像から直接色を抽出できるので、同じ色を使いたい場合は確実な方法です。
すると今度は「あんなクッソ高い製品を金払って使うとかwww」などとのたまわれたりするわけですね。
おいおい、草生てるのはこっちだよ。

一応、Gimpもある

Photoshopの代わりと言っては難ですが、Gimpも同じような機能があります。

無料で使えますが、起動がPhotoshopの倍以上重い(私の体感)ので、待てない人には凄く厳しいかもです。スペックによっては、「10秒数えて待って」と言っても1秒以上待てない子が座っていられずに部屋中走り回ったり他の遊びに気を取られて騒ぎ出しても、まだ始まらないレベルだと思います…。

もっと簡単にチャチャッとパッと色指定する方法ないの?

う〜ん、やっぱり脳内のスライダーの精度を上げるのが早いと思います。

後日談:便利なもの教わりました

ブラウザ上で動くスライダーを教わりました。
16051311
出典: http://www.peko-step.com/tool/tfcolor.html
脳内でできなくても、ブラウザ経由で十分調べることが出来ます。

自分事だと幾らでも学ぶ方法が浮かぶけれど…

正直、Processingについては純粋な調査不足で、本当に恥ずかしい限りです。
それはそれとしても、自分事だと幾らでもやりようがあるんですよね。それで「なんで面倒臭いことをしているのか」と思ったときや、そのように指摘されて同じように感じたときに、新しいやり方を学ぶんですよね。例えば先の脳内でスライダーを再生する、とか。ただ、逆に、一旦楽に出来る方法を覚えてしまうと、他の方法をあまり積極的に学ぼうとしなくなったりしまして。そういう点が、他人に何かを教えるときの私自身の欠点になってしまっている、と思いました。
なにぶん、いつも「力技でもなんでもいいから、知っている知識で乗り切る」なので、効率の良い方法をちゃんと知らないのです。その点について、「なんでそんなことが教えられていないの?」と言われると、本当にグウの音もでず、です。難しい。でも、他の人は呼吸するかの如く当たり前に出来ていることのようで、相談しても「なんでそんなことが?」「そのくらい」の羅列で相手にすらしてもらえない。ううむ。

「とりあえず、独学でどうにかするしかないのだろうな」と思いつつ、「どうすればストンと明快に教えられるのかなぁ」と、延々と頭を抱える次第です。