東京工芸大学 工学部  電子機械学科 2年 後期 

応用プログラミング 第1回
 2017.9.19 
藤木 文彦

http://fujiki.tv/t-kougei/ouyouprog/

fujiki.kougei@gmail.com  

 今週から ウインドウプログラミング (Visual C#)

今日の授業は、教室で、説明しながら一緒に進めていきます。

 説明を聞きながら一緒にやらないとわからなくなりますので、「後でまとめてやればいいや」などと思ってはいけません。

 一緒にやっているときにわからなくなったときには、その場で疑問を解決していきます。

 必ず、授業を聞きながら「自分で自習」の指示があるまでは、一緒に作業を進めてください。一歩一歩確認しながら進めます。

 きょうは、ウインドウを開いて、文字を入力し、その文字を表示する、という、ウインドウプログラムを作ってみます。
 動作は、

(1) 文字列を入力
(2) 入力決定ボタンを押す。
(3) 「入力文字」+「を勉強します」という文字を別画面に表示する。

というものです。

 皆さんのPCのアプリケーションの中に、

“Microsoft Visual C# 2013”

 があれば起動します。

(例題プログラムの表示が 2008 になっているものがありますが、若干画面の違いがあっても操作法は同じです。)

  1.Visual C# の起動  Project101 を作る



 起動法については、  次のページにあります。


VisualC#の起動法


 開始する「プロジェクト名」を
  
Project101
としてください。


表示されたウインドウで、プログラムを行いますが、

「プログラムをする」というより「部品を配置して 、その部品の働きを書く」という感じでプログラムを作っていきます。

ウインドウの配置などは、左右や大きさが異なっているかもしれませんが、気にしないでください。

 中央画面には上部に「 Form1.cs [ デザイン ] 」という表示が出ているはずです。(違っていたら切り替えてください。)

―>あるはずのウインドウが表示されていないときは、ウインドウ上部の「表示」メニューの中に、各種ツールボックスの名前があるはずですので、選択してみてください。

 表示が必要なのは、

「ソリューションエクスプローラ」

「ツールボックス」

です。


「ツールボックス」は折りたたまれていると思いますので左のタグをクリックして開き、その後、ウインドウ上部の「ピン」を「立てて」固定します。

 ツールボックスが表示されていないときは、右または左端にある、下記のようなタグを開く。

 あるいは、「表示」−>「ツールボックス」を

 もし、「ツールボックス」が、すぐに隠れてしまうようなら、右上の「ピン」をクリックして縦にしてください。

 横になっていると、自動的に脇に隠れます。

「ピンが縦になっているときが、画面に刺さって動かなくなっているときだ」と覚えるとよいでしょう、。



  2.プログラムの作成例 文字を入力し、別ウインドウに表示する



ここから実際のプログラムを作ります。

プログラムと言っても今までのように、テキストエディタで文字を入力するのではなく、ほとんどを画面上のツールの操作で行います。

まず、「ツールボックス」−>「コモンコントロール」を開き、

マウスを、「 TextBox 」の上に置きます。

 そのままマウスを「ドラッグ」して、右の“ Form1” ウインドウ上の適当な位置で離すと、小さな箱が現れます。

 画面上部の真ん中辺がよいでしょう。

 この箱に、今後、キーボードから文字を入れることができるようになります。

 ここで、よく見ると、右下に、新しく「プロパティ」というウインドウができていて、タイトルに、 ”textBox1” と表示されています。今後このウインドウを使って、いろいろな操作をしていくのですが、とりあえず、それは、後回しにします。

 次に、「コモンコントロール」−>「 Button 」をマウスで選び、ドラッグして、先ほどの小さなウインドウの上に置きます。

画面下部の真ん中辺がよいでしょう。

 よく見ると、先ほど右下に表れた「プロパティ」が 「 Button1 」になっています。このように、ここは、現在操作している場所に関しての情報が表示されるのです。

 ここで、この「プロパティ」を操作してみましょう。

 右下の「 Text 」ところに、文字列を入れることで、画面中のボタンに表示する文字を変えることができます。

 ここでは、「入力決定」と入力して、マウスを表示画面に移してクリックします。

文字表示が変わると思います。

(もしかすると、右のウインドウの文字表示はもとに戻るかもしれませんが、実際には、プログラムは表示ウインドウの文字に変化しています。)

 さて、ここから、ちょっとだけ、手作業でプログラムを修正します。

(1) 文字列を入力

(2) 入力決定ボタンを押す。

(3) 「入力文字」+「を勉強します」という文字を別画面に表示する。

というものでした。

 今のままだと、文字列入力と、決定ボタンとは、関係がありませんから、ここの関係づけをします。

「入力決定」ボタンをダブルクリックすると、突然、次のような、プログラムの画面が現れます。

(赤丸の部分は、もとは何も書いてありません)


 このプログラムの、赤丸の部分を、キーボードから入力してください。

 見にくいかもしれないので、自分で書くところだけ抜き出します。 (大文字小文字の違いと、ドット
"." を入れ忘れないように注意!)

// で始まる行は、説明コメントなので、入力の必要はありません。(入力してもかまいませんが。)

//次の行は、自動的に表示されているはず。自分で入力してはいけない。
private void button1_Click(object sender, EventArgs e)
{
//この下は自分で入力
MessageBox.Show(textBox1.Text + " を勉強します。");
//ここまで自分の入力

}

 なお、先頭が “//” (小文字)で始まる行は、「コメント行」であり、プログラムには何の影響も与えませんから、ここには、自分がわかりやすいようなコメントを入れておきます。

 ですから、ここの文は何を入れても構いませんし、何も入れなくても構いません。( 2 行にわたってはいけません。)

 本質的なプログラムは、真ん中の 1 行だけです。

 この行は、慎重に書いてください。特に、


 なお、文字を入力している途中で、


オートコンプリート機能 が働いて、入力を助けてくれるはずです。

 のように、最初の数文字を入力すると、候補になる単語を表示してくれますから(日本語モードでは出ませんから日本語モードを解除してください。)適切な語が表示されているときに、そこで、

Shift + Enter

 を押すと、入力ができます。

 これから先のプログラムでは、長い名前がたくさん出てきますから、このような機能は助かります。

  style="COLOR: red">文字入力のミスを減らすためにも、この機能を積極的に利用しましょう。 style="COLOR: red"



入力時の注意。


 上記入力部分の、

private void button1_Click(object sender, EventArgs e)

という行は、
[デザイン]
ウインドウの、ボタン(など)をダブルクリックしたときに、
自動的に表示される部分のものをそのまま使用してください。

自分でキーボードから入力しても、そのプログラムは、動作しません。



  3.プログラムの「ビルド」と実行

 正しく入力できたと思ったら、プログラムを実行してみます。

 実行前に、「ビルド」という作業(コンパイルのようなこと)を行いますが、面倒なことは、ひとまとめに実行することができます。

 ウインドウの上部真ん中辺に プレイボタンのようなボタンがありますので、これを押してみましょう。エラーが無ければしばらくして、実行されてウインドウが表示されます。



 ただし、プログラムミス(文字の間違いなども)があると、下の横長のウインドウにエラーメッセージが表示されて止まります。

 これは、  “textBox” と入力すべきところを、  “TextBox” と、 1 文字だけ大文字と間違えて入力してしまった場合です。

 このような場合には、 「実行しますか」 に対して 「いいえ」 を選び、文字を修正してから、再度、上の実行ボタンを押してみます。

 実行ウインドウが現れるまでに数秒から 10 秒くらい待たされるかもしれませんが、ちょっと待っていてください。(20〜30秒しても何も起こらなければ、再度入力確認の画面に戻っていると思うのでやり直してみてください。おかしくなったら先生を呼んでください。)

 上の例は、表示された画面の入力場所に「応用プログラミング」と入力して、「入力決定」ボタンを押したものです。

 結果が確認できたら、「OK」を押すと、画面が消えます。

プログラムを全部終了するときは、ウインドウの右上の「×」て終了します。

  4.プログラム(プロジェクト)の保存



 予定通り実行できたら、この結果を保存します。

「名前を付けてファイルを保存」

 を選び、

 Zドライブの、自分のホームの場所に、

  “Project101”

 というフォルダを作り、そこに、ファイル名、

 “ Project101.cs”

 という名前で保存します。

 実は、この”cs”という拡張子のファイルは、全体のプログラムの一部にすぎないのですが、他の部分は、ほとんどのプログラムで共通のものを使うことになっており、自分で書き加えた主要な部分が全部ここに入っていますので、これだけを保存し ておけば、あとで、書き直すことも容易ですから、とりあえずこれだけを保存します。

 本当は、全部を保存するのには「プロジェクトの保存」を指定しますが、それは、次に行います。

プロジェクトの保存終了

 すべてを終了するときは、

「すべてを保存」を選んでください。

 その時には、次のように、「プロジェクトの保存」
 というウインドウが出ますので、

 名前を “ Project101 ” として保存してください。

 すべてを終了するときは、

「すべてを保存」を選んでください。
 その時には、次のように、「プロジェクトの保存」
 というウインドウが出ますので、
名前を “ Project101”  として保存してください。



  5.プロジェクトの再開

C# >を起動したら、「ファイル」「プロジェクトを開く」で、保存したプロジェクトの場所を指定してプロジェクトを開きます。

 多分“>Project101“というフォルダができていると思いますので、そこで、

Project101.sln     (拡張子 sln エス、エル、エヌ)

指定します。

そうしてファイルを開いても次のように、すぐには、編集画面にならないときもあります。このときは、右側のウインドウにある、  “Project101.cs” という部分をクリックすると、先ほどの編集の時と同じように、作成中のウインドウが出ます。


 ファイルの整理


 前期の「基礎プログラミング」で作成したファイルで、ディスク容量が一杯になりつつあるかもしれません。また、プロジェクトが多数あって、新しいプロジェクトを見つけるのが難しくなっていると思います。

 演習の前に、Z: ドライブのファイルを整理(消去)しておきましょう。(ただし、今年は夏の間に、自動的にデータが消去されているかもしれません。)

 前期に作成したものを削除します。(何かの目的で、必要なら、自分のメモリの取っておくか、別フォルダを作成してコピーしてから消します。)

 実際の置き場所などは、教室で説明します。






【演習課題】



 【演習問題1】 


 授業の説明に従って、"Project101" を一緒に作成します。ここまで一緒にやってきたので、既にできていると思います。

 プロジェクト開始時に、

 プロジェクト名

 を入れてから起動することを忘れないでください。

 続いて、本日の解説で書かれていることを順を追って、実行していきます。

 解答の提出法


 演習を行うと、

Z:ドライブに、自動的に"Project101" フォルダが作成されているはずです。


 おそらく次のような場所です。

 個人フォルダー>ドキュメントー>VisualStudio2013−>Projects−>Project101


ここに、

 ”Project101.cs"

という名前でファイルが作られていると思います。
 メールツールを開き、メール作成状態にしなさい。メールの宛先は、
" fujiki.kougei@gmail.com " です。

 メールのタイトル(サブジェクト)は ” Project101 "

 また、メールの1、2行目に、学籍番号と、氏名を書いてください。

 ”Project101.cs” を添付して送りなさい。

 【演習問題2】 


 課題1を参照して、新しい、プログラムを作成します。

 新しいプロジェクトを作成します。
 プロジェクトの名前は途中で変更できませんから、課題1のプロジェクトを終了し、新しく

 ”Project102"

 を開始します。


 次のような画面を表示し、住所と名前を表示するプログラムを作成しなさい。




実行できたらメールを送ってください。

 メールのタイトル(サブジェクト)は 
” Project102 "

 メールの1、2行目に、学籍番号と、氏名を書いてください。

”Project102.cs” を添付して送りなさい。


 【演習問題3】 



Project103


 新しいウインドウを出さずに、文字を表示するには、

 Label

を選びます。

次のようにします。


 まず、設問表示のために文字列を表示します。
 新しいウインドウを出さずに、そのウインドウに文字を表示するには、[ デザイン ]ウインドウの画面に、ツールボックスから、"Label" を選んでドラッグして落とします。



 ここで、 Label のところに、
「こんにちは、私の名前は ●●●● です」

と入力してください。


実行できたらメールを送ってください。

 メールのタイトル(サブジェクト)は 
” Project103 "

 メールの1、2行目に、学籍番号と、氏名を書いてください。

”Project103.cs” を添付して送りなさい。



 【演習問題4】 


応用課題(難しければやらなくて良い)

Project104

上の問題2と3を組み合わせて、
 名前

 住所
を表示するプログラムを作りなさい。

名前、住所は、あらかじめプログラム中に書いておいても良いし、新しくウインドウから入力しても良い


ヒント:
this.label1.Text = ●●