差分

このページの2つのバージョン間の差分を表示します。

--- lazarus:helloworld [2025/06/28 17:00] – [初期状態のフォーム] Fix wrong close tag freemikan
+++ lazarus:helloworld [2025/06/29 18:13] (現在) – [ボタンのプロパティ] Set link to install page on Fcitx5 description freemikan
@@ 行 1: / 行 1: @@
-====== 最初のプログラム Hello World! ======
+====== 最初のプログラム Hello World ======
 [[lazarus:|{{:lazarus:lazarus_logo.png?150|Lazarus Logo}}]]
@@ 行 19: / 行 19: @@
 次の画像は実際に動作している完成品です。
-[{{:lazarus:lzarus_helloworld_1.png|Hello Worldプログラムの実行画面}}]
+[{{:lazarus:lazarus_ide_helloworld_1.png|Hello Worldプログラムの実行画面}}]
@@ 行 107: / 行 107: @@
 新規プロジェクトにはForm1という名前のフォームが一つ含まれています。
 もし他のウィンドウに隠れてしまっていたり、閉じてしまった場合、F12キーを押すことで最前面に表示できます。
+[{{:lazarus:lazarus_ide_form_editor_empty.png|初期状態のフォーム}}]
 このフォームは、マウスで部品を配置したりしたりすることができます。
-この編集可能なフォームのことをフォームエディタと呼ぶことにします。
+この編集可能なフォームのことを**フォームエディタ**と呼ぶことにします。
 フォームエディタによって手早く直感的なGUIのデザインが可能になっています。
@@ 行 172: / 行 174: @@
 ボタンを配置したいので、コンポーネントパレットでボタンのアイコンをクリックします。
-フォームの適当な位置をクリックして、そのままドラッグしながら適当なサイズにします。
+[{{:lazarus:lazarus_ide_component_palette_button_1.png|コンポーネントパレットのボタンコンポーネント}}]
+次にフォームエディタでの適当な位置をクリックして、そのままドラッグしながら適当なサイズにします。
+[{{:lazarus:lazarus_ide_form_editor_button_dragging_size.png|フォームエディタでボタンのサイズを調整中}}]
 マウスボタンを離してドラッグを終了すると、フォームにボタンが配置されます。
 ボタンのラベルは「Button1」となっています。
+[{{:lazarus:lazarus_ide_form_editor_button_placed.png|フォームエディタに配置されたボタン}}]
 ボタンを配置するとUnit1にも変化が見られます。
 <code pascal>
+unit Unit1;
 ...
 type
@@ 行 186: / 行 196: @@
   TForm1 = class(TForm)
-    Button1: TButton;            { これが追加された! }
+    Button1: TButton; { これが追加された! }
   private
@@ 行 209: / 行 219: @@
 ボタンのクリックのイベントはOnClickと名前が決められています。
 OnClickイベントに対して、ユーザーが自由に記述できるメソッドを結びつけることができれば目的を達成できます。
-イベントを処理するメソッドは**イベントハンドラー**と呼ばれます。
+イベントを処理するメソッドは**イベントハンドラ**と呼ばれます。
 ボタンのOnClickイベントにイベントハンドラを設定する最も簡単な方法は、フォームエディタでボタンをダブルクリックすることです。
@@ 行 271: / 行 281: @@
 ここまでやったところで、一度プロジェクトをビルドして実行しておくとよいでしょう。
+[{{:lazarus:lazarus_ide_helloworld_2.png|プログラムを実行してボタンをクリックしたところ}}]
 ==== ボタンのプロパティ ====
+あと残っている仕事は、ボタンのラベルを変更することです。
+日本語も使えることを確認するために、「こんにちは」というラベルに変更してみます。
+Lazarusの各コンポーネントのオブジェクトは**プロパティ**と呼ばれる様々な値を保持しています。
+ボタンの場合はラベルもプロパティによって保持されています。
+これまでラベルと呼んできましたが、プロパティの項目名はCaption(キャプション)です。
+現時点でボタンのラベルが「Button1」と表示されているのは、Captionプロパティに「Button1」と設定されているからです。
+プロパティを変更するのは、(通常は)画面の左側に表示されている**オブジェクトインスペクタ**から行います。
+オブジェクトインスペクタで目的のプロパティを見つけるには次のステップを踏みます。
+  - フォームエディタでボタンをクリックする。もしくはオブジェクトインスペクタの上部にあるコンポーネントでボタンを選択する。
+  - オブジェクトインスペクタのプロパティタブからCaptionという項目を探す。もしくはフィルタのところにCaptionと入力して検索する。
+次の図はCpationプロパティを変更したところです。
+[{{:lazarus:lazarus_ide_object_inspector_button_caption.png|オブジェクトインスペクタでCaptionプロパティを変更する}}]
+この時点でフォームエディタのボタンのラベルに反映されて「こんにちは」に変わっています。
+[{{:lazarus:lazarus_ide_form_editor_button_caption_changed.png|フォームエディタのボタンのラベルが「こんにちは」に変わったところ}}]
+<note>
+[[install#fcitx5を利用している場合の注意|インストール]]のところでLazarus IDEとFcitx5には相性問題があると書きました。
+少し奇妙な感じがしますが、ソースコードエディタ以外のところではおおよそ問題なく日本語の入力が可能です。
+しかし、絶対に大丈夫とは言い切れないところもあり、もしかしたら環境によってはここでも入力できない場合があるかもしれません。
+不幸にも入力できなかった場合は、別のテキストエディタなど入力したテキストをコピーして、Lazarus IDEの方にそれを貼り付けるなどの対策が考えられます。
+</note>
+=== ボタンの名前の変更 ===
+ここでもう一つ重要なプロパティを変更します。
+ほとんどのコンポーネントにはNameというプロパティがあります。
+このプロパティを変更すると、そのプロパティを識別する名前が変わります。
+どういうことかというと、先程「Button1」のCpationを「こんにちは」に変えました。
+ボタンの表示は「こんにちは」に変わりましたが、ボタンそのものの名前はまだ「Button1」のままです。
+この「Button1」という名前はソースコードに現れています。
+<code pascal>
+...
+  TForm1 = class(TForm)
+    Button1: TButton;                           { ここでButton1という名前が使われている }
+    procedure Button1Click(Sender: TObject);    { ここでも使われている }
+  private
+  public
+  end;
+...
+...
+procedure TForm1.Button1Click(Sender: TObject); { ここでも使われている }
+begin
+  ShowMessage('Hello, Lazarus World!');
+end;
+...
+</code>
+今作成しているような小さなプログラムでは何も問題はありません。
+しかし、プログラムの規模が大きくなったら読みにくくなることは間違いありません。
+何より美しくないです。
+オブジェクトインスペクタのプロパティのNameを変更すると、ソースコードもその名前に合わせて変更してくれます。
+実際にNameを「Button1」から「HelloButton」に変更してみます。
+すると、ソースコードが自動で更新されて次のようになります。
+<code pascal>
+...
+  TForm1 = class(TForm)
+    HelloButton: TButton;                        { Button1からHelloButtonになった }
+    procedure HelloButtonClick(Sender: TObject); { Button1ClickからHelloButtonClickになった }
+  private
+  public
+  end;
+...
+...
+procedure TForm1.HelloButtonClick(Sender: TObject); { Button1ClickからHelloButtonClickになった }
+begin
+  ShowMessage('Hello, Lazarus World!');
+end;
+...
+</code>
-  * ラベル
-  * 名前
 ==== フォームのプロパティ ====
+最後に、メインフォームのプロパティも変更しておきます。
+メインフォームにもCaptionプロパティとNameプロパティが存在します。
+  * Captionは、設定したテキストが実行時のウィンドウのタイトルになります。
+  * Nameは、このフォームコンポーネントを識別する名前です。
+ボタンのときと同じようにしてCaptionとNameの値を変更します。
+オブジェクトインスペクタでForm1を選択するか、フォームエディタでフォームのどこか(ボタンではないところ)をクリックすると、Form1のプロパティが表示されます。
+そこで次の変更を加えます。
+  * Captionを「Form1」から「My First App」に変更します。
+  * Nameを「Form1」から「MyForm」に変更します。
+変更が終わると、ソースコードが更新されます。
+最終的にUnit1の内容は次のようになります。
+<code pascal>
+unit Unit1;
+{$mode objfpc}{$H+}
+interface
+uses
+  Classes, SysUtils, Forms, Controls, Graphics, Dialogs, StdCtrls;
+type
+  { TMyForm }
+  TMyForm = class(TForm)
+    HelloButton: TButton;
+    procedure HelloButtonClick(Sender: TObject);
+  private
+  public
+  end;
+var
+  MyForm: TMyForm;
+implementation
+{$R *.lfm}
+{ TMyForm }
+procedure TMyForm.HelloButtonClick(Sender: TObject);
+begin
+  ShowMessage('Hello, Lazarus World!');
+end;
+end.
+</code>
+この時点でプログラムを実行すると、最初に提示したプログラムの実行画面と同じ結果が得られます。
+これで完成です。
+===== お疲れ様でした！ =====
+予定していたよりずっと多くの分量になってしまいました。
+もし最初から順番に追いかけてやってきていたとしたら、結構大変な仕事だったと思います。
+なぜこんな簡単なプログラムのためにこんなに多くのことをやらないといけないんだ、と疑問に思われるかもしれません。
+これだけ多くなってしまったのは、必要なIDEの使い方を逐一取り上げて説明を加えていったからです。
+もしそれらについてすでに知っているなら、大幅に簡略化できます。
+慣れてしまえばこのページで作成した程度のプログラムなら、数分足らずで作ることができるようになります。
+IDEを利用したプログラミングは、最初の取っ掛かりに時間がかかるのが厄介です。
+一方で、一度基本を身につけてしまえば、その応用によって新たな機能を覚えるのにあまり時間はかからなくなっていきます。
+このページで学んだことが十分な基本となっているかどうかはわかりませんが、今後のIDEの使用において何らかの助けになれば幸いです。
-  * 名前