ページ要素のサイズ設定と配置 (original) (raw)

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

コレクションでコンテンツを整理必要に応じて、コンテンツの保存と分類を行います。

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

サイズと位置のゲッター関数とセッター関数を使用する。
アフィン変換を操作し、getTransform() 関数と setTransform() 関数を使用して固有のサイズを維持します。

ページ要素のプロパティの読み取り

サイズと回転

図に示すように、サイズと位置は、回転していないレンダリングされたページ要素の境界ボックスを基準にして測定されます。

左と上: ページの左上隅から、回転していない境界ボックスの左上隅までの距離。getLeft() と getTop() を使用して値を読み取ります。
Width と Height: 回転していない境界ボックスの幅と高さ。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()	✔	✔	いいえ（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°.