差分

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

--- ref_gui_js [2020/04/27 19:27] – 作成 klab
+++ ref_gui_js [2026/10/25 05:17] (現在) – Markdown（markdowku）を DokuWiki の書式に変換 klab
@@ 行 1: / 行 1: @@
+====== GUIオブジェクト ======
+  * 画面に情報を表示したり、プログラムを対話的に操作するためのオブジェクトです。
+  * プログラムでは、**大きさ**と**位置**でGUIオブジェクトの大きさと位置を指定して使ってください。
+  * 位置を指定しない場合には、直前に作ったGUIオブジェクトの右隣に配置され、画面の右端を越えたり**次の行**を実行することで下の行の左端に移動します。ただし、画面の大きさは実行する環境によって異なりますので、できるだけ「大きさ」 と「位置」を指定してください。
+  * GUIオブジェクトの背景色（**塗る**）は**Mac**では対応していません。
+===== GUIオブジェクトの共通の説明 =====
+  * 以下に、GUIオブジェクトに共通の命令を示します。「ボタン1」という名前のボタンオブジェクトの例を示しています。次の1行に続けて書いて実行してください。
+<code>
+ ボタン1＝ボタン！"ABC" 作る。
+</code>
+  * **次の行** : 直前に作成したGUIオブジェクトの次の行に配置します。
+    * （例）オブジェクトを直前のGUIオブジェクトの次の行に表示ます。
+<code>
+ ボタン1！次の行。
+</code>
+  * **位置** : 表示位置を指定します。
+    * （例）オブジェクトを画面の「（100, 100）」の座標の位置に動かします。
+<code>
+ ボタン1！100　100　位置。
+</code>
+  * **移動する** : 右にx歩、上にy歩動きます。
+    * （例）オブジェクトを画面で「右に0、上に100」だけ動かします。
+<code>
+ ボタン1！0　100　移動する。
+</code>
+  * **大きさ** : 大きさを指定します。
+    * （例）オブジェクトを「横100、縦50」の大きさにします。
+<code>
+ ボタン1！100　50　大きさ。
+</code>
+  * **幅？** : 横幅を調べます。
+    * （例）オブジェクトの横幅を表示します。
+<code>
+ ラベル！（ボタン1！幅？）作る。
+</code>
+  * **高さ？** : 高さを調べます。
+    * （例）オブジェクトの高さを表示します。
+<code>
+ ラベル！（ボタン1！高さ？）作る。
+</code>
+  * **文字サイズ** : 表示する文字の大きさを指定します。標準は24ポイントです。リストとスライダー以外のGUIオブジェクトに共通です。
+    * （例）オブジェクトに表示する文字サイズを「16」に設定します。
+<code>
+ ボタン1！16　文字サイズ。
+</code>
+  * **塗る** : 色を色オブジェクトか三原色で指定します。リスト以外のGUIオブジェクトに共通です。
+    * （例）オブジェクトの色を設定します。
+<code>
+ ボタン1！（水）塗る。
+</code>
+    * （例）オブジェクトの色を設定します。
+<code>
+ ボタン1！255　128　255　塗る。
+</code>
+    * （例）オブジェクトの色を設定します。
+<code>
+ ボタン1！"#FF88FF"　塗る。
+</code>
+    * （例）オブジェクトの色を設定します。
+<code>
+ ボタン1！"#F8F"　塗る。
+</code>
+  * **文字色** : 文字の色を色オブジェクトか三原色で指定します。リスト以外のGUIオブジェクトに共通です。
+    * （例）オブジェクトの文字色を設定します。
+<code>
+ ボタン1！（緑）文字色。
+</code>
+    * （例）オブジェクトの文字色を設定します。
+<code>
+ ボタン1！0　128　0　文字色。
+</code>
+    * （例）オブジェクトの文字色を設定します。
+<code>
+ ボタン1！"#008800"　文字色。
+</code>
+    * （例）オブジェクトの文字色を設定します。
+<code>
+ ボタン1！"#080"　文字色。
+</code>
+  * **消える** : 画面から消えます。
+    * （例）オブジェクトを画面から消します。
+<code>
+ ボタン1！消える。
+</code>
+  * **現れる** : 画面に現れます。消えた姿を戻すときに使います。（Bit Arrow版のみ）
+    * （例）消えているオブジェクトを画面に表示します。「消える」の例に続いて実行してください。
+<code>
+ ボタン1！現れる。
+</code>
+===== ボタン =====
+  * 画面に表示されるGUI部品です。初期サイズは150×45です。
+  * GUIオブジェクトに共通の説明は「GUIオブジェクトの共通の説明」を参照してください。
+  * ボタンが押されると**動作**というメソッドが実行されます。
+    * （例）ボタン1＝ボタン！"挨拶" 作る。
+<code>
+ ボタン1：動作＝「ラベル！"こんにちは" 作る」。
+</code>
+  * ボタンの生成時に**ショートカットキー**を指定することができます。
+  * 以下の「作る」以外の例では、「ボタン1」を作ってから実行してください。
+  * **作る** : 新しいボタンを作ります。1個目のパラメータにはボタンに表示するラベルを指定します。
+    * （例）「実行」と書かれたボタンを作ります。
+<code>
+ ボタン1＝ボタン！"実行"　作る。
+ ボタン1：動作＝「ラベル！"こんにちは" 作る」。
+</code>
+個目のパラメータにショートカットキーを指定できます。キーの文字列は**sec＿keylist** 「ショートカットキー一覧」を参照してください。次の例では上向き矢印キーを押すとボタンの動作が実行されます。
+    * （例）上向き矢印キーを押すと実行されるボタンを作ります。
+<code>
+ ボタン1＝ボタン！"実行"　"UP"　作る。
+ ボタン1：動作＝「ラベル！"こんにちは" 作る」。
+</code>
+  * **読む** : 文字を読んで返します。
+    * （例）ボタンの文字列を表示します。
+<code>
+ ラベル！（ボタン1！読む）作る。
+</code>
+  * **書く** : 文字を書きます。
+    * （例）ボタンに「あいうえお」という文字を書きます。
+<code>
+ ボタン1！"あいうえお"　書く。
+</code>
+  * **増やす** : 表示されている数を増やします。増やす数を省略すると1だけ増えます。
+    * （例）ボタンに表示されている値を1増やします。
+<code>
+ ボタン1！　増やす。
+</code>
+    * （例）ボタンに表示されている値を10増やします。
+<code>
+ ボタン1！10　増やす。
+</code>
+  * **減らす** : 表示されている数を減らします。減らす数を省略すると1だけ減ります。
+    * （例）ボタンに表示されている値を1減らします。
+<code>
+ ボタン1！　減らす。
+</code>
+    * （例）ボタンに表示されている値を10減らします。
+<code>
+ ボタン1！10　減らす。
+</code>
+===== フィールド =====
+  * 画面に表示されるGUI部品です。文字の表示や入力に使います。初期サイズは150×45です。
+  * GUIオブジェクトに共通の説明は「GUIオブジェクトの共通の説明」を参照してください。
+  * **リターンキー** が押されると**動作**というメソッドが実行され、フィールドの値がパラメータとして渡されます。
+  * 以下の「作る」以外の例では、「フィールド1」を作ってから実行してください。
+  * **作る** : 新しいフィールドを作ります。
+    * （例）フィールドを作ります。パラメータに初期値を指定することもできます。
+<code>
+ フィールド1＝フィールド！作る。
+</code>
+  * **読む** : 文字を読んで返します。
+    * （例）フィールドの文字を表示します。
+<code>
+ ラベル！（フィールド1！読む）作る。
+</code>
+  * **書く** : 文字を書きます。
+    * （例）フィールドに「あいうえお」という文字を書きます。
+<code>
+ フィールド1！"あいうえお"　書く。
+</code>
+  * **クリア** : 空にします。
+    * （例）フィールドの文字を消します。
+<code>
+ フィールド1！クリア。
+</code>
+  * **増やす** : 表示されている数を増やします。増やす数を省略すると1だけ増えます。
+    * （例）フィールドに表示されている値を1増やします。
+<code>
+ フィールド1！増やす。
+</code>
+    * （例）フィールドに表示されている値を10増やします。
+<code>
+ フィールド1！10　増やす。
+</code>
+  * **減らす** : 表示されている数を減らします。減らす数を省略すると1だけ減ります。
+    * （例）フィールドに表示されている値を1減らします。
+<code>
+ フィールド1！減らす。
+</code>
+    * （例）フィールドに表示されている値を10減らします。
+<code>
+ フィールド1！10　減らす。
+</code>
+===== ラベル =====
+  * 画面に表示されるGUI部品です。文字の表示に使います。中に1つの文字列を入れられます。
+  * GUIオブジェクトに共通の説明は「GUIオブジェクトの共通の説明」を参照してください。
+  * 大きさは、表示する文字列によって自動的に設定されます。
+  * 以下の「作る」以外の例では、「ラベル1」を作ってから実行してください。
+  * **作る** : 新しいラベルを作ります。
+    * （例）「あいうえお」と書かれたラベルを作ります。
+<code>
+ ラベル1＝ラベル！"あいうえお"　作る。
+</code>
+  * **書く** : 文字を書きます。
+    * （例）ラベルに「かきくけこ」という文字を書きます。
+<code>
+ ラベル1！"かきくけこ"　書く。
+</code>
+  * **増やす** : 表示されている数を増やします。増やす数を省略すると1だけ増えます。
+    * （例）ラベルに表示されている値を1増やします。
+<code>
+ ラベル1！　増やす。
+</code>
+    * （例）ラベルに表示されている値を10増やします。
+<code>
+ ラベル1！10　増やす。
+</code>
+  * **減らす** : 表示されている数を減らします。減らす数を省略すると1だけ減ります。
+    * （例）ラベルに表示されている値を1減らします。
+<code>
+ ラベル1！　減らす。
+</code>
+    * （例）ラベルに表示されている値を10減らします。
+<code>
+ ラベル1！10　減らす。
+</code>
+===== テキストエリア =====
+  * 画面に表示されるGUI部品です。複数行の文字の表示や入力に使います。
+    * 初期サイズは3文字×2行です。「書く」などで文字が追加されると大きさが変化します。ただし、「行数」または「列数」が指定された場合は大きさは変化しません。
+    * 大きさが変化すると、隣り合った他のGUI部品の位置も変化します。ただし、「位置」または「移動する」が指定されたGUI部品の位置は変化しません。
+  * 以下の「作る」以外の例では、「エリア1」を作ってから実行してください。
+  * **作る** : 新しいテキストエリアを作ります。引数は1行ずつ追加されます。配列を指定すると要素が各行に追加されます。
+    * （例）テキストエリアを作ります。
+<code>
+ エリア1＝テキストエリア！作る。
+</code>
+    * （例）テキストエリアを作ります。「abc」が1行目に、「def」が2行目に追加されます。
+<code>
+ エリア1＝テキストエリア！"abc"　"def"　作る。
+</code>
+    * （例）テキストエリアを作ります。配列１の要素が各行に追加されます。
+<code>
+ エリア1＝テキストエリア！（配列１）作る。
+</code>
+  * **書く** : 文字を書きます。最後の文字の後に追加されます。
+    * （例）テキストエリアに「"あいうえお"」という文字列を追加します。
+<code>
+ エリア1！"あいうえお"　書く。
+</code>
+  * **改行** : 改行します。
+    * （例）テキストエリアに「"あいうえお"」という文字列を追加して改行します。
+<code>
+ エリア1！"あいうえお"　書く　改行。
+</code>
+  * **読む** : テキストエリアの内容を文字列で返します。
+    * （例）テキストエリアの内容を1行で表示します。
+<code>
+ ラベル！（エリア1！読む）作る。
+</code>
+  * **上書き** : テキストエリアの内容を削除して新しい内容で書き換えます。
+    * （例）テキストエリアの内容を新しい内容で書き換えます。
+<code>
+ エリア1！"ABC" "DEF" 上書き。
+</code>
+  * **クリア** : 空にします。
+    * （例）テキストエリアのすべての要素を削除します。
+<code>
+ エリア1！クリア。
+</code>
+  * **読むだけ** : 画面から編集できないようにします。
+    * （例）テキストエリアを画面から書けないようにします。
+<code>
+ エリア1！読むだけ。
+</code>
+  * **読み書き** : 画面から編集できるようにします。
+    * （例）テキストエリアを画面から書けるようにします。
+<code>
+ エリア1！読み書き。
+</code>
+  * **自動改行** : 「書く」の後で自動的に改行するようにします。（いいえ）を指定すると自動改行しないようにします。
+    * （例）テキストエリアを自動的に改行するようにします。
+<code>
+ エリア1！自動改行。
+</code>
+    * （例）テキストエリアを自動的に改行しないようにします。
+<code>
+ エリア1！（いいえ）自動改行。
+</code>
+  * Bit Arrow版
+    * **行数** : テキストエリアの縦の行数を指定します。内容が行数を超えた場合はスクロールバーが表示されます。
+<code>
+ エリア1！3　行数。
+</code>
+    * **列数** : テキストエリアの横の列数を指定します。内容が列数を超えた場合は次の行に続けて表示されます。
+<code>
+ エリア1！10　列数。
+</code>
+===== リスト =====
+  * 画面に表示されるGUI部品です。初期サイズは150×90です。
+  * GUIオブジェクトに共通の説明は「GUIオブジェクトの共通の説明」を参照してください。
+  * 次の点を除いて、テキストエリアと機能は同じです。
+    * 表示専用です。
+    * 「書く」で自動的に改行されます。
+    * 背景色は白です。
+  * 以下の「作る」以外の例では、「リスト1」を作ってから実行してください。
+  * **作る** : 新しいリストを作ります。
+    * （例）リストを作ります。
+<code>
+ リスト1＝リスト！作る。
+</code>
+  * **書く** : 文字を書きます。新しい行として追加されます。
+    * （例）リストに「"あいうえお"」という文字列を追加します。
+<code>
+ リスト1！"あいうえお"　書く。
+</code>
+  * **読む** : 文字を読んで返します。行を1から始まる整数で指定します。行を省略した場合や存在しない行を指定した場合は要素が連結された文字列が返ります。
+    * （例）リストの1個目の要素を読みます。
+<code>
+ ラベル！（リスト1！1　読む）作る。
+</code>
+  * **クリア** : 空にします。
+    * （例）リストのすべての要素を削除します。
+<code>
+ リスト1！クリア。
+</code>
+====== ショートカットキー一覧 ======
+  * ボタンやスライダーなどのGUI部品をキーボードから操作するための**ショートカットキー**の一覧です。
+  * これらの文字は、各種のキーボードで共通に使えます。
+|意味|記号|
+|英字| "A", "B", ..., "Z"|
+|数字| "1", "2", ..., "0"|
+|ファンクション| "F1", "F2", ..., "F12"|
+|エスケープ（ESC）| "ESCAPE"|
+|マイナス（-）| "MINUS"|
+|バックスラッシュ（￥）| "BACK＿SLASH"|
+|開き括弧（[）| "OPEN＿BRACKET"|
+|閉じ括弧（]）| "CLOSE＿BRACKET"|
+|セミコロン（;）| "SEMICOLON"|
+|コンマ（,）| "COMMA"|
+|ピリオド（.）| "PERIOD"|
+|スラッシュ（/）| "SLASH"|
+|エンター（ENTER）| "ENTER"|
+|ホーム（HOME）| "HOME"|
+|エンド（END）| "END"|
+|ページアップ（PageUp）| "PAGE＿UP"|
+|ページダウン（PageDown）| "PAGE＿DOWN"|
+|カーソル上（↑）| "UP"|
+|カーソル下（↓）| "DOWN"|
+|カーソル左（←）| "LEFT"|
+|カーソル右（→）| "RIGHT"|