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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

まず、MonthCalendar コントロールをクリックします。そして、プロパティ ウィンドウのプロパティ一覧から、 [ForeColor] を選択します。コンボ ボックスの下矢印ボタンをクリックし、好きな色を選択してみてください。次の画面は、[BackColor] を [Web] の「Black」に、[ForeColor] を [Web] タブの「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 章では、翔太君、美咲さんに健一さんも加わって、さらに新しいことに挑戦します！