ページ要素のサイズと位置を取得して変更するには、次の 2 つの方法があります。
- サイズと位置のゲッター関数とセッター関数を使用する。
- アフィン変換を操作する。
getTransform()関数とsetTransform()関数を使用して、元のサイズを維持します。
ページ要素のプロパティの読み取り
図に示すように、サイズと位置は、回転していないレンダリングされたページ要素の境界ボックスを基準にして測定されます。
- 左と上: ページの左上から、回転していない境界ボックスの左上までを測定します。
getLeft()とgetTop()を使用して値を読み取ります。 - 幅と高さ: 回転していない境界ボックスの幅と高さ。
getWidth()とgetHeight()を使用して値を読み取ります。 - 回転: 境界ボックスの中心の周りの垂直線を基準とした時計回りの回転。
getRotation()を使用して値を読み取ります。
長さはすべてポイント（pt）単位です。回転は度（°）で測定されます。
ページ要素のプロパティを設定する
ページ要素のサイズと位置は、insertShape() などの挿入メソッドを使用してページを作成する際に設定できます。既存の図形の場合は、サイズ、位置、回転を設定できます。また、要素のスケーリングを設定することで、サイズを変更したり、エッジのいずれかに沿って反転したりすることもできます。
作成時
ページ要素を作成するときに、位置とサイズ情報を指定できます。
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 100, 200, 300, 60);
Logger.log('Left: ' + shape.getLeft() + 'pt; Top: '
+ shape.getTop() + 'pt; Width: '
+ shape.getWidth() + 'pt; Height: '
+ shape.getHeight() + 'pt; Rotation: '
+ shape.getRotation() + ' degrees.');
上記のスクリプトは、アクティブなプレゼンテーションの最初のスライドに、指定された位置とサイズでシェイプを作成し、シェイプの位置とサイズ情報を読み取ります。想定されるログは次のとおりです。
Left: 100pt; Top: 200pt; Width: 300pt; Height: 60pt; Rotation: 0 degrees.
サイズ、位置、回転
ページ要素のサイズと位置は、作成後に更新できます。
setLeft()とsetTop()を使用して、回転しない境界ボックスの左上隅の位置を設定します。setWidth()とsetHeight()を使用して、境界ボックスのレンダリングされた幅と高さを設定します。setRotation()を使用して、中心を中心とした境界ボックスの時計回りの回転を設定します。
次のスクリプトは、アクティブなプレゼンテーションの最初のスライドにシェイプを作成し、セッターを使用してその位置、サイズ、回転を更新し、シェイプの位置とサイズ情報を読み取ります。
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setLeft(100).setTop(200).setWidth(50).setHeight(60).setRotation(90);
Logger.log('Left: ' + shape.getLeft()
+ 'pt; Top: ' + shape.getTop()
+ 'pt; Width: ' + shape.getWidth()
+ 'pt; Height: ' + shape.getHeight()
+ 'pt; Rotation: ' + shape.getRotation() + '\u00B0.');
このスクリプトから想定されるログ出力は次のとおりです。
Left: 100pt; Top: 200pt; Width: 50pt; Height: 60pt; Rotation: 90°.
size、position、rotation の各セッターは、任意の順序または組み合わせで使用できます。上記の 3 行目を次のスクリプトに置き換えると、同じ結果が得られます。
shape.setWidth(55);
shape.setRotation(90).setHeight(60).setLeft(100);
shape.setWidth(50).setTop(200);
スケーリング
上記の setWidth() と setHeight() を使用してシェイプのサイズを絶対値に設定する代わりに、scaleWidth() と scaleHeight() を使用して、相対スケーリング係数でページ要素を伸ばしたり縮めたりできます。
shape.scaleHeight(0.5).scaleWidth(2);
以下の図は、45° 回転した正方形で上記のコードがどのように機能するかを示しています。スケーリング中は、境界ボックスの左上隅は固定されます。
端に沿った反射
scaleWidth() と scaleHeight() の引数は負の値にすることができ、ページ要素を水平方向または垂直方向に反転するために使用できます。
shape.scaleWidth(-1); // Flip horizontally along the left edge of the bounding box.
shape.scaleHeight(-1); // Flip vertically along the top edge of the bounding box.
以下の図は、45° 回転したシェイプで上記のコードがどのように機能するかを示しています。ページ要素は境界ボックスのいずれかのエッジに沿って反転されますが、中央には反転されません。
線の回転
他のページ要素と同様に、線の回転は線の垂直角度ではなく、その境界ボックスの回転です。開始点と終点を指定して線を作成すると、その回転は常に 0° になります。Google スライドの UI で線の終点をドラッグすると、垂直角度と境界ボックスのサイズと位置は変更されますが、回転は変更されません。setRotation() を使用すると、線の境界ボックスが回転し、垂直角度が効果的に変更されます。そのため、2 本の線の垂直方向の角度は同じでも、境界ボックスが異なるため、サイズ、位置、回転の値が異なることがあります。
制限事項
一部のサイズと配置方法は、一部の種類のページ要素と互換性がありません。次の表は、特定のタイプのページ要素と互換性のないメソッドをまとめたものです。
| メソッド | 図形 | 動画 | 表 |
|---|---|---|---|
| getHeight(), getWidth() | ✔ | ✔ | NO（null を返します） |
| setHeight(), setWidth() | ✔ | ✔ | いいえ |
| setRotation() | ✔ | いいえ | いいえ |
| scaleHeight(), scaleWidth() | ✔ | ✔ | いいえ |
ページ要素にシアーがある場合、すべてのサイズ設定と配置方法で予期しない結果が生じる可能性があります。制限事項は変更される可能性があります。最新情報については、リファレンスをご覧ください。
アフィン変換を使用する
高度な制御を行うには、ページ要素のサイズと位置を計算し、固有の（ネイティブ）サイズとアフィン変換で調整することもできます。
Google Apps Script には、Google Slides API と同様にアフィン変換を使用するインターフェースが用意されています。
- アフィン変換のコンセプトと、ページ要素の固有（ネイティブ）サイズと変換からレンダリング サイズを推定する方法については、こちらの記事をご覧ください。Apps Script で以下を使用します。
getInherentWidth()とgetInherentHeight()（ページ要素のネイティブ サイズ用）getTransform(): ページ要素の affine 変換。
- 作成するには、こちらの記事で、アフィン変換を使用してスケーリング、回転、鏡像などを実現し、ページ要素のサイズと位置を設定する方法を説明します。Apps Script では、以下を使用します。
setTransform(): ページ要素のアフィン変換を設定します（ABSOLUTE モードと同様）。preconcatenateTransform(): アフィン変換をページ要素の現在の変換に事前に連結します（RELATIVE モードに似ています）。
次のスクリプトは、シェイプを作成してその変換を設定し、その固有のサイズを読み取り、アフィン変換を読み取ります。
var slide = SlidesApp.getActivePresentation().getSlides()[0];
var shape = slide.insertShape(SlidesApp.ShapeType.RECTANGLE);
shape.setTransform(SlidesApp.newAffineTransformBuilder()
.setScaleX(2)
.setScaleY(1)
.setTranslateX(100)
.setTranslateY(200)
.build());
Logger.log('Inherent width: ' + shape.getInherentWidth()
+ 'pt; Inherent height: '
+ shape.getInherentHeight() + 'pt.');
このスクリプトから想定されるログ出力は次のとおりです。
Inherent width: 236.2pt; Inherent height: 236.2pt.
結果のシェイプは、次の変換、レンダリングされたサイズと位置を持ちます。
AffineTransform{scaleX=2.0, scaleY=1.0, shearX=0.0, shearY=0.0, translateX=100.0, translateY=200.0}
Left: 100pt; Top: 200pt; Width: 472.4pt; Height: 236.2pt; Rotation: 0°.