Step 3: Core Technology

File API の魔法:
サーバーを通さず画像を表示する

「猫の手貸し」の最大の売りである「安心感」を支える、魔法のような技術の備忘録です。

アップロードせずに画像を見る?

通常、Webサイトで画像を見るには、一度サーバーにアップロードしてそのURL(http://...)をもらう必要があります。でも、それだと写真が外部に送られてしまいます。これを解決するのが File API です。

自分だけの「一時URL」を作る

URL.createObjectURL(file) という命令を使うと、ブラウザのメモリ上に、そのファイルを表示するための専用URL(blob:...)を瞬時に発行できます。

// ユーザーが選んだファイルから「一時的なURL」を作る
const blobUrl = URL.createObjectURL(selectedFile);

// それを img タグに渡すだけで、即座に表示される!
previewImage.src = blobUrl;

このURLは外部からは絶対に見られず、ブラウザを閉じれば消えてしまいます。個人情報を守りつつ、快適なプレビューを提供する。この技術に巡り会えたことが、ツール制作の大きな転換点でした。