かずきち。の日記

サーバサイドエンジニアのつぶやき

Googleドライブに格納された画像を一網打尽にGoogleスライドに転記しまくるスクリプト

Googleスライドに一網打尽に画像を追加したい

新学期の季節になると新入生などの紹介などを作ります。
職員が1人1人、パワーポイントに画像を貼っています。

氏名:山田花子
大学:〇〇大学〜〜学専攻

などを回収して、写真と一緒に紹介スライドを作るという謎タスクがあります。

がしかし、この作業は単調作業すぎて死にます。
こういうときはプログラミングの力を用いて、自動化します。
会社でもこんなことしてる人が毎週必ずいます。

GoogleスライドというのはGoogleが提供してくれているオンラインプレゼンテーションツールで

docs.google.com

ここから無料でアクセスできます。

Googleスライド」に写真を100枚挿入しておいてね


引用:
https://www.irasutoya.com/2018/10/blog-post_267.html

できなくはないですが、めちゃくちゃ大変です。
というかたまに人力でやってる人を見るんですが、ペタペタパワポを作って効率悪すぎだろと思います。
そういうときは自動化しましょう。
今の時代、基本はオンラインで解決するので会社にいなくても自宅で仕事はできますし、
ネット環境さえあれば北から南どこでも働けます。

まずはプレゼン資料の裏に自動で画像を配置するスクリプトを仕込みます。
onOpenでスライド起動時にUIに表示させます。

そうするとGoogleスライドのonOpen時に「スクリプト実行」というメニューを表示できました。
たった1枚やないかいという声が聞こえてきそうです。
もう少し画像枚数を増やします。

今度は画像を6枚ほど用意します。

www.youtube.com

するとコードで特定フォルダ内の画像をGoogleスライドに無限に貼り付けてくれます。
これで画像をペタペタ貼るという無駄な作業から開放されます。

自動化するということは誰かが失職するということ

自動化はエンジニアが行いますが、自動化する作業は
経済的インパクトがあるもの・自動化しやすいもの・危険な作業などがあげられますが、
単純作業は往々にして自動化されやすく、その作業を今までやっていた人は完全に失職します。
なので、自動化する際は他人の仕事を奪う恐れがあることを忘れずに穏便にことを済ませましょう。
ピカソの絵とか三ツ星レストランの料理は手間ひまかけて手作業でいいんですよ。
マックみたいなスピードでフォアグラにソテーとか出てきても困ります。
でも毎日のコロナウイルスの感染者の集計とかは常に100%の精度が要求されて残業とかするメリットがない。

完成見本

スライドに画像を追加するフォーム
docs.google.com

自動で画像が追加されたスライド
docs.google.com

変な画像をフォームに送信はしないでくださいね。

/**
 * このスクリプトの説明、使い方はこちら。
 * https://myfunc.jp/items/00019/index.html
 */

function onOpen() {
  var ui = SlidesApp.getUi();

  // メニューの表示名
  var menu = ui.createMenu('スクリプト実行');

  // メニューに追加するボタン
  menu.addItem('ドライブの画像を1枚ずつスライドに貼る', 'insertImageFromDrive');

  // メニューを画面に追加する
  menu.addToUi();
}


function insertImageFromDrive() {

  // uiを取得
  let ui = SlidesApp.getUi();

  // 画像が保存されているドライブのURLを入力させる
  const input = ui.prompt('URLを入力してください', 'https://drive.google.com/drive/folders/1XpKnfsqfC6ZLNzsSxfRTIFv8QvwLrhi2', ui.ButtonSet.OK_CANCEL);

  // キャンセルが押されたら終了
  if (input.getSelectedButton() == ui.Button.CANCEL) {
    return;
  }

  // 入力されたURLからフォルダのIDを取得する
  const url_drive_id = input.getResponseText().match(/https:\/\/drive.google.com\/drive\/folders\/(.*)$/)[1];

  // フォルダ、ファイルを取得
  const folder = DriveApp.getFolderById(url_drive_id);
  let files = folder.getFiles();

  // 開いているプレゼンテーションを取得
  let presentation = SlidesApp.getActivePresentation();

  // ファイルを取り出し終わるまでループ
  while (files.hasNext()) {

    // ファイルを取得
    let file = files.next();

    // MIMEタイプがimageではないものは処理しない
    if(!file.getMimeType().match(/image/)){
      continue;
    }

    // 画像のバイナリを取得
    let image_blog = file.getBlob();

    // スライドを追加する
    let slide = presentation.appendSlide(SlidesApp.PredefinedLayout.BLANK);

    // 画像をスライドに追加する
    slide.insertImage(image_blog);

    // 追加した画像を取得して、スライド中央に配置する
    let image_object = slide.getImages()[0];
    image_object.alignOnPage(SlidesApp.AlignmentPosition.HORIZONTAL_CENTER).alignOnPage(SlidesApp.AlignmentPosition.VERTICAL_CENTER);

  }
詰みポイント

このスクリプトの一番の難関はblob形式で画像を取得しなければいけないところです。
人間だったら、「田中さんの写真貼っておいて」っていわれればわかりますが…
機械は、「どの田中だよ」っていう話です。

わかりやすく説明をするためにカーナビを想像してください。
もしもあなたがスカイツリータワーに行きたいのであれば

スカイツリーに行きたい」

みたいな形式で入力をします。
しかし機械はゆらぎに弱いので、どこの「スカイツリー」っていうのが必要です。

そうすると機械は困ります。
墨田区スカイツリーか、東武ワールドスクウェアスカイツリーかわからないわけです。
もしかするとスカイツリー忘れ物総合受付とか出てくるかもしれません。
これは現実世界のゆらぎなわけで、機械はピンポイントに指定をしてほしいのです。

それを解決するのがマップコードという考え方で

help.mapion.co.jp
引用:
https://help.mapion.co.jp/search/mapcode.html

マピオンが発表している。

GoogleAppsScriptにも似たような概念があり、blobという発想があります。
blobというのはコードから「一意」にオブジェクトを指定するために使います。

// 画像のバイナリを取得
let image_blog = file.getBlob();

画像のバイナリを指定するので、ミスがないわけですね。
使用用途ですが、結婚式とか新入社員紹介とかで威力を発揮します。
とりあえず仕事は間違いなく効率化できますので、仕事でGoogleスライドを使う人は参考にしてみてください。
使い方わからんという方はコード実装・コード配置・コード実行まで行います。

GASで画像複数のスライド紹介を自動作成します 結婚式・部員紹介などで大量画像のスライド作成の自動化