入力BOX »メニューバーに「カスタムメニュー」を追加

ChatGPTにコード作成してもらい、入力BOXを表示させてスプレッドシートに入力するところまではできました。

ただ、AppsScript画面から実行させなければならないのはちょっと面倒です。スプレッドシートのメニューバーに「カスタムメニュー」を追加して実行することができるようなので試してみたいと思います。

下記のコードを追加して「カスタムメニュー」から実行できるようにしていきます。

function onOpen() {
  var ui = SpreadsheetApp.getUi();  // UIを取得
  
  ui.createMenu('カスタムメニュー')  // メニューを作成
    .addItem('入力BOX', 'addData')  // メニュー項目を追加
    .addToUi();  // メニューをUIに追加
}

１．「カスタムメニュー」用のコードを追加します。

２．わかりやすいようにプロジェクト名を「カスタムメニュー」に変更しました。

３．プロジェクトを保存します。

５．onOpen()関数はスプレッドシートを開くと 自動的に実行されるそうです。なので、実行ボタンは押さずそのままスプレッドシートに移動しましたが、なんの変化もありません…

６．スプレッドシートを開きっぱなしにしている場合、onOpen() 関数を実行させるにはスプレッドシートを再読み込み（リロード）する必要があるそうです。なので、まず名前を「カスタムメニュー追加」にして、

７．このページを再読み込みします。

８．無事にカスタムメニューが追加されました！

９．「カスタムメニュー」→「入力BOX」とすると

１０．入力BOXが表示されました。

超初心者なりのコード解釈をしてみます。

onOpen()

スプレッドシートが開かれるたびに自動実行します。

var ui = SpreadsheetApp.getUi()

スプレッドシートの画面表示やユーザーインターフェイスを操作できるようにします。

ui.createMenu(‘カスタムメニュー’)

「カスタムメニュー」という名前のメニューをつくります。

addItem(‘入力BOX’, ‘addData’)

「カスタムメニュー」のなかに「入力BOX」という名前のメニュー項目を追加します。「入力BOX」が選択されると「addData」という関数が実行されます。

addToUi()

メニューをUIに追加します。

メニューバーに項目を追加できるなんて知りませんでした！　Google Apps Script（GAS）っておもしろいです。

function addDataToSheet(data) { ... }

• function: 関数を定義するためのキーワードです。
• addDataToSheet: 関数名です。この名前でこの関数を呼び出すことができます。
• (data): 関数の引数です。この関数に渡すデータが入ります。
• { … }: 関数の処理内容を記述するブロックです

関数内の処理

• var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();:
  • SpreadsheetApp.getActiveSpreadsheet(): 現在アクティブになっているスプレッドシートを取得します。
  • .getActiveSheet(): アクティブなスプレッドシートの最初のシートを取得します。
  • var sheet : 取得したシートを sheet 変数に代入します。
• sheet.appendRow([data]);:
  • sheet.appendRow(): シートの最後に新しい行を追加するメソッドです。
  • [data]: 追加するデータです。data 変数に格納されている値を配列として渡しています。配列にすることで、複数のセルにデータを書き込むこともできます。

function addDataToSheet2() { var spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); var sheet2 = spreadsheet.getSheetByName(“シート2”); // シート名で指定 // または、シートのインデックスで指定 // var sheet2 = spreadsheet.getSheets()[1]; // 2番目のシートを取得 // シート2にデータを追加 sheet2.appendRow([“新しいデータ”]); }

• function showInputBox() は、関数の開始を示します。ダイアログボックス（入力画面）
• var ui = SpreadsheetApp.getUi(); は、Google スプレッドシートの UI オブジェクトを取得する部分です。これにより、ダイアログボックスやメニューなどを表示できるようになります。
• var result = ui.prompt(...); は、ダイアログボックスを表示してユーザーに入力を求める部分です。ここで、OK ボタンと キャンセル ボタンを表示するようになっています。

要するに、showInputBox 関数はユーザーに入力を求めるダイアログボックスを表示する処理を行っています。

UI（ユーザーインターフェース）とは？

まず、「ユーザーインターフェース（UI）」とは、ユーザーがシステムやアプリケーションとやり取りするためのインターフェース、つまり「見た目」や「操作する部分」を指します。

具体的には、Google スプレッドシートのUIは以下のような部分を含みます：

• メニューバー（「ファイル」「編集」「表示」などの項目が並んでいる部分）
• ツールバー（フォントやセルの色を変更するためのボタンなど）
• シートのタブ（シートを切り替えるためのボタン）
• ダイアログボックスや通知メッセージ（入力を求めるダイアログや確認メッセージ）

「UIにアクセスする」という言葉が少し抽象的に感じられるかもしれませんが、Google スプレッドシートにおける「UI（ユーザーインターフェース）」の考え方を具体的に説明しますね。

UI（ユーザーインターフェース）とは？

まず、「ユーザーインターフェース（UI）」とは、ユーザーがシステムやアプリケーションとやり取りするためのインターフェース、つまり「見た目」や「操作する部分」を指します。

具体的には、Google スプレッドシートのUIは以下のような部分を含みます：

• メニューバー（「ファイル」「編集」「表示」などの項目が並んでいる部分）
• ツールバー（フォントやセルの色を変更するためのボタンなど）
• シートのタブ（シートを切り替えるためのボタン）
• ダイアログボックスや通知メッセージ（入力を求めるダイアログや確認メッセージ）

SpreadsheetApp.getUi() とは？

SpreadsheetApp.getUi() は、これらの 「ユーザーインターフェース」 を操作するためのオブジェクトを取得するメソッドです。このオブジェクトを使って、ダイアログボックスやメニューなどを表示したり、ユーザーに何か入力させたりすることができます。

つまり、UIにアクセスするというのは、Google スプレッドシートの操作画面（メニューやダイアログ、通知メッセージなど）をプログラムから操作するということです。

ui.prompt() メソッドについて

ui.prompt() は、スプレッドシートのUIにポップアップの入力ダイアログ（プロンプト）を表示し、ユーザーにデータを入力させるメソッドです。このメソッドは、ユーザーが入力したデータを 結果（result）として返します。

var result = の意味について、もう少し詳しく説明します。

var result = は、変数 result に値を代入する部分です。この場合、result にはユーザーが入力した情報（テキスト）が格納されます。

具体的には、var result = ui.prompt(...); は、Google スプレッドシートのUIに表示されるプロンプトダイアログの結果を result という変数に格納する という意味です。

ui.prompt() を使うことで、ユーザーに入力を促すダイアログを表示します。このダイアログにユーザーがテキストを入力することができます。

var result = ui.prompt('データを入力してください:', 'ここにデータを入力', ui.ButtonSet.OK_CANCEL);

このコードでは、ui.prompt() がダイアログを表示し、ユーザーが入力した内容を result という変数に格納 します。

• 'データを入力してください:' はダイアログのタイトル。
• 'ここにデータを入力' はダイアログ内の初期値（プレースホルダ）。
• ui.ButtonSet.OK_CANCEL は「OK」と「キャンセル」の2つのボタンを表示します。

はい、その解釈は 正しいです！

ui.prompt() を使うことで、スプレッドシートに 入力ダイアログ（入力ボックス） を表示させることができ、そのダイアログで ユーザーが入力した文字 を var result に格納する、という流れです。

もう一度整理すると、次のような流れになります：

1. 入力ダイアログを表示

ui.prompt() を使うことで、ユーザーに入力を促すダイアログを表示します。このダイアログにユーザーがテキストを入力することができます。

javascriptコードをコピーするvar result = ui.prompt('データを入力してください:', 'ここにデータを入力', ui.ButtonSet.OK_CANCEL);

このコードでは、ui.prompt() がダイアログを表示し、ユーザーが入力した内容を result という変数に格納 します。

• 'データを入力してください:' はダイアログのタイトル。
• 'ここにデータを入力' はダイアログ内の初期値（プレースホルダ）。
• ui.ButtonSet.OK_CANCEL は「OK」と「キャンセル」の2つのボタンを表示します。

2. 結果を格納

var result は ユーザーの入力結果 を格納する変数です。この result には、入力されたテキストや、ユーザーが選択したボタンに関する情報が含まれます。

具体的には、result は PromptResponse オブジェクト です。このオブジェクトには以下のメソッドがあります：

• getResponseText(): ユーザーが入力したテキストを返します。
• getSelectedButton(): ユーザーが選択したボタン（OKまたはキャンセル）を返します。

3. 入力されたテキストを取得

result.getResponseText() を使って、ユーザーがダイアログに入力したテキストを取得することができます。

4. ボタンが押されたか確認

result.getSelectedButton() で、ユーザーがどのボタン（「OK」または「キャンセル」）を押したのかを確認することができます。

変数名のルール

1. 英数字、アンダースコア（_）、またはドル記号（$）のみ使用可能:
   • 例: myVariable, result_text, data_123
2. 最初の文字は数字以外で始める:
   • 有効: abc123
   • 無効: 123abc（エラーになる）
3. 予約語は使えない:
   • JavaScriptやGASにおけるキーワード（例: var, if, function）は変数名にできません。

response は「レスポンス（応答）」を示すために適切な名前です。例えば、APIからユーザー情報を取得する場合は、userData や apiResponse のような名前を使うと、何が格納されているか分かりやすくなります。

SpreadsheetApp.getUi():

• スプレッドシートのユーザーインターフェイスを操作するためのオブジェクトを取得します。

ui.prompt():

• プロンプトダイアログを表示し、ユーザーに入力を求めます。
• パラメータ：
  • 最初の引数 'データを入力してください:': プロンプトのタイトル。
  • 2番目の引数 'ここにデータを入力': 入力フィールドのプレースホルダー（デフォルト値）。
  • 3番目の引数 ui.ButtonSet.OK_CANCEL: 表示するボタンのセット（OKとキャンセル）。

input.getResponseText():

• プロンプトボックスにユーザーが入力した文字列を取得します。

output:

• ユーザーの入力が格納される変数。

function showPrompt() {
var ui = SpreadsheetApp.getUi(); // スプレッドシートのUIを取得
var input = ui.prompt(‘データ入力’, ‘データを入力してください:’, ui.ButtonSet.OK_CANCEL); // プロンプトを表示

if (input.getSelectedButton() == ui.Button.OK) { // OKが押された場合
Logger.log(‘入力された値: ‘ + input.getResponseText()); // 入力されたデータをログに表示
} else if (input.getSelectedButton() == ui.Button.CANCEL) { // キャンセルが押された場合
Logger.log(‘キャンセルされました’);
} else {
Logger.log(‘ダイアログが閉じられました’);
}
}