Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

Googleドライブに保存した画像やファイルをサイトやブログに読み込む方法

Googleドライブに保存した画像やファイルをサイトやブログに読み込む方法

画像出典:Googleドライブ

Googleドライブは無料で15GBまで利用できるGoogleのオンラインストレージサービスです。実はGoogleドライブには便利な使い方がありまして、Googleドライブに保存した画像やファイルを、自分のWebサイトやブログに読み込ませて表示させることができます。

今回はGoogleドライブに保存した画像やファイルを、自分のWebサイトやブログに読み込ませて表示させる方法について説明します。

 

目次

Googleドライブにファイルをアップロードして、共有リンクを設定する

まずはGoogleドライブを利用できるようにするため、Googleアカウントを取得してログインし、Googleドライブを開いてください。

Googleドライブにファイルをアップロードする
Googleドライブを開いたら、Webサイトやブログに読み込ませたい画像やファイルをアップデートします。画面左上の「新規」をクリックしてファイルをアップすることもできますし、フォルダから直接ドラッグ&ドロップしてアップすることも可能です。

Googleドライブのファイルをアップして共有リンクをオンに設定する
ファイルのアップロードが完了したら、アップロードしたファイルの「リンクの共有」を「オン」に切り換えます。リンクの共有をオンに切り替えると、共有リンクが作成されますので、そのリンクをコピーします。

共有リンクを書き換える

Googleドライブにアップロードしたファイルの共有リンクを作成しても、そのまま使用することができません。なので作成したリンクを使えるように書き換える必要があります。

下記のコードを参考に、作成したリンクを書き換えてください。

https://drive.google.com/open?id=1yRi4WidCbiGhRtkZL5PuAWeO3ogsv6Ns
↓
https://drive.google.com/uc?export=view&id=1hOMuwJBU4gOKtlIG7VtEw93NaVnK56Su

書き換える箇所は「open?id=」の部分を「uc?export=view&id=」に書き換えるだけです。idは変更せずにそのままでOKです。

書き換えたリンクをWebサイトに読み込む

リンクを書き換えたら、Webサイトやブログに書き換えたリンクを記述すると、Googleドライブに保存した画像やファイルを、読み込んで表示させることができます。

まとめ

以上がGoogleドライブに保存した画像やファイルを、Webサイトやブログに読み込ませて表示させる方法でした。Dropboxなどの他のオンラインストレージサービスでも、共有リンクを作成して、同じような使い方ができるので、ぜひ試してみてください。