web-dev-qa-db-ja.com

Googleドライブの画像をWebサイトに表示するにはどうすればよいですか？

私のクライアントが Google Drive にいくつかの写真をアップロードしました。会社のウェブサイトに写真を表示してほしいです。 GoogleドライブのコンテンツをWebページに表示するための documentation を確認しましたが、これは単にWebページにコンテンツを表示するための指示であり、既に実行されているようです。

私の質問は、クライアントのWebページにコンテンツを直接表示する方法です。

ありがとう。

google-drive-api
45
fmz

画像ファイルがある場合は、それらをGoogleドライブのpublicフォルダーにアップロードし、そのフォルダーIDをコピーしますアドレスバーから（例B0Gi4v5omoZUVXhCT2kta1l0ZG8）、それを GDrives のフォームに貼り付けてから、独自のエイリアスを選択します（例-myimgs）そして出来上がり！画像を1つずつアクセスするには、たとえば http://gdriv.es/myimgs/myimage.jpg 。

Webサイトにフォルダ全体を（フレーム内に）埋め込みたい場合は、次のURLのいずれかを使用して、[folderID]を独自のIDに置き換えます。

XMLまたはJSONでファイルリストを取得する場合は、 YQL を使用できます。

注：Google+フォトを使用して、画像の埋め込みと埋め込みも行うことができます。

15
niutech

Googleドライブの[リンクを取得]オプションを使用して、URLを取得します。

HTMLで<img>タグを使用し、そこにリンクを貼り付けます。

URLのOpen?をuc?に変更します。

82
Richard

外部サイトを使用せずにそれを行う方法を見つけました。

<img src="https://drive.google.com/uc?export=view&id=XXX">

https://Gist.github.com/evansims/f23e2f49e3d4be793038

<a href="https://drive.google.com/uc?export=view&id=XXX">
    <img src="https://drive.google.com/uc?export=view&id=XXX"
    style="width: 500px; max-width: 100%; height: auto"
    title="Click for the larger version." />
</a>

画像のIDを取得する必要があります。「新しいウィンドウで開く」をクリックして、URLからIDを取得します。

Click on “Open in new window”

15
Quitiweb

Googleドライブの画像を埋め込む例

元のURL：https://drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc/view

写真：Paula Borowska

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Google Drive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
</body>

</html>

ありがとう https://codepen.io/jackplug/pen/OPmMJB

11
Aathi

Googleドライブのヘルプページ から：

ドライブでウェブページをホストするには：

  1. Drive.google.comでドライブを開き、ファイルを選択します。
  2. ページ上部の[共有]ボタンをクリックします。
  3. 共有ボックスの右下隅にある[詳細設定]をクリックします。
  4. [変更...]をクリックします。
  5. [オン-Web上で公開]を選択し、[保存]をクリックします。
  6. 共有ボックスを閉じる前に、「共有するリンク」の下のフィールドのURLからドキュメントIDをコピーします。ドキュメントIDは、URLのスラッシュとスラッシュの間の大文字と小文字と数字の文字列です。
  7. 「www.googledrive.com/Host/[doc id]のようなURLを共有します。[doc id]は、手順6でコピーしたドキュメントIDに置き換えられます。

誰でもあなたのウェブページを見ることができます。

Webサイトで画像を表示したい場合は、通常どおり、HTMLにpicへのリンクを埋め込みます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example image from Google Drive</title>
    </head>
    <body>
        <h1>Example image from Google Drive</h1>

        <img src="https://www.googledrive.com/Host/[doc id]" alt="whatever">

    </body>
</html>

注意：

2015年8月31日より、ユーザーとデベロッパー向けのGoogleドライブでのウェブホスティングは廃止されます。この機能は、2016年8月31日までgoogledrive.com/Host/[doc id]によるコンテンツの提供を停止するまで1年間使用できます。 詳細

11
gugol

2017年2月18日更新Googleは、Googleドライブの無料ホスティング機能を廃止しました。現在、Googleドライブで静的ウェブサイトを無料でホストすることはできません。

ただし、GoogleドライブでJavaScriptおよびCSSおよび画像ファイルをホストする場合は、引き続きホストできます。ファイルのパーマリンクを取得するだけです。更新されたチュートリアル（2017）に従ってください。

http://www.bloggerseolab.com/2017/02/Host-images-javascript-and-css-on-google-drive.html

8
Vishal Chopra

リストビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#list" width="700" height="500" frameborder="0"></iframe>

グリッドビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" width="700" height="500" frameborder="0"></iframe>

続きを読む： https://thomas.vanhoutte.be/miniblog/embed-add-google-drive-folder-file-website/

4
trm5073

Googleドライブホスティングは廃止されました。 2016年8月31日から動作を停止しました。

Googleドライブでのホスティング-サポート終了予定

以前にGoogleドライブで画像をホストする方法の説明を削除しました。

4
Alan Wells

ドライブで画像を一般公開するためのいくつかの興味深い代替手段（非推奨）：

1。 Googleフォト

ドライブではなくGoogleフォトに画像をアップロードすると、公開ウェブリンクが取得されます。

この動作は私には少し驚きですが、リンクは非常に長くランダムです。したがって、彼らは明らかに「プライバシーによる隠蔽」を実践しています。

2。 Google Drawing

「Google Drawing」プログラム （ドライブに組み込まれている）を使用して画像を作成する場合、File > Publish to Webを押して公開しますリンク。

enter image description here

注：この could は、既存の画像を共有しようとしている場合の解決策です。画像をエディターに貼り付け、キャンバスを画像にトリミングします（file > Page Setup） -しかし、それは少し面倒です。ただし、基本的な画像編集を行う必要がある場合、または単純なアイコン/グラフィックを作成しようとしている場合、これは素晴らしいと思います。

0
Dustin Michels
<img src="https://drive.google.com/uc?export=view&id=Your_Image_ID" alt="">

ローカルホストに画像ファイルを保存すると、wordpressサイトで使用するスペースが多くなり、サイトの速度が低下する

「alt/option」ボタンを使用して複数のURLを同時に簡単に編集できるため、テキストメイトを使用します

0
Ryan Herter

より良い方法はわかりませんが、PHPでページをデータマイニングできます。たとえば、Googleに移動してフォルダを共有し、そのフォルダに移動すると、次のようになります

https://drive.google.com/folderview?id=0B8TT0olkjsdkfji9jekbFF4LWc&usp=sharing

^^^実際のリンクではありません

あなたが探しているのは、このページのソースコード内の個々の画像です

その後、phpを使用してソースコードを取得します

<? $f = fopen ("http://www.example.com/f", r);
echo $f;
?>

$ fにはソースがあり、他のphpコマンドを使用して、必要な画像でURLのみを分離できます。少し手間がかかりますが、非常に実行可能です。

ギャラリーに表示するdivまたはテーブル構造に構築したい方法を示すこれらの画像リンクがあれば、効果のためにgreybox要素を追加することもできます

0
user3586571

ファイルがパブリックフォルダーにある場合は、 Googleドライブウェブサイトホスティング を使用できます。

0
Ali Afshar