プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... ·...

15
WINDOWS プログラミング入門 VB| ©2013 丸山プログラミング塾 START プログラミングをはじめる前に学ぶ講座

Transcript of プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... ·...

Page 1: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

「WINDOWSプログラミング入門 VB」 | ©2013丸山プログラミング塾

START プログラミングをはじめる前に学ぶ講座

Page 2: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

2 2

目次

1 序章 ...................................................................................... 6

1.1 始めに ...................................................................................................... 6

1.2 特徴 .......................................................................................................... 6

1.3 準備作業 .................................................................................................. 6

1.4 教材 .......................................................................................................... 6

1.5 学習の手順 ............................................................................................... 7

2 ゲームの操作および機能...................................................... 8

2.1 ゲーム概要 ............................................................................................... 8

2.2 基本操作 .................................................................................................. 8

2.2.1 メニュー、ツールバー ...................................................................... 9

2.2.2 その他 ............................................................................................. 10

3 VISUAL STUDIO について .................................................. 11

3.1 はじめに ................................................................................................ 11

3.2 VS プロジェクト作成と環境設定 .......................................................... 11

3.2.1 ソースコードに行番号を表示する .................................................. 11

3.2.2 ソースコードの階層表示について .................................................. 12

アウトライン機能 ..................................................................................... 12

コードのグループ化 .................................................................................. 13

3.2.3 プロジェクトを作成する ................................................................. 14

3.2.4 本書で使用するウィンドウ ............................................................. 14

4 プログラミング演習 ...........................................................15

4.1 プロジェクトを作成する ....................................................................... 15

4.2 プロジェクトの確認 .............................................................................. 16

4.3 アイコンとビットマップの確認 ............................................................ 16

4.4 プロジェクトにアイコンを追加 ............................................................ 17

4.5 Form のファイル名を変更 .................................................................... 17

4.6 アセンブリのアイコンの登録 ................................................................ 19

4.7 保存とコンパイル .................................................................................. 21

4.8 FormMain のデザイン編集 ................................................................... 22

4.8.1 アイコンの変更 ............................................................................... 22

4.8.2 最大化、最小化ボタンを非表示に変更 ........................................... 22

4.8.3 Form タイトルとサイズの変更 ....................................................... 23

4.8.4 メニューコンポーネントの追加 ...................................................... 23

4.8.5 メニュー項目の編集 ........................................................................ 25

4.8.6 メニュー項目のショートカットキー設定 ....................................... 26

4.8.7 メニュー項目の名前の変更 ............................................................. 27

4.8.8 ツールバーの追加............................................................................ 28

4.8.9 ツールバーButton の名前変更 ........................................................ 29

Page 3: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

3 3

4.8.10 ツールバーButton の Image 変更 ............................................... 30

4.8.11 ステータスバーの追加 ................................................................. 32

4.8.12 ステータスバーのステータス項目追加 ....................................... 32

4.8.13 TableLayoutPanel の追加 ........................................................... 33

4.8.14 TableLayoutPanel1 の編集 ......................................................... 33

4.8.15 PictureBox の追加 ....................................................................... 38

4.8.16 Panel コンテナの追加 ................................................................. 40

4.8.17 Panel コンテナの編集 ................................................................. 41

4.8.18 無作為に配置したコントロールの調整 ....................................... 41

4.8.19 PictureBox の微調整 ................................................................... 45

4.8.20 TableLayoutPanel1 コンテナとの同期設定 ............................... 47

4.8.21 ステータスバー項目の名前変更(漏れ対応) ................................. 49

4.8.22 デザイン編集はこれで終了です .................................................. 49

4.9 イベントハンドラの作成 ....................................................................... 50

4.9.1 FormMain イベントハンドラの追加 .............................................. 50

4.9.2 メニュー イベントハンドラの追加 ................................................ 51

4.9.3 ツールバーボタン イベントハンドラの追加 .................................. 53

4.9.4 boardPanel イベントハンドラの追加 ............................................ 54

4.10 コーディングを始める前に ................................................................ 56

4.10.1 行番号の表示 ............................................................................... 56

4.10.2 フォームのデザイナ表示とコード表示 ....................................... 56

4.10.3 ファイルを閉じる ........................................................................ 57

4.10.4 開いているファイルの切り替え(選択) .................................... 57

4.11 情報ボックスの追加 ........................................................................... 58

4.12 Class フォルダの追加 ........................................................................ 60

4.13 Board と Cell のクラス追加 ............................................................... 61

XML Document の半自動生成機能 .......................................................... 63

4.14 Cell クラスのコーディング ................................................................ 64

4.15 Board クラスのコーディング............................................................. 65

4.16 FormMain.vb のコーディング ........................................................... 66

4.17 プログラムの実行とテスト ................................................................ 67

5 学習のためのヒント ...........................................................68

5.1 ソースコードデバッグ ........................................................................... 68

5.1.1 ソースコードデバッグ方法 ............................................................. 68

5.2 デバッグ情報の出力 .............................................................................. 69

5.3 実行時エラーで深く考える .................................................................... 69

6 プログラム構造と用語 .......................................................70

6.1 プログラム構造 ...................................................................................... 70

6.2 プログラムの起動 .................................................................................. 71

6.3 クラス(Class) .................................................................................... 71

6.4 オブジェクト(Object) ....................................................................... 72

6.5 フィールド(Field) .................................................................................. 72

6.6 プロパティ(Property) ............................................................................ 72

6.7 メソッド(Method) ................................................................................. 72

Page 4: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

4 4

6.8 イベントハンドラ (Event Handler) ..................................................... 72

6.9 ソリューション(Solution) ..................................................................... 73

7 ゲームプログラムの解説.................................................... 74

7.1 機能一覧と概要 ..................................................................................... 74

7.1.1 ボールの描画 ................................................................................... 74

7.1.2 マウス操作 ...................................................................................... 74

7.1.3 ボールの消し込み ........................................................................... 74

7.2 クラス関連図 ......................................................................................... 76

7.3 起動シーケンス ..................................................................................... 76

7.4 OnPain イベント ................................................................................... 77

7.5 MouseDown イベント ........................................................................... 77

8 最後に (次へのステップアップ) ................................... 78

8.1 Windows プログラミングの習得........................................................... 79

9 付録 .................................................................................... 80

9.1 VS 主要メニュー一覧 ............................................................................ 80

9.1.1 ファイル-新規作成 ........................................................................ 80

9.1.2 ファイル-開く ............................................................................... 80

9.1.3 ファイル-追加 ............................................................................... 80

9.1.4 編集-C#のコード表示時 ................................................................ 81

9.1.5 編集-VB のコード表示時 .............................................................. 81

9.1.6 編集-検索と置換............................................................................ 82

9.1.7 編集-詳細 ...................................................................................... 82

9.1.8 編集-ブックマーク ........................................................................ 83

9.1.9 編集-アウトライン ........................................................................ 83

9.1.10 IntelliSense-インターフェイスの実装 ...................................... 84

9.1.11 IntelliSense-using の整理(C#).................................................. 84

9.1.12 IntelliSense(VB) ..................................................................... 85

9.1.13 表示-検索結果 ............................................................................ 85

9.1.14 表示-その他のウィンドウ .......................................................... 86

9.1.15 表示-ツール バー ...................................................................... 86

9.1.16 プロジェクト................................................................................ 87

9.1.17 ビルド .......................................................................................... 87

9.1.18 デバッグ-ウィンドウ(編集時) ............................................... 88

9.1.19 デバッグ-ウィンドウ(実行時) ............................................... 88

9.1.20 デバッグ-ウォッチ(実行時)................................................... 88

9.1.21 デバッグ-メモリ(実行時) ...................................................... 88

9.1.22 デバッグ-ブレークポイントの作成 ........................................... 89

9.1.23 書式-整理(デザイン時) .......................................................... 89

9.1.24 書式-同じサイズに整える(デザイン時) ................................ 89

9.1.25 書式-左右の間隔(デザイン時) ............................................... 89

9.1.26 書式-上下の間隔(デザイン時) ............................................... 90

9.1.27 書式-フォーム中央に配置(デザイン時) ................................ 90

Page 5: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

5 5

9.1.28 書式-順序(デザイン時) .......................................................... 90

9.1.29 ウィンドウ ................................................................................... 91

9.1.30 ヘルプ .......................................................................................... 91

9.2 ソリューション エクスプローラ .......................................................... 92

9.2.1 ソリューション サブメニュー-追加............................................. 92

9.2.2 プロジェクト-サブメニュー-追加 .............................................. 92

Page 6: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

6 6

1 序章

1.1 始めに

プログラミングってどんなものなの?

そのためには「やってみる」のが一番です。でも、コンピュータ基礎、言語文法、プロ

グラミング技術などを学びながらでは時間がかかりすぎてしまいます。

本書は、出来上がったプログラムをベースに、どなたでもスムーズに体験して頂けるよ

う「プログラミングが初めてでもプログラムを完成させることができる」という内容、

構成になっています。「ちょっと試してみたい」という方にも最適です。画面デザイン

は図解入りになっていますので、迷うことはありません。

プログラミングの概念、理屈、用語など「わからないこと」を一切無視して「プログラ

ミング作業を体験」してください。

つまり、OJT(on-the-job training)方式です。実践することで、具体的なプログラミ

ング工程(作業)の流れが分かります。これらの作業を終了してから、後で理論や理屈

を学ぶと、体験したことと関連付けができるので理解が深まります。

使用するゲーム プログラムは、難しすぎず、簡単すぎずといった内容です。プログラ

ミングの作成、テスト、プログラム構造、アルゴリズムなどを楽しみながら(ゲームを

しながら)行えます。一通り体験したら、自分流にカスタマイズしてみてはいかがでし

ょうか。

1.2 特徴

短時間でプログラミングを体験

画面デザインを図解入りでわかりやすく解説

すべてのプログラミング作業を網羅(プログラム設計を除く)

「作ってみる→プログラム構造、アルゴリズムを知る」で理解度を高める

学習のためのヒント(デバッグで学ぶ、他)

ソースコード(ほぼ全行に対して)コメントが付いています

プログラム構造解説

ゲームプログラムのアルゴリズム解説

1.3 準備作業

「Visual Studio 2008 .NET」の対象言語がインストールされていて、いつでも実行でき

る状態にしてください(どの Edition でもかまいません)。無料版(Express Edition)

は Microsoft 社よりダウンロードできます。

1.4 教材

ダウンロード後、以下のファイルがそろっているかご確認ください。

Page 7: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

7 7

ドキュメント(本書)

ソースコード(PDF 版)

Cell.vb.pdf、Board.vb.pdf 、FormMain.vb.pdf

ゲームプログラム (JawBreaker.EXE)

動作の確認や自作との比較などに使用します

ソースコード(プロジェクト一式)

アイコンファイルはプロジェクトの中に入っています。

添付されているソースコードは保険と考えてください。

※不足している場合やご質問等がございましたらこちらまでご連絡ください。

1.5 学習の手順

1. ゲームを実行して、操作や機能を理解します

2. Visual Studio のインストールと環境設定を行います

3. プログラミング演習(ゲーム プログラムの製作)を行います

画面デザインとコーディング

4. プログラムのテストを行います

プログラミングが完了しても、それが正しいかどうかは動かしてみなければ分か

りません。ゲームで楽しみながらの動作テストを行います。

5. ステップアップ

プログラムの基礎構造を学び、ゲームプログラムのアルゴリズムを知り、ソース

コードデバッグでより深くプログラムの流れを理解します。

すべての作業や工程は本物です。これから始まる Programming World を体験してく

ださい。

手順に従って、画面デザインやコーディングを行っていきます。もし、画面デザインな

ど、途中で分からなくなったらやり直してみてください。繰り返すと理解も早くなりま

す。

プログラミングが完了したら、プログラムの意味を理解しながらカストマイズするのも

いいですね。

プログラムをより深く理解するためには、デバッグによるソースコードのステップ実行

が最適です。挑戦してみてください。ソースコードには、ほぼ全行に渡ってコメントが

記述されています。それを元にどのように作られているかを知るきっかけになります。

プログラミングを本格的にやってみたくなったら、言語仕様などの基本から学ぶことを

お勧めします。

ゲームで遊ぼ

Visual

Studio

プログラ

ミング演

ゲームでテスト ステップアップ

Page 8: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

8 8

2 ゲームの操作および機能

2.1 ゲーム概要

Jawbreaker はパズルゲームです。

「さめがめ」「まきがめ」の名前で有名なパズルゲームです。ルールは簡単で、上下に

隣接した同じ色のボールをクリックして消していき、すべてのボールを消す事が目的で

す。が、単純にボールを消していきクリアするのも楽しいのですが、一度に大量のボー

ルを消す事で高得点を狙うという楽しみもあります。

クリアを目標とするのか、ハイスコアに臨むのかはあなた次第です。

2.2 基本操作

ボールをクリックして、消し込むボールの数と得点を

確認します。

クリックしたボールの中央に、個数に応じた得点が表

示されます。同時に、消し込む対象ボールの背景色が

変わります。

これでよければ、選択されたいずれかのボールをクリ

ックします。

キャンセルする場合は、選択されていないボールをク

リックします。

得点の計算は、選択個数×(選択個数-1)ですので、7 個の場合 7×6 で 42 点となりま

す。

Page 9: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

9 9

得点は、最下部に現在までのトータルスコアと選択時の得点が表示されます。

左図のように、選択できるボールがなくなると「ゲームオーバ

ー」です。

同じゲームで再挑戦する場合は、メニューまたはボタンの「元

に戻す」で、はじめの画面にまでさかのぼることができます。

戻しすぎた場合は、メニューまたはボタンの「やり直し」で進

めることができます。

元に戻す、やり直しは、キーボードのショートカットにも対応

しています。一般的なアプリケーションと同様、元に戻すは、Ctrl + Z、やり直しは Ctrl

+ Y です。

「はい」ボタンをクリックすると、新規ゲームの

画面になります。それまでの、すべての操作は

リセットされます。

「いいえ」ボタンをクリックすると、最終の状態

のままで、次の操作を待ちます。

「元に戻す」で任意の操作まで戻って「やり直す」

ことができます。

2.2.1 メニュー、ツールバー

新規:新しいゲームの開始です。(ツールバーも同様)

終了:ゲームを終了します。

元に戻す:前の状態に戻します。(ツールバーも同様)

やり直し:「元に戻す」ひとつ前に進めます。(ルールバーも同様)

ツールバーは、左から「新規」「元に戻す」「やり直し」に対応します。

Page 10: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

10 10

Jawbreaker のバージョン情報:以下のダイアログボックスが表示されます。

2.2.2 その他

Form はフリーサイズに対応していてサイズを自由に変更することができます。

なお、以下のようなサイズの場合にゲームを行うと、座標計算に失敗し例外が発生する

場合があります。

本プログラムでは、すべての状況に対するテストは行われていません。また、本来なら

ば、例外を Catch して対策をしなければならないのですが、コードが複雑になってし

まうため、あえて記述していません。

Page 11: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

11 11

3 Visual Studio について

3.1 はじめに

Visual Studio(以下 VS と呼ぶ)の Edition はいくつか存在しています。また、VS 機

能のツールバーやウィンドウも選択が自由に行えます。

VS 画面の構成は、VS Edition、インストールされた複数の言語、VS の環境設定、使

用状況などによって表示される内容、レイアウトは様々です。

また、メニューは、選択されているウィンドウ、コード、デザインなどの状況、編集中

と実行中などでも変化します(正確な資料はありませんので、その都度メニューを確認

して覚えていくしかありません)。

本書では、VS のハードコピーで解説しています。目の前の Visual Studio と違ってい

ても気にしないでください。

3.2 VSプロジェクト作成と環境設定

3.2.1 ソースコードに行番号を表示する

VS の初期値では、コードに行番号は表示されません。表示するためには、メニュー[ツ

ール]-[オプション]を選択して、オプションダイアログより言語毎に設定します。

左のツリー項目より[テキスト エディタ]を選択して、対象言語の[全般]をクリックしま

す。[表示]項目の行番号をチェックして OK ボタンをクリックします。

C#

Basic

Page 12: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

12 12

3.2.2 ソースコードの階層表示について

Visual Studio には、コード全体の見通しを良くするための機能として、アウトライン

とコードのグループ化があります。

アウトライン機能

コードを展開表示するためには、行番号の横にある[+]をクリックします。展開される

と[+]が[-]に変わります。

すべてのコードを表示する場合は、テキスト上で右ボタンをクリックして、サブメニュ

ーの「アウトラインの中止」選択します。

ツリー階層表示がなくなり、すべてのコードが表示されます。

Page 13: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

13 13

コードのグループ化

#region [コメント]

ソースコード

#endregion

は、コードのグループ化を行うためのものです。コンパイルは、無視します。

#region は入れ子にも対応しています。

#region [コメント]

#region [コメント]

ソースコード

#endregion

ソースコード

#endregion

Page 14: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

14 14

3.2.3 プロジェクトを作成する

「4.1 プロジェクトを作成する」を参照してください。

3.2.4 本書で使用するウィンドウ

以下は、本書で使用するウィンドウです。右図のメニューより以下のウィンドウを選択

していつでも使える状態に設定しておいてください。

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

エラー一覧

出力

プロパティ ウィンドウ

ツールボックス

ドキュメント アウトライン

メニュー構成は、現在の状況や Visual Studio の Edition によって微妙に異なります。

赤枠以外の項目違いは無視します。

Page 15: プログラミングをはじめる前に学ぶ講座moeprog.web.fc2.com/M_NET_SC/Manual/PayPal100/PayText100... · 2013. 6. 17. · プログラミングをはじめる前に学ぶ講座「windows

プログラミングをはじめる前に学ぶ講座「WINDOWS プログラミング入門 VB Ver. 1.1.2

©2013 丸山プログラミング塾

15 15

4 プログラミング演習

4.1 プロジェクトを作成する

VS2008 のメニュー[ファイル]-[新規作成]-[プロジェクト]を選択します。

「新しいプロジェクト」ダイアログボックスが表示されますので、これを使ってプロジ

ェクトを作成します。

1. プロジェクトの種類「Windows」を選択します

2. .NET Framework 2.0 になっていることを確認して、テンプレートは「Windows

フォーム アプリケーション」を選択します

3. プロジェクト名に「JawBreaker」を入力します

4. 場所は、プロジェクトを作成する任意のフォルダを選択または入力します

5. ソリューション名は、プロジェクト名と同名になっていることを確認します

6. ソリューションのディレクトリを作成は、チェックされていることを確認します

7. OK ボタンをクリックすると、プロジェクトが生成されます