推しアイデア
今回のハッカソンでは、検索周りの実装をこだわりました!!
―
今回のハッカソンでは、検索周りの実装をこだわりました!!
自分だけの旅行ストックアプリと自分に特化した検索エンジンが欲しかったから!
Nuxt3とFirebaseです! 一人でハッカソンに出ても、フロントエンドを実装するだけで、アプリが出来上がるので、大好きです!
自分が作ったので、Rafutabi(ラフタビ)という、これまで訪れた場所を簡単にストックできて、知人とリストを共有できて、検索もできて、旅を振り返ることが簡単にできるwebアプリ。
言語: Node
、TS
フレームワーク: Nuxt.js
その他: Firebase
今回力を入れたのは完全にFAQではなく、FAQから発想を転換させて、地点の検索機能
を頑張った
地点の画像をuploadすると、裏側のbatch処理で画像内のオブジェクトを検知して、テキストに起こして(GCPのcloud-vision)、それを画像のキャプションテキストとして、検索のクエリに使っている。視覚情報でも、テキスト検索をできるようにしました。
地点の追加をしようとしたとき、店名や場所が覚てないことや店名が曖昧なときにもあるので、ユーザーが、入力したテキストと自分の位置情報(getCurrentPosition)も検索のクエリに使って、検索ヒットする可能性を上げている
d3.jsとsvgとjsonを巧みに使って、日本地図を描画して、ストックした地点の個数を計算して、それに応じて、都道府県の色を濃くなるようにしている(経県値と似ている??)
京都 ご飯屋さん
と調べることで、自分の中のリストから選ばれるので、検索にもノイズが入りづらいようになっています最初はSPAにしていたのですが、初期レンダリングが遅くて、自分なら使わないなっていう気持ちにはなったので、SSRにして、ニンジャのごとく早くなりました!嬉しい!🎉