Google Formを使って社員紹介ページを作りたかった

この記事は 面白法人グループ Advent Calendar 2022 の8日目の記事です。

こんにちは、カヤックボンドでサーバーエンジニアをやっている松本です。

3日目の駒田さんの記事でも紹介があったとおり、ボンドでは定期的にもくもく会をやっておりまして、 今回はその中で作ってみたものを紹介したいと思います。

(作り込んでいたら時間が無くなっていたので、ざっくり紹介になります!) techblog.kayac.com

きっかけ

最近はCloud Runを触るのが好きで、趣味でも色々触っている毎日を送っていました。

その中で、GASをGCPプロジェクトと連携できることを最近知ったとき、「フォームの入力でCloud Run起動させたら何でもできるんじゃないか?試しに作ってみよう!」と思ったので作ってみました。

サービス構成

こんな感じです。基本は社員のフォームの入力で情報が自動更新されて、たまにメンテナがスプレッドシートを書き換えて更新する想定で作ってみました。 写真とか自己紹介とかを入力していただく想定です。

Batch側のCloud Runは頑張ればGASでも書けますが、Goで書きたい+リビジョン管理できる形にしたいので極力Cloud Runに寄せています。

その他にも、Batch側はGCP内部のみアクセス許可したかったため、Cloud Runは2サービス用意しています。

GASからpub/subメッセージをpublishできるようにする

GASからPubSubを実行するためには、自分で作ってGCPプロジェクトと紐付けを行う必要があります。 下記を参考にやっていきましょう。(OAuth 同意画面まで作成すればOKです) developers.google.com

無事設定が終わったらGASのプロジェクト設定の以下項目にチェックを入れます。

「appsscript.json」マニフェスト ファイルをエディタで表示する

appscript.jsonがエディタから見られるようになるので、以下の必要な権限を追加しましょう。

  "oauthScopes": [
    "https://www.googleapis.com/auth/pubsub",
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/script.external_request",
    "https://www.googleapis.com/auth/userinfo.profile",
    "https://www.googleapis.com/auth/userinfo.email"
  ]

GASのトリガーにする関数はこんな感じに書いていきます。

function pubsub() {
  const options = {
    'method': 'post',
    'contentType': 'application/json',
    'payload': JSON.stringify({
      "messages": [
        {
          "data": getRowInfo(),
        }
      ]
    }
    ),
    'headers': {
      Authorization: `Bearer ${ScriptApp.getIdentityToken()}`
    }
  }
  UrlFetchApp.fetch(PUB_SUB_URL, options)
}

PUB_SUB_URLには以下を参考にGCPプロジェクト名、pubsub側で作ったトピック名を入れていきます。 cloud.google.com

一度手動トリガーを行い、無事にOAuth同意画面を認証してPubSubのトピックにメッセージが溜まっているのが確認できればGASでの作業は完了です。

Cloud Runをデプロイする

Batch、MainのCloud Runサービスをまずは作っていきます。

PubSubから配信されるメッセージも通常のHTTPリクエストと同じように受信できるので、下記を参考にGCSに保存、FireStoreに保存、閲覧画面の作成などを行っていきます。

cloud.google.com

それぞれのサービスを作ったらデプロイを行うのですが、個人的にCloud Run + Goでオススメなデプロイ方法はkoを使ったデプロイです。 DockerやCloud Build無しでイメージを高速にビルドできるため、どんどん使っていきましょう。 cloud.google.com

実際には以下のようにデプロイを行います。

go install github.com/google/ko@latest
gcloud run deploy main --image=`KO_DOCKER_REPO=asia.gcr.io/$(PROJECT_NAME)/main ko publish main.go` --platform managed --region asia-northeast1 --allow-unauthenticated --cpu=1 --memory=256Mi

ここまで行うとURLが発行されるので、pubsubで作ったトピックにpushサブスクリプションを設定します。

これでFormsからCloud Runまでが繋がるので、Formsを送信することでCloud Runが起動することを確認してみましょう!

作ってみた感想

残りは閲覧画面を作り込んでいくのですが、ここで12/8がやってきてしまいました。

最後までは間に合わなかったですが、Formsをトリガーにやってみたかったことはだいたい出来たかなと思っています。

一つ困ったこととしては、Formsで「回答を 1 回に制限する」に設定した場合、一度アップロードした画像が変更不可となってしまう点でした。

これだと「1人1行」と「画像を後から差し替える」の両立が難しそうです。

いい方法無いかな?と思っているのですが現状は思いつかず、今後のもくもく会で解消していけたらと思っています。

明らかに変更できなさそうな見た目をしています。困った。