2019年04月05日

パソレクのなく頃に・礼:1話

文 裏編/絵 伊地山基之 氏
※この記事は、裏編が習ったりしていた内容をもとに記述されています。
 現在の内容とは若干違っている部分があることをご了承くださいませ(平伏

paso1904-p01.jpg

paso1904-p02.jpg
=-=-=-=-=-=-=-=-=-=-

※次の更新は、4月8日、『ActiveBasicとDXライブラリでゲームプログラミング!』の予定です。お楽しみに!
posted by 裏編 at 10:00| パソレクのなく頃に・礼 | 更新情報をチェックする

2019年04月01日

VB.NETをはじめてみやう!

dentaku_sis.jpg
師匠T:うむ! 師匠Tである!

ideshia.gif
妹弟子A:妹弟子Aです。 よろしくお願いしまーす! うしっ。

dentaku_sis.jpg
さてさて、今月はプログラミング初心者のために、VB.NETでのプログラミングの第一歩をレクチャーしておくとするぞ。
妹弟子よ。VB.NETの準備はできておるか?

ideshia.gif
うしっ。お師匠様っ。 起動させておきましたよっ。

dentaku_sis.jpg
うむっ。なお、今回は、最新バージョンであるVB Express 2017を使う。
ご了承してくれいっ。では、はじめていくぞっ!

ideshia.gif
うしっ。がんばりますっ!

~まずはここをクリックしよう

dentaku_sis.jpg
起動させると、下の画面が出てくるな。
では、まず下のほうの、『新しいプロジェクトの作成』をクリックするのじゃ。

toku1904-01.JPG

ideshia.gif
新しいプロジェクト、というタイトルのウィンドウが開きましたよ、お師匠様っ。

toku1904-02.JPG

dentaku_sis.jpg
それでは、左側のリストから『Visual Basic』を、そして右側のリストから『Windowsフォームアプリケーション(.Net Framework)』を選ぶのじゃ。

toku1904-03.JPG

ideshia.gif
はいっ。選びましたっ。

dentaku_sis.jpg
それでは続いて、『名前』の項目のテキストボックスに、作るプロジェクト(プログラム名のようなものと思うがよい)の名前を入力して、OKを押すのじゃ。名前は……今回は、hajimeteとでもしておこうか。

toku1904-04.JPG

ideshia.gif
ややっ! プログラミング画面らしき画面が出てきましたよ!

toku1904-05.JPG

dentaku_sis.jpg
うむ。ではいよいよ、ここからはじめてのプログラミングをしていくとするぞ!

~フォームのプロパティを設定しよう!

dentaku_sis.jpg
さてさて。プログラミングの最初のステップは、フォームのプロパティの設定じゃ。

ideshia.gif
うしっ。フォームっていうのは、ボタンやテキストボックスなどの部品をとりつけるウィンドウの外枠ですよね。

dentaku_sis.jpg
うむ。そのフォームは、左のほうにあるウィンドウのことじゃ。
それをクリックするのじゃ。

ideshia.gif
クリックしてみました。その次はどうするのですか?

dentaku_sis.jpg
うむ。そしたら次は、画面をよく見てみるがよい。プロパティと書かれたリストがあるはずじゃ。

ideshia.gif
あ。ありましたよ! VB.NETのウィンドウの右下にプロパティと書かれたリストが!

dentaku_sis.jpg
うむ。そしたらその中からTextという項目を見つけ出し、その項目にPicture Viewerと入力するのじゃ。

ideshia.gif
わかりました。えーと、Text、Text……。

dentaku_sis.jpg
見つからなかったら、スクロールバーを動かしてスクロールさせて、探してみるのじゃぞ。

ideshia.gif
あっ。ありました! えーと……Picture Viewer……と。
できましたよっ!

toku1904-05b.JPG
▲ ありました!

toku1904-06.JPG
▲フォームの文字が変わった!

dentaku_sis.jpg
うむ。ではさらに、フォームの大きさも変更するとしようぞ。フォームの右下にあるハンドルをドラッグ&ドロップして、大きさを変更するのじゃ。
そのほかにも、Sizeプロパティを変更する手もあるぞ。変更の方法は、Textプロパティと同じじゃ。

toku1904-07.JPG
▲ ハンドル

toku1904-08.JPG
▲ この項目を変更するのだ

ideshia.gif
はい。 うしうし……と。 できましたっ。

dentaku_sis.jpg
うむ。 次は、このフォームに、色々なコントロールを貼り付けていくぞ!

~フォームにコントロールを貼り付けよう!

dentaku_sis.jpg
さて。VB.NETでは、プログラムのウィンドウにある、ボタンやらテキストボックスやらの部品をコントロールという。このコントロールを、さっそくフォームに貼り付けてみるとしようぞ。
VB.NETのウィンドウの左側を見るのじゃ。ツールボックスというものがあるであろう? ない場合は、表示メニューから、ツールボックスを選ぶのじゃ。

toku1904-09.JPG
▲ これがツールボックスだ!

ideshia.gif
あ。ありました!ここから、必要なコントロールを選ぶわけですね!

dentaku_sis.jpg
うむ。まずは、その中の『コンテナー』を選び、その中からTableLayoutPanelを選ぶのじゃ。それをダブルクリックすれば、一発で貼り付けることができるぞ。

toku1904-10.JPG
▲ これをダブルクリックしよう

ideshia.gif
はい、できましたよ、お師匠様!

dentaku_sis.jpg
うむ、さすが我が弟子よ。そしたら今度は、DockプロパティをFillに設定するのじゃ。

ideshia.gif
はい。簡単簡単……って、あれ? これを変えるにはどうしたらいいんですか?

dentaku_sis.jpg
うむ。Dockプロパティの値をダブルクリックしていけば、順番に変わっていくぞ。

ideshia.gif
うしっ。できましたっ。

toku1904-11.JPG
▲ このDockプロパティを変えよう

dentaku_sis.jpg
うむ。では続いて、右上の黒三角のボタンをクリックし、開いた吹き出しの行および列の編集をクリックするのじゃ。

toku1904-12.JPG
▲ このボタンをクリックするのだ。

ideshia.gif
はい。なんか、こんなウインドウが出てきましたよ。

toku1904-13.JPG

dentaku_sis.jpg
うむ。そうしたら、まずはリストのColumn1を選択して反転させ、パーセントの項目に黒丸がついてることを確認し、そこの入力するところに15と入力し、同じようにColumn2のところも、85に設定するのじゃ。

ideshia.gif
うしっ。できましたよ。

toku1904-14.JPG
▲ このようにするのだ。

dentaku_sis.jpg
そしたら続いて、上の表示と書かれたリストを行に変更し、今と同じようにRow1を90、Row2を10に設定するのじゃ。
両方とも、パーセントに黒丸がついてるのを確認するのじゃぞ。

ideshia.gif
はい。
……
…………
できましたー

toku1904-15.JPG
▲ このようにしよう

toku1904-16.JPG
▲ 変更後のフォームはこうなる

dentaku_sis.jpg
うむ。では、次のステップじゃ。
TableLayoutPanelのときと同じように、ツールボックスから、PictureBoxを貼り付ける。

toku1904-17.JPG
これがPictureBoxだ。

dentaku_sis.jpg
今回は、PictureBoxをクリックして、先ほど貼り付けたTableLayoutPanelの右上の枠までドラッグ&ドロップするのだ。

toku1904-18.JPG
▲ ここにドラッグ&ドロップする

dentaku_sis.jpg
それが済んだら、今貼り付けたPictureBoxの右上の黒い三角をクリックする。そして……

ideshia.gif
はい。開いた吹き出し(?)の中の『親コンテナーにドッキングする』をクリックするんですよね?

dentaku_sis.jpg
う、うむ……。(物分りがよいのは助かるが、ここまでよすぎると、なんかさびしいのう)

ideshia.gif
? どうかしましたか、お師匠様?

dentaku_sis.jpg
……いや、なんでもない。では続いて、BorderStyleプロパティをFixed3Dに設定するのじゃ。BorderStyleプロパティは、右の黒い三角のボタンを押せば、リストが開いて、そこから選べるはずじゃ。

toku1904-19.JPG
▲ ここを設定する。

ideshia.gif
うしうし……できました。

dentaku_sis.jpg
うむ。ではこの調子で、他のコントロールも貼り付け、プロパティを変えていくぞ。まずは、CheckBoxをドラッグ&ドロップで任意の位置に貼り付け、TextプロパティをStretchに設定するのじゃ。

ideshia.gif
うしうし……できました。

toku1904-20.JPG

dentaku_sis.jpg
では、続いて、FlowLayoutPanelを、ドラッグアンドドロップでTableLayoutPanelの右下の枠に貼り付け、DockプロパティをFillにするのじゃ。または、そのFlowLayoutPanelの右上の三角をクリックして、その吹き出しの『親コンテナーにドッキングする』をクリックしてもよいぞ。

ideshia.gif
うしうし……できましたよ。

dentaku_sis.jpg
そしたら、今度はボタンを貼り付けていく。今貼り付けたFlowLayoutPanelをクリックして、ハンドルがついておる状態にしてから、Buttonを4回ダブルクリックして、4つのボタンを貼り付けるのじゃ。

ideshia.gif
はい、できました。

dentaku_sis.jpg
それでは続いて、今貼り付けたボタンのTextプロパティを、次のように変更するのじゃ。
・Button1・・・見る
・Button2・・・クリアー
・Button3・・・背景色
・Button4・・・閉じる

ideshia.gif
はい、できました。

toku1904-21.JPG

dentaku_sis.jpg
うむ。それから、またFLowLayoutPanelをクリックし、FlowDirectionプロパティを、RightToLeftに設定するのじゃ。

ideshia.gif
うしっ。できましたよー

dentaku_sis.jpg
うむ。続いて、四つのボタンを、CTRLキーを押しながら選択し、AutoSizeのプロパティをTrueにするのじゃ。

ideshia.gif
うし。完了ですよ、お師匠様っ。

toku1904-22.JPG

dentaku_sis.jpg
うむ。 続いて、OpenFileDialogとColorDialogを貼り付ける。
TableLayoutPanelと同じように、ダブルクリックで貼り付けるがよい。

ideshia.gif
はい……あれ? フォームに貼り付けられてませんよ?

dentaku_sis.jpg
この二つは、必要なときだけ呼び出され、普段は見えない部品なので、フォームには表示されないのじゃ。下のほうを見てみるがよい。表示されてるはずじゃ。

ideshia.gif
あっ、ほんとだ。

toku1904-23.JPG
▲ あっ、ほんとだ。

dentaku_sis.jpg
さて、そしたら、OpenFileDialogのFilterプロパティを、
JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
に、Titleプロパティを
Select a picture file
に変更するのじゃ。

toku1904-24.JPG

toku1904-25.JPG
▲ この二つのプロパティを変更する

ideshia.gif
はい、できましたよー。

dentaku_sis.jpg
うむ。ではこれでフォームへの部品の貼り付けは完了じゃ!
続いては、いよいよコーディング(プログラムを書く作業)に行くぞ!

~最後はコーディング!

dentaku_sis.jpg
さぁ、いよいよコーディングに入っていくぞ。

ideshia.gif
はいっ。お師匠様っ。

dentaku_sis.jpg
おぉ、気合が入っておるのう。
では、『見る』ボタンが押されたときのプログラムを書くために、ボタンをダブルクリックするのじゃ。

ideshia.gif
はいっ!

toku1904-26.JPG
▲ コーディングの画面から開いた

ideshia.gif
こんなウィンドウが表示されました!

dentaku_sis.jpg
うむ。この画面で、プログラムを書いていくわけじゃ。
まずは、深く考えずに、次のコードを、Private Sub showButton_Click~と、End Subの間に書くがよい。

toku1904-c1.JPG

ideshia.gif
かたかたかた……うしっ。できましたよ。

dentaku_sis.jpg
うむ。では次に進むぞ。他のボタンやチェックボックスをクリックしたときの処理も書いていくのじゃ。

ideshia.gif
はいっ。

dentaku_sis.jpg
うむ。まず、『クリアー』のボタンをダブルクリックし、さっきと同じように、private Sub clearButton~と、End Subの間に次のコードを撃ちこむのじゃ。

toku1904-c2.JPG

ideshia.gif
うちこむの字が違いますが……かたかた……。
はい、できましたっ。

dentaku_sis.jpg
続いて、『背景色』のボタンをダブルクリックし、private Sub backgroundButton~、とEnd Subの間に、次のコードを打ち込むがよい。

toku1904-c3.JPG

dentaku_sis.jpg
そうそう、言い忘れておったが、' は、その行がコメントだという印じゃ。

ideshia.gif
かたかたかた……っと。
はい、できましたー

dentaku_sis.jpg
うむ。では最後に、先ほど配置したチェックボックスをダブルクリックし、Private Sub CheckBox1_CheckedChanged~と、End Subの間に次のコードを打ち込むのじゃ。

toku1904-c4.JPG

dentaku_sis.jpg
おっと忘れていた。終了ボタンもダブルクリックし、次のコードも書くのじゃ。
toku1904-c5.JPG

dentaku_sis.jpg
最終的に、次のようになっていればOKじゃ。

toku1904-27.JPG
toku1904-28.JPG

ideshia.gif
はい、OKですよ、お師匠様っ!

dentaku_sis.jpg
うむ、ではこれですべて完了じゃ!
いよいよ実行じゃぞ!

ideshia.gif
やったー! うしうしっ!!

~いよいよ実行だ!

dentaku_sis.jpg
では、さっそく実行させてみるとしようぞ。
この開始と書かれたボタンを押すのじゃ。

toku1904-29.JPG

ideshia.gif
押しました! やったー!
動いた、動きましたよ、お師匠様!
ちゃんと操作したら動きますよ!

toku1904-30.JPG
▲ 動いた!

dentaku_sis.jpg
うむ、見事じゃ! これでそなたもプログラミングの第一歩を踏み出したわけじゃ。
さぁ、ここからはプログラミングの大海が広がっておるぞ!

ideshia.gif
はい、ありがとうございます。 お師匠様!

dentaku_sis.jpg
うむうむ! ここまでレクチャーしてきたとおり、プログラミングは、そう難しいものではない。まずは、ここに説明してきたとおり、最初の一歩のプログラムを作ってみるがよい。
さすれば、プログラムを一歩一歩作っていくことの楽しさがわかるはずじゃ!

ideshia.gif
そして、面白いプログラムができたら、B-Magaへの投稿、待ってまーす。

=-=-=-=-=-=-=-=-=-=-
※次の更新は、4月4日、『パソレクのなく頃に・礼』の予定です。お楽しみに!

posted by 裏編 at 10:09| 特集 | 更新情報をチェックする