カスタムメニュー作成
スプレッドシートを立ち上げた時のメニュー欄にオリジナルのプルダウンメニューが作成されるGASです。例３、４は入れ子になったサブメニューも作るタイプです。
※対象のスプレッドシートに直接紐づいたGAS用です
※トリガーの追加、承認手続きが必要です
例１
function onOpen() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const menuList = [];
menuList.push({ name: "処理１", functionName: "function1" });
menuList.push(null);
menuList.push({ name: "処理2", functionName: "function2" });
ss.addMenu("カスタムメニュー", menuList);
}
例２
function onOpen() {
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu('カスタムメニュー');
menu.addItem('処理1', 'function1');
menu.addToUi();
}
例３ サブメニューのある例
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('カスタムメニュー')
.addItem('処理1', 'function1')
.addSeparator()
.addSubMenu(SpreadsheetApp.getUi()
.createMenu('サブメニュー')
.addItem('処理2', 'function2')
.addItem('処理3', 'function3'))
.addToUi();
}
例４
function onOpen() {
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu('カスタムメニュー');
menu.addItem('f処理1', 'function1');
menu.addItem('f処理2', 'function2');
menu.addSeparator();
menu.addSubMenu( // サブメニューをメニューに追加する
ui.createMenu("サブメニュー") // Uiクラスからメニューを作成する
.addItem("処理3", "function3") // メニューにアイテムを追加する
);
menu.addToUi();
}
HTMLファイルの表示
htmlファイル(ここでは'index')は、doGet関数を次のように設定しておくと、ウェブアプリとしてデプロイした際に取得するURLにアクセスすると最初に表示されます。
例１
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');//スマホ対応用
}
例２ 動的にデータを埋め込む場合など
function doGet() {
const indextpage = HtmlService.createTemplateFromFile("index");
indextpage.DATA1 = '埋め込みデータ';
return indextpage
.evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
※htmlファイル内のデータを埋め込みたい場所に <?= DATA1 ?>
スタイルシートやJavaScriptファイルの読み込み
スタイルシートやJavaScriptを別ファイルで用意する場合、htmlファイルの埋め込みたい場所に
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
※'css'や'js'は任意のファイル名
※スタイルシートは<style>～</style>、JavaScriptは<script>～</script>
のタグが必要です。
GETパラメーターの取得
URL末尾?以降のデータを取得する場合
function doGet(e) {
const data = e.parameter.param;
}
※～URL?param=data1の場合上記変数dataの値はdata1
formデータをGASに送る POST送信
送信ボタン(submit)が押されたら、JavaScriptで入力チェックをしてからGAS側に送信される例です
html内フォーム入力欄
<form name="f1" onsubmit="return check(this);">
<p>お名前<input type="text" name="name" size=20></p>
<input type="submit" value="送信">
</form>
<div id="msg"></div>
html内JavaScript
function check(obj){
//入力内容をチェック
//問題があれば return false;
//問題がなければGAS側に送る
google.script.run
.withSuccessHandler(function1)//成功した場合
.withFailureHandler(function2)//失敗した場合
.myFunction(obj);//GAS側の処理関数
return false;
}
function function1(m){
document.getElementById('msg').innerHTML = m;
}
function function2(){
document.getElementById('msg').innerHTML = '失敗しました';
}
GAS側 //お名前欄に入力された内容をそのまま返す
function myFunction(e){
return e.name;
}
スプレッドシート上で使う入力欄作成例
スプレッドシートの入力作業などで何かしらの専用入力欄があったほうが作業効率が上がりそうな場合、予めカスタムメニューに仕込んでおけば便利です。
gas ※"form1"はフォーム本体のhtmlファイル
function function1() {
const htmlOutput = HtmlService.createTemplateFromFile("form1").evaluate()
.setWidth(500)
.setHeight(400);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, '専用入力欄');
}
GAS側で出す選択式アラート
const ui = SpreadsheetApp.getUi();
const response = ui.alert("データの更新をしますよろしいですか？", ui.ButtonSet.OK_CANCEL);
if (response === ui.Button.OK) {
ui.alert('OKが押されました');
} else {
ui.alert('キャンセルが押されました');
}
//3択にする場合
const ui = SpreadsheetApp.getUi();
const response = ui.alert("よろしいですか？", ui.ButtonSet.YES_NO_CANCEL);
if (response === ui.Button.YES) {
ui.alert('YESが押されました');
} else if (response === ui.Button.NO) {
ui.alert('NOが押されました');
}else {
ui.alert('キャンセルが押されました');
}
