HOME > 簡単なプログラムを作成しよう

05.簡単なプログラムを作成しよう


05.01 Hellowプロジェクトの作成

前回の復習も兼ねて「Hellow」というソリューション・プロジェクトを作成してみましょう。

 あれっ! これ日本語読みすると「ハロープロジェクト」どこかで聞いたような??


【注意事項】
最初に白状しときますが、プロジェクトを新規作成しフォームができると既にオブジェクト指向のプロトタイププログラムができていますし、そこに追加すると知らず知らずの間にオブジェクト指向プログラムができていますが、以降自力で作成する部分は2種類の作成の仕方があって、natureC形式とクラスを用いたオブジェクト指向形式のもので、その部分に関しては勉強不足で完全なオブジェクト指向でプログラムを作成することができないので、NatureC形式でできるところまで進んでいき勉強でき次第、「クラス」を用いたオブジェクト指向プログラムとしたいと思いますのでお願いいたします。

また、進行は.Net Frameworkを用いたvc++で作成しますが、先に説明したように一般的プログラム言語であれば少々変えるだけで互換がありますので、一緒にやろうと思われる方が見えましたら、どんなプログラム言語で作成されても構いません。

【参考文献】
日経BP社 アプリを作ろう!Visual C++入門
(入門編は同じ例題としました。 もっと詳しく知りたい方はこの本で!!)


ちゃんとできましたでしょうか?
ちなみにソリューション用ファイルは「Hellow.sln」というファイル名となりますので、これを開きます。
上記のソリューションとプロジェクト名が「Hellow」に変わった画面が出来上がったことと思います。

もしかしてMyForm.hのデザインをクリックするとこんな風になっていませんか?

一度作成に成功しても次開くと、こうなってしまう場合がよくあります(CS2017特有の問題)。そんな場合はもう一度

デザイン画面を閉じる」→「ビルド」→「ソリューションのビルド」→デザイン画面を開きます。
すると多くの場合正常に開きます。


05.02 フォームとツール

いよいよWindowsに表示するウィンドウ画面を作成するわけですが、大きく分類すると2つのことをしなければなりません。

1.ウィンドウ画面を作成する。

2.プログラムを書く。



★フォームデザイン
下記画面「MyForm.h[デザイン]」という画面が「フォームデザイナー」というフォームを作成するためのプロトタイプです。ここに画面部品(コントローラ)を追加していくことで「自動的に部品に対する機能が追加」※1 されます。

※1 部品に対する機能とは
微妙な言い回しですが、昔は四角い領域に文字列を入力する場合、「ボックスを位置決めして表示」「リターンの検出」「テキスト入力」など様々なプログラムを作成して機能完成となりますが、VisualStudio下においては、ツールボックス(道具箱)にあるテキストボックスというアイコンをフォーム内にドラッグするだけで完了となります。


従ってフォームデザインと仰々しい名前が付けれていますが、実は右側に表示されているツールボックス(道具箱)の中にあるツールをフォームの中にきちんと配置すれば、この処理は完成となります。


1)部品の貼り付け

ではデザインを下記のように変更してみましょう。

①テキストボックスの(TextBox)作成
 「ツールボックス」→「コモンコントロール」→「TextBox」をドラッグしてフォーム内の下記の位置に置きます。
 下記は完成品に文字「GGE」を表示した状態に黒太字の解説文を載せたものですので内部の字はない状態となります。

②ボタン(Button)を作成する
  「ツールボックス」→「コモンコントロール」→「TextBox」をドラッグしてフォーム内の下記の位置に置きます。
 同様に内部に書かれている「挨拶」は後に変更される内容のため、はじめは「button1」と表示されます。


2)テキストボックスを成型

上記のようにするためにはドラッグしてきたテキストボックスは下記のように小さめじゃないでしょうか?
そこで、テキストボックスを成型し上のような状態にします。
テキストボックスの上で「クリック」します。実はこの時ダブルクリック状態となると「選択」ではなく、別な現象を引き起こしますので、慎重にクリックして下記のように選択状態とします。

選択に成功すると、 このように両端に□印が表示された状態となり、これを「ハンドル」といいます。この時マウスをテキストボックスまで持ってくると□印の上あたりへ持ってくるとマウスアイコンが左右矢印状態「」となり、これは横伸縮が可能という状態を示します。ここではついていませんが、上下の□印がある場合は上下矢印状態「」が登場し上下伸縮が可能状態となります。また角へ移動すると前後左右矢印が登場します。 この状態は選択状態でテキストボックスの位置を変更できます。これらの選択状態の矢印処理はテキストボックスだけに対応したものではなく全てのコントロールに対し共通の処理です。



05.03 プロパティの変更

次にボタンコントロールの中に書いてある文字を「挨拶」に変更する作業をします。
最初画面右側にあったツールボックスと同じところに下記のような「プロパティ」というタブがあるか確認します。無い場合は、
表示」→「その他のウィンドウ」→「プロパティ ウィンドウ」で出しておきます。

前にも少し説明しましたが、テキストボックスやボタンは各々が部品で「部品内部で変えられる情報」や「発生する事態(イベント)」に備えて処理が用意されています。例えば情報の中には表示位置・サイズ・色等々複数存在します。これらの「部品内部で変えられる情報」=「設定情報」のことを「プロパティ」といい、その一覧がプロパティ ウィンドウというわけです。
裏ワザとしてプロパティ ウィンドウの一番下のタブ少々上のあたりへマウスを持ってくると、マウスの矢印アイコンが”-”アイコンに変わるところがあります。変わったときにドラッグした上に移動すると下記のように各プロパティの説明文が登場します。

話を戻して今回の作業は「button1」という表示を「挨拶」に変更するものでしたので、実際にプロパティを変更してみましょう。

1.ボタンをクリックして選択状態にします。
  テキストボックスの変更同様に□印が登場し選択状態になります。

2.右のボックスを「ツールボックス」から「プロパティ ウィンドウ」に変更します。
  隠れている場合もある為、「プロパティ」というタブをクリックすれば出てきます。

3.プロパティ ウィンドウの中の「表示」に「Text」がありますので、クリックして右端にある「▼」ボタンををクリックします。

4.現在「button1」と入力されているはずなので、これを「挨拶」と入力して「Ctrl」釦+「Enter」釦を押します。
  変更後画面をみると下のように変化しているはずです。


これでフォームデザインは完了となります。

 


05.04 コードの作成

「ソリューションエクスプローラ」→「MyForm.h」(ヘッダー)を右クリックし「コードの表示」を選択します。
すると下記のようなソースが登場します。実はこれがヘッダーファイルに書いてあるプログラムとなり、ここまでは自動的に出来上がり、プロパティを変更したことにより「InitializeComponent」の中に書かれている内容を変更します。


例えば釦の場合、ボタンを選択するとプロパティ→「デザイン」→「(Name)」に「button1」が表示されています。これがコントローラにつけられた名称となり、挨拶と変更したプロパティ「Text」は下記のように表記されています。
   this->button1->Text = L"挨拶"


今回行いたい処理の仕様は、ボタンをクリックするとテキストボックスに入力された文字列を引用して、メッセージボックスに
   XXXさん、こんにちは。
と表示するのが目的です。


1)まずはボタンをダブルクリック。



#pragma once

namespace Hellow {

  using namespace System;
  using namespace System::ComponentModel;
  using namespace System::Collections;
  using namespace System::Windows::Forms;
  using namespace System::Data;
  using namespace System::Drawing;

  /// 
  /// MyForm の概要
  /// 
  public ref class MyForm : public System::Windows::Forms::Form
  {
  public:
    MyForm(void)
    {
      InitializeComponent();
      //
      //TODO: ここにコンストラクター コードを追加します
      //
    }

  protected:
    /// 
    /// 使用中のリソースをすべてクリーンアップします。
    /// 
    ~MyForm()
    {
      if (components)
      {
        delete components;
      }
    }
  private: System::Windows::Forms::TextBox^ textBox1;
  protected:
  private: System::Windows::Forms::Button^ button1;

  protected:

  private:
    /// 
    /// 必要なデザイナー変数です。
    /// 
    System::ComponentModel::Container ^components;

#pragma region Windows Form Designer generated code
    /// 
    /// デザイナー サポートに必要なメソッドです。このメソッドの内容を
    /// コード エディターで変更しないでください。
    /// 
    void InitializeComponent(void)
    {
      this->textBox1 = (gcnew System::Windows::Forms::TextBox());
      this->button1 = (gcnew System::Windows::Forms::Button());
      this->SuspendLayout();
      //
      // textBox1
      //
      this->textBox1->Location = System::Drawing::Point(37, 12);
      this->textBox1->Name = L"textBox1";
      this->textBox1->Size = System::Drawing::Size(210, 19);
      this->textBox1->TabIndex = 0;
      //
      // button1
      //
      this->button1->Location = System::Drawing::Point(97, 69);
      this->button1->Name = L"button1";
      this->button1->Size = System::Drawing::Size(75, 23);
      this->button1->TabIndex = 1;
      this->button1->Text = L"挨拶";
      this->button1->UseVisualStyleBackColor = true;
      this->button1->Click += gcnew System::EventHandler(this, &MyForm::button1_Click);
      //
      // MyForm
      //
      this->AutoScaleDimensions = System::Drawing::SizeF(6, 12);
      this->AutoScaleMode = System::Windows::Forms::AutoScaleMode::Font;
      this->ClientSize = System::Drawing::Size(284, 261);
      this->Controls->Add(this->button1);
      this->Controls->Add(this->textBox1);
      this->Name = L"MyForm";
      this->Text = L"MyForm";
      this->ResumeLayout(false);
      this->PerformLayout();
    }
#pragma endregion
}




前にも書きましたが、コントローラをクリックすすると「選択状態」でした、ダブルクリックするとどうなるか?
ダブルクリックするとプログラムソースの一番下にbutton_Click()という関数名が自動的に追加されます。まずその部分を下記のように行を追加してプログラムを書き換えてください。



private: System::Void button1_Click(System::Object^  sender, System::EventArgs^  e) {
  MessageBox::Show(textBox1->Text + "さん、こんにちは");
}



一体何が行われたのかを少々解説すると、ボタンコントロールをダブルクリックすると、ボタンを「クリックしたという行動を起こした際に発生する事象(イベント)」が自動作成されます。つまりコントローラにボタン押下というイベントと新規に作成されたプログラムとの紐付けが自動的に行われたということになります。

そしてそこに追加した命令「MessageBox::Show」は、下完成品にある「④メッセージボックス」というウィンドウを「Show(表示)」しろという命令です。 その中にあるtextBox1->Textは、前述のボタンプロパティで説明したのと同じく「テキストボックスの中のテキスト」ということになります。 ちなみにテキストボックス内のテキストは「文字列」ですので、そのままで表示できます。
(ここら辺りが分からない方は、C言語入門「文字列・数値・数字」を参照ください)。


05.05 ビルド、デバッグする

一番最初に述べたように昔ならウィンドウズ上でプログラムを起動させるには、ソースファイルを機械語に翻訳(コンパイル)させて、必要なライブラリ等を寄せ集めリンクして実行ファイルを作成するのですが、VisualStudioなどの最近の開発環境のほとんどは、実行ファイルにするまでのすべての手続きを「ビルド」としょうして一連の作業として実行します。
(細かくは変更箇所のみコンパイルする「ビルド」、すべてをコンパイルするのが「リビルド」に分かれます)

エラーがあった場合はエラーダイアログボックスが表示されますので、メッセージに従って修正を行います。
但しほとんどがパッと見ではわからないような変な日本語のエラーメッセージなので、メッセージコードをネットで検索した方が分かりやすいというのが実感です。ここではプログラムやエラーメッセージに関しては飛ばします。

ビルドを行う前に知っておかないといけない事項があります。ちょっと下の画像を見てください。
MyForm.cppというタグのすぐ上に「Debug」「x86」「▶ローカルWindowsデバッガー」という表示が見られ、いずれも選択肢になっています。これを見ていくことにします。

★ Debug
横の▼印をクリックすると「Debug」「Release」という選択になっています。

「Debug」はデバッグモードを意味し、作成したプログラムソースに制御指令を入れることによってプログラムを途中で止めたり、変数の内容を表示したりすることができるようになります。

「Release」はリリースモードです。デバッグを行う必要がなくなったプログラムは途中で止めたり変数の内容を見たりする必要はなく、それ以上に容量が小さく、高速で動作することが期待されます。このため、プログラムとの関連性を削除し高速化のための最適化が行われたモードとなります。



★x86
パソコンがインテル系32ビットCPU搭載機の場合は「x86」を指定し、64ビットCPU搭載機の場合「x64」を使用します(x86)でも起動します。但しオープンソースなどを使用する場合、「x64」という指示がある場合があります。このような場合64ビットPCでしか動作しないということになりますので、「x86」を指定するとエラーとなるか、エラーがなくても動作しないので注意が必要です。


★▶ローカルWindowsデバッガー
一般的はビルド→デバッグ開始というのも面倒なので、このボタンをクリックします。
これをクリックするとすべてを一気に実行しエラーがなければ実行まで行いますので、使用すると便利です。



さあ! これで一通りVisual Studio2017 C++の説明を終了します。


それでは、「動くもの」作ることにしましょう。






HOME > 簡単なプログラムを作成しよう