質問

⚠️ この事例は公開されてから1年以上経過しています。 情報が古い可能性がありますので、ご注意ください。

🕓 事例公開日 : 2024-10-01

【背景】

画面上で画像リンクをクリックすると別タブで画像が開くようにしている。その画像を右クリックから「名前を付けて画像を保存」で保存したいが、ファイルの種類が「すべてのファイル」と表示され、JPEG Image等の適切な形式が表示されない。


レスポンスヘッダのCache-Controlに「no-store」が含まれていることが原因と考え、setHeaderメソッドでCache-Controlを上書きしたが、効果がなかった。

---

Q1.

プログラムまたは設定のどこを修正すれば、右クリックから画像を正常に保存できるようになるか教えてください。

---

Q2.

最小限のプログラムで検証したところ画像表示はできたが、依然として保存ができない。どのような対応が必要か教えてください。

---

回答

A1.

まず問題の切り分けのため、最小限のプログラムで動作確認を行ってください。以下のような簡潔なコードで検証することをお勧めします。

function setImageFile(request) {var response = Web.getHTTPResponse();response.setContentType("image/jpeg");var storage = new PublicStorage("sample.jpg");response.sendMessageBodyAsBinary(storage);}

このコードで期待通りの動作になるか確認し、順次ロジックを追加しながら問題箇所を特定してください。Cache-ControlやContent-Encodingレスポンスヘッダの有無による動作の違いも切り分け観点として確認することをお勧めします。

---

A2.

動作自体は正常に行われているように見受けられます。ただし、「名前を付けて画像を保存」の際の挙動はブラウザの仕様に依存するため、本サポート窓口の対応範囲外となります。


参考情報として、多くのブラウザではContent-Dispositionヘッダによって保存時の動作が制御されます。特にfilename引数の値が使用されることが多いです。


詳細は以下のドキュメントをご参照ください。


Content-Disposition - MDN Web Docs

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Disposition


ヘッダ値の調整や検証をご検討いただき、ご希望の動作を実現できるかお試しください。