色見本

 

ここではパソコンで表示可能な色をさまざまと表示するアプリケーションを作成します。表示する色はユーザー(プログラムを使う人)が自由に選べるようにします。

 

1.ためしに作ってみる

 

ためしにかんたんな部分だけ作ってどういう風になるか見てみましょう。VBを起動したらいつものように「標準 EXE」を選択してください。そして、フォームに「垂直スクロールバー」を貼り付けてください。

「垂直スクロールバー」のアイコンがわからない方は下の画像で確認してください。

「垂直スクロールバー」なんか使ったことがないという方もいらっしゃるでしょうが「コマンドボタン」とそれほど変わりません。貼り付け方も一緒です。とりあえず好きなところに縦長(たてなが)にして貼り付けてください。

貼り付けたらその垂直スクロールバーをダブルクリックしてください。次のようなコードが表示されることと思います。

Private Sub VScroll1_Change()

End Sub

この部分に書いたコード(プログラム)は「スクロールバーの値を変えたとき」に実行されます。ためしに次のように書いてください。

Private Sub VScroll1_Change()

Me.BackColor = VScroll1.Value

End Sub

このプログラムは「フォームの背景色はスクロールバーの値にしなさい」という意味です。たとえばスクロールバーが10を指しているときにはフォームの背景色は10番の色になります。

では、さっそく実行してみてください。そしてスクロールバーをいろいろいじってみてください。上下にある矢印をクリックしたくらいでは色の変化が小さすぎてよくわからないので直接スクロールバーの「つまみ」をマウスでつかんでドラッグするといいでしょう。フォームの背景色が次々と変わるのがわかりますね。

 

2.調節

 

「ためし」で作ったプログラムは上手く動いたことと思います。案外簡単(かんたん)な物でしたね。次は今作ったプログラムをもっと快適なものに改造します。

まず、スクロールバーを改造する必要があります。スクロールバーの名前を vsRed にしてください。名前の変え方はわかりますか? 名前を変えるにはデザイン画面(フォームが表示されている画面)でスクロールバーをクリックしてプロパティウィンドウから (オブジェクト名) というプロパティを見つけてそこに表示されている VScroll1 という部分を vsRed にします。プロパティウィンドウなどがわからない方はこちらの画像を見てください。

さらにプロパティウィンドウでMaxプロパティの値を255にしてください。このプロパティはスクロールバーの最大値を表しています。(なお、最小値を表しているのはMinプロパティです)

そして、LargeChangeプロパティを10にしてください。このプロパティはスクロールバーの上下のボタンや「つまみ」以外の部分をクリックしたときにスクロールバーの値がどれほど変化するかを表しています。

プロパティの設定が終わったらスクロールバーをダブルクリックしてコード編集画面を表示してください。新しく次のようなコードが表示されているはずです。

Private Sub vsRed_Change()

End Sub

さっきうちこんだPrivate Sub VScroll1_Change()以下の部分も表示されていると思いますが「スクロールバーの名前を変えたのでこの部分は今となっては意味がありません」さっきの部分は削除(さくじょ 消すことです)して新しく次のように打ち込んでください。

Private Sub vsRed_Change()

Me.BackColor = RGB(vsRed.Value, 0, 0)

End Sub

賢明な読者の方はこのコードが何を意味しているかお分かりでしょう。今度はフォームの背景色をRGB関数を使って変化させようとしているのです。そしてスクロールバーの値はRGB関数の「赤」の部分を表すことになるわけです。

さぁプログラムが終わったら実行してみてください。今度はさっきとちがってなめらかに色が変化していくはずです。スクロールバーの下のボタンを押しつづけていると気持ちよく色が変わることでしょう。

どんなものか実感したところでもう一工夫します。スクロールバーの値を表示するようにしましょう。そのために表示用のラベルをフォームにひとつ貼り付けてください。ラベルのアイコンがわからない方は上の画像で確認してください。貼り付ける場所はあなたのセンスにお任せします。

ラベルを貼り付けたら名前(オブジェクト名)を lblRed に変更してください。

そして、先ほどのコードに次のように1行追加します。

Private Sub vsRed_Change()

Me.BackColor = RGB(vsRed.Value, 0, 0)

lblRed.Caption = vsRed.Value

End Sub

新たに追加した1行は「ラベルlblRedに表示する文字をスクロールバーvsRedの値にしなさい」という意味です。これでもう1度実行していただければどういうことだかわかります。

 

3.青と緑

 

赤についてはとりあえずこれでいいでしょう。後は「青」と「緑」について似たようなことをやります。垂直スクロールバーを新たに2本追加してください。名前は vsBlue と vsGreen にします。2本ともMaxプロパティを255に、LargeChangeプロパティを 10 にしてください。「赤」の時と同じです。

ついでにラベルも始めのうちに配置しておきましょう。ラベルを2つ貼り付けて名前を lblBlue と lblGreen にしてください。

そして、どちらでもいいのですがまず「青」から行きましょう。vsBlueをダブルクリックしてコード編集画面を表示します。そして次のように打ち込んでください。

Private Sub vsBlue_Change()

Me.BackColor = RGB(vsRed.Value, vsGreen.Value, vsBlue.Value)

lblBlue.Caption = vsBlue.Value

End Sub

「緑」についてもほとんど同じようにします。次のようにしてください。

Private Sub vsGreen_Change()

Me.BackColor = RGB(vsRed.Value, vsGreen.Value, vsBlue.Value)

lblGreen.Caption = vsGreen.Value

End Sub

そして、始めに打ち込んだ「赤」も次のように少し修正してください。

Private Sub vsRed_Change()

Me.BackColor = RGB(vsRed.Value, vsGreen.Value, vsBlue.Value)

lblRed.Caption = vsRed.Value

End Sub

以上でひとまず終了です。実行して色の変化を味わってみてください。

 

4.続き

 

これで機能はすべて完成しました。初級編第1回のわりにはちょっと難しかったかもしれません。でも、このアプリケーションをさらにかっこよくする工夫はいろいろありますから練習変わりにいじってみてください。

私のアイディアを書いておきますので参考にしてください。ただし、解説している内容よりも少しむずかしめです。

・フォームのBackColorプロパティを 黒い色 にする。

・フォームのCaptionプロパティを 「色見本」 にする。

・フォームのBorderStyleプロパティを 5 - 可変ツールウィンドウ にする。

・3つラベルのBackColorプロパティを 黒い色 にする。

・ラベル lblRed の ForeColorプロパティを 赤い色 にする。

・同様にlblGreen, lblBlueのForeColorプロパティを 緑の色、 青い色 にする。

・3つのラベルのAlignmentプロパティを 2 - 中央揃え にする。