「Google Driveのファイルを、自分のWebサイトに表示したい」
「ブログ記事にPDFや動画を埋め込みたいけど、やり方が分からない…」
そんな要望はありませんか？
Google Driveには、ファイルをWebサイトやブログに「埋め込む」機能があります。訪問者はページ上で直接ファイルを閲覧でき、ダウンロードする手間がかかりません。
この記事では、Google Driveのファイル埋め込み方法を、初心者の方にも分かりやすく解説します。HTMLコードのコピペだけで実装できるので、プログラミング知識がなくても大丈夫です！
Google Driveの埋め込みとは？
埋め込み機能の基本
埋め込みとは、Google Driveに保存されているファイルを、自分のWebサイトやブログに直接表示させる機能です。
通常の共有との違い：
- リンク共有： クリックするとGoogle Driveのページが開く
- 埋め込み： サイト内で直接ファイルを表示・閲覧できる
訪問者は別ページに移動せず、そのまま閲覧できます。
埋め込みとは？
他のサイトのコンテンツを、自分のWebページ内に表示させる技術のこと。YouTubeの動画埋め込みと同じ仕組みです。
埋め込みのメリット
主な利点：
- ユーザー体験の向上
- ページを離れずに閲覧可能
- ダウンロードの手間が不要
- 常に最新版を表示
- Google Drive上のファイルを更新すれば、埋め込み先も自動更新
- 再アップロードの必要なし
- 容量の節約
- サーバーに直接アップロードしなくてOK
- Google Driveの容量を活用
- セキュリティ管理
- 閲覧権限をコントロール可能
- いつでも共有を停止できる
埋め込み可能なファイル形式
Google Driveから埋め込めるファイル形式は多岐にわたります。
主な対応ファイル
Google形式：
- Googleドキュメント（文書）
- Googleスプレッドシート（表計算）
- Googleスライド（プレゼンテーション）
- Googleフォーム
一般ファイル：
- Microsoft Office（Word、Excel、PowerPoint）
- 動画（MP4、MOV、AVIなど）
- 音声（MP3、WAVなど）
- 画像（JPEG、PNG、GIFなど）
注意：
ファイル形式によっては、プレビュー機能が限定的な場合があります。
【基本編】Google Driveファイルの埋め込み手順
ステップ1：ファイルの共有設定を変更
埋め込む前に、ファイルを「リンクを知っている全員」に共有する必要があります。
設定手順：
- Google Driveを開く
- drive.google.com にアクセス
- ファイルを選択
- 埋め込みたいファイルを右クリック
- 共有設定を開く
- 「共有」をクリック
- リンク設定を変更
- 「制限付き」の横にある「変更」をクリック
- 「リンクを知っている全員」を選択
- 権限を設定
- 「閲覧者」を推奨（編集させたくない場合）
- 必要に応じて「閲覧者（コメント可）」や「編集者」
- 完了
- 「完了」ボタンをクリック
ステップ2：埋め込みコードを取得
方法1：プレビュー画面から取得（PDF・動画・画像など）
- ファイルを開く
- ファイルをダブルクリックしてプレビュー表示
- メニューを開く
- 画面右上の「︙」（3点メニュー）をクリック
- 埋め込みアイテムを選択
- 「アイテムを埋め込む」または「埋め込みコードを取得」を選択
- ※この項目がない場合は方法2へ
- コードをコピー
- 表示されたHTMLコードをコピー
方法2：共有リンクから埋め込みコードを作成
ファイルによっては埋め込みメニューがない場合があります。その場合、手動でコードを作成します。
- 共有リンクを取得
- ファイルを右クリック→「リンクを取得」
- 表示されたURLをコピー
- URLを変換
- URLの形式を埋め込み用に変更（詳細は後述）
- iframeタグを作成
- HTMLのiframeタグに貼り付け
ステップ3：Webサイトに貼り付け
実装手順：
- HTMLエディタを開く
- WordPressの場合：「カスタムHTML」ブロックを追加
- 通常のサイト：HTMLファイルを編集
- コードを貼り付け
- 取得した埋め込みコードをペースト
- 保存して確認
- 変更を保存
- プレビューで表示を確認
ファイル形式別の埋め込み方法
Googleドキュメントの埋め込み
埋め込みコードの取得：
- ドキュメントを開く
- 埋め込みたいドキュメントをダブルクリック
- ファイルメニュー
- 左上の「ファイル」→「共有」→「ウェブに公開」
- 公開設定
- 「公開」ボタンをクリック
- 確認画面で「OK」
- 埋め込みタブ
- 「埋め込む」タブをクリック
- HTMLコードが表示される
- コピーして使用
- コードをコピーしてサイトに貼り付け
コード例：
<iframe src="https://docs.google.com/document/d/e/ファイルID/pub?embedded=true" width="640" height="480"></iframe>Googleスプレッドシートの埋め込み
手順：
- スプレッドシートを開く
- ファイル→共有→ウェブに公開
- 公開範囲を選択
- ドキュメント全体、または特定のシート
- 埋め込みコードを取得
- 「埋め込む」タブからコピー
コード例：
<iframe src="https://docs.google.com/spreadsheets/d/e/ファイルID/pubhtml?widget=true&headers=false" width="640" height="480"></iframe>Googleスライドの埋め込み
手順：
- スライドを開く
- ファイル→共有→ウェブに公開
- 埋め込みタブ
- 自動再生やスライド間隔を設定可能
- コードをコピー
コード例：
<iframe src="https://docs.google.com/presentation/d/e/ファイルID/embed?start=false&loop=false&delayms=3000" width="640" height="480"></iframe>設定オプション：
start=true：自動再生loop=true：ループ再生delayms=3000：スライド間隔（ミリ秒）
PDFファイルの埋め込み
手順：
- PDFをGoogle Driveにアップロード
- 共有設定
- 「リンクを知っている全員」に設定
- リンクを取得
- ファイルID部分を抽出
- 埋め込みコードを作成
コード例：
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="640" height="480"></iframe>ファイルIDの見つけ方：
共有リンク：https://drive.google.com/file/d/1ABC123xyz/view?usp=sharing
→ ファイルID部分：1ABC123xyz
動画ファイルの埋め込み
手順：
- 動画をアップロード
- MP4形式を推奨
- 共有設定
- 「リンクを知っている全員」
- 埋め込みコード作成
コード例：
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="640" height="480" allow="autoplay"></iframe>注意点：
大容量の動画は読み込みに時間がかかる場合があります。
画像ファイルの埋め込み
画像の場合、iframeよりimgタグを使う方法もあります。
方法1：iframeで埋め込み
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="640" height="480"></iframe>方法2：直接画像として表示
<img src="https://drive.google.com/uc?export=view&id=ファイルID" alt="画像の説明">方法2はページに画像が直接表示され、より自然です。
埋め込みコードのカスタマイズ
サイズの変更
width（幅）とheight（高さ）の数値を変更することで、表示サイズを調整できます。
サイズ指定の例：
<!-- 固定サイズ -->
<iframe src="..." width="800" height="600"></iframe>
<!-- パーセント指定（レスポンシブ対応） -->
<iframe src="..." width="100%" height="500"></iframe>レスポンシブ対応：
スマホでも最適表示させるには、CSSを使います。
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe src="..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0"></iframe>
</div>枠線の削除
デフォルトでは枠線が表示される場合があります。削除するには：
<iframe src="..." frameborder="0"></iframe>スクロールバーの制御
スクロールを無効化：
<iframe src="..." scrolling="no"></iframe>自動調整：
<iframe src="..." scrolling="auto"></iframe>WordPressでの埋め込み方法
WordPress環境での具体的な実装手順です。
クラシックエディタの場合
- テキストモードに切り替え
- エディタ右上の「テキスト」タブをクリック
- 埋め込みコードを貼り付け
- 取得したiframeコードをペースト
- ビジュアルモードで確認
- 「ビジュアル」タブで表示を確認
ブロックエディタ（Gutenberg）の場合
- カスタムHTMLブロックを追加
- 「+」ボタン→「カスタムHTML」を選択
- コードを貼り付け
- 埋め込みコードをペースト
- プレビュー確認
- 「プレビュー」をクリックして表示確認
プラグインを使う方法
おすすめプラグイン：
- Google Drive Embedder
- WP File Download
これらを使うと、コードを書かずにビジュアル操作で埋め込めます。
埋め込みできない時のトラブル対処法
ケース1：「アクセス権限がありません」と表示
原因：
ファイルの共有設定が「制限付き」のまま
対処法：
- Google Driveでファイルを右クリック
- 「共有」→「リンクを知っている全員」に変更
- 権限を「閲覧者」に設定
ケース2：埋め込みメニューが表示されない
原因：
ファイル形式によっては埋め込みメニューがない
対処法：
- 共有リンクを取得
- 手動で埋め込みコードを作成（前述の形式を参照）
- ファイルIDを抽出してiframeタグに埋め込む
ケース3：真っ白・何も表示されない
原因と対処：
- URLが間違っている
→ ファイルIDが正しいか確認 - 共有設定が適切でない
→ 「リンクを知っている全員」になっているか確認 - ブラウザのキャッシュ
→ キャッシュをクリアして再読み込み - iframeタグの構文エラー
→ 閉じタグ</iframe>があるか確認
ケース4：スマホで表示されない
原因：
レスポンシブ対応していない
対処法：
前述のレスポンシブ対応CSSを使用するか、widthを100%に設定
<iframe src="..." width="100%" height="400"></iframe>ケース5：ダウンロードボタンを非表示にしたい
Google Driveの埋め込みでは、完全にダウンロードを防ぐことはできません。
部分的な対処：
- PDFの場合、特定のパラメータで表示制御は可能（完全ではない）
- より厳格な制御が必要な場合、別のサービスを検討
セキュリティとプライバシーの考慮事項
公開範囲の注意点
「リンクを知っている全員」に設定すると、URLを知っている人は誰でもアクセスできます。
リスク：
- 検索エンジンにインデックスされる可能性
- URLが拡散されると想定外の人が閲覧
対策：
- 機密情報は埋め込まない
- 必要に応じて期限付き共有
- パスワード保護が必要な場合は別の方法を検討
編集権限の管理
埋め込みファイルに「編集者」権限を与えると、誰でも編集可能になってしまいます。
ベストプラクティス：
- 基本は「閲覧者」権限
- コメントが必要なら「閲覧者（コメント可）」
- 「編集者」権限は信頼できる相手のみ
定期的な権限見直し
確認事項：
- 共有中のファイル一覧をチェック
- 不要な共有は削除
- アクセスログの確認（Google Workspace）
よくある質問（Q&A）
Q1：埋め込んだファイルを更新したらどうなりますか？
Google Drive上のファイルを更新すれば、埋め込み先も自動的に更新されます。再度コードを貼り直す必要はありません。
Q2：埋め込みに容量制限はありますか？
Google Drive自体の容量制限内であれば問題ありません。ただし、大容量ファイルは読み込みに時間がかかるため、軽量化を推奨します。
Q3：複数のファイルをまとめて埋め込めますか？
各ファイルごとに埋め込みコードを取得し、それぞれ配置する必要があります。フォルダ全体を一度に埋め込むことはできません。
Q4：埋め込みファイルのダウンロードを禁止できますか？
完全に禁止することはできません。閲覧できる以上、技術的にはダウンロード可能です。重要なファイルは埋め込まないことをおすすめします。
Q5：共有を停止したら埋め込みはどうなりますか？
共有を停止すると、埋め込み先でも表示されなくなります。「アクセス権限がありません」などのメッセージが表示されます。
Q6：Google Driveの無料プランでも埋め込めますか？
はい、無料プラン（15GB）でも埋め込み機能は利用できます。
まとめ：Google Drive埋め込みで効率的な情報共有を
Google Driveのファイル埋め込み方法を解説しました。
埋め込みの基本手順：
- 共有設定を変更
- 「リンクを知っている全員」に設定
- 埋め込みコードを取得
- ファイルメニューまたは手動作成
- Webサイトに貼り付け
- HTMLエディタにコードをペースト
ファイル形式別のポイント：
📄 Googleドキュメント・スプレッドシート・スライド
→ 「ウェブに公開」から埋め込みコード取得
📑 PDF・動画・画像
→ ファイルIDを使って手動でコード作成
🎨 カスタマイズ
→ width/heightで表示サイズ調整
セキュリティ注意点：
- 機密情報は埋め込まない
- 閲覧者権限を基本に
- 定期的な権限見直し
埋め込み機能を活用すれば、訪問者にとって便利なWebサイトを構築できます。常に最新版が表示されるため、更新の手間も省けます。この記事を参考に、効果的な情報発信を実現してください！
コメント