https://fablesearch.com
現在停止中
バックエンドのレポジトリはこちらです。 https://github.com/mskk3215/fable_backend
fablesearch は、昆虫採集を目的とする人たち向けのサービスです。
主な機能として、昆虫生息地・ルート検索機能、発見した昆虫画像を投稿する機能、昆虫採集の状況を把握するための分析機能があります。
過去に昆虫に対する興味・関心が湧いて実物を見ようと思ったものの昆虫が生息する場所を探し出せなかった経験や、 現時点で昆虫図鑑など昆虫画像一覧を取り扱うサービスは存在するものの昆虫の位置情報を検索するサービスが無かったこと、 また近年市場拡大中の STEM 教育分野と昆虫が親和性ありそうだったという点から、今回のサービスを開発しました。
・検索窓に昆虫名を入力して検索マークをクリックすると、生息地一覧が表示されます。
・地図上のマークかリストのどれかを選択し、矢印アイコンをクリックするとルート検索ページにリダイレクトされます。
・出発地を入力するか地図上のどこかの点をクリックし、交通手段を選択し、経路を算出をクリックすると、特定の場所からの距離・交通手段ごとの時間を表示します。
・手順リストが表示されるので、リストのどれかをクリックするとその場所が拡大表示されます。
・昆虫画像を投稿できます。
・投稿後、編集画面にリダイレクトされ、昆虫名・性別、発見した場所、撮影日時を入力することができます。
・昆虫名・性別のセット、発見した場所、撮影日時のどれかを入力すると保存ボタンがアクティブになります。
・shift key を押すことで複数選択・選択解除も可能です。
・"フォロー中"をクリックすると、フォローしているユーザー一覧を確認できます。
・投稿順、いいね順、撮影日時順に並び替えることができます。
・画像をクリックすると、詳細画像が表示されます。
・"共有"ボタンから Twitter,Line シェア、リンクコピーができます。
・過去に投稿された画像が投稿単位で表示されます。
・投稿画像は、新着(投稿された全ての投稿)、フォローしているユーザーの投稿、注目されている投稿(いいねが多い)でタブの切り替えが可能です。
・地域選択では、デフォルトで東京都が入力されており、東京都全体の採集状況の結果が表示されます。もし市区町村別の状況を確認したい場合は市区町村を選択して結果を表示します。
・選択された地域での採集率、未採集昆虫一覧、採集済み昆虫一覧、その地域での採集率ランキングが表示されます。
・未採集昆虫一覧の現在位置を入力すると、現在位置から近い公園に表示が変更されます。
・図鑑アイコンをクリックすると、図鑑に登録されている昆虫一覧が表示されます。また昆虫名での絞り込み、出没通知の on/off を切り替えができます。
・図鑑ページでは、昆虫の採集状態や投稿された画像の数、投稿画像、特徴、過去に撮影された月・時間、最近の出没先を把握できます。
・通知アイコンから、通知設定している昆虫の出没通知一覧を閲覧できます。
- Ruby 3.1.2
- Rails 7.0.4
- MySQL 8.1.0
- jbuilder
- geocoder, exifr
- Rubocop
- Rspec
- TypeScript 5.1.6
- React 18.2.0
- Next.js 14.1.3 (app router)
- MUI
- react-chartjs, react-leaflet
- react-google-maps/api
- prettier, eslint
- Jest, React Testing Library
- Docker / Docker-Compose
- Github Actions (ECR, ECS, Rubocop, Rspec, Jest)
- Nginx
- AWS (Route53, CloudFront, S3, VPC, ALB, ECR, ECS Fargate, RDS, ACM, SSM, CloudWatch, IAM)
- Terraform
- 新規登録機能
- ログイン機能、ゲストログイン機能、ログアウト機能
- マイページ表示機能
- プロフィール変更機能
- ユーザーページ表示機能
- フォロー追加・解除機能
- フォロー一覧表示機能
- シェアリング機能
- 投稿機能
- 投稿画像編集機能
- 投稿画像削除機能
- 投稿一覧表示機能
- 投稿並び替え機能
- 投稿詳細機能
- いいね機能
- 公園検索機能
- ルート検索機能
- 採集地域選択表示機能
- 採集率表示機能
- 採集済み/未採集リスト表示機能
- ランキング表示機能
- 昆虫図鑑機能
- 昆虫図鑑リスト表示機能
- 昆虫の出没月・時間表示機能
- 直近の昆虫出没場所表示機能
- 昆虫出没通知機能
- 様々なデバイスで操作・閲覧しやすいようにレスポンシブデザインを適用しました。
- MUI や react-chartjs、react-leaflet を使用してデザイン性のある UI を実現しました。
- toast やロード処理（スピナー、無限スクロール、プログレスバー）を追加し、ユーザーがエラーや動作状況を把握できるようにしました。
- Next.js の SSR をユーザーページに適用し、読み込みを高速化しつつ、Google などの検索アプリのクローラーに捕捉されるようにしました。
- シェアリング機能により、アプリがネット上で展開されやすくしました。
- ユーザーページでは、ログインしていない場合にログインを促すモーダルを表示し、ユーザー登録数が増えるようにしました。
- TypeScript（strict）、Prettier、ESLint、Jest, RTL を使用してコードの一貫性と品質を確保しました。
- Rails API モードを使用してフロントエンドと完全に分離しました。
- exifr を使用して画像から撮影場所と撮影日を自動取得し表示することでユーザーの入力手間を省きつつ、昆虫の生息地検索に必要な昆虫名と住所のデータを集めやすくしました。
- geocoder を使用して、未採集の昆虫の場所を特定の場所から近い順に表示できるようにしました。
- Rubocop と Rspec を使用してコードの一貫性と品質を確保しました。
- session_store を same_site:strict に設定し、アプリでの操作が一定時間ない場合に自動でログアウトするなど、セキュリティを向上させました。
-
GitHub Actions を用いて CI/CD パイプラインを構築し、コード品質を確保するとともに実装から本番環境へのデプロイを効率化しました。
-
Terraform を使用してインフラ管理を容易にしました。
-
CloudFront を使用して S3 に保存した画像をキャッシュし、画像読み込みの速度を改善しました。
-
env の代わりに SSM に環境変数を保存することで、環境変数の管理を容易にしました。
以上をもって、当アプリの紹介は終わりになります。
最後まで閲覧いただき、ありがとうございます！