Googleスライド資料作成の時短術！画像自動挿入で作業効率UP

「資料作成に追われて時間がない！」「毎回同じ画像を探すのが面倒…」そんな悩みを抱えているビジネスパーソンは多いはず。

Google Apps Script (GAS) を活用すれば、Googleドライブに保存した画像をGoogleスライドに自動挿入できます。このテクニックを使えば、資料作成の効率が飛躍的にアップすること間違いなし！

誰でも簡単に使える！

必要なアイコンをワンクリックで挿入
画像ダウンロードは何回も不要！
プレゼン資料の準備時間も大幅削減！

Contents

画像自動挿入の準備【GASでスライド作成を効率化】
- Googleドライブに画像を保存
- スクリプトエディタを開く
自動挿入スクリプトの作成【GASで画像を呼び出す】
- フォルダIDと画像ファイル名を変更
- スクリプトを実行
応用編：複数画像の一括挿入
メニュータブから使いたい画像を自動挿入
- Menuオブジェクト
- 自動挿入のスクリプト実行
まとめ

画像自動挿入の準備【GASでスライド作成を効率化】

まずは、GASで画像を自動挿入するための準備を行いましょう。必要なものは、GoogleアカウントとGoogleドライブに保存した画像だけです。

Googleドライブに画像を保存する際は、専用のフォルダを作成しておくと、後から画像を探しやすくなります。

＼GASを学ぶならこの本がおススメ！！／

Google Apps Script目的別リファレンス　実践サンプルコード付き

created by Rinker

¥3,080 (2024/12/03 22:15:10時点楽天市場調べ-詳細)

Googleドライブに画像を保存

スライドで使用したい画像をGoogleドライブに保存します。専用のフォルダを作成しておくと、後から画像を探しやすくなります。例えば、「プレゼン資料用画像」のようなフォルダ名で管理すると便利です。

◇今回つかうアイコン◇
（商談時、取引の流れを説明するのにつかうアイコンです。）

人
メール
ファイル

スクリプトエディタを開く

Googleスライドを開き、「拡張機能」→「Apps Script」の順にクリックすると、スクリプトエディタが開きます。ここでGASのコードを記述していきます。

自動挿入スクリプトの作成【GASで画像を呼び出す】

スクリプト内に記載されているフォルダIDと画像ファイル名.pngは、ご自身の環境に合わせて変更してください。

フォルダIDは、GoogleドライブのフォルダURLの末尾にある文字列です。画像ファイル名は、拡張子（.pngなど）を含めて正確に入力しましょう。

これらの情報を正しく設定することで、GASがあなたの意図した画像を正確に認識し、スライドに挿入してくれます。

【コピペでOK】Googleスライドテンプレート自動コピーする方法スマートに会議資料の準備をしよう仕事のなかで、業務時間をかなり消費してしまうのが会議資料の準備。以前はPowerPointを利...

フォルダIDと画像ファイル名を変更

スクリプト内のフォルダIDと画像ファイル名.pngを、ご自身の環境に合わせて変更してください。フォルダIDは、GoogleドライブのフォルダURLの末尾にある文字列です。画像ファイル名は、拡張子（.pngなど）を含めて正確に入力しましょう。

function icon_insert_1() {
  
  const folder_id = "****************"; // 画像ファイルが保存されているフォルダのID
  const image_name = "人.png"; // 挿入する画像ファイル名（※自由記述です。）

  let folder = DriveApp.getFolderById(folder_id);
  let image = folder.getFilesByName(image_name).next(); // 名前からファイル取得
  let presentation = SlidesApp.getActivePresentation();
  let activeSlide = presentation.getSelection().getCurrentPage(); // 現在の選択スライドを取得

  activeSlide.insertImage(image.getBlob());
  
}

スクリプトを実行

スクリプトエディタのツールバーにある実行ボタンをクリックすると、スクリプトが実行され、指定した画像がスライドに挿入されます。

応用編：複数画像の一括挿入

GASの機能をさらに活用して、複数の画像を挿入したり、カスタムメニューを作成したりすることも可能です。複数の画像を挿入する場合は、複数選択して一括挿入も可能です。

また、カスタムメニューを作成すれば、スクリプトエディタを開かずに、ボタン一つで画像を挿入できるようになります。GASを使いこなせば、資料作成の幅が広がり、より効率的に作業を進めることができます。

2つ目、3つ目・・を追加する場合は、メニュータブから一括挿入

ステップ1: Google Driveから画像リストを取得する

function showImageSelectionPopup() {
  const folderId = "****************"; // 画像ファイルが保存されているフォルダのID
  const folder = DriveApp.getFolderById(folderId);
  const files = folder.getFiles();
  
  let images = [];
  while (files.hasNext()) {
    let file = files.next();
    if (file.getMimeType().startsWith("image/")) {
      images.push({
        id: file.getId(),
        name: file.getName()
      });
    }
  }

  const template = HtmlService.createTemplateFromFile('ImageSelection');
  template.images = images; // 画像リストをテンプレートに渡す
  const htmlOutput = template.evaluate().setWidth(400).setHeight(600);
  SlidesApp.getUi().showModalDialog(htmlOutput, '画像選択');
}

ステップ2: HTMLサービスでポップアップ表示

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .image-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 左詰めにする */
        padding-left: 20px; /* 左のパディングを追加 */
      }
      .image-item {
        margin: 10px;
        text-align: left; /* テキストを左詰めにする */
      }
    </style>
  </head>
  <body>
    <h3>画像を選択してください</h3>
    <div class="image-container">
      <? for (var i = 0; i < images.length; i++) { ?>
        <div class="image-item">
          <input type="checkbox" id="image_<?= i ?>" name="image" value="<?= images[i].id ?>">
          <label for="image_<?= i ?>"><?= images[i].name ?></label>
        </div>
      <? } ?>
    </div>
    <button onclick="insertSelectedImages()">選択した画像を挿入</button>
    <script>
      function insertSelectedImages() {
        const selectedImages = [];
        document.querySelectorAll('input[name="image"]:checked').forEach(checkbox => {
          selectedImages.push(checkbox.value);
        });
        google.script.run.insertImagesToSlide(selectedImages);
        google.script.host.close();
      }
    </script>
  </body>
</html>

ステップ3: ユーザーが選択した画像をGoogleスライドに挿入

function insertImagesToSlide(imageIds) {
  try {
    const presentation = SlidesApp.getActivePresentation();
    const slide = presentation.getSelection().getCurrentPage();
    
    imageIds.forEach(imageId => {
      const file = DriveApp.getFileById(imageId);
      const imageBlob = file.getBlob();
      slide.insertImage(imageBlob);
      Logger.log("Image inserted successfully: " + file.getName());
    });
  } catch (e) {
    Logger.log("Error inserting images: " + e.toString());
  }
}

メニュータブから使いたい画像を自動挿入

わざわざ、スクリプト画面から実行ボタンを押すのも大変ですよね。そういうときは、メニュータブにオリジナルのボタンを追加することが可能。

コレを実装しておけば、作りたいスライド資料にスムーズに画像挿入が可能です。以下のスクリプトでそのメニューを追加することが可能です。

function Custom_menu() {
  let ui = SlidesApp.getUi()
  
  //メニュー名は自由に入れてください
  let menu = ui.createMenu("アイコン挿入");
  
  //メニューに実行ボタン名と関数を割り当て
  menu.addItem("ボタン名1","スクリプト名1");
  
  //スプレッドシートに反映
  menu.addToUi();
}