【GAS】フォルダ内の画像をセル内に挿入する方法！

【GAS】フォルダ内の画像一覧表を作るプログラム！
早速プログラムの紹介！
コード紹介
プログラム内容説明
プログラムのポイント
まとめ

【GAS】フォルダ内の画像一覧表を作るプログラム！

<スポンサーリンク>

GASを用いて、

・スプレッドシートにグーグルドライブのファルダ内のファイルの一覧を作る

・さらに、セル内に画像を挿入する！！

プログラムを紹介していきたいと思います！

早速プログラムの紹介！

早速プログラムを紹介していきたいと思います！

今回作成するプログラムは、下のリンクのものとなっており、

・セル「G2」に入力したドライブのIDをもとに、
・ドライブの中のファイル一覧を書き出し、
・画像を表示させていくプログラムになります。

【公開用】image抜き出し - Google ドライブ

プログラムを書くのがめんどくさいという方は、ダウンロードしてまずは使用してみてください。

そのままですと閲覧のみ可能になっていますので、
ファイル→コピーを作成で、自分のスプレッドシートにコピーを作成してください。

スプレッドシートをコピーする方法(クリックして開く)

コード紹介

では、今回使用したコードを紹介したいと思います。
※ダブルクリックでコピーできます。

function getPicID2() {
   
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,1000,4).clearContent()
   
  var Driveid=  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,7).getValue()
   
   
  // フォルダ内のファイルを一括取得
  var files = DriveApp.getFolderById(Driveid).getFiles();  
//  var files = DriveApp.getFolderById("1EXmXX0jzBONqx4tsKvytHQfxLwhgYy94").getFiles();
  // 配列を宣言
  var Pic = [];
  // 配列に「名前」「URL」「ID」
  while(files.hasNext()) {
    //一括取得したファイルの中から順に一つ取り出す
    var file = files.next();

    if(file.getName().match(/jpg/) ||　file.getName().match(/png/)){
  //ドライブから画像を取得
  var PicID = file.getId()　　　//画像のファイルID
  var blob = DriveApp.getFileById(PicID).getBlob();
 
  //base64に変換
  var c_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = "data:" + c_type + ";base64, " + base64;

  var image = SpreadsheetApp.newCellImage()
                            .setSourceUrl(data)
                            .build();
  }else{
    image=""
  }

    //「名前」「説明」「URL」をそれぞれ格納
    Pic.push([
      file.getName(),
      file.getUrl(),
      file.getId(),
      "=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",
      image
    ]);
  }
 
  
  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic[0].length).setValues(Pic)
   
}

/*
参考URL

Google Apps Scriptでスプレッドシートに画像を貼り付ける【GAS】 🌴 officeの杜 🥥
年度初めは忙しく、今年度こそこれまで作りためたGASアプリを全公開しようと目論んでいるのですが、GWまでは十分な時間が取れそうにない。そんな時ようの小ネタもいくつか蓄えています。 そんな中、Googleスプレッドシートの機能増強の中で地味な
officeforest.org
*/

プログラム内容説明

ではプログラムの詳細を説明していきましょう。

フォルダの中のファイル一覧を取得

①フォルダを指定して(getFolderbyId)、その中のファイルすべてを指定します(getFiles())。

  var Driveid=  SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,7).getValue()
  
  
  // フォルダ内のファイルを一括取得
  var files = DriveApp.getFolderById(Driveid).getFiles();

ファイル一覧から情報を抜き出し、配列に代入

②ファイルの情報を配列に入れていきます。
　・hasNext()でファイルが終わるまで繰り返し、
　・Pic.push=([名前,URL,ID,image関数])の4列の配列を積み重ねていきます。
　・このリンク先を参考に、セル内に画像貼り付けできるデータに変換(blob⇒Base64データ)

  // 配列を宣言
  var Pic = [];
  // 配列に「名前」「URL」「ID」
  while(files.hasNext()) {
    //一括取得したファイルの中から順に一つ取り出す
    var file = files.next();

    if(file.getName().match(/jpg/) ||　file.getName().match(/png/)){
  //ドライブから画像を取得
  var PicID = file.getId()　　　//画像のファイルID
  var blob = DriveApp.getFileById(PicID).getBlob();
 
  //base64に変換
  var c_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = "data:" + c_type + ";base64, " + base64;

  var image = SpreadsheetApp.newCellImage()
                            .setSourceUrl(data)
                            .build();
  }else{
    image=""
  }

    //「名前」「説明」「URL」をそれぞれ格納
    Pic.push([
      file.getName(),
      file.getUrl(),
      file.getId(),
      "=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",
      image
    ]);
  }

setvaluesで書き込み。

③最後にスプレッドシートに書き込んで終わりです。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(2,1,Pic.length,Pic[0].length).setValues(Pic)

プログラムのポイント

今回のプログラムのポイントは、

①image関数を使って、セル内に画像を表示させること。

②数式の中に「”(ダブルクオーテーションマーク)」を使う時は、
　「\”」と宣言しないといけないこと。

      "=image(\"https://drive.google.com/uc?id="+file.getId()+"\")",

③push関数の使い方

    Pic.push([A, B, C, D ]);

です。

あとは、

セル内に画像を入れるためのデータ変換ですが、これはおまじないとして覚えるのがよさそうです。。

まとめ

スプレッドシートを使うと、ドライブと連携して、画像の表示などいろいろなことができます。

ぜひ、自分なりのアレンジをして、かっこいい表を作成してください！