【 C# 】 はじめてのプログラミング ” Hello World! ” ウィンドウAPP版

こちらの記事は 【 C# 】 はじめてのプログラミング ” Hello World! ” コンソールAPP版 の続きです。
前回はコンソールアプリケーション( ↓ こんなの)を実行するプログラムでしたが、
コンソールHello World
今回は同じ内容をウィンドウアプリケーションで実行するプログラムをご説明します。

完成形は ↓ こんなのとか
ウィンドウアプリケーション
こんなのも ↓ できます。
ウィンドウアプリケーション・ラベル

メッセージボックスに ”Hello World!” を表示させる

ウィンドウアプリケーション
まずはこの、窓の中に『 クリック! 』というボタンがあり、
ボタンをクリックしたら『 Hello World 』というメッセージボックスが出てくるものを作ってみましょう。

(1)Visual Studioを開く

まだVisual Studioの無料版をインストールしていない方は
【 C# 】 初心者による初心者のためのプログラミング用語の解説 のVisual Studioの項目をご覧ください。

(2)新しいプロジェクトを開く

◆上部のメニューバーの【 ファイル 】⇒【 新規作成 】⇒【 プロジェクト 】
◆スタートメニューの【 新しいプロジェクト 】をクリック
どちらでも新しいプロジェクトが開かれます。
プロジェクトを新規作成

(3)ウィンドウアプリケーション

ウィンドウアプリケーションを選択して、お好みでファイル名も付けておきましょう。
ウィンドウアプリケーション

(4)基本のフォーム

新しくウィンドウアプリケーションを作り始めたときには基本のフォームがぽつんと置かれています。
フォームの大きさを変えてみたり、
この枠組みの中に左側のツールから使いたい部品を選んで配置したり、
コードを削除したり書き足したりしてプログラムを作ります。
フォーム

(5)ボタンを配置する

ツールの中から【 Button 】を探してください。
ツールボックスはアルファベット順に並んでいるので最初のほうにあるはずです。

【 Button 】をクリックしたまま、右側のフォームの中に持っていってから離しましょう。
ボタンを配置
フォームの中にボタンが出来たら、大きさや配置をお好みで調整してください。
フォームの大きさを変えたい場合はフォームを、ボタンの場合はボタンを一度クリックして
隅っこにカーソルを合わせると縮小拡大の矢印が出てきます。
ボタン配置&フォーム縮小

(6)ボタンのプロパティからテキストを変更

ボタンを一度クリックして選択した状態のとき、
右側の欄にはボタンの『 プロパティ 』が表示されています。
これはボタンの位置や表示情報などのデータです。
ボタンのプロパティ
この『 Text button1 』がボタンに表示されている文字のことなので
『 button1 』の欄をクリックしてお好みの文字に変更してみましょう。
ボタンのテキスト変更

(7)メッセージボックスのコードを記述

ここまではVisual Studio任せのクリックだけで進みしたが、
ついにコードを記述するプログラミングらしい場面です。
といっても一行追加するだけなのですが(;・∀・)

まずボタンをダブルクリックしてください。
すると、ボタンの挙動に関しての記述を含む『 Form1.Designer.cs 』というコードファイルが表示されます。

コード
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace HelloWorld_WFAメッセージボックス
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void button1_Click(object sender, EventArgs e)
{
//
// ココにコードを記述します
//
}
}
}

追加するのは以下の一行です。
MessageBox.Show(“Hello world”);

追加した状態がこちら ↓
メッセージボックスの記述

(8)デバッグして動作確認

プログラムとしてちゃんと動作するか、テスト走行を行います。
Visual Studioではデバッグを選択するだけでデバッガー(デバッグ用ソフト)が動いて
自動的にビルドが必要ならビルドを行い、デバッグを行ってくれます。
デバッグ

(9)完成!

お疲れ様でした(ノ´∀`)ノ
完成

ボタンをクリックでメッセージボックスが表示されます。
メッセージボックスまで表示

ラベルで”Hello World!” を表示させる

上でメッセージボックスを呼び出す手順をご紹介しましたが、
単にウインドウの中に何かしらの文字を表示させるというだけならもっと簡単な方法があります。
ただ、プログラムにおいて、ボタンも何も無く文字だけ表示させるというのは珍しい、というか
ほぼ無い状況だと思うのであんまり実用的ではないのですが、
息抜きとVisual Studioの扱いに慣れるための練習がてら作ってみてください。

(1)Visual Studioを開く

(1)~(3)の手順は今までと同じです。
まだVisual Studioの無料版をインストールしていない方は
【 C# 】 初心者による初心者のためのプログラミング用語の解説 のVisual Studioの項目をご覧ください。

(2)新しいプロジェクトを開く

◆上部のメニューバーの【 ファイル 】⇒【 新規作成 】⇒【 プロジェクト 】
◆スタートメニューの【 新しいプロジェクト 】をクリック
どちらでも新しいプロジェクトが開かれます。
プロジェクトを新規作成

(3)ウィンドウアプリケーション

ウィンドウアプリケーションを選択して、お好みでファイル名も付けておきましょう。
ウィンドウアプリケーション

(4)ラベルを配置する

ツールの中から【 Label 】を探してください。
ツールボックスはアルファベット順に並んでいるので探しやすいかと思います。
【 Label 】をクリックしたまま、右側のフォームの中に持っていってから離しましょう。
ラベルツール選択

(6)ラベルのプロパティからテキストを変更

ラベルを一度クリックして選択した状態のとき、
右側の欄にはラベルの『 プロパティ 』が表示されています。
これはラベルの位置や表示情報などのデータです。
ラベルのプロパティ
この『 Text label1 』がボタンに表示されている文字のことなので
『 label1 』の欄をクリックしてお好みの文字に変更してみましょう。
ラベルのテキスト変更

(7)シンプルな状態で出来上がり

あっという間に完成です。
ラベル完成
しかしこれだけではあまりにもシンプルすぎるのでちょっと改造してみましょう。

(8)イメージ画像を表示する

ラベルのテキストと合わせて、ウインドウフォームの中に画像を表示させます。

・使用したい画像をあらかじめ準備して、プログラムフォルダ(今作っているプログラムと同じフォルダ)に入れておいてください。
 ※ちなみにホームページやプログラムを作る時、素材利用可、商用利用可などの
 許可を作者さんが明記している写真や絵画以外は借用してはいけません。
 イメージ画像の素材をお借りする時は、加工や配布についての規約をちゃんと読みましょう。
 特に後々プログラムを一般配布したり、友人にあげたりするのであれば
 使うのは自分で撮影した写真や、自分で描いた絵にしましょう。
・左のツールボックスから【 PictureBox 】を選択、フォームの中に持ってきます。
・プロパティの【 Image 】欄から画像を参照します。
ピクチャーボックス

・使用したい画像を選択したらインポート⇒OK でフォームに表示されます。
ピクチャーボックス02イメージ選択
あとは位置の調整などを行えばOKです。

(9)テキストのフォントを変更する

ついでにテキストのフォント(文字の形)やカラーもプロパティから変更してみましょう。
フォント変更

(10)フォーム名を変更する

ウインドウフォームの基本名称(窓の左上に表示される名称)は
『 Form1 』となっています。
これもお好みで変更してみてください。
フォーム名変更

(11)完成!

これで出来上がりです。
上部メニューの【 デバッグ 】⇒【 デバッグ開始 】をクリックするか、
キーボードの【 F5 】キーを押して動作確認してみましょう。
ラベル完成形

このラベルやピクチャを置くだけの作り方の場合には
ウインドウの開閉や移動が無いので簡単に作れたかと思います。
ウインドウの遷移や、こうして出来上がったプログラムを『 どのパソコンでも問題なく動く 』状態、
つまりセットアップした状態にする方法などはまた次回。
宜しければまたお付き合いくださいヾ(=・ω・=)

タイトルとURLをコピーしました