2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

フォームで入力した画像をスプレッドシートのセル内に埋め込みたい

Posted at

やりたいこと

フォームで入力した画像を・・・
image.png

スプレッドシートのセル内に埋め込みたい
image.png

前提として

フォームに画像を入力するとどうなる?

フォームで画像を入力した場合、画像はフォーム作成者のGoogleドライブに保存される。
フォームの回答はスプレッドシートに保存されるが、画像の場合はこのドライブに保存した画像のURLが入る。
スクリーンショット 2023-01-21 233124.png

GASを使ったやり方

以下の手順で実現する。
①回答のあるスプレッドシートから画像URLを取得する
②画像URLから画像IDを取得する
③画像IDから画像のBLOBデータを取得する
④BLOBデータからCellImageオブジェクトを生成する。
⑤画像を表示したセルに、CellImageオブジェクトを値として設定(setValue)する。

②~④を関数にしたものが以下です。

手順②~④まで
/**
 * ドライブ内の画像をセルに挿入できる形式に変換する
 * imageUrl: Googleドライブ内の画像URL
 */
function getCellImagefromUrl(imageUrl) {

  // ②URLからIDを取得
  const imageId = imageUrl.substring(imageUrl.indexOf("id=")+3);

  // ③画像IDから画像のBLOBデータを取得する
  var blob = DriveApp.getFileById(imageId).getBlob();
 
  // BLOBデータをbase64でエンコード
  var c_type = blob.getContentType();
  var base64 = Utilities.base64Encode(blob.getBytes());
  var data = "data:" + c_type + ";base64, " + base64;

  // ④BLOBデータからCellImageオブジェクトを生成する
  var image = SpreadsheetApp.newCellImage()
                            .setSourceUrl(data)
                            .build();

  return image
}

スプレッドシート上でのやり方

①対象セルを選択した状態で
image.png

②ヘッダーの「挿入」>「画像」>「セル内に画像を挿入」
image.png

③あとは画像を選択するだけ!
image.png

image.png

2
2
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
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?