図形の色を設定するGoogleApps Script

Aug 26 2020

ここでGoogleApps Scriptのリファレンスを調べていたところ、の方法があることに気づきましたsetSolidFill(color)

Googleスプレッドシートの値/ルックアップ参照に基づいて形状の色を設定するGoogleApps Scriptを作成できるかどうか疑問に思いましたか?基本的に、Googleスライドのシェイプ#001の色をGoogleスプレッドシートのA2のHEXコードに設定しますか?

回答

3 Tanaike Aug 26 2020 at 14:19

Googleスプレッドシートにあるカラーコードに基づいて形状の色を設定できるかどうか疑問に思っています。

あなたの目標は達成できると思います。そこで、目標達成の方法を理解するために、次の2つのパターンを提案しました。

パターン1:

このパターンでは、Googleスライドの1番目のスライドの図形のオブジェクトIDを使用して図形の色が変更されます。このサンプルでは、​​16進色はスプレッドシートのセル「A1」から取得されます。スプレッドシートID、シート名、プレゼンテーションIDを設定してください。

サンプルスクリプト:

function myFunction() {
  const objectId = "###";  // Please set the object ID.
  
  const hexColor = SpreadsheetApp.openById("spreadsheetId").getSheetByName("sheetName").getRange("A1").getValue();
  const slide = SlidesApp.openById("presentationId").getSlides()[0];
  var obj = slide.getShapes().filter(s => s.getObjectId() == objectId);
  if (obj.length > 0) obj[0].getFill().setSolidFill(hexColor);
}

パターン2:

このパターンでは、Googleスライドの1番目のスライドの図形の図形タイプを使用して図形の色が変更されます。このサンプルでは、​​スプレッドシートのセル「A1」から16進数の色を取得し、「RECTANGLE」の形状の色を変更しています。スプレッドシートID、シート名、プレゼンテーションIDを設定してください。列挙型ShapeTypeから形状タイプを選択してください。

サンプルスクリプト:

function myFunction() {
  const shapeType = "RECTANGLE";  // Please set the shape type.
  
  const hexColor = SpreadsheetApp.openById("spreadsheetId").getSheetByName("sheetName").getRange("A1").getValue();
  const slide = SlidesApp.openById("presentationId").getSlides()[0];
  var objs = slide.getShapes().filter(s => s.getShapeType() == SlidesApp.ShapeType[shapeType]);
  if (objs.length > 0) {
    objs.forEach(obj => obj.getFill().setSolidFill(hexColor));
  }
}

注意:

  • これらは単純なサンプルスクリプトです。したがって、スクリプトを使用するときは、実際の状況に合わせてスクリプトを変更してください。

参照:

  • setSolidFill(hexString)
  • getObjectId()
  • getShapeType()
  • 列挙型ShapeType

追加1:

スライド内のすべての形状のオブジェクトIDを取得する場合は、次のスクリプトを使用できます。

サンプルスクリプト:

const slide = SlidesApp.openById(presentationId).getSlides()[0];
const objectIds = slide.getShapes().map(s => s.getObjectId());
console.log(objectIds)
  • この場合、1番目のスライドのすべての形状のオブジェクトIDが配列に配置されます。

追加2:

たとえば、Googleスライドの最初のスライドのすべての図形の色が赤色に変更された場合、次のスクリプトを使用できます。オブジェクトIDを使用していずれかの形状を選択する場合は、まず「追加1」のスクリプトでオブジェクトIDを取得し、「パターン1」のスクリプトを使用してください。

サンプルスクリプト:

function myFunction() {
  const hexColor = "#ff0000";  // This is a red color.
  const slide = SlidesApp.openById(presentationId).getSlides()[0];
  const shapes = slide.getShapes();
  if (shapes.length > 0) {
    shapes.forEach(obj => obj.getFill().setSolidFill(hexColor));
  }
}

追加3:

についてcan the pattern 1 script use an array (I need to change colours of several shapes, not just one)、あなたの追加のリクエストからcan you please show me how to adjust the pattern 1 script to work with an array?、次のようにもう1つのサンプルスクリプトを追加しました。

このサンプルでは、​​最初に、オブジェクトIDと16進色をに設定してくださいobjectIds。これにより、1枚目のスライドの形状の色を変えることができます。

サンプルスクリプト:

function myFunction() {
  const objectIds = [
    {objectId: "###", hexColor: "###"},
    {objectId: "###", hexColor: "###"},
    ,
    ,
    ,
  ];
  
  const slide = SlidesApp.openById("presentationId").getSlides()[0];
  const shapeObjects = slide.getShapes().reduce((o, s) => Object.assign(o, {[s.getObjectId()]: s}), {});
  objectIds.forEach(({objectId, hexColor}) => {
    if (shapeObjects[objectId]) shapeObjects[objectId].getFill().setSolidFill(hexColor);
  });
}

注意:

  • これは単純なサンプルスクリプトです。ですので、実際の状況に合わせて変更してください。