【Googleスライド】GASでテキストの態を四角(図形)に変換する方法を公開

Google App Script

はじめに

Googleスライドを使用してプレゼンテーションを作成する際、
テキストを迅速に図形(四角形)に変換する方法を知っていると非常に便利です。
特に多くのテキストを図形に変換したい場合、手動で一つずつ図形を作成するのは手間がかかります。
そこで、Google Apps Scriptを使ってこの作業を自動化する方法をご紹介します。

課題感

Googleスライドでプレゼンテーションを作成する際、大量のテキストを手動で四角(図形)に変換するのは非常に手間がかかり、時間がかかる作業です。
特に、一貫した見栄えを保つために同じスタイルで図形を作成する必要がある場合、ミスも発生しやすくなります。このような手動のプロセスは非効率であり、
プレゼンテーションの作成時間を大幅に増やしてしまいます。

この課題を解決するために、Google Apps Scriptを使用して、テキストを自動的に四角形の図形に変換する方法を紹介します。このスクリプトを使うことで、効率的かつ正確に図形を作成できるようになります。

アウトプットイメージ

設定方法

以下のコードを貼り付けて、スライド画面にテキスト情報を入力するだけで作成可能。

Google App Scriptコード

function onOpen() {
  const menu = SlidesApp.getUi().createMenu('追加の機能');
  menu.addItem('テキストボックスを図形に変換する', 'text2box');
  menu.addToUi();
}

function text2box() {
  const presentation = SlidesApp.getActivePresentation();
  const selection = presentation.getSelection();
  const selectionType = selection.getSelectionType();
  const new_slide = presentation.appendSlide();

  const [x_max, y_max, x_size, y_size] = [presentation.getPageWidth(), presentation.getPageHeight(), 300, 40];
  let [x_left, y_left] = [0, 0];
  let [x_right, y_right] = [x_max / 2, 0]; // 右側の開始位置を中央に設定

  const isJapanese = text => {
    // 日本語文字を含むかどうかをチェックする簡単な正規表現
    return /[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF]/.test(text);
  };

  const create_box = shape => {
    const text_array = shape.getText().asString().split("\n");
    text_array.forEach(text => {
      if (text != "") {
        let x, y;
        if (isJapanese(text)) {
          // 日本語の場合、右側に配置
          x = x_right;
          y = y_right;
          y_right += y_size;
          if (y_right + y_size > y_max) {
            x_right += x_size;
            y_right = 0;
          }
        } else {
          // 英語の場合、左側に配置
          x = x_left;
          y = y_left;
          y_left += y_size;
          if (y_left + y_size > y_max) {
            x_left += x_size;
            y_left = 0;
          }
        }

        const new_shape = new_slide.insertShape(SlidesApp.ShapeType.RECTANGLE, x, y, x_size, y_size);
        new_shape.getText().setText(text);
              // 枠線をなくす
        // new_shape.getLine().setWeight(0);
        // 枠線をなくす(修正部分) NG
        new_shape.getBorder().setTransparent();

        // テキストのスタイルを設定(例:フォントサイズを10ptに設定)
        new_shape.getText().getTextStyle().setFontSize(10);

        // テキストの色を白に設定
        new_shape.getText().getTextStyle().setForegroundColor('#FFFFFF'); // 白色

        new_shape.getFill().setSolidFill("#4a4d4b");
      }
    });
  };

  if (selectionType == SlidesApp.SelectionType.PAGE_ELEMENT) {
    selection.getPageElementRange().getPageElements().forEach(item => {
      if (item.getPageElementType() === SlidesApp.PageElementType.SHAPE) {
        create_box(item.asShape());
      }
    });
  } else {
    selection.getCurrentPage().getShapes().forEach(s => create_box(s));
  }

  new_slide.selectAsCurrentPage();
}

実装方法(Google Apps Scriptがわからない人でも簡単)

上記のGoogle App Scriptを、入力画面から入力し、ブラウザの更新ボタン(F5)を押すと、
「追加の機能」というタブが出現するので、そこから「テキストボックスを図形に変換する」をクリックすると、
図形が完成します。