ページ要素のサイズ設定と配置

ページ要素のサイズと位置を取得および変更するには、次の 2 つの方法があります。

1. サイズと位置にゲッター関数とセッター関数を使用しています。
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 つの線の視覚的な垂直角度は同じでも境界ボックスは異なるため、サイズ、位置、回転の値はそれぞれ異なります。

制限事項

一部のサイズ設定と配置方法は、一部のタイプのページ要素と互換性がありません。以下の表は、特定のタイプのページ要素と互換性がないメソッドをまとめたものです。

Methods	形	動画	テーブル
getHeight(), getWidth()	✔	✔	NO（null を返します）
setHeight(), setWidth()	✔	✔	×
setRotation()	✔	×	×
scaleHeight(), scaleWidth()	✔	✔	×

どのサイズ設定と配置方法でも、ページ要素にせん断がある場合、予期しない結果が生じる可能性があります。すべての制限は変更される可能性があります。最新情報については、リファレンスをご覧ください。

アフィン変換の使用

高度な制御を行うために、ページ要素のサイズと位置は、固有の（ネイティブ）サイズとアフィン変換を使用して計算および調整することもできます。

Google Apps Script には、GoogleSlides 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°.