ツマジロカップ

簡単に訪れた地点をストックできるアプリ

https://rafutabi.kinjo.me/

TypeScript

Node.js

Nuxt.js

Firestore

TailwindCSS

旅行で尋ねた地点を手軽に貯めれる&振り返える&検索できるサービス

金城翔太郎

推しアイデア

今回のハッカソンでは、検索周りの実装をこだわりました!!

作った背景

自分だけの旅行ストックアプリと自分に特化した検索エンジンが欲しかったから!

推し技術

Nuxt3とFirebaseです! 一人でハッカソンに出ても、フロントエンドを実装するだけで、アプリが出来上がるので、大好きです!

プロジェクト詳細

初めに

自分が作ったので、Rafutabi(ラフタビ)という、これまで訪れた場所を簡単にストックできて、知人とリストを共有できて、検索もできて、旅を振り返ることが簡単にできるwebアプリ。

使用技術

言語: NodeTS フレームワーク: Nuxt.js その他: Firebase

今回力を入れたのは完全にFAQではなく、FAQから発想を転換させて、地点の検索機能を頑張った

  • 地点の画像をuploadすると、裏側のbatch処理で画像内のオブジェクトを検知して、テキストに起こして(GCPのcloud-vision)、それを画像のキャプションテキストとして、検索のクエリに使っている。視覚情報でも、テキスト検索をできるようにしました。

  • 地点の追加をしようとしたとき、店名や場所が覚てないことや店名が曖昧なときにもあるので、ユーザーが、入力したテキストと自分の位置情報(getCurrentPosition)も検索のクエリに使って、検索ヒットする可能性を上げている

  • d3.jsとsvgとjsonを巧みに使って、日本地図を描画して、ストックした地点の個数を計算して、それに応じて、都道府県の色を濃くなるようにしている(経県値と似ている??)

image

  • AI(ChatGPT)を使って、自分が貯めたリストから、より曖昧検索でも対応できるようにしている 例えば、京都 ご飯屋さんと調べることで、自分の中のリストから選ばれるので、検索にもノイズが入りづらいようになっています

最初はSPAにしていたのですが、初期レンダリングが遅くて、自分なら使わないなっていう気持ちにはなったので、SSRにして、ニンジャのごとく早くなりました!嬉しい!🎉

金城翔太郎

@kinjo