GCSの署名付きURL、 URLを返せば終わりじゃなかった話

Transcript

1. GCSの署名付き URL、 URLを返せば終わりじゃなかった話 クラウドエース株式会社 2026.04.14 クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 遠藤柊弥
2. 自己紹介 遠藤 柊弥（Shuya Endo） クラウドエース株式会社 技術本部 第一開発部 Google Cloud上で動くWebアプリ開発に携わるフロントエンドエンジニアです！ All Certification Holders 2025受賞！ 実務や趣味でGoogle Cloudを使いこなしたい！ クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 1
3. 背景：なぜ GCS（Google Cloud Storage）の署名付き URLを使った か • レポート機能でPDFとCSVを配布したかった • アクセス権のあるユーザーだけが取得できるようにしたかった • そのため保存先はGCS、取得方法は署名付きURLにした クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 2
4. 最初の想定 GCSのURLを返せば、あとはブラウザがうまくやってくれると思っていた 1. ユーザーがボタンをクリックする 2. BEがGCSの署名付きURLを返す 3. FEはそのURLを別タブで開く（プレビュー） かローカル保存（ダウンロード） する これでプレビューも保存も、ほぼ終わりだと思っていた クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 3
5. どうなったか 1. プレビューを実行しようとしてもダウンロードになる！ • Geminiの提案を受け、対策としてプレビューAPIヘッダーにContent-Disposition: inlineを付けて みたが効果なし → それだとBEからのAPIレスポンスに対する指定になるので意味がない • FEが実際に開くのはAPIレスポンスではなく署名付きURL クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 4
6. 補足：ブラウザ設定 ブラウザ設定次第では、PDFはダウンロードになる Chromeの場合： 設定 > プライバシーとセキュリティ > サイトの設定 > PDFドキュメント クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 5
7. どうなったか 2. 適切なファイル名が表示されない！ • プレビュー時のファイル名はPDF自体がメタデータで持っているタイトルが表示される • 一方、ダウンロード時のファイル名はGCSに保存されている名前がデフォルト値として表示される → BEでPDFを生成・保存する過程で適切なメタデータとファイル名をそれぞれセットするなどの処理 が必要 つまり、表示や保存の挙動は GCS側ではなく、アプリ側で設計する 必要があった クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 4
8. 補足：ファイル名 プレビューのファイル名（左）と保存時のデフォルトファイル名（中央） ※ChromeのPDFビュアーの場合 クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 5
9. そこでどう整理したか 以下のような形に落ち着いた GCS + BE アクセス権を確認し、短い有効 期限の署名付き URLを発行す るだけ FE（プレビュー） FE（ダウンロード） PDFを別タブで開くボタン は用 意したが、表示そのもの はブラ ウザ設定に依存すると割り 切った ファイル名の変更が難しい仕 様であったため、 FEでblob取 得＋名前を付けて保存 するこ とでファイル名を設定した ※FE側で <a download="任意のファイル名"> を 作ってクリックさせる クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 6
10. まとめ 署名付きURLを利用する場合、どこで挙動が決まるかを先に整理する必要があ る • GCSの署名付きURLは、安全に配る仕組み としてはとても便利だった • ただし、どう表示されるか と どう保存されるか は別で設計が必要だった • 表示・保存はGCS / BE / FEのどこで何を制御するか を考える必要がある クラウドエース株式会社｜© 2026 Cloud Ace, Inc. 7
11. Thank you. クラウドエース株式会社｜© 2026 Cloud Ace, Inc.