何某日和

「カメラ」のち「ハンダゴテ」ところにより「プログラミング」 ── そんな私“かめきち”のウェブサイト

2012.10.17：加法混色

概要

　GUIシリーズ第3弾の「加法混色」。今週を含めて3週間似たような内容を取り扱い、その次の週で総まとめを行います。 色の扱い方は様々ですが、そこに共通することは何か... その構造を見抜くことが、3週間後の目標となります。 冗長（いくつもの試作）から「抽象」や「構造」を垣間見ていただければと思います。 ちなみにテキストはこちら（http://www.cc.kyoto-su.ac.jp/~atsushi/Programs/ColorRGB/index-j.html）

準備

マシンメンテナンス

　本題に入る前に、まずは日課から。（日々のマシンメンテナンス）

今日の目標

　本日拵えるのは、次のようなGUIアプリケーションです。

完成したアプリケーション（背景色：赤） 完成したアプリケーション（背景色：緑） 完成したアプリケーション（背景色：青）

RGB（Red、Green、Blue：光の三原色）の強さをスライダーで調整することで、色を作り出すアプリケーションです。

準備プログラムの実行

　それでは、ワークスペースで以下のプログラムを実行して、準備を整えてください。 

| aCollection |
(aCollection := OrderedCollection new)
    add: #url: -> 'http://www.cc.kyoto-su.ac.jp/~atsushi/Programs/ColorRGB/ColorRGB.st';
    add: #comment: -> 'Copyright 2008-2011 KSU (Kyoto Sangyo University). All Right Reserved.';
    add: #bundle: -> #KSU;
    add: #package: -> 'KSU-Template';
    add: #nameSpace: -> #KSU;
    add: #category: -> 'KSU-Template';
    add: #class: -> #{KSU.ColorRGB};
    add: #protocol: -> #examples;
    add: #selector: -> #example1;
    add: #execute: -> [#{KSU.ColorRGB} value example1];
    yourself.
JunSystem
    perform: ((aCollection collect: [:each | each key]) inject: String new
            into: [:selector :key | selector , key]) asSymbol
    withArguments: (aCollection collect: [:each | each value]) asArray
準備完了

今回のGUI部品：Label, Input Field, Slider
  • GUI部品の設置（ラベル、フィールド、スライダー）
  • ちゃんと動きますか？

GUI部品の設置（ラベル、フィールド、スライダー）

　次の画像を参考にGUI部品を貼り付けてゆきましょう。

Palette Window

今回は、ラベル（Label）、フィールド（Input Field）、スライダー（Slider）を貼り付けることになります。前回と同様、グリッドを有効にしてからマウス操作で貼り付けましょう。

MainWindow redLabel greenLabel blueLabel redField Basics redField Details redField Color greenField Basics greenField Details greenField Color blueField Basics blueField Details blueField Color redGauge greenGauge blueGauge

インストールすればGUI部品の配置が完了します。

ちゃんと動きますか？

Do it 完成したウィンドウ

設定箇所が多かったと思いますが、入力値の間違いなどはありませんか？なければ実際に動かしてみて確認してみましょう。

コードリーディング
  • color
  • regGauge, greenGauge, blueGauge
  • updateColor, postOpenWith:
  • updateColorRed:, updateColorGreen:, updateColorBlue:
  • valueString:

color

　ColorValueクラスによって色を作り出します。注目すべきはRGBの数値を0から1までの間に調整しているところ。max:とmin:を理解しましょう。

regGauge, greenGauge, blueGauge

　先週と先々週に引き続き、今週もValueHolderです。初期値を与えた上で仕事も依頼していますね。そろそろこの構造を覚えられたでしょうか？

updateColor, postOpenWith:

　updateColorは背景色の変更を行なっているんだなぁ...という程度の認識で構いません。（欲を言えば、GUI部品は様々なものにラップされているのだな、と感じてもらえると良い感じ！） 大事なのは、postOpenWith:です。「ウィンドウが開いてすぐに実行される部分」と覚えておいてください。 プログラムを動かすときに変数の初期化などを行いますが、ウィンドウが開いた後でないと初期化できないようなものもあります。 その時に重宝するのがこのpostOpenWith:です。今回の場合は、ウィンドウの背景色を変更するように書かれています。

updateColorRed:, updateColorGreen:, updateColorBlue:

　テキストフィールドの値を変更してから背景色を変更するメッセージです。 注目すべきは次のフレーズ... 

InputState default altDown

これは、ユーザがaltキー（optionキー）を押下しているか否かをチェックしてくれるものです。 何気ないマウス操作に裏コマンドを用意したり... 工夫一つで面白いものが作れそうですね。 ちなみに「shiftDown」も「ctrlDown」などもあります。（InputStateクラスをbrowseしてみましょう。）

InputState keyboard

valueString:

　直上のupdateColor***:に登場したメッセージです。roundTo:メッセージで数値を丸めて、文字列の形で応答してくれます。 

Double pi

上で求まる円周率を小数点以下2桁に丸めてみましょう。 

Double pi roundTo: 0.01
小数点以下2桁の円周率

「数値の丸め方」は、今日のコードライティングで必要になりますので、覚えておいてください。

コードライティング

　今回も、未完成メソッドが一つもありませんでしたので、プログラミングしてませんよね。 仮にも「ペアプログラミング」。ライティングもしたいではありませんか。（ね？

そんなわけで、今日は「HTMLやCSSのカラーコード」を表示できるように拡張しましょう。ところで、「カラーコード」をご存知でしょうか。

カラーコード

　HTMLで次のようなフレーズがあった時... 

<span color="#FF0000">Smalltalk</span>
赤く燃えるSmalltalk！

この通り、赤色の文字列が現れます。この「#FF0000」の部分が「赤色」を指していて、カラーコードと呼びます。 シャープ記号の後ろに6桁ありますが、2桁ごとに区切ると、それぞれ赤・緑・青の強さを表す16進数の数値になっています。

#00FF80 （赤：00→0、緑：FF→255、青：80→128）

今日のアプリケーションはスライダーで色を変更することができましたが、その時の色をカラーコードに変換して、ダイアログやトランスクリプトに表示しよう、というものです。 さあ、拡張を始めましょう！

整数値を16進数にする

ヒントとして、16進数に変換する方法をご紹介しましょう。整数値に対してprintStringRadix:メッセージを送ることで、16進数文字列を得ることができます。 

255 printStringRadix: 16
Integer printStringRadix: 255 printStringRadix: 16

HTMLやCSSのカラーコードを表示できるようにする

　あとは必要事項と画像のみ掲載しておきます。自分なりに試行錯誤してみてください。 また、わからないことがあっても心配いりません。Smalltalkに訊けばよいのですから！ （答えとなるソースコードが、目の前に転がっていますよ！）

  • menuBarを編集して「カラーコード（ダイアログ）」を追加する。（Value:は「#showColorCodeOnDialog」）
  • 同じく「カラーコード（トランスクリプト）」を追加する。（Value:は「#showColorCodeOnTranscript」）
  • convertingに属するメッセージredColorCodeStringを作る。（「FF」とか「00」などと応答するメッセージ）
  • さらにgreenColorCodeStringとblueColorCodeStringを作る。（redColorCodeStringとほとんど同じ）
  • convertingに属するメッセージcolorCodeStringを作る。（「#00FF80」などと応答するメッセージ）
  • actionsに属するメッセージshowColorCodeOnDialogを作る。（カラーコードをダイアログに表示）
  • actionsに属するメッセージshowColorCodeOnTranscriptを作る。（カラーコードをトランスクリプトに表示）
メニューに「カラーコード」を追加する メニューに「カラーコード」を追加する 作成したメニュー redColorCodeString colorCodeString showColorCodeOnDialog showColorCoeOnTranscript ダイアログに表示する トランスクリプトに表示する

これを実装すれば、正規化された値（0.0から1.0までに写像された値）を自分好みに変化させる方法を知ることになりましょう。どうぞ、おきばりやしとくれやす！

さいごに

　GUIの部品操作にも慣れてきて、そろそろ飽きてきたやもしれませんが、いや、まだまだ飽きるべき時ではありません。 繰り返し何度も何度も「理解」と「行解」を行わねば、息をするようにプログラミングすることはままなりません。 次週と次々週は似たようなテーマになるため、さらに退屈に感じると思いますが、 その冗長（繰り返し）の先にある「構造」を見抜くまでは、手を抜かずに取り組んでください！

くれぐれも...

　今日のプログラミング内容をstファイルとして保存しておきましょう。来年になって自分の後輩を指南する際に、きっと役立つ教科書となることでしょう。 「釈迦に説法」だとは思いますが、ファイル名や保存ディレクトリは適切なものにしておかないと、せっかくの教科書も失せてしまいますよ...。