Apps Script公式リファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2024年5月12日日曜日

Google SlidesでDialogを表示したい

Google SlidesでModal Dialogを表示する方法を2つ試してみます。


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

Latest post

Google Slidesで現在選択している表に値を入れたい3 - Insert values into the active table3

Google Slidesで現在選択している表に値を入れたい2 - Insert values into the active table2 上記のリンク先では、値の数に応じて行を追加しました。 In the linked article above, rows were add...