Google Driveの中の写真をNuxt3からREST APIで取得してみる

Google Driveに保存している写真をファイルの名前から写真のデータを取得するREST APIを作成したものの結局使われなかったので備忘録として書き残しておきます。

全体像

Nuxt3を用いて開発していましたがクライアント側からだとfetch APIを用いてGoogle Apps Scriptを呼び出せなかったので一旦間に/server/apiを挟んでいます。

index.vueから/api/serverを呼び出す

https://nuxt.com/docs/guide/directory-structure/server
を参照してください🙇

/api/serverからGoogleAppsScriptを呼び出す

//.envから環境変数を取り出す
const runtimeConfig = useRuntimeConfig()
const apiURL = runtimeConfig.imageApiUrl

export default defineEventHandler(async (event) => {
    const body = await readBody(event)
    
    const paramsText = new URLSearchParams({
        id: body.id
    }).toString()

    const imageText = await fetch(`${apiURL}?${paramsText}`, {
        method: "get"
    })
        .then(async (res) => await res.text())
        .catch((e) => {
            console.warn(e)
        })

    return imageText
})

• new URLSearchParams({...}).toString()を用いることでURLパラメーターをオブジェクトから作成しています。idが画像の名前になります。
• await fetch(...)だけだと返り値がReadableStreamになっていまうので.then(async (res) => await res.text())によってテキストにしています。このテキストが画像のBASE64の形にしています。

GoogleAppsScriptで画像を取得する

const imageFolderID = /*フォルダID*/

function doGet(e) {
  const body = e.parameter
  const historyID = body.id

  const imageFolder = DriveApp.getFolderById(imageFolderID)
  const imageID = imageFolder.getFilesByName(`${historyID}.png`).next().getId()
  const resized_image = ImgApp.doResize(imageID, 600)
  const blob = resized_image.blob
  const base64 = Utilities.base64Encode(blob.getBytes())

  return ContentService.createTextOutput(base64)
}

• フォルダIDには画像の入っているフォルダのIDを指定してください。
• フォルダIDはGoogleドライブでフォルダを開いた時のURLhttps://drive.google.com/drive/folders/<ここ>の<ここ>の部分です
• e.parameterによってURLパラメーターを取得できます
• ImgAppライブラリを使用して画像の縮小をおこなっています。(ImgAppライブラリは別でインストールする必要があります)
• 返り値はテキストにした後もContentService.createTextOutput(...)でoutputの形にしないとエラーが出ます

画像を表示する

ここまでで画像をBASE64の形にしたテキストデータが得られるようになりました
画像は以下のテキストでデータURLになります。

`data:image/png;base64,${imageText}` //imageText:BASE64形式にした画像

このデータURLを<img>のsrc属性に入れれば画像を表示することができます

終わり

以上でGoogle Driveから画像を取得して表示する方法の紹介でした。