以下のリンク先では [ ] を目印にして文字色と背景色を変更しました。
In the following link, the text color and background color are changed using square brackets [] as markers.
今回は、Google Slidesにダイアログを表示して、入力した単語の文字色と背景色を変更するコードです。
This time, I'm trying a code that displays a dialog in Google Slides to change the text color and background color of a specified word.
Procedures
3行2列の表を用意して、2行目2列目にテキストを入力しておきます。
Prepare a table with 3 rows and 2 columns, and enter text in the second row and second column.
今回の例で使うテキスト
The text used in this example.
Trying to write a Google Apps Script that displays a dialog in Google Slides to highlight specific words within a table.
今回の例では、 highlight とwords の単語を対象にします。
In this example, the target words are "highlight" and "words."
Code.gs の modalessTemplate() を実行すると、ダイアログが表示されます。
After executing modalessTemplate() in Code.gs, a dialog will be displayed.
ダイアログに highlight と words を改行で区切って入力します。
Enter "highlight" and "words" in the dialog, separated by a newline.
表を選択してダイアログのsubmitボタンをクリックすると、文字色と背景色が変わります。
Apps Script
Code.gs
function modalessTemplate() {
const htmlOutput = HtmlService
.createTemplateFromFile("index")
.evaluate()
.setWidth(240)
.setHeight(240);
SlidesApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function getSelectedTable() {
const presentation = SlidesApp.getActivePresentation();
const selection = presentation.getSelection();
const pageElement = selection.getPageElementRange().getPageElements()[0];
const table = pageElement.asTable();
return table;
}
function boldColorTargetWords(values) {
const table = getSelectedTable();
const row = 1;
const col = 1;
const cell = table.getCell(row, col);
const textRange = cell.getText();
let text = textRange.asString();
cell.getText().setText(text);
for (let i = 0; i < values.length; i++) {
const value = values[i];
const startIndex = text.indexOf(value);
const endIndex = startIndex + value.length;
const textStyle = textRange.getRange(startIndex, endIndex).getTextStyle();
textStyle.setBold(true);
textStyle.setForegroundColor('#FFFFFF'); // white
textRange.getRange(startIndex, endIndex).getTextStyle().setBackgroundColor('#000000'); // black
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<?!= include("css"); ?>
</head>
<body>
<textarea id="words"></textarea>
<br>
<button id="submit">submit</button>
<?!= include("javascript"); ?>
</body>
</html>
css.html
<style>
#words {
font-size: 18px;
width: 90vw;
height: 70vh;
}
</style>
javascript.html
<script>
function elem(id) {
return document.getElementById(id);
}
elem("words").addEventListener("keyup", function () { inputKeyup("words") });
elem("submit").addEventListener("click", submitClicked);
function inputKeyup(id) {
elem(id).value = elem(id).value.replace(/"/g, "");
}
function submitClicked() {
const words = elem("words").value.trim().split("\n");
google.script.run.boldColorTargetWords(words);
}
</script>
Reference
Google Slidesの表内の指定文字の文字色と背景色を変えたい - Set the text color and background color within a table in Google Slides
