イベントサイトをnuxt.jsとsteinhqでサクッと作ってみた。

先日旅行先で偶然、日本酒ゴーアラウンドという日本酒を楽しむイベントがありました。
このイベントは様々な地域で行われているものの、Webサイトの掲載はその地域の主催者によって情報配信されているようでした。

私が参加する地域は札幌でチラシの画像が掲載されているだけで情報が見づらかったので自分の整理用にサイトを作りました。

技術背景

使ったものはnuxt.jsでフロントエンドを構成して、steinhqをデータベースにしました。
UI部分はvuetify2です。

特にDBにしないといけないわけではなかったのですが、データを管理しやすかったのでsteinhqを使いました。

steinhqはスプレッドシートの内容をAPIにできるWebサービスです。
リクエスト数とセルの数で課金体系が変わりますが無料で十分使えます。

実際に作った情報はこちらになります。
日本酒ゴーアラウンド2019 札幌参加店舗

APIをaxiosで読み込むだけで使えるのでかなり手軽に使えます。

asyncData () {
      return axios.get('発行されたAPI')
          .then((res) => {
              return  { datas: res.data }
          })
  }

今回は突貫で4時間くらいかけて作りましたが、ほぼDBの作成の時間に取られています。

今後はフロントエンドは使いまわして、DBの差し替えでこういったイベントサイトのパンフのようなものを作れたらなと考えています。

まだ不足の機能があり下記の機能は実装したいと思っています。

結構汎用性があるので、どのイベントにも使える気がしています。