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

2024年5月15日水曜日

Google Slidesのダイアログから表に値を入力したい2 - Input values from dialog to table 2


上記のリンク先で以前書いたコードの応用バージョンです。
This is a variation of the code I previously wrote at the link above.



今回やること- What I will do this time
  1. 5つの表をスライドに配置する - Place four tables on the slide.
  2. スライドにダイアログを表示する - Display a dialog on the slide.
  3. ダイアログにテキストを入力する - Enter text into the dialog.
  4. submitボタンをクリックする - Click the submit button.
  5. 入力されたテキストを分割する - Split the entered text.
  6. 5つの表にテキストを入力する - Input the text into the five tables.

今回の例では、4つの英単語 get, take, make, give の類義語と日本語訳をダイアログに入力し、それをよしなに分割して5つの表に入力します。
In this example, I will input synonyms and Japanese translations for the four English words (get, take, make, give) into a dialog, split them appropriately, and input them into five tables.



今回使うスライドの例
An example of the slide used for this demonstration.

左に4行1列の表を配置
Place a table with 4 rows and 1 column on the left.

右に4行2列の表(1行目はセルを結合)を縦に4つ配置
Vertically place four tables to the right, each with 4 rows and 2 columns
(with the first row's cells merged).



Code.gs
function modalessTemplate() {
const htmlOutput = HtmlService
.createTemplateFromFile("index")
.evaluate()
.setWidth(720)
.setHeight(180);
SlidesApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}

function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function setValuesForTables(records) {
const tables = getPageTables();
const recordsObj = returnRecordsObj(records);
setValuesInTable(tables[0], recordsObj["headings"]);
for(let i = 1; i < 5; i++) {
const table = tables[i];
const values = recordsObj["arrays"][i-1] ;
setValuesInTable(table, values);
}
}

function getPageTables() {
const presentation = SlidesApp.getActivePresentation();
const slide = presentation.getSelection().getCurrentPage();
const tables = slide.getTables();
return tables;
}

function returnRecordsObj(records) {
let headings = [];
let arrays = [];
for(let i = 0; i < records.length; i++) {
let values = [];
const units = records[i].split("」");
const unit0 = units[0].split("「")
const unit1 = units[1].split("「")
const unit2 = units[2].split("「")
const unit3 = units[3].split("「")
values = [
[unit0[1]],
[unit1[0],unit1[1]],
[unit2[0],unit2[1]],
[unit3[0],unit3[1]]
]
headings.push([unit0[0]]);
arrays.push(values);
}
const obj = {
"headings": headings,
"arrays": arrays
}
return obj;
}

function setValuesInTable(table, values) {
for (var row = 0; row < values.length; row++) {
for (var col = 0; col < values[row].length; col++) {
if (row < table.getNumRows() && col < table.getNumColumns()) {
table.getCell(row, col).getText().setText(values[row][col]);
}
}
}
}


index.html
<!DOCTYPE html>
<html>
<head>
<?!= include("css"); ?>
</head>
<body>
<textarea id="input"></textarea>
<br>
<button id="submit">submit</button>
<?!= include("JavaScript"); ?>
</body>
</html>


css.html
<style>
#input {
font-size: 12px;
width: 95vw;
height: 60vh;
}
</style>


JavaScript.html
<script>
function elem(id) {
return document.getElementById(id);
}

elem("submit").onclick = submitClicked;

function submitClicked() {
const records = elem("input").value.split("\n");
google.script.run.setValuesForTables(records);
}
</script>


Code.gsのmodalessTemplate() を実行すると以下のダイアログがスライドの前面に表示されます。
Running modalessTemplate() in Code.gs will display the following dialog in front of the slide.
ダイアログのテキストエリアに以下のテキストを入力します
Enter the following text into the text area of the dialog:
get「得る」obtain「手に入れる」receive「受け取る」acquire「獲得する」
take「取る」grab「つかむ」seize「奪う」capture「捕らえる」
make「作る」create「創造する」produce「生産する」build「建てる」
give「与える」offer「提供する」donate「寄付する」bestow「授ける」



submitボタンをクリックすると、表の指定したセルにテキストが入力されます。
Clicking the submit button will input the text into the specified cell of the table.


Tips

ダイアログに入力するテキストはGeminiに作ってもらいました。
The text for the dialog was generated by Gemini.

INPUT
get, take, make, give それぞれの英単語について、それぞれ3つずつ類義語を教えて下さい。その日本語訳も横に書いてください。例のように横に並べてください。
例 get「得る」類義語1「日本語訳1」類義語2「日本語訳2」類義語3「日本語訳3」

OUTPUT
get「得る」 obtain「手に入れる」 receive「受け取る」 acquire「獲得する」
take「取る」 grab「つかむ」 seize「つかむ、奪う」 capture「捕らえる、獲得する」
make「作る」 create「創造する」 produce「生産する」 build「建てる、築く」
give「与える」 offer「提供する」 donate「寄付する」 bestow「授ける」



そのテキストをreturnRecordsObj(records)で以下のように分けた obj を返します。
The text is split appropriately via returnRecordsObj(records) and returns an object like the following:

const obj = {
  "headings":[
    ["get"],["take"],["make"],["give"]
  ],
  "arrays":[
    [["得る"],["obtain","手に入れる"],["receive","受け取る"],["acquire","獲得する"]],
    [["取る"],["grab","つかむ"],["seize","奪う"],["capture","捕らえる"]],
    [["作る"],["create","創造する"],["produce","生産する"],["build","建てる"]],
    [["与える"],["offer","提供する"],["donate","寄付する"],["bestow","授ける"]]
  ]
}


Reference

Google Slidesのダイアログから表に値を入力したい - Input values from dialog to table

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...