【個人開発】踏破した都道府県を日本地図でシェアできるWebサービス「日本踏破図🗾」を作りました

個人開発 Webサービス Nuxt.js vuetify Vue

はじめに

「日本踏破図🗾」というWebサービスをNuxt × Vuetifyで個人開発しました！

日本踏破図🗾

どんなWebサービスか

踏破した都道府県を日本地図でチェックすることができ、自分が今までに日本をどれだけ踏破したかをみんなにシェアできます👍
以下のように日本地図上で都道府県をチェックできます。これをシェアボタンでシェアすると・・・

以下のようなOGP画像でシェア可能です！地図のカラーも好きな色に変更することができます。

使用したフレームワーク・インフラなど

NuxtJS（Nuxt Bridge）
Vuetify
vuex（vuex-module-decorators）
PWA
Vercel（Serverless Functions）

主なものになります。多機能なWebサービスではないのでそんなに色々使ってはいません。
よく使うNuxtとVuetifyでフロントを構築して、NuxtのNitroエンジンを使ってVercelのServerless Functionsへデプロイしています。

当初はSSRにするつもりはなかったのですが、動的OGPを実装するために色々試行錯誤した結果SSRにしました。ただ、Nuxt3／Nuxt Bridgeから使えるようになったNitroエンジンのおかげで高速&ゼロコンフィグでVercelを利用できます。

苦労したところ

動的OGPをどう実装するか

正確に言うと「いかに簡単かつ無料で実装するか」に苦労しました。
検索するとfirebaseを使ってmetaだけSSRしたものを返してリダイレクトさせる等々、実現方法自体は色々でてきます。

ただ、正直なところこの規模・機能のWebサービスにそこまでしたくなかったんですね（できるだけシンプルな作りにするということも最初に決めていました）

最終的に実装した方法は以下です。

OGP画像を生成して画像を返すServerless Functionsを用意する
Functionsへ画像生成に必要な情報(チェック済みの都道府県、地図カラー)を渡す

必要な情報をURLパラメータに持ち、それを利用してmetaタグのog:imageのエンドポイントを作っています。
そのためサービス自体はSSRする必要がありますがVercelを使えば十分な無料枠でServerless FunctionsでSSRできます。

個人的には下手にhackyな方法をとるよりも、SSRが必要な場面ではおとなしくSSRしておいた方が良い気がします🤔
（結局のところTwitter・Facebookのクローラーのためだけにあれこれやりたくない）

ちなみにNetlifyにPrerenderingという機能があるのですが、これを有効にすることで事前レンダリングされたHTMLを返すことができます。
SPA構成にしてPrerenderingを試してみたのですが、どうもPrerenderingの対象はUserAgentを見ているだけらしくTwitterクローラーであればNetlify Functionsのエンドポイントも問答無用でPrerenderingされるみたいでした。
なのでOGP画像を返すはずのFunctionsがTwitterクローラーの時はPrerenderingされてHTMLを返すようになってしまい、OGP画像が表示されず使えませんでした。。

まぁ、NetlifyのPrerenderingはキャッシュ時間(24〜48時間)もコントロールできないし、なによりBETAなのでまだ実用的ではないですね。。

サイトデザイン

デザインというのはセンスだと思っています。つまるところ、それを磨くためには多大な時間・努力が必要ということです😉
私はデザイナーではないのでそこについて時間をかけて勉強するのは得策ではありません。
悩み・試行した結果、全体的にカードベースのデザインになりました。

また、根本のデザインはいわゆるUIフレームワークに頼るわけですが今回はよく使うVuetifyを利用しました。Vuetifyのコンポーネントを使うことで何も考えずそこそこきれいなサイトができあがります。

https://vuetifyjs.com/ja/

ただ、今回は個人的にやってみたいと思っていたGlassmorphism（グラスモーフィズム）チックなデザインを実装しました。
これが間違いで、Vuetifyはマテリアルデザインを実装するフレームワークなんですね。それに対してマテリアルデザインからかけ離れるようなものを実装すると色々と歪みが生じます🙃

importantを使ってVuetifyのcssを上書きして実装しましたが、こういうことをする場合はTailwind CSSを利用するべきでした。。

https://tailwindcss.com/