1. showModalDialog
2. showModelessDialog
1. showModalDialog
背面に配置されているものはクリック、入力などの操作ができない
Code.gs
function modalTemplate() {
const htmlOutput = HtmlService
.createTemplateFromFile("index")
.evaluate()
.setWidth(360)
.setHeight(120);
SlidesApp.getUi().showModalDialog(htmlOutput, "MyGUI");
}
index.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 18px;
}
</style>
</head>
<body>
<p>ここに表示したい内容をhtmlで書ける。</p>
</body>
</html>
（index.htmlに直接styleを書く場合はこういう感じの書き方になると思います）
2. showModelessDialog
背面に配置されているものもクリック、入力などの操作ができる
Code.gs
function modalessTemplate() {
const htmlOutput = HtmlService
.createTemplateFromFile("index")
.evaluate()
.setWidth(360)
.setHeight(120);
SlidesApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
index.html
<!DOCTYPE html>
<html>
<head>
<?!= include("css"); ?>
</head>
<body>
<p>ここに表示したい内容をhtmlで書ける。</p>
</body>
</html>
css.html
<style>
p {
font-size: 18px;
}
</style>
（index.htmlの<?!= include("css"); ?> で、styleを別のファイルに書く場合はこんな感じ）
Tips
createHtmlOutputFromFileでやる場合は、以下のような感じになると思います。
showModalDialog
Code.gs
function modalDialog() {
const htmlOutput = HtmlService
.createHtmlOutputFromFile("index")
.setWidth(360)
.setHeight(120);
SlidesApp.getUi().showModalDialog(htmlOutput, "MyGUI");
}
showModelessDialog
Code.gs
function modelessDialog() {
const htmlOutput = HtmlService
.createHtmlOutputFromFile("index")
.setWidth(360)
.setHeight(120);
SlidesApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}
index.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 18px;
}
</style>
</head>
<body>
<p>ここに表示したい内容をhtmlで書ける。</p>
</body>
</html>
スライド(SlidesApp)に限らず、スプレッドシート(SpreadsheetApp)、ドキュメント(DocumentApp)、フォーム(FormApp)の編集画面でも、同じようにDialogを表示できます。
Reference
Dialogs and Sidebars in Google Workspace Documents > Custom dialogs
HTML Service: Create and Serve HTML
HTML Service: Templated HTML
