ページ要素のサイズと位置を取得および変更するには、次の 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°.
サイズ、位置、回転のセッターは、任意の順序や組み合わせで使用できます。上記の 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 本の線の垂直方向の角度は同じでも、境界ボックスが異なるため、サイズ、位置、回転の値が異なることがあります。
制限事項
一部のサイズ設定と配置方法は、一部の種類のページ要素と互換性がありません。次の表は、特定のタイプのページ要素と互換性のないメソッドをまとめたものです。
| メソッド | 形 | 動画 | Table |
|---|---|---|---|
| getHeight(), getWidth() | ✔ | ✔ | NO（null を返します） |
| setHeight(), setWidth() | ✔ | ✔ | いいえ |
| setRotation() | ✔ | いいえ | いいえ |
| scaleHeight(), scaleWidth() | ✔ | ✔ | いいえ |
どのサイズ設定と配置方法でも、ページ要素にせん断がある場合、予期しない結果が生じる可能性があります。すべての制限は変更される場合があります。最新の情報については、リファレンスをご覧ください。
アフィン変換の使用
高度な制御のために、ページ要素のサイズと位置を、その本来備わっている（ネイティブ）サイズとアフィン変換によって計算、調整することもできます。
Google Apps Script には、Google スライド API と同様のアフィン変換インターフェースが用意されています。
- この記事では、アフィン変換のコンセプトと、ページ要素の固有の（ネイティブ）サイズと変換からレンダリング サイズを推測する方法について説明します。Apps Script で以下を使用します。
- ページ要素のネイティブ サイズには
getInherentWidth()とgetInherentHeight()を指定します。 getTransform(): ページ要素のアフィン変換。
- ページ要素のネイティブ サイズには
- 作成するには、こちらの記事で、アフィン変換を使用してスケーリング、回転、鏡像などを実現し、ページ要素のサイズと位置を設定する方法を説明します。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°.