【2024年版】Google Driveの画像をimgタグで読み込む方法

2024年に入ってから、Google Driveの画像をimgタグ等で読み込むと403エラーが出て上手く表示されない現象が起きています。結論から言うと、Googleの仕様変更が影響しています。( 仕様変更のお知らせ – Google Workspace )

昨年まではGoogle Driveにアップロードしたメディアの共有リンクを発行してhttps://drive.google.com/uc?export=view&id=メディアのIDのURL形式に変換すれば読み込めましたが執筆時点（2024年1月17日）では使えません。

現状、Google Driveの画像をimgタグで読み込むには埋め込みコードを使う必要がありますのでこれについて解説したいと思います。

目次[ click ]

埋め込みコードを使って読み込む方法

② 共有リンクを発行する

埋め込みコードを使用する場合も共有リンクを発行する必要があります。リンクを発行しなくても埋め込みコードは利用できますが、その場合は埋め込みコードの表示自体に閲覧制限がかかります。

③ 右上のメニューから新しいウィンドウを開く

右上のメニュー( )から新しいウィンドウで開くをクリックします。

④ 右上のメニューからアイテムを埋め込む

新しく開いたウィンドウで先ほどと同様に右上のメニュー( )をクリックすると、「アイテムを埋め込む」から埋め込みコードを発行することができます。

発行した埋め込みコードをウェブサイトに設置すればGoogle Driveにアップロードしたメディアをサイトに掲載することができます。埋め込みコード自体は<iframe>なのでCSSを使って見た目を大きく変更することはできないので注意。

うぇぶとまと

なんで<iframe>やねん。欲しいのは直リンクであって埋め込みコードではない！

② 共有リンクからIDを抽出する

■ 共有リンク（例）
https://drive.google.com/file/d/1VaLnPNQ4b8IVaFkljUcSurLKRrlxsruZ/view?usp=sharing

発行した共有リンクからIDを抽出します、ここでいうIDとは/file/d/と/view の間にある値のことです。上記の例でいうと1VaLnPNQ4b8IVaFkljUcSurLKRrlxsruZがIDになります。

③ 抽出したIDを使ってURLを作成する

■ URLの雛形
https://drive.google.com/uc?export=view&id=ここに抽出したID

抽出したIDを使ってウェブサイト等で使える読み込み可能なURLを作成します。といっても難しいことはしません、上記のURLの雛形に抽出したIDをセットするだけです。下記は使用例になります。

<!-- URLの雛形 + 抽出したID -->
<img src="http://drive.google.com/uc?export=view&id=1VaLnPNQ4b8IVaFkljUcSurLKRrlxsruZ">

以上になります。

うぇぶとまと

現状（2024年1月17日時点）だと埋め込みコードしか使えないのはかなり不便。直リンク（埋め込みコードじゃない方）が使える未来を待つとしますか、この辺がGoogle依存のデメリットよなー。