2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめてのアドベントカレンダーAdvent Calendar 2023

Day 9

GoogleDriveに保存された画像を「共有URL設定をせず」にImage関数で表示する

Posted at

※最初に注意なのですが、セキュリティ上に問題がある可能性がある(筆者自身理解不足なところもあり…)内容なので、ご活用される際は追加で情報収集などを実施いただけますと幸いです。

葛藤

最近、スプレッドシートにimage関数を用いてGoogle Drive内の画像を表示する機会がありました。
基本的に、GoogleDrive内の画像を表示するには以下のステップが必要になります。

  1. 画像の共有設定を「リンクを知っている全員」に変更

  2. 共有URLを取得

  3. 共有URLを以下のように変更(-YOURID-画像ごとでユニーク)
    . 変換前:https://drive.google.com/file/d/-YOURID-/view?usp=sharing
    . 変更後:https://drive.google.com/uc?export=download&id=-YOURID-

  4. 変換後のURLをimage関数に入力

スクリーンショット 2023-12-02 17.18.53.png

めんどい。。。

外部からのアクセスになるので当たり前といえば当たり前なのですが…
「GASを用いて大量の画像のIDを取得→関数に組み込んだ文字列を生成してスプシに一括貼り付け」
を行いたかった自分に取ってはかなりしんどい事実でした。

解決策

そこで試行錯誤をしていると、「lh3.google.com」という、Googleのサービスで使用されている一部の画像やリソースのホスティングドメイン(chatGPT曰く)に出会いました。

これをどのように用いるかというと…

. 変換前:https://drive.google.com/file/d/-YOURID-/view?usp=sharing
. 変更後:https://lh3.google.com/u/0/d/-YOURID-

上記のように変換してやるだけで、共有設定を変更しなくても無事にスプレッドシートに表示されました。

これがなんでうまく行っているのかわからないので、恐怖でしかありません。個人用のデータで行っているのでセキュリティうんぬんはどうでもいいのですが…
誰か教えてください。

ということで、画像ID取得→URL変換→スプシに貼り付けまでのコードもおいておきます。

image関数の貼り付け
function getImagesAndDisplay() {
  // 画像が格納されているフォルダを取得
  var imageFolderID = "YOURID";
  var imageFolder = DriveApp.getFolderById(imageFolderID);

  // フォルダ内の画像ファイルのIDを取得
  var imageFileIds = getFolderImageIds(imageFolderID);

  // スプレッドシートに変換した形式で画像のURLを書き込む
  var formulas = imageFileIds.map(function(fileId) {
    return ['=IMAGE("https://lh3.google.com/u/0/d/' + fileId + '")'];
  });

  // スプレッドシートのA2セルから下の行に一括で記載
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.getRange(sheet.getLastRow() + 1, 1, formulas.length, 1).setFormulas(formulas);
}

// フォルダ内の画像ファイルのIDを取得する関数
function getFolderImageIds(folderId) {
  var folder = DriveApp.getFolderById(folderId);
  var imageIds = [];

  // フォルダ内のすべてのファイルを取得
  var files = folder.getFiles();

  while (files.hasNext()) {
    var file = files.next();

    // ファイルが画像であるかどうかを判定
    if (isImageFile(file)) {
      imageIds.push(file.getId());
    }
  }

  return imageIds;
}

// ファイルが画像であるかどうかを判定する関数
function isImageFile(file) {
  var mimeType = file.getMimeType();
  return mimeType.startsWith('image/');
}

実行するとこんな感じです。
スクリーンショット 2023-12-02 17.37.00.png

メリー・クリスマス!!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?