Apps Scriptリファレンス: Apps Script Reference |障害・課題追跡: IssueTracker |Google Workspace: Status Dashboard - Summary

2025年5月9日金曜日

Google Formsで画像を追加したい(addImageItem)


今回はGoogleフォームに「画像を追加」してみます


フォームの編集画面


複数の経路から画像の挿入が可能
  • アップロード
  • ウェブカメラ
  • URL
  • 写真
  • Googleドライブ
  • Google 画像検索


今回はGoogleドライブの画像を挿入してみます

Googleドライブで対象のファイルを選択して右下の「挿入」ボタンをクリックします



フォームに画像が追加されます



タイトルや質問を入力してフォームを調整します


フォームの回答画面





Apps Script で作成する場合

以下の Code.gs で formName, description, imageTitle, imageHelpText, questionTitle, colors, fileId の値を書き換えて

createMultipleChoiceWithImage() を実行すると

上記のような「画像を追加」したフォームが作成されます



Code.gs
function createMultipleChoiceWithImage() {
const formName = 'Favorite Color Survey';
const description = 'Please tell us your favorite color.';
const imageTitle = 'Color Samples';
const imageHelpText = 'Please refer to these color samples before answering.';
const questionTitle = 'What is your favorite color?';
const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Other'];
const fileId = 'FILE_ID';

// フォーム作成
const form = FormApp.create(formName);
form.setDescription(description);

// Driveから画像取得して追加
const imageFile = DriveApp.getFileById(fileId);
const imageBlob = imageFile.getBlob();

form.addImageItem()
.setImage(imageBlob)
.setTitle(imageTitle) // 画像のタイトル
.setHelpText(imageHelpText); // 説明文(任意)

// Multiple choice 質問を追加
const item = form.addMultipleChoiceItem();
item.setTitle(questionTitle)
.setChoiceValues(colors)
.setRequired(false);
form.setPublished(false);

Logger.log('Form Edit URL: ' + form.getEditUrl());
}


Tips

上記の Code.gs ではGoogleドライブ内の画像を挿入しましたが

URLを指定して読み込む場合は UrlFetchApp を使う

※ 元の画像のファイルフォーマットによってはエラーが出るかもしれません
(今回手元で試した画像はPNG)


URLを指定して読み込むコード

Code.gs
function createImageFromUrl() {
const formName = 'Form with Image';
const description = 'Inserted from URL.';
const imageTitle = 'Image';
const imageHelpText = 'This image is inserted from a URL.';
const imageUrl = 'URL'; // ← ここに画像のURLを入れる

// フォーム作成
const form = FormApp.create(formName);
form.setDescription(description);

// URLから画像を取得
const image = UrlFetchApp.fetch(imageUrl);

form.addImageItem()
.setImage(image)
.setTitle(imageTitle) // 画像のタイトル
.setHelpText(imageHelpText); // 説明文(任意)

form.setPublished(false);

Logger.log('Form Edit URL: ' + form.getEditUrl());
}


Reference

addImageItem() 

Class ImageItem 


Latest post

Google Formsで選択肢に応じて次に表示するセクションを変えたい(UI操作)

Googleフォームでは回答に応じて次に進むページを分岐することができます 例えば SECTION 1で 1つ目の回答を選んだらSECTION 2へ移動する 2つ目の回答を選んだらSECTION 3へ移動する このような分岐ができます (Apps Script の FormApp...