💫

SSSAPIを利用して行きつけのメニュー表を作った

2022/08/14に公開

GoogleスプレッドシートをAPI化してくれるSSSAPIというサービスが公開されたという話を聞いて、前々からスプレッドシートをデータベースとして使ってみることに興味があったので試してみました。
https://sssapi.app/

GASでも同様のことができますが、無料かつ楽に越したことはないということでSSSAPIを選択しました。

API作成まで

本サイトの導入を見るのが一番簡単ですが、ざっくり以下の手順です。

  1. SSSAPI上から、スプレッドシートを作成するGoogleアカウントを使ってログイン
  2. API化したいデータをスプレッドシートに作成
  3. 作成したスプレッドシートに対して、SSSAPIアカウントに閲覧権限を共有
  4. API名とスプレッドシートのURLを入力して作成完了

※SSSAPIを利用したアプリを公開したい場合には承認済みドメインを設定しないと403エラーになってしまうため注意が必要です。今回はVercelで公開したため、*vercel.appを追加しました。

今回作ったもの

TOKYO MIX CURRYという店舗を持たずアプリで注文するカレーショップに最近ハマっているのですが、公式サイトにメニュー表がなく、アプリを開く以外にトッピングの種類や値段が把握できないため、自分で確認するメニュー表を作成しました。とりあえずSSSAPIとVercelを使ってみたかっただけのため凝ったものはなく、機能や見た目は最小限のものです。

利用技術としては

  • Vue3
  • TypeScript
  • Tailwind
  • Vite
  • SSSAPI
  • Vercel

になりました。

今回のようにメニューがAPI公開されているわけではない場合、データは自分で手入力することになります。こういった超小規模でサクッと試したい場面はSSSAPIとの相性抜群でした。一歩目を踏み出しやすいのは本当にありがたいです。

公開したものは以下です。

https://tokyo-mix-curry-menu.vercel.app/

Discussion