この記事は海洋大技術系サークル Advent Calendar 2023の5日目です。
はじめに
こんにちは！
海洋大のCS(コンピューターサイエンス)サークルで活動をしている大学3年生のFJ2123です。
現在私は、IT企業のエンジニア職の長期インターンをしています。その際、業務をする中で知ったGoogleドライブの画像に関するTipsをこちらで共有させていただきます。
やりたいこと
GoogleDrive内の画像のリンクを、Googleスプレッドシートにコピペして、そのスプレッドシートをGoogle SheetsAPIで API化することでフロント側で表示したい
完成図はこんな感じ！
手順
1.Googleドライブに画像を保存する
この時スプレッドシートにコピーするためのリンクを取得しておきましょう！
共有設定を「リンクを知っている全員」にすることを忘れずに！
２.APIにするスプレッドシートを作成
今回は以下のような構成にします。
3.Google Cloud PlatformでGoogle Sheets APIを有効にする
認証情報は「APIキー」、「サービスアカウント」の二つを作成しましょう！
4.スプレッドシートの共有先にサービスアカウントを追加
ここで閲覧者を選ぶとAPIの読み出し、編集者を選ぶとAPIの書き出しができるようです。
5.以下のURLに値を指定してアクセス
APIKEY、スプレッドシートID、シート名をそれぞれ確認して以下のリンクにアクセスしましょう
https://sheets.googleapis.com/v4/spreadsheets/{スプレッドシートID}/values/{シート名}?key={APIキー}
スプレッドシートIDはスプレッドシートの以下の部分です
https://docs.google.com/spreadsheets/d/{スプレッドシートID}/edit#gid=0
うまくいくと以下のようにJSONの内容が表示されます
あとはこれをフロント側で叩くだけ、、、と言いたいのですが、このままでは画像を表示することができません！
6.画像のURLを変える
現在このようになっているリンク(IDの部分は固有の文字列)を
https://drive.google.com/file/d/{ID}/view?usp=sharing
以下のように書き換えましょう！！
http://drive.google.com/uc?export=view&id={ID}
このようにすることでimgタグなどで画像を表示させることができます
7.フロント側で表示する
リンク書き換え前
リンク書き換え後
まとめ
正直、リンクの公開設定を変えるだけでWebサイトに公開できると考えていたので初めて知った時は驚きました。
今後、Web開発をする人のお役に立てば幸いです。