[個人開発]猫に助成金・補助金を支出している自治体の情報を集めたサイトをリリースしました

はじめに

エンジニアは(だいたい)猫が好き！！！

私が保護猫の譲渡会のボランティアに参加していて、「こういう情報欲しいなぁ、ないなら作るかぁ」という勢いでサイトを作成して公開しました。
最近では嗚呼!!みんなの動物園｜日本テレビで 保護猫活動 について紹介されています。

公開したサイトについて

url	https://nekonare.website
title	nekonare(仮)
description	猫に関するナレッジを共有するサイト
hosting	Vercel
SEO	Google Analytics 4
advertisement	(None)

コンテンツについては、猫に対して助成をおこなっている自治体を都道府県別に一覧で表示する機能を提供しています。
2023/04/08時点でGoogle検索で nekonare で最上位でHitします。

宣伝

今から猫を飼う、これから飼いたいという人のハードルを下げるために、是非一度来訪していただきたいです。
また、知り合いに共有も歓迎です。

OGPによる描画↓

サイト概要

構想時「これから猫を飼う人に自治体のサポートはこういうのありますよ」を案内したいなぁと思っていたが、webで検索しても見つからなかった。

以下はこれから猫を飼う人の使い方の想定です

• 住んでいる住所で絞り込み検索できる
• 最寄りの自治体がどのような助成を提供しているか可視化する
• 受けたい助成をすぐに見つけたい
• 見聞きしない情報を仕入れたい

以下は保護猫活動者や興味本位でサイトを訪れる方の使い方の想定です

• 住んでいる住所の付近を検索できる
• 複数の自治体を並べて助成状況を把握できる

また、サイト作成にあたり全国の自治体のホームページを閲覧し情報を収集しました。
その過程で、猫をどう定義しているか各自治体毎に特色があることがわかりました。
上記や、猫を扱うサイトを加味し、当サイトでは

• 他のサイトが取り扱っていない情報を可視化する
• 表示は極力シンプルに、凝らない
• 辿り着きたい情報へスムーズに

を掲げてスタートしています。

使用した技術

全般

名称	用途
Github	コード管理はGithubを利用している
Micro CMS	自治体のリソースをヘッドレスCMSで管理 ローカル環境、本番環境は分けていない
Vercel	ホスティングに利用
ムームードメイン	.website についてはムームードメインで取得
Docker	ローカル環境についてはDockerを利用している
VisualStudioCode	IDEはVSCodeを利用し、vue.volar プラグインなどを利用している
Google Tag Maneger	タグ管理にて利用 Google Analytics 4と連携している
Google Forms	お問い合わせ機能で利用している
シルエットデザインプロジェクト	OGPアイコンで利用している

アプリケーション

名称	version
Nuxt	3.3.3
Vuetify	3.1.13
Typescript	5.0.4
OpenAPI Generator	6.5.0
Pinia	2.0.34
pnpm	8.0
Node.js	18.12.0

Nuxt ✖️ ヘッドレスCMS

バックエンドも作っているとリリースまでに時間がかかってしまうのと、
当サイトはクライアントからの登録/更新/削除を必要としないため、Jamstack構成 をとりました。
私が開発経験があったために Nuxt を選択しました。

ヘッドレスCMSを Micro CMS にした理由は、日本語対応しているためです。

Micro CMS のv1APIはopenapi非対応で、自前でAPI仕様書を作成しています。
202304リリース予定のv2APIについてはopenapi対応とのことで、楽しみです。
Micro CMS のAPIクライアントは OpenAPI Generator の typescript-fetch modeで生成しています。

Nuxt ✖️ Vuetify

UI Frameworkとして利用しています。
当サイトはスマホで利用されることを想定しているため、Chromeの開発者ツールとにらめっこしながらレスポンシブ対応を行いました。

Nuxt ✖️ Typescript

コーディング体験をあげるために型付けを採用しています。

Nuxt ✖️ Vercel　✖️ ムームードメイン

ホスティングには Vercel を利用しており、Githubと連携しCI/CDを実現しています。
ドメインについては、GMOの ムームードメイン で格安で取得し、Vercel の画面から連携しました。

SEO

Google Tag ManegerとOGPタグを埋め込んでいます。

無料利用について

Vercel , Micro CMS については無料利用の枠で利用しています。
Vercel については非営利目的であれば無料枠。そうでなければ有料に切り替えなければなりません。
※ 広告を貼るとBanされる

所感

苦労したところ

• データ収集
  • 自治体毎にホームページの構成が大きく異なる
    • ページ内検索を用いれば辿り着けるが、カテゴリーからは辿り着きにくい
  • 自治体毎に猫への理解・定義が異なる
  • 自治体の記載内容が法令を基準としているため、読み解きにくい
  • 自治体の記事は免責事項に記載あるが、URLが変わりやすい
    • 1ヶ月後にリンク切れなど
• 技術面
  • (私の)ホームページ作成経験が少ない
    • 何必要だっけ？を考えながら作っていた
  • レスポンシブ対応辛い
    • PCのChromeと実際のスマホで見え方が異なる
  • なんとなくで実装できるが、ベストな書き方なのか判断できない
    • フロントエンド苦手なので雰囲気で書いている 雰囲気でも動いてしまう

※ 知る > 自治体を知る > 開発秘話にも明記しています

反省

• Jamstack構成 の手法である、ビルド時のみAPIを実行し、静的ページをホスティングする手法をとれば現在よりも早く描画できそう
• 自治体多すぎ・・・17XX？
  • 初期リリースでは400件前後を対応
  • SPAだから初期ロードに時間かかる
• リンク規約とかあるんですね、、、ということで200件ほど当サイト上で非公開に切り替えました

今後の展望

• コンテンツの拡充
  • 競合サイトにない情報を掲載したい
  • ふるさと納税の利用先に猫を選択できるものを抽出
• 広告等の掲載
  • Vercelの有料枠に切り替えるか、別のホスティングサービスに乗り換える
  • ドメインも変更するかも
• プログラムのリファクタリング
  • Storybook入れたい
• ChatGPなどAIと連携して自動でコンテンツを作成したい
• 当サイトの拡散
• Google Analyticsの分析
• 構成図等の設計資料の作成

おわりに

• 制作期間1ヶ月で公開まで漕ぎ着けられた
• 202303については ChatGPT4 が盛り上がっていて、もっと手早くサイト作れるのではないか疑惑
• 猫のこと、自治体のことの両面において無茶苦茶知見が広がった