【Delphi】何もしないアプリを作る【超初心者向け】

# はじめに

巷では **ノーコード** とか **ローコード** とやらが流行っているようですね。流石にノーコードとまではいきませんが、ローコードの範疇でアプリケーションを作ってみようと思います。

# 手順

では、早速やっていきましょう。アプリケーションを作るのに必要な Delphi は **『 12.1 Community Edition』** (無償版) で大丈夫です。

 - [Delphi Community Edition (Embarcadero)](https://www.embarcadero.com/jp/products/delphi/starter)
 - [EDN アカウントを作りたい (Support Wiki)](https://docwiki.embarcadero.com/Support/ja/EDN%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%9F%E3%81%84)

## 何もしないアプリを作る

１. <font color="ForestGreen">[ファイル | 新規作成 | Windows VCL アプリケーション]</font> でアプリケーションを新規作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/a4bcd4bd-6b50-f08c-4a0f-6ce6d4de0da7.png)

２. <font color="ForestGreen">[ファイル | すべて保存]</font> で一旦プロジェクトを保存します。適当な場所に保存用フォルダを作って下さい。ここでは `EBG` というサブフォルダを作って保存しています。

３. まずは今開いているユニットを保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/678576dd-4545-aa1c-d93b-729d564b9fa1.png)

ファイル名を `frmuMain.pas` に変更して保存します。これで、このユニット名は `frmuMain` になります。

４. 次にプロジェクトファイルを保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/3555ce62-4b45-fa99-9cf1-9071b1d3ac73.png)

ファイル名を `ebg.dproj` に変更して保存します。これで、このプロジェクト名は `ebg` になります。実行可能ファイルの名前も `ebg.exe` になります。

<font color="DodgerBlue">[プロジェクトマネージャ]</font> を確認してみるとこうなっているハズです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/a9abf544-8086-e9e9-309c-a42cd7848938.png)

５.一旦ビルドしてみます。<font color="ForestGreen">[プロジェクト | ebg をビルド]</font> を実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/a71d4a45-f12b-d9b1-d4b0-41507f1ba691.png)

何も書いていないので何のエラーも出ませんね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/f6b171e1-3faf-43ba-bac6-a21fe73dce10.png)

６.ファイルを確認してみます。<font color="DodgerBlue">\[プロジェクトマネージャ\]</font> の `ebg.exe` になっている所を右クリックすると <font color="ForestGreen">\[エクスプローラで表示\]</font> があるのでこれを選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/1181952a-5d3f-2c3c-1a38-21675264bbae.png)

ファイルができていますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/a38330a2-6de8-b7aa-0269-142e7a3c2038.png)

`Win32 > Debug` と辿ると、EXE ができています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/d229af92-9581-8c02-2fcc-c06a38ef6c6c.png)

７. `ebg.exe` をダブルクリックして実行してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/1ab17e1d-0f1b-422e-115a-55767be13e23.png)

これで、何もしないアプリができました。基本的なウインドウの動きはできますが、本当に何もできません。

## 続・何もしないアプリを作る

では次に、**何もしないけれども便利なアプリケーション** にしてみましょう。

１.フォームデザイナを開く

フォームデザイナとコードエディタは右下のタブ (コード / デザイン) で切り替えられます。ショートカットキーだと`〔F12〕`で切り替わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/52cb4c86-53fe-15f5-aafd-b039ef7a01aa.png)

２.<font color="DodgerBlue">\[オブジェクトインスペクタ\]</font> でフォームのプロパティを変更します。コントロールが何も貼り付けられていないので、フォーム (`Form1`) が選択がされていると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/76d02454-4f0d-a036-d8a5-f7e9c334c11a.png)

プロパティを次のように書き替えます。

| プロパティ | 古い値 | 新しい値 |
|:---|:---|:---|
| BorderStyle  | bsSizeable  | bsNone |
| Caption  | Form1 | (なし) |
| Color | clBtnFace | clWindow |
| Name | Form1 | frmMain |
| WindowState | wsNormal | wsMaximized |

3.<font color="ForestGreen">[実行 | 実行]</font> で実行すると画面が真っ白なウィンドウで覆われたと思います。終了は `〔Alt〕+〔F4〕` です。

これで便利なアプリケーションを一つ手に入れられましたね。

### ...？？？

Windows 11 のアプリケーションのボーダーは半透明です。Windows Vista とかは **Aero Glass** で透けてましたよね？`〔Alt〕+〔PrintScreen〕` でアプリウィンドウだけのスクショを撮ろうとしても背景にある画像や別のウィンドウが透けていませんでしたか？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/8a6217d7-ebb7-84c7-e553-0a664ce8493e.png)

ほら、ボーダーに何か見えますね？でも、この `EBG.EXE` を実行してからだと何も映り込まないのです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/1d88e3a4-5874-5fab-7849-7cd0eba7b31c.png)

そして、この`EBG.EXE` を実行してからだと`〔Windows〕` キーでメニューを出したり`〔Alt〕+〔Tab〕`でアプリケーションを選択できますが...**デスクトップは見えない** のです。散らかりまくったデスクトップ (にあるショートカットアイコン) を他人に晒す危険性がないのです。

つまりは「EBG = **E**mpty **B**ack**g**round」という事でした (英語的に正しいかは知りません ^^;)。

## 続・続・何もしないアプリを作る

では、もう少しアプリケーションとしての体裁を整えていきましょう。

### アイコン

Delphi のデフォルトアイコンになっているので変更しましょう。<font color="ForestGreen">[プロジェクト | オプション]</font> で <font color="DodgerBlue">[プロジェクトオプション]</font> を開きます。

左側のツリーを `アプリケーション > アイコン` と辿り、`[ターゲット]` を `すべての構成 | すべてのプラットフォーム` に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/5b61e5d3-074f-a72b-3a8e-c39e437c6ca2.png)

次のような画面になったら、<font color="DodgerBlue">\[アートワークジェネレータ\]</font> ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/7ecca862-b8d4-1ab2-80a5-0a098bad8621.png)

<font color="DodgerBlue">\[アートワークジェネレータ\]</font> の初期画面はこうなっていると思うので、値を変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/ea89ace4-8b2c-3a2a-65dd-3889b3289bb3.png)

| 項目 | 古い値 | 新しい値 |
|:---|:---|:---|
| テキスト | Aa  | 　(全角SP) |
| 形状 | 楕円形 | 四角形 (角丸) |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/e43b0b2e-39d1-64d9-d818-f6a0c3edc5d7.png)

`[完了]` ボタンを押すとアイコンが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/69e258a8-2fc3-ec26-cb51-67fe8b8cdac2.png)

<font color="DodgerBlue">[プロジェクトオプション]</font> を `[保存]` ボタンを押して閉じます。<font color="ForestGreen">[プロジェクト | ebg をビルド]</font> を実行すると、アイコンが白い角丸に変わったはずです。

アイコンキャッシュの関係で元のアイコンが表示されているかもしれませんが、コンテキストメニュー (右クリックメニュー) でプロパティを表示してみると現在のアイコンが見れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/7e86bffb-878c-1f76-fd1c-a79f63d8e8e6.png)

### 終了

`〔Alt〕+〔F4〕` での終了は乱暴なので、ポップアップメニューから終了できるようにしましょう。

<font color="DodgerBlue">[ツールパレット]</font> から `TPopupMenu` を探してフォームデザイナに貼り付けてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/08ac46c9-01b4-513f-4c99-64bc5348bd48.png)

ドラッグで持って行ってもいいですし、ダブルクリックしてもいいです。ツールバーに <font color="DodgerBlue">[コンポーネントツールバー]</font> を表示させているのなら、そちらからでも OK です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/2e0c43bf-be66-d9ee-5783-f64b9f483e02.png)

フォームに貼り付けた `TPopupMenu` (`PopupMenu1`) をダブルクリックするとメニューエディタが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/2a3931b8-a3fd-5879-d60d-da99a5859579.png)

その状態で <font color="DodgerBlue">[オブジェクトインスペクタ]</font> を見ると、新規作成されたメニューアイテム (青くハイライトされている) が選択されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/eca51675-b4b8-6ed3-4758-be54e904fe70.png)

| プロパティ | 古い値 | 新しい値 |
|:---|:---|:---|
| Caption | (なし)  | &Exit |
| Name | Exit1  | miExit |

:::note
Caption に入れた文字列をベースに Name が自動で設定されます (例だと `Exit1`)。
:::

<font color="DodgerBlue">[オブジェクトインスペクタ]</font> の `[イベント]` タブに移り、`OnClick` の右側をダブルクリックして `OnClick` のイベントハンドラを作成します。これは名前の通り、このメニューアイテムがクリックされた時の処理です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/5137f0c8-f459-4a0e-ec9b-d9178da2a5f7.png)

自動で生成されたイベントハンドラ `TfrmMain.miExitClick()` にアプリケーションを終了するコードを書きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/42151ba5-88fe-9f21-8d3d-2c83e9cb0616.png)

```pascal
procedure TfrmMain.miExitClick(Sender: TObject);
begin
  Close;
end;
```

VCL フォームアプリケーションはメインフォーム (この場合、`frmMain`) が閉じられるとアプリケーションが終了するのでこのような処理になります。

<font color="DodgerBlue">[オブジェクトインスペクタ]</font> でフォーム (`frmMain`) の `[プロパティ]`
タブを選択し、 `PopupMenu` プロパティで `PopupMenu1` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/d7fbf78c-b5da-d129-21ad-0e05ec33adc5.png)

<font color="ForestGreen">[実行 | 実行]</font> で `ebg.exe` を実行すると、また真っ白なフォームで覆われますが、任意の場所を右クリックするとポップアップメニューが出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/1dbfbb30-90e9-811c-1da4-02e9506ea7e8.png)

この `Exit` をクリックすると `ebg.exe` が終了します。

:::note
`〔メニュー〕` キーを押して `E` を押しても終了させる事ができます。メニューアイテムのキャプションが `&Exit` となっていて、環境によっては　<INS>E</INS>xit のように `E` に下線が引かれていたと思いますが、これは **アクセラレーターキー** と呼ばれるもので、そのキーを押すとその項目が実行される事を意味しています。

メニューを表示させずに直接実行させたいのであれば、`ShortCut` プロパティにショートカットキー (キーコンビネーション) を登録します。

ショートカットキーが有効なのはウインドウがアクティブな時、つまり一度は `ebg.exe` をマウスクリックするなりしなくてはならないのと、`ebg.exe` がアクティブかどうかが判断しづらい時にショートカットキーを押して誤爆する可能性も考えてショートカットキーは設定してください。
:::

### 背景色変更

背景色変更機能も付けましょう。真っ白だと目が痛い事がありますからね。

フォームデザイナに `TColorDialog` を貼り付けます。探すのが面倒な時はツールパレットの右上のボックスに数文字入力すると絞り込めますよ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/6383322d-83f8-c521-bdc3-d629eea3a993.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/427206ff-d024-e6bf-cbea-03c10a841314.png)

フォームに貼り付けた `TPopupMenu` (`PopupMenu1`) をダブルクリックするしてメニューエディタが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/a1e7f2b0-a177-0e25-3cf3-148ebb6d7a97.png)

`Exit` をクリックしてハイライト状態にして`〔Insert〕` キーを 2 回押します (右クリックしてメニューアイテム操作メニューを出す事もできます)。これで 2 つ分の (空白の) メニューアイテムが作られました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/21878944-8084-1863-1588-c40312bf41b4.png)

上の空白 (空のメニューアイテム) をクリックしてプロパティを変更します。

| プロパティ | 古い値 | 新しい値 |
|:---|:---|:---|
| Caption | (なし)  | &Change Color... |
| Name | ChangeColor1  | miChangeColor |


<font color="DodgerBlue">[オブジェクトインスペクタ]</font> の `[イベント]` タブに移り、`OnClick` の右側をダブルクリックして `OnClick` のイベントハンドラを作成します。実はメニューデザイナの方をダブルクリックしても `OnClick` のイベントハンドラが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/8dffe892-171e-8c3d-2840-cec933eeb6f3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/a6d761e6-4725-b671-77ae-d96d49dfa501.png)

自動で生成されたイベントハンドラ `TfrmMain.miChangeColorClick()` に色を変更するコードを書きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/9b5d54f4-025f-8442-f8ad-d0f70845dd3a.png)

```pascal
procedure TfrmMain.miChangeColorClick(Sender: TObject);
begin
  if ColorDialog1.Execute then
    Color := ColorDialog1.Color;
end;
```

二番目のメニューアイテムを選択し、プロパティを変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/f3909f41-aa21-5899-b1a9-86bd3011d1ab.png)

| プロパティ | 古い値 | 新しい値 |
|:---|:---|:---|
| Caption | (なし)  | - |

ハイフンはセパレーターとして機能します。

<font color="ForestGreen">[実行 | 実行]</font> で `ebg.exe` を実行し、任意の場所を右クリックするとポップアップメニューが出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/ff27c7ca-842c-6632-d058-fd4b9d304c8a.png)

`Change Color...` をクリックすると色選択ダイアログが出てきます。

:::note
メニューアイテムの `...` は即実行される機能ではなく、次に何らかの画面がある事を意味します。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/217f0908-1754-a43f-e7ef-68663cf0a542.png)

色を選択して `[OK]` ボタンを押すと背景色が変更されます。気分に合わせて背景色を変えるのもいいかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21785/9bdda25f-f538-4a65-e5b7-60b751054af2.png)

## 続・続・続・何もしないアプリを作る

お好きにカスタマイズしてみてください。

 - 64 bit アプリもビルドしてみたり (チョー簡単)
 - 壁紙を表示できるようにしたり
 - 設定を保存できるようにしたり
 - 時計を表示できるようにしたり

## 全ソースコード

短いので載せておきます。

```pascal:ebg.dpr
program ebg;

uses
  Vcl.Forms,
  frmuMain in 'frmuMain.pas' {frmMain};

{$R *.res}

begin
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
  Application.CreateForm(TfrmMain, frmMain);
  Application.Run;
end.
```

```pascal:frmuMain.dfm
object frmMain: TfrmMain
  Left = 0
  Top = 0
  BorderStyle = bsNone
  ClientHeight = 480
  ClientWidth = 640
  Color = clWindow
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -12
  Font.Name = 'Segoe UI'
  Font.Style = []
  PopupMenu = PopupMenu1
  WindowState = wsMaximized
  TextHeight = 15
  object PopupMenu1: TPopupMenu
    Left = 308
    Top = 228
    object miChangeColor: TMenuItem
      Caption = '&Change Color...'
      OnClick = miChangeColorClick
    end
    object N1: TMenuItem
      Caption = '-'
    end
    object miExit: TMenuItem
      Caption = '&Exit'
      OnClick = miExitClick
    end
  end
  object ColorDialog1: TColorDialog
    Left = 384
    Top = 228
  end
end
```

```pascal:frmuMain.pas
unit frmuMain;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.Menus;

type
  TfrmMain = class(TForm)
    ColorDialog1: TColorDialog;
    PopupMenu1: TPopupMenu;
    miChangeColor: TMenuItem;
    miExit: TMenuItem;
    N1: TMenuItem;
    procedure miExitClick(Sender: TObject);
    procedure miChangeColorClick(Sender: TObject);
  private
    { Private 宣言 }
  public
    { Public 宣言 }
  end;

var
  frmMain: TfrmMain;

implementation

{$R *.dfm}

procedure TfrmMain.miExitClick(Sender: TObject);
begin
  Close;
end;

procedure TfrmMain.miChangeColorClick(Sender: TObject);
begin
  if ColorDialog1.Execute then
    Color := ColorDialog1.Color;
end;

end.
```

:::note
アイコンの生成は別途行う必要があります。
:::


# おわりに

結局、自分で書いたコードは 3 行でしたね (^^;A

念のために断っておくと、Windows ではデスクトップの何もない所を右クリックして <font color="ForestGreen">[表示 | デスクトップアイコンの表示]</font> でデスクトップに散らばったファイルを非表示にする事ができますし、背景色も <font color="ForestGreen">[個人用設定]</font> で変更できます。

しかしながら、この `ebg.exe` をタスクバーに固定しておいた方が圧倒的に便利なんですよね。何回もクリックしなくていいので。