サンプルプログラムのダウンロード (Chap1_VB.msi, 224 KB)

※ また、サンプルプログラムは、あらかじめ Visual Basic 2005 Express Edition と同じパソコンにインストールしておいてください。
   設定方法は こちら

	Visual Basic 2005 Express Edition を立ち上げてみよう
	文字を入力できる場所を作ってみよう
	ボタンをつけてみよう
	カレンダーを用意してみよう
	背景の色を変えてみよう
	カレンダーの各パーツの色を変えてみよう
	カレンダーを年間表示にしてみよう

翔太くんと美咲さんは、おなじ高校に通っています。翔太くんが学校の宿題でわからないところがあるからと、美咲さんに教えてもらっているところです。翔太くんのノートパソコンを見ていると、見慣れないアイコンがあるのを見つけました。

美咲	：このアイコンはなに？
翔太	：この前いとこの健一さんが遊びに来たときに、そろそろプログラミングの勉強をしてみないかといって、プログラム言語のソフトと入門マニュアルをプレゼントしてくれたんだよ。それをインストールしたのはいいんだけど、健一さんが急な仕事で帰ってしまったから、結局何もしないでそのままになってしまってるんだ。
美咲	：プログラミングって、難しいんじゃない？
翔太	：僕もそう思うけど、健一さんが言うには、とにかく触ってみれば、だんだんわかるようになる、って。
美咲	：ふーん。ねえ、入門マニュアルがあるんだったら、それを見ながらちょっとやってみない？
翔太	：でも宿題が・・・
美咲	：それは後で教えてあげるから。とりあえず入門マニュアルを見ながら始めてみましょうよ。
翔太	：それじゃちょっとやってみようか。

翔太くんは、まず、入門マニュアルを開いてみました。するとCD-ROMが入っていて、この中のサンプルを見ながら操作する手順になっているようでした。

翔太	：それじゃ、Visual Basic 2005 Express Edition を立ち上げよう。

プログラムメニューから [Visual Basic 2005 Express Edition] をクリックすると、スタートページが開きます。

翔太	：誰だろう？　・・・・あ！　健一さんからだ。
健一	：翔太くん、プログラミングの勉強は進んでるかい？
翔太	：ちょうど今、入門マニュアルを見ながらはじめたところだよ。でもまだ最初のサンプルで [Form1.vb [デザイン]] という画面を開いたところなんだ。
健一	：そうか。フォーム デザインの最初のところみたいだね。はじめてなんだから、まずはいろんなコントロールをそのフォームに貼り付けてみるといいよ。
翔太	：フォーム デザイン？　コントロール？
健一	：ごめん、ごめん、いきなり専門用語を言ってもわからないよね。フォームというのは、プログラムの土台になるところだよ。君たちが今見ているのは、フォームのデザインを行う、デザイン画面というところなんだ。その上に、ボタンをつけたり、メッセージを表示する画面をつけたりすることで、プログラムの形を作っていくんだ。入門マニュアルにもやり方が出ていると思うから、まずはその指示通りにやってごらん。僕もこの後用事を済ませたらそっちに行くから、わからないことがあったらそのときに教えてあげるよ。
翔太	：ありがとう、健一さん。何とかがんばってみるよ。・・・さて、入門マニュアルは･･･あれ？　美咲ちゃん、もうそんなに読んでるの？

＜文字を入力できる場所を作ってみよう＞

翔太	：最初は、「文字を入力できる場所」を作るのか。プログラムで文字を入力っていうと、Wordみたいに文章を入力する画面みたいなものかな。
美咲	：インターネットのWebサイトで、アンケートや住所を入力したりするときに出てくる入力欄みたいなものかもしれないわよ。
翔太	：あれもプログラムなの？
美咲	：よくわからないけど、ああいう入力欄って、簡単に作れるわけじゃないでしょ？　なにはともあれ、まずは指示通りに進めてみましょうよ。
翔太	：そうだね。まず、ツールボックスを表示するのか。

ツールボックスは、画面の左端にある [ツールボックス] タブの上にマウスカーソルを合わせると表示されます。

翔太	：わ！　なんかいっぱい出てきた。さっき健一さんが言ってたコントロールというのはこのコモンコントロールのことかな？　・・・この中の [TextBox] を使うみたいだ。
美咲	：マウスを合わせると何か出てきたわ。
翔太	：簡単な紹介が表示されるようだ。「ユーザーがテキストを入力できるようにし、複数行の編集やパスワード文字のマスクを提供します。」か。なるほど、これで文字を入力できる場所を作るんだね。マスクってなんだろう？
美咲	：直接の意味は良く分からないけど・・・、パスワードを入力したり表示したりするときに関係する機能なんじゃない？
翔太	：パスワードの入力に関係する機能、っていうと・・・、そういえば入力した文字がそのまま表示されずに「*」で表示されたり、場合によっては画面に何も表示されないこともあるね。もしかしてそういう機能のことかな。
美咲	：そうかもしれないわね。それにしても、こうしてちゃんと説明を表示してくれるなんて、とても親切なのね。これも Visual Basic 2005 Express Edition の特徴なのかしら。
翔太	：とりあえず、クリックしてみようか。
美咲	：・・・何も起きないわね？
翔太	：変だな。クリックしただけじゃ駄目なのか。ほかのところはどうなんだろう。・・・・あれ？　マウスをフォームの上で動かすと、マウスポインタの形が違ってるみたいだぞ。

美咲	：ほんとだ。・・・あ！　そういえば、以前画像編集ソフトでポインタが変わるのを見たことがあるわ。あのときは、それを使って範囲を選択したんだけど、これももしかして同じかしら。
翔太	：なるほど。健一さんはフォームがプログラムの土台だって言ってたから、その上で範囲を選択してみようか。

ポインタが変わった状態のまま、フォームの上でマウスをドラッグします。

翔太	：何かがフォームの上に現れたぞ？

美咲	：これがTextBox なのかしら。ドラッグし終わった後はマウスポインタが元に戻るのね。
翔太	：ここをマウスでクリックしても何も起きないのか。クリックしたままドラッグすると場所を移動することはできるみたいだね。
美咲	：あら？　翔太くんが TextBox をクリックしたときと、フォームのほかのところをクリックしたときとで、画面右下の表示が変わるみたい。
翔太	：ほんとだ！　このプロパティって書いてあるところだね。そのすぐ下のところに、さっきはForm1と書いてあったのが、TextBox をクリックすることで名前がTextBox1 に変わってる。その下に表示される内容も変更されるみたいだ。このプロパティって、なにをするところなんだろう？
美咲	：入門マニュアルによると、ここで今貼り付けたTextBox っていうコモンコントロールの設定が変えられるらしいわ。
翔太	：プロパティっていうのは、設定をする場所、って意味なのかな。
美咲	：そうかもしれないわ。TextBoxの設定を変えてみましょうよ。

プロパティ ウィンドウの一覧リストの中にある、[Text] を選びます。この項目名の右側は文字を入力できるようになっているので、「Sample」と入力してみましょう。入力後はEnterキーを押します。

翔太	：フォームのTextBox に「Sample」と表示されたということは、プロパティの [Text] で設定された文字が反映されるんだね。でもなんだか面倒だなぁ。文字を入力するのに、その都度このプロパティで設定しないといけないなんて。もっと簡単に入力できると面白いのに。
美咲	：そういえば、実際のアプリケーションではプロパティを設定したりはしないわよね。なにか方法があるんじゃないかしら。
翔太	：そうか。それじゃ、入門マニュアルの先をもっと読めば出てくるかもしれないね。
美咲	：早く次に進みましょうよ。

＜ボタンをつけてみよう＞

翔太	：さっきいじってたのは、TextBox コントロールというものだったらしいよ。今度は Button コントロールだって。
美咲	：Button、ということは、何かのボタンなのかしら。
翔太	：どれどれ・・・。やり方は TextBox コントロールと同じだな。

[ツールボックス] タブをクリックし、[コモン コントロール] の [Button] を選択します。

翔太	：どうやら、[コモン コントロール] にある [Button] をクリックしたままドラッグアンドドロップでもボタンが作れるみたいだ。でもちょっと小さい感じがするな。

美咲	：ドラッグアンドドロップだとあらかじめ自動的に決まった大きさのボタンができるのね。TextBox コントロールのときのように、フォームの上でドラッグすると好きなサイズのボタンが作れるみたい。
翔太	：コントロールをフォームに置くのにもいろいろなやり方があるんだね。
美咲	：Button コントロールのプロパティもいろいろ変えられるみたいよ。
翔太	：そういえば、Windows だとアイコンを右クリックすると、プロパティを開いたり、名前を変えたりいろいろできるよね。コントロールだとどうなのかな。
美咲	：右クリックメニューにプロパティという項目があったわ。これを選ぶと、プロパティ ウィンドウが開いて選択される状態になるのね。
翔太	：よく見ると、プロパティ ウィンドウも、ほかの小さなウィンドウもそれぞれ閉じられるようになっているみたいだ。もし間違って閉じてしまっていても、この右クリックで呼び出せるというのは、覚えておくと便利そうだね。

翔太	：ところで、Button コントロールのプロパティで [Text] を変えるとどこが変わるんだろう。さっきの TextBox コントロールは、テキスト ボックスの中に文字が入力されたけど、ボタンには文字が入るところはないみたいだし・・・
美咲	：あら？　[Text] の項目にはすでに文字が入ってるわ。Button1？・・・これは、今表示されているボタンに書いてある文字と同じみたいね。
翔太	：それじゃここを TEST に変えてみようか。

プロパティ ウィンドウの [Text] の右にあるテキスト ボックスに「TEST」と入力してみましょう。フォームの Button コントロールに「TEST」と表示されます。

翔太	：ボタンの表示が TEST に変わった！　そうか、Button コントロールの、[Text] というプロパティはボタンに表示される文字のことを表しているんだね。
美咲	：なるほど・・・。普段私たちが何気なく見ている画面も、こうやってコントロールと Textプロパティが設定されているのね。画面を作るのには、いろいろな設定が必要なのがよくわかったわ。
翔太	：うん。でもよく考えたら、ここまでマウスで指定して、名前を入力しただけで、たいしたことは何もしてないよね。WordやExcelに文字や数値を書き込んで、書式を設定するのと大差ないんじゃないかな。
美咲	：言われてみればそれもそうね。
翔太	：最初に美咲ちゃんが言ってたように、簡単にプログラミングできそうな気になってきたよ。
美咲	：こうしてみると、思ってたよりもプログラミングは身近な存在なのかもしれないわ。
翔太	：この調子で何かプログラムが作れるようなったら面白そうだね。でもそんなに簡単に行くのかな？
美咲	：もっと入門マニュアルの先を見てみましょうよ。まだ始まったばかりなんだから。
翔太	：そうだね。

＜カレンダーを用意してみよう＞

翔太	：今度はカレンダー・・・？　ちょっと難しい感じがするね。
美咲	：・・・でも、またコントロールをフォームにつけるだけで済んじゃうみたいよ。
翔太	：ほんとにそれでいいのかな。どれどれ・・・

[ツールボックス] タブをクリックし、[コモン コントロール] にある [MonthCalendar] を選択し、フォームに貼り付けます。

翔太	：うわ！　これ、今月のカレンダーじゃないか。
美咲	：へぇー。ちゃんと今日の日付のところが色が変わって表示されてるわね。
翔太	：ただコントロールを貼り付けただけなのに、もう日付まで指定されてるんだ・・・。
美咲	：いくらコントロールを貼り付けるだけって言っても、TextBox コントロールや Button コントロールの [Text] プロパティみたいに、なにかを入力したり、指定したりしないといけないかと思ってたわ。
翔太	：うん。僕も、今度はいくらなんでも、何か作業が必要だろうと思ってたよ。なんだか、みんなが知らない世界に自分だけ進んでいくようで、先がまた楽しみになってきたな。このまま勉強していけば、自分でも何か新しく作ることができるかも知れないぞ。

＜背景の色を変えてみよう＞

翔太	：「背景の色を変える」、か。これも Wordや Excel で文字や背景の色を変えるのと同じ要領でできるのかな。
美咲	：まずは TextBox コントロールからね。

TextBox コントロールのプロパティ ウィンドウを表示します。そして、プロパティの一覧から、[BackColor] を選んでください。

翔太	：今は白い枠に Window って書いてあるところだね。ここをクリックすると・・・

コンボ ボックスが開いて、背景色に選択できる項目の一覧が表示されます。最初に [システム] が選択されていますが、この [システム] は作成したプログラムを実際に動かすことになるパソコン上で、Windows が設定管理している配色を使うための設定です。例えば、Window と書いてある項目は、エクスプローラなどの Windows 標準のウィンドウを開いたときの背景と同じ色を使う、という設定になります。ですから、Windows の配色の設定を変更していると、その設定にあわせてプログラムの色も変更されることになります。Windows の設定にかかわらず、あなたが設定した色を常に表示させたい場合は、[Web] や [カスタム] と書かれたところをクリックしてください。



それぞれ、表示された項目や色のマス目をクリックすることで、色を指定できます。フォーム上の TextBox コントロールの背景色を好きな色に変更してみてください。

同じように、Button コントロールや、MonthCalendar コントロールの背景色を変えてみましょう。次の画面は、[BackColor] をそれぞれ [Web] の「Red」に指定した場合の例です。

翔太	：なるほど、背景色はこうやって変えられるのか。
美咲	：よく見たら、MonthCalendar コントロールでプロパティの [BackColor] を選択すると、プロパティ ウィンドウの下に「月内の背景色」と表示されてるわ。ここを見れば、それぞれの項目の簡単な役割がわかる仕組みになってるようね。
翔太	：ほかのプロパティもクリックして説明を読んでみよう。

二人は、いろいろな項目をクリックして説明を見比べていましたが、そのうち、プロパティの項目そのものがコントロールによって違うことに気がつきました。

＜カレンダーの各パーツの色を変えてみよう＞

翔太	：こうしてみると、やっぱり MonthCalendar コントロールはかなり特別みたいだね。
美咲	：そうね。BackColor プロパティの説明も、ほかのコントロールでは、「コンポーネントの背景色」と書いてあるのに対して、MonthCalendar コントロールでは「月内の背景色」ってなってるし、ほかの二つのコントロールにないプロパティもたくさんあるわ。
翔太	：色関係だけでも、[BackColor] 以外に、[ForeColor]、[TitleBackColor]、[TitleForeColor] の3種類があるようだよ。それぞれ変えてみたらどうなるか試してみよう。

まず、MonthCalendar コントロールをクリックします。そして、プロパティ ウィンドウのプロパティ一覧から、 [ForeColor] を選択します。コンボ ボックスの下矢印ボタンをクリックし、好きな色を選択してみてください。次の画面は、[BackColor] を [カスタム] タブの「Black」に、[ForeColor] を [カスタム] タブの「White」にそれぞれ指定して場合の例です。





先ほどの [BackColor] はカレンダーの背景色が変わりましたが、今度はカレンダーの中の日付の部分の色が変わりました。続けて、[TitleBackColor] と [TitleForeColor] を変えてみましょう。

自由に変更してもらってかまいませんが、この例では、[TitleBackColor] を [カスタム] で「255,128,0」、[TitleForeColor] は「Yellow」にそれぞれ設定してみます。実際には [カスタム] で色の名前や数字を見ながら指定することはできません。オレンジ色や黄色といった実際の色のマス目を見ながら選ぶことができます。





このようにして、変更した結果、次のような色の組み合わせになりました。ちなみに、[TitleBackColor] はタイトル部分の背景色、[TitleForeColor] はタイトル部分のテキストの色を指定するプロパティです。

翔太	：ずいぶん、変わった色になっちゃったな。適当に変えてたらかえって見づらくなってしまったよ。
美咲	：そうね。途中で背景色を変更した瞬間に文字が見えなくなったことがあったじゃない。あれは背景色と文字の色を同じにしてしまったからのようね。気をつけないと全部同じ色になってしまうわよ。
翔太	：今はこうやって一つ一つ確認しながらできているけど、普通のアプリケーションで、こんな風に確認しながら色を変更するアプリケーションなんて見たことないな。あっという間に変更されちゃうから、色の組み合わせはあらかじめ決めておいた方が良さそうだ。それに、色の指定方法がシステム、Web、カスタムと3種類あるけど、これは、実際の利用状況によって使い分けないといけないからなのかもしれない。
美咲	：どうして？
翔太	：たとえば、Web って項目は、ホームページで使うためのものなんじゃないかな。それに指定の仕方も、[システム] と [Web] では違ってるだろう？
美咲	：たしかにそうね。設定方法が違うということは、使い道も違うのかもしれないわ。プロパティを変えるだけだからとても簡単にできるように見えるけど、いろいろ考えてみると奥が深いものなのね。
翔太	：そうだね。でもこんなに手軽にできるのなら、もっといろいろ試してみたいよ。
美咲	：今日のところはとりあえず、つぎのところまでやったら一休みしましょうか。

＜カレンダーを年間表示にしてみよう＞

翔太	：カレンダーを年間表示にする？　確かに今は月間表示だね。これを年間表示にするのは大変そうだな・・・
美咲	：大丈夫。入門マニュアルのこの章は、コントロールのプロパティだけで全部済んじゃうみたいだから、これもきっとそうよ。

まず、MonthCalendar コントロールをクリックしてください。そして、プロパティ ウィンドウのプロパティ一覧で、[CalendarDimensions] を選びます。





CalendarDimensions プロパティの右側にあるテキスト ボックスに現在表示されている「1, 1」を消して、「4, 3」と入力してください。次に、[MinimumSize] の右にあるテキスト ボックスに「556, 411」と入力してみましょう。このとき、フォーム上に正しくカレンダーが表示されない場合には、コントロールの位置を確認してください。上下左右のいずれかにずれているはずです。コントロールをクリックしたままカレンダー全体が表示される位置までドラッグすれば調整終了です。

美咲	：最後に、デバッグ ボタンを押してみよう、ですって。
翔太	：デバッグ ボタン？
美咲	：ツールバーにあるビデオの再生ボタンみたいなボタンがそうみたい。そのかわりに、[デバッグ] メニューの「デバッグの開始」を選ぶか、F5キーを押してもいいんですって。
翔太	：よし、押してみよう。

デバッグ ボタンをクリックします。すると、少し間をおいてから新しいウィンドウが開きました。

次の第 2 章では、翔太君、美咲さんに健一さんも加わって、さらに新しいことに挑戦します！