Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【JavaScript / jQuery】Googleドライブに保存した画像をHTMLで表示させる

はじめに

初めての投稿です。自分の復習も兼ねて、Qiitaに記事投稿していこうと思います。
至らない点があったらスミマセン。
今回JavaScriptでご紹介していますが、変数にGoogleドライブのURLを格納できる言語でしたらどの言語でも問題ありません。
というより、imgタグに直接記述するだけならHTMLのみで完結します。

内容

JavaScript,jQueryを利用してGoogleドライブの画像をHTMLに引っ張ってくるという趣旨の記事になります。

趣味でよくiPadを使ってイラストを描くのですが、描いた絵を自分の開設しているWebページへ表示させる時にPCに送ってサーバに送って・・・という作業が面倒だったので、iPadから直接Googleドライブに画像を置いて、そこからプログラムで引っ張ってくればいいじゃないかと思ったのが始まりです。

Googleドライブに画像を保存している前提で執筆していきます。

Googleドライブに保存した画像の設定を変更する

コンテンツを右クリックし、「リンクを取得」を選択します。
スクリーンショット 2020-11-13 6.20.36.png

権限を「制限付き」から、「リンクを知っている全員」に変更します。

スクリーンショット 2020-11-13 6.25.51.png

この時、リンクのURLは下記のようになっています。
https://drive.google.com/file/d/画像ごとに異なるID/view?usp=sharing

この[画像ごとに異なるID]をJavaScriptに記述し、HTMLで表示させようという流れになります。

またこちらのリンクへ実際に移動してみると分かるのですが、閲覧者側では違うURLとして表示されます。
このように、ファイルを確認するページ別にURLが異なるのですが、HTMLの<img>を利用して画像を表示させる場合は下記のURLを利用します。

http://drive.google.com/uc?export=view&id=画像ごとに異なるID

画像のIDを変数に格納する

変数に画像のIDを格納していきます。ファイルIDは「XXXX」と表記しています。
今回はjQueryのbefore要素も利用しています。

index.html
<!-- <head>等、一部省略 -->
<body>
    <div class="container">
      <h4>画像を表示</h4>
      <div id="driveImg"></div>
    </div>
 <!-- jQueryでbefore要素を利用。今回の場合、containerとdriveImgの間に画像が挿入される -->
</body>
script.js
const URL = "http://drive.google.com/uc?export=view&id=";
const item = "XXXX";
//XXXX : Googleドライブの共有リンクのURLから確認したファイルのID

const driveURL = URL + item;
//driveURL = "http://drive.google.com/uc?export=view&id=XXXX"; となった

$('#driveImg').before('<img src="' + driveURL + '">');
/*
<div id="driveImg"></div>の後ろに、
<img src="http://drive.google.com/uc?export=view&id=XXXX">が挿入される。
*/

結果

スクリーンショット 2020-11-14 22.46.27.png

画像が表示されました。
なお2020年11月現在、ファイルのIDの文字数は33文字で統一されています。

内容は以上となります。
自分はいろんな画像のIDを配列に格納したので、その名残でJavaScriptとしてのファイルもご紹介したのですが、imgタグのみでも実装できるので初学者の方でも比較的簡単に実現できる内容だと思います。

実際やってみると分かるのですが、重いファイルをこれで表示させるとなかなか時間がかかります。
趣味で描いているイラストのサイズは2500*3000px程度であることが多いのですが、このくらい大きな画像になってしまうと読み込みに失敗してしまうことがたまにあります。

軽いファイルにならこの方法は十分使えるかもしれませんね。
良ければ応用してみてください。

閲覧ありがとうございました!

追記

編集リクエストを頂いたので一部修正しました。
こんな機能もあるんですね・・・ありがとうございます。

skonishi1125
20年4月から学習を進め、現在はPHPをメインに進めています。 学習のアウトプットも兼ねて記事の投稿を開始しました。 イラストを描いたり、ゲーム関係のことに触れるのも好きです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away