Amazon10/19まで!プライム感謝祭開催中!セール会場へ

Googleスライド│ドライブの画像を好きな形で並べて挿入する方法

google-slides-incert-images

Googleドライブの画像をGoogleスライドへ挿入すること自体は簡単ですが、きれいに並べるのは手間がかかります。

作業を繰り返す場合は、雛形を作成して画像を差し替える方法もありますが、枚数が多いと手作業での配置は非常に大変です。

そこでGoogle Slides API を活用して、画像を自動で並べて挿入する手順を検証しました。

本記事では、GoogleスライドにGoogleドライブの画像を好きな配置で並べて一括挿入する方法を解説します。

Googleスライドにドライブの画像を並べて一括挿入する処理を行う前の状態。
BEFORE
Googleスライドにドライブの画像が好きな形で並べて挿入された後の状態。
AFTER
目次

Google Slides API とDrive APIの準備

まず、Google Apps Script(GAS)のエディタを開きます。

エディタ左メニューの「サービス」横にある「+」アイコンをクリックし、Google Slides API とDrive APIを追加します。

Google Apps ScriptのエディタでサービスからGoogle Slides APIとDrive APIを追加する画面。

APIの追加が完了したら、事前の準備は完了です。

Googleスライドでドライブの画像を好きな形で並べて挿入する手順

実際の手順を順を追って解説します。

今回は、あらかじめ雛形(テンプレート)のスライドを作成しておき、スクリプトで画像を差し替える方法を採用しています。

STEP
テンプレートの作成

まず、Googleスライドで配置用の雛形(テンプレート)を作成します。

並べたい画像の枚数や配置の形に合わせて図形や枠を作成しておきます。

並べたい画像の枚数や配置に合わせて図形や枠を作成した雛形スライド。

次に、画像を挿入したい本番用のスライドを用意します。

画像を挿入するために用意した本番用のGoogleスライド。

あわせて、挿入対象となる画像ファイルをGoogleドライブ内のフォルダに格納しておきます。

挿入対象となる画像ファイルをGoogleドライブ内のフォルダに格納した様子。
  • テンプレート(雛形)スライドの用意
  • 画像を挿入する本番スライドの用意
  • 挿入する画像ファイル(Googleドライブ)の用意
STEP
GASのコードをコピペ

Google Slides APIとDrive APIを追加したGASのスクリプトエディタ画面に戻ります。

スクリプトエディタに下記のコードを貼り付けます。

function incertImagesSlide() {

  var DRIVE_FOLDER_ID = "画像が格納されているフォルダID";
  var INCERT_SLIDE_ID = "画像を追加したいGoogleスライドのID";
  var TEMPLATE_SLIDE_ID = "テンプレートのGoogleスライドのID"
  var num = 20;//差し替えたい画像の枚数
  
  build();

  function build() {
    var images = [];
    var childList = Drive.Children.list(DRIVE_FOLDER_ID, { q: "mimeType contains 'image/' and trashed = false" }).items;
    for (var i in childList) {
      images.push(Drive.Files.get(childList[i].id).thumbnailLink);
    }

    var template = SlidesApp.openById(TEMPLATE_SLIDE_ID);
    var template_slides = template.getSlides();
    var nbOfImages = images.length;
    var card_template;

    var cards = [];
    for (var crd = 0; crd < num; crd++) {
      var symbols = [0];
      for (var sym = 1; sym < num; sym++) {
        symbols.push(crd * (num - 1) + sym);
      }
      cards.push(symbols.slice());
    }

    card_template = template_slides[0];    
    var presentation = SlidesApp.openById(INCERT_SLIDE_ID);

    loopThroughDeck:

    for (var i = 0; i < cards.length; i++) {
      var cardContent = cards[i];

      for (var j = 0; j < cardContent.length; j++) {
        if (cardContent[j] > nbOfImages) continue loopThroughDeck;
      }

      var card = presentation.appendSlide(card_template);
      var placeholders = card.getImages();
      try {
        for (var j = 0; j < placeholders.length; j++) {
          placeholders[j].replace(images[cardContent[j]]);
        }
      } catch (e) { }        
    }
    presentation.saveAndClose();
  }
}

コード上部にある設定用の各項目に、該当するIDや数値を入力します。

  • 画像が保存されているフォルダのID
  • 画像を挿入したいGoogleスライドのID
  • テンプレート用GoogleスライドのID
  • 差し替え対象となる画像の枚数
スライドのIDや画像の枚数などを設定したスクリプトのコード画面。
STEP
GASの実行

コードを保存し、エディタ上部の「実行」ボタンをクリックします。

処理が完了すると、指定したスライド上に画像が並んだ状態で差し込まれます。

GASの実行完了後、指定したスライド上に画像が並んで差し込まれた結果。

Googleスライドのほかの操作や関連する活用法は、下記のリンクから確認できます。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/cg-method-codeにもまとめています。

Googleスライドの記事は、ほかにもあります。

まとめ

Googleスライドに大量の画像を一定の配置で差し込みたい場合に役立ちます。

スライド作成業務を効率化したい場合は、ぜひ試してみてください。

よくある質問:GASでドライブの画像をスライドへ並べて挿入するときのチェックリスト

このスクリプトは、何をしますか?

Googleドライブのフォルダにある画像を、Googleスライドへ、好きな配置で並べて一括挿入します。あらかじめ雛形(テンプレート)のスライドを作成しておき、スクリプトで画像を差し替える方法です。

事前に、何を準備しますか?

GASのエディタ左メニューの「サービス」横にある「+」アイコンから、Google Slides APIとDrive APIを追加します。あわせて、配置用の雛形スライド、画像を挿入したい本番用のスライド、挿入する画像ファイルを入れたGoogleドライブのフォルダを用意します。

雛形のスライドは、どう作りますか?

並べたい画像の枚数や配置の形に合わせて、図形や枠を作成します。枠の数が、差し替える画像の枚数に合っているか確認してください。

コードの、どこを変更しますか?

コード上部の設定用の項目に、画像が保存されているフォルダのID、画像を挿入したいGoogleスライドのID、テンプレート用GoogleスライドのID、差し替え対象となる画像の枚数を入力します。

実行すると、どうなりますか?

コードを保存し、エディタ上部の「実行」ボタンをクリックします。処理が完了すると、指定したスライド上に画像が並んだ状態で差し込まれます。初回は権限の確認が表示される場合があるため、内容を確認してから承認してください。

本番のスライドで、いきなり試してもよいですか?

おすすめしません。本番のスライドを書き換える処理のため、まずスライドとフォルダを複製したコピーと、少数の画像で試してください。画面や仕様は変わることがあるため、最新の操作はGoogle公式のドキュメントで確認してください。

画像の枚数が多いときは?

枚数が多いと手作業での配置は大変ですが、スクリプトの実行時間や割当の制限を受ける場合があります。最初は少ない枚数で試し、制限は公式のドキュメントで確認してください。

エラーが出たときは?

設定した各IDが正しいか、APIを追加したか、フォルダとスライドの権限があるかを確認します。エラーが出た場合は、実行ログのメッセージを確認し、少数の画像で再度試してください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

スプレッドシート・GASのおすすめ書籍

作業環境の作り方

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次