画面の表示部分はHTMLで記述できるようになっています。
僕は新しく画面を作る時、CSSやJavaScriptで作りこんでいく前に、まずはテキストエリアを表示するだけの画面を雛形的に使っています。
コード.gsで表示するHTMLファイルを指定して、そのHTMLファイルを作成して実行すると、スプレッドシート上に表示することができます。
下記はそのテキストエリアを表示するだけの簡単なコードです。
コード.gs
function openGUI() {
var html = HtmlService.createHtmlOutputFromFile('index').setWidth(600).setHeight(600);
SpreadsheetApp.getUi().showModalDialog(html, 'myGUI');
}
追記
.setWidth(600).setHeight(600);
等でモーダルの幅と高さを調整できる
index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <textarea></textarea> </body> </html>
スプレッドシートに表示される画面
コードを書いて実行するまでの手順です。
1. コード.gsにコードを書いて保存します。
2. ファイル＞新規作成＞HTMLファイル を選択します。
3. ファイル名を入力してOKをクリックします。
4. index.htmlの7行目にテキストエリア（今回の例）を配置して保存します。
5. コード.gsタブで実行する処理を選択します。
実行後、スプレッドシートへ戻ると、作成したGUIが表示されます。
