web-dev-qa-db-ja.com

GoogleドライブフォルダーをWebサイトに埋め込む方法

Googleドライブにウェブサイトに埋め込みたいフォルダがあります。埋め込みコードや、Googleドライブのヘルプ記事に記載されているものが見つかりません。

htmlgoogle-drive-apiembed
47
Mori

Googleドライブフォルダは、listおよびgridビューに埋め込み表示できます。

リストビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>


グリッドビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>



Q：フォルダーID（FOLDER-ID）とは何ですか？

A：Googleドライブに移動>>フォルダーを開く>>ブラウザーのアドレスバーでそのURLを確認します。例えば：

フォルダURL： https://drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

フォルダID：
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

許可が必要なフォルダーに関する注意事項

この手法は、パブリックアクセスを持つフォルダーに最適です。特定のGoogleアカウントとのみ共有されているフォルダは、この方法でそれらを埋め込むと問題が発生します。この編集の時点で、「アクセスが必要」または「アカウントの切り替え」（またはGoogleアカウントへのサインイン）を支援するいくつかのボタンを備えた「許可が必要です」というメッセージが表示されます。これらのボタンのJavascriptは、ChromeのIFRAME内では正しく機能しません。

詳しくは https://productforums.google.com/forum/#!msg/drive/GpVgCobPL2Y/_Xt7sMc1WzoJ

72
Mori

IFRAMEにGoogleドライブディレクトリを埋め込む

Googleドライブのフォルダーは、listおよびgridビューに埋め込み表示できます（ファイルまたはフォルダーをクリックして新しいタブで開くだけです）。そのためには、単にFOLDER-IDを自分のものに置き換えます。

リストビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

または、リストモードがデフォルトであるため、モードを指定しません。

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID" style="width:100%; height:600px; border:0;"></iframe>

グリッドビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

フォルダーIDの取得

Idは、フォルダーのURLのfolders/の後のハッシュ（英数字の意味不明）です。ドライブフォルダを開くと、ブラウザのアドレスバーにURLが表示されます。たとえば、

https://drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

フォルダーIDは0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2です。

G Suite/Google Appsドメインのあるフォルダー

フォルダーがGoogle Appsドメインの一部である場合、アクセス許可の問題を軽減するためにURLにドメインを追加できます（詳細は先に説明します）。

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

MY.DOMAIN.COMおよびFOLDER-IDを独自のものに置き換えるだけです。

許可が必要なフォルダーに関する注意事項

この手法は、パブリックアクセスを持つフォルダーに最適です。特定のGoogleアカウントとのみ共有されているフォルダーは、ユーザーのブラウザーでアクティブなGoogleアカウントによっては、この方法でそれらを埋め込むときに問題を引き起こす可能性があります。

  1. ユーザーがGoogleアカウントにログインしていない場合、フレームにnothingが表示されます。
  2. ユーザーがフォルダーへのアクセス許可なしでアカウントにログオンしている場合、フレームにはメッセージが含まれます許可が必要、アクセスをリクエストまたはアカウントの切り替え。ただし、この最後をクリックすると、フレームは空白になります。
  3. ユーザーが適切な権限なしでアカウントにログインし、後で許可されたアカウントを追加すると、埋め込みドライブの読み込み時にGoogleは最初のアクティブなアカウントに頼り、ユーザーには許可が必要が表示されます。 ..
  4. URLにGoogle Suiteドメインが含まれていて、ユーザーがそのドメインのアカウントにログインしている場合、埋め込みビューは機能しますユーザーが最初に別のアカウントにログインした場合でも。

空白のフレームは、GoogleがX-Frame-Optionsヘッダー経由でログインページをIFRAMEに埋め込むことを禁止しているためです（おそらく、__ SOMECODE] _ヘッダーを使用して、SAMEORIGINに設定すると、同じドメイン内にありません（vg drive.google.com）。これは、ブラウザの開発者コンソールで確認できます。

TL; DR

ドライブフォルダーのリストまたはグリッドビューを取得するには（ファイルまたはフォルダーをクリックして新しいタブで開くだけです）、次を使用します。

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

または、Google Suite/Apps Driveの場合：

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

MY.DOMAIN.COMおよびFOLDER-IDを独自のものに置き換えます。 #gridを削除して、詳細なファイルリストを取得します。

プライベートフォルダーの場合、埋め込みフォルダーを使用してページを読み込む前に、ユーザーに正しいアカウントにログインしてもらいます。フォルダがGoogle Appsドメインにある場合、ドメインをURLに追加できます。それ以外の場合は、承認されたアカウントにログインする必要があります。

（この答えは森の編集ですが、彼がintentを変更したため拒否されました）

10
Chema

ビジネス/ Gsuiteアプリ、またはそれらが呼び出すものには、ドメインを指定できます（複数のGoogleアカウントにログインしたときに元の回答で500エラーが発生する問題がありました）。

<iframe 
  src="https://drive.google.com/a/YOUR_COMPANY_DOMAIN/embeddedfolderview?id=FOLDER-ID" 
  style="width:100%; height:600px; border:0;"
>
</iframe>
2
ElDog