GASでスプレッドシートの値を元にスライドを作成する。今回は1スライドあたり3枚の画像を挿入する。

タイトルのものをペアプロ（モブプロ）+AI（ChatGPT）で作成しました。
みんなでわちゃわちゃ喋りながらコードが完成して、すっごい楽しかった！！

みんなで作ったものを、忘れないうちに、さも自分の手柄かのようにnoteにしたためマッスル。

今回の完成形イメージ

スライド一枚あたりに、画像3つとそれに呼応する単語を挿入します。
単語学習や教育現場で使える感じのものになるんではないでしょうか。

作り方

用意するもの

• ネタ元となるスプレッドシート（今回はここにコンテナバインドでコード書いた）

• スライド複製元のマスタ（今回はマスタを複製する形にしたけど、新規に作るのでもいいかもしれない）

コード　makeSlide

命名とか、3行分の処理はもっと他に良いやり方があるような気がしつつ。
最後の方は、画像のセンタリングや文字の大きさ、位置の調整です。
for文で回しているのもそうだし、こういうコピーしたり作成したり文字が画像挿入したりは処理が重めになるので、分量が多いと6分の壁が立ちはだかりそう。

/**
 * マスタースライドから任意の名前でコピーしたスライドに、1スライドあたり3つの画像とそれに呼応する言葉を挿入する
 * 
 * 参考
 * https://myfunc.jp/items/00019/index.html
 * https://www.cg-method.com/slides-incert-images/
 * https://www.ka-net.org/blog/?p=10866
 * https://chat.openai.com/chat
 * 
 * リファレンス
 * https://developers.google.com/apps-script/reference/slides/image#alignOnPage(AlignmentPosition)
 */
function makeSlide() {
  const master_presentation_id = `＊＊＊＊＊＊＊＊＊＊`;
  const presentation_name = Browser.inputBox(`スライドに付けたい名前を入力してください`)
  const presentation = copySlide(master_presentation_id, presentation_name);

  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("シート1");
  const records = sheet.getDataRange().getValues();
  records.shift();

  //スライド1枚に対して3レコード（3行分）のデータを反映させる
  for (let i = 0; i <= records.length - 1; i += 3) {
    const word1 = records[i][0];
    const url1 = records[i][1];
    const word2 = records[i + 1][0];
    const url2 = records[i + 1][1];
    const word3 = records[i + 2][0];
    const url3 = records[i + 2][1];

    const slide = presentation.appendSlide(SlidesApp.PredefinedLayout.BLANK);

    // スライドに3つの画像を配置します
    //insertImage(xxx, left, top, width, height) 
    const image1 = slide.insertImage(url1, 25, 20, 250, 250);
    const image2 = slide.insertImage(url2, 320, 20, 250, 250);
    const image3 = slide.insertImage(url3, 570, 20, 250, 250);

    // スライドに3つのテキストを配置します
    //insertTextBox(text, left, top, width, height) 
    const text1 = slide.insertTextBox(word1, 25, 300, 250, 100);
    const text2 = slide.insertTextBox(word2, 320, 300, 250, 100);
    const text3 = slide.insertTextBox(word3, 570, 300, 250, 100);

    image2.alignOnPage(SlidesApp.AlignmentPosition.HORIZONTAL_CENTER)
    text2.alignOnPage(SlidesApp.AlignmentPosition.HORIZONTAL_CENTER)

    text1.getText().getTextStyle().setFontSize(30)
    text1.getText().getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER)
    text2.getText().getTextStyle().setFontSize(30)
    text2.getText().getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER)
    text3.getText().getTextStyle().setFontSize(30)
    text3.getText().getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER)

  }
}

コード　onOpen

スプレッドシートにオリジナルのメニューを出現させるやつです。

/**
 * スプレッドシートにオリジナルのメニューを表示させる
 */
function onOpen() {
  const ui = SpreadsheetApp.getUi();

  const menu = ui.createMenu(`アプリメニュー`);

  menu.addItem(`スライド作成`, `makeSlide`);
  menu.addToUi();
}

ChatGPT

ちゃんとV8で指定するとそれっぽいのを返してくれることもある。
AI相手に問題を細分化した部分を壁打ちしながらペアプロするのはアリだなと思った。

感想

普段あんまりスライドのメソッドは触っていなかったので、勉強になりました。
スプレッドシート＞シート＞セル　みたいな階層構造がスライドでどうなっているのか、
プレゼンテーション＞スライド（それぞれのスライド1枚）＞画像やテキスト　というざっくりした構造をイメージしつつ、詳しいところはまだまだだなあ〜。
リファレンスの見方も、人のやり方や考え方を聞けてすごくためになりました。
AIやべーっすね（語彙力）

今回はURLから画像をそのまま挿入する形にしましたが。ドライブ内にある画像を利用する場合はblobをどうこうする必要がありそうです。

また、いらすとやさんの画像については「素材を21点以上使った商用デザイン」とか、その辺りの利用規約はご注意ください。

ご利用について

いわプロさん、ホッタさん、な〜さん、ありがとうございました！

#ノンプロ研
#GAS
#ペアプロ
#モブプロ