Googleフォームで添付された画像をスプレッドシートで表示したい

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。
Googleフォームで添付された画像をスプレッドシート上に表示したい。

前提

ここに質問の内容を詳しく書いてください。
これまでFAXで対応していた書類の転送をGoogleフォームとGASを使って、PDF化してからメール送信という流れに変更したいと思っております。ここでは、シートに画像を挿入したいのですが、うまく進められません。

スプレッドシートは２つのシートがあります。
「フォームの回答 1」と「シート」です。
シートは、PDF化するためのシートで
A1に「◯◯各位」、G3、G4には名前等の所定の文言が記入されています。
G１にはGoogleフォームと連動した日付が入るようになっています。
A6～G35をセルの統合をして、ここに画像を入れたいのです。現状は、フォームの回答のＨ１を参照するようにしています。

フォームの回答
F列：画像URL（）
G列：個別IDのみ抽出
H列：表示用URLをくっつけたURL（https://drive.google.com/uc?export=download&id=）にG列のIDをくっつけたもの
※回答があると、Ｇ・Ｈ列に自動で反映されるようになっています。
Ｈ１セルに、Ｈ列最終行のＵＲＬを表示。

発生している問題・エラーメッセージ

シートのA6～G35（セル結合しています）に「='フォームの回答 1'!H1」を入れて画像を出したいのですが、ＵＲＬのみとなってしまいます。
URLは「https://drive.google.com/uc?export=download&id=」＋個別のidとなっています。

該当のソースコード

function form(e) {//フォームの回答を取得
var values = e.values;//フォームの回答を取得
//var stamp = values[0];//タイムスタンプを取得
var mail = values[1];//アドレス
var year = values[2];//年
var month = values[3];//月
var date = values[4];//日
var image = values[5];//画像
var birth = values[2]+values[3]+values[4];

var ss = SpreadsheetApp.getActiveSpreadsheet();//スプレッドシートを有効にする
var fmsh = ss.getSheetByName("フォームの回答 1")
var fsht = ss.getSheetByName("シート");
var lastrow = fmsh.getLastRow(); // 最終行を取得
var lastcol = fmsh.getLastColumn(); // 最終列を取得

//シートのG1に日付を入れる
fsht.getRange("G1").setValue(birth);

//ファイルIDの取得。フォームで取得したURLを分割
//分割したURLと出力用のURLくっつけた情報がフォームシートのG列H列に表示
for (let i = 2; i <= fmsh.getLastRow(); i++) {
var url = fmsh.getRange(i, 6).getValue();
var id = url.split('=')[1];//.split('/')[0];
console.log(id);
var fid = "https://drive.google.com/"+"uc?export=download&id=" + id ;
fmsh.getRange(i, 7).setValue(id); //idだけ抽出
fmsh.getRange(i, 8).setValue(fid); //上のfidをくっつけたURL
var jal = fmsh.getRange(i, 8, lastrow);

}

//ファイルIDに追加
console.log(jal);
console.log(fid);

//フォームの回答のH1セルにファイルIDのURL最終行を表示する
var ana = fmsh.getRange(2,8,lastrow).getValue();
console.log(ana);

// フォームの回答のH1セルに最終行のfidを反映＋削除（現実は、削除してから反映）
fmsh.getRange("H1").clearContent();
fmsh.getRange("H1").setValue(fid);

//画像が入ったセルのリセット＆挿入
fsht.getRange("A6").clearContent();//画像のリセット
fsht.getRange("A6").setFormula("'フォームの回答 1'!H1");

//------------------------ここまで完成-----------------------//

}

試したこと

シートのA6に
①image("URL")を入れました。（URLはフォームの回答の特定のURLしか指定できなかったので、新たな回答があっても反映されません）
⇨画像の表示はされますが、動的に動かしたいので、この方法は採用できません。

②上記のコードにあるように、フォームの回答で表示形式にしたものを「＝フォームの回答〜」のような参照の数式をシートのA6に入れました。
⇨URLのみ表示され、画像が表示されません。
シートH1セルを参照する形にしていて、動的になるので、こちらの方が分かりやすいと思い、この形にしています。

③URLをくっつける時に
var fid = " image " + "(" " +"https://drive.google.com/"+"uc?export=download&id=" + id + " " )";

で関数にしてみましたが、エラーになりました。

Answer 1

まず、表示用のURLを組み立てる部分

var fid = "https://drive.google.com/"+"uc?export=download&id=" + id ;

ここを

var fid = "https://drive.google.com/"+"uc?export=view&id=" + id ;

に修正してください。（download を viewに変える）

次に、スプレッドシートのA6セルに画像を表示する数式を設定する部分：

  fsht.getRange("A6").setFormula("'フォームの回答 1'!H1");

ここを以下のように修正してください

  fsht.getRange("A6").setFormula("=IMAGE('フォームの回答 1'!H1)")

---

修正後の全体は下記のようになります。（上記の2行[＝下記の27行目と48行目]のみ修正しており、他の部分の動作は検証していません。他の部分にはバグがなく正常に動いていることが前提です）

function form(e) {//フォームの回答を取得
  var values = e.values;//フォームの回答を取得
  //var stamp = values[0];//タイムスタンプを取得
  var mail = values[1];//アドレス
  var year = values[2];//年
  var month = values[3];//月
  var date = values[4];//日
  var image = values[5];//画像
  var birth = values[2] + values[3] + values[4];

  var ss = SpreadsheetApp.getActiveSpreadsheet();//スプレッドシートを有効にする
  var fmsh = ss.getSheetByName("フォームの回答 1")
  var fsht = ss.getSheetByName("シート");
  var lastrow = fmsh.getLastRow(); // 最終行を取得
  var lastcol = fmsh.getLastColumn(); // 最終列を取得

  //シートのG1に日付を入れる
  fsht.getRange("G1").setValue(birth);

  //ファイルIDの取得。フォームで取得したURLを分割
  //分割したURLと出力用のURLくっつけた情報がフォームシートのG列H列に表示
  for (let i = 2; i <= fmsh.getLastRow(); i++) {
    var url = fmsh.getRange(i, 6).getValue();
    var id = url.split('=')[1];//.split('/')[0];
    console.log(id);
    var fid = "https://drive.google.com/" + "uc?export=view&id=" + id;  // ＝修正＝
    fmsh.getRange(i, 7).setValue(id); //idだけ抽出
    fmsh.getRange(i, 8).setValue(fid); //上のfidをくっつけたURL
    var jal = fmsh.getRange(i, 8, lastrow);

  }

  //ファイルIDに追加
  console.log(jal);
  console.log(fid);

  //フォームの回答のH1セルにファイルIDのURL最終行を表示する
  var ana = fmsh.getRange(2, 8, lastrow).getValue();
  console.log(ana);

  // フォームの回答のH1セルに最終行のfidを反映＋削除（現実は、削除してから反映）
  fmsh.getRange("H1").clearContent();
  fmsh.getRange("H1").setValue(fid);

  //画像が入ったセルのリセット＆挿入
  fsht.getRange("A6").clearContent();//画像のリセット
  fsht.getRange("A6").setFormula("=IMAGE('フォームの回答 1'!H1)");  //＝修正＝

  //------------------------ここまで完成-----------------------//

}

Comments

[10-mo]

SaYGOさん

ご回答いただきありがとうございます。
download を viewに変更・setformulaの中身を変えることでイメージ通りに動くようになりました。ありがとうございます！

downloadではなく、viewを使うんですね。他サイト見ていると、downloadを使ったテンプレがあったので使っていました。１つ勉強になりました。

ありがとうございました！