Google Drive 埋め込みURLの形式: /file/d/FILE

Google Drive を iframe で埋め込むときの正しいURL形式は、次のとおりです。

https://drive.google.com/file/d/FILE_ID/preview

共有リンクの .../view?usp=sharing は、埋め込み用URLではありません。

この記事では、正しい形式・コピペできるiframe例・埋め込み時のよくある失敗をまとめます。

1. ドライブ上で「共有」を開く

対象のファイルを右クリックし、共有を選びます（サブメニューが出る場合は、そこから共有をクリック）。

2. 「リンクを知っている全員」＋閲覧者にしてリンクをコピー

共有ダイアログで 一般的なアクセス を リンクを知っている全員 にし、権限は 閲覧者 のままにします。
問題なければ リンクをコピー を押します。

コピーされるURL は、だいたい次のような形です。

10N111TfBknfp_dIsVGqegf-SINLpzDKCの部分はファイルごとに異なります

https://drive.google.com/file/d/10N111TfBknfp_dIsVGqegf-SINLpzDKC/view?usp=sharing

3. 埋め込みに使うURL形式（/preview）

上の view 用リンクはブラウザで開いて閲覧するためのもので、そのまま <iframe> の src にしても期待どおり埋め込まれません。
埋め込み用には、/preview 付きのURL を使います。

https://drive.google.com/file/d/FILE_ID/preview

方法 A: URL を自分で iframe に組み立てる

view?usp=... の部分をやめて、次の形式にします。

<iframe
  src="https://drive.google.com/file/d/FILE_ID/preview"
  width="640"
  height="480"
></iframe>

FILE_ID は、元のリンク .../file/d/FILE_ID/view... に含まれている同じ ID をそのまま使います。
width / height はサイトのレイアウトに合わせて調整してください（CSS で max-width: 100% などを併用すると安全です）。

Astro の Markdown / MDX では、プロジェクトの方針に合わせてそのまま HTML を書くか、コンポーネント化するかを選べます。

方法 B: ドライブの「埋め込みリンクを取得」でコードをコピーする

ブラウザでファイルを開く

コピーした view 用の URL をブラウザで開くと、Drive のプレビュー画面になります。

メニューから埋め込み用 HTML を取得

画面上部の ファイル → 共有 → 埋め込みリンクを取得 を選びます。

表示された iframe をコピー

「ファイルを埋め込む」のようなダイアログに、次のような 完成した iframe タグ が表示されるので、そのままコピーしてサイトに貼り付けます。

サンプル

<iframe
  src="https://drive.google.com/file/d/FILE_ID/preview"
  width="640"
  height="480"
></iframe>

実際に埋め込みコードを使った見え方

よくある失敗と対処

iframeでDriveの閲覧画面に飛んでしまう

.../view?... を使っている可能性が高いです。
iframe src は .../preview に置き換えてください。

iframeが表示されない・権限エラーになる

共有設定を確認し、リンクを知っている全員 + 閲覧者 にします。

動画やPDFでも同じURL形式でよいか

はい。一般的なDriveファイルは同じ /file/d/FILE_ID/preview 形式で埋め込めます。

まとめ

ドライブでファイルを リンクを知っている全員 / 閲覧者 にし、リンクをコピーする。
埋め込みには https://drive.google.com/file/d/FILE_ID/preview を iframe の src に使う。
手で組み立てるか、プレビュー画面の ファイル → 共有 → 埋め込みリンクを取得 で HTML をコピーする。

それでは！