Google Apps Script試行錯誤 Blog: Google Slidesで現在選択している表に値を入れたい6

2024年5月28日火曜日

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

以下のリンク先では、入力する値を直接コードに書きました。

In the linked article, the values were written directly in the source code.

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

今回は、Google Slidesにダイアログを表示して、そこに入力した値を表へ入力します。

This time, I will create a dialog in Google Slides and insert the values entered into a table.

手順 - Procedures

コードを実行する前に、4行4列の表を配置して選択しておきます。

Before running the code, place and select a 4-row, 4-column table on the slide.

一行目は見出し行にしておきます。

Set the first row as the header.

Code.gsのmodalessTemplate() を実行すると、スライドにダイアログが表示されます。

After executing "modalessTemplate()", a dialog will be displayed on the slide.

ダイアログのテキストエリアに値を入力します。

Enter values into the text area of the dialog.

入力する値 - Values to be inputted

get: 得る: v.: To obtain or receive something.
take: 取る: v.: To carry or move something from one place to another.
make: 作る: v.: To create or produce something.
give: 与える: v.: To offer or hand over something to someone.

submitボタンをクリックすると、テキストエリアに入れた値が表に入力されます。

After clicking the "Submit" button, the values entered in the text area will be inserted into the table.

Code.gs

function modalessTemplate() {
  var htmlOutput = HtmlService
    .createTemplateFromFile("index")
    .evaluate()
    .setWidth(600)
    .setHeight(200);
  SlidesApp.getUi().showModelessDialog(htmlOutput, "MyGUI");
}

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

function setValuesToSlideTable(records) {
  var arrays = []
  for(var i = 0; i < records.length; i++) {
    var row = records[i];
    var cols = row.split(": ");
    var array = [cols[0], cols[1], cols[2], cols[3]];
    arrays.push(array);
  }
  insertValuesIntoSelectedTable(arrays);
}

function insertValuesIntoSelectedTable(values) {
  var presentation = SlidesApp.getActivePresentation();
  var selection = presentation.getSelection();
  var pageElement = selection.getPageElementRange().getPageElements()[0];
  var table = pageElement.asTable();
  var tableRows = table.getNumRows()-1;// Subtract 1 since the first row of the table is a header.

  if(values.length !== tableRows) {
    var diffRows = values.length - tableRows;
    if(0 < diffRows) {
      addRows(table, diffRows);
    } else {
      deleteRows(table, Math.abs(diffRows));
    }
  }
  setValuesInTable(table, values, 1, 0);// Inserting point is the second row(index 1) and first column (index 0)
}

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

function addRows(table, diffRows) {
  for(var i = 0; i < diffRows; i++) {
    table.appendRow();
  }
}

function deleteRows(table, diffRows) {
  for(var i = 0; i < diffRows; i++) {
    table.getRow(table.getNumRows() - 1).remove();
  }
}

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: 15px;
    width: 95vw;
    height: 60vh;
  }
</style>

javascript.html

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

elem("submit").onclick = submitClicked;

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