リリースまで3年かかった個人開発
2023年4月2日に"SakeDoko"（β版）という日本酒ファン向けのWebアプリをリリースしました。
振り返ると、本格的に開発を始めたのが2019年12月だったようです。
リリースまで3年以上かかってしまいました😅
機能概要
▼ 買った日本酒の銘柄と場所を投稿すると地図に記録できます。
▼ 投稿フォーム
開発の動機
私がなぜ"SakeDoko"を開発したのか一言でいうと、日本酒が大好きだからです。
もう一言付け足すと、酒屋さんで買う日本酒が最高だからです。
- 「どこの酒屋さんで何の銘柄を買ったのか」 -
これを記録できたら面白いだろうと思って開発に至りました。
サービス名の由来にもなっています。
私が日本酒にのめり込んだきっかけ
私が日本酒にハマり出したのは社会人になってからだったと思います。
20代半ばくらいだったかな。
もともと大学時代の友人の影響あってお酒は好きだったのですが、
大学時代に飲んだ吉野川が美味しくて、美味しい日本酒の味わいがなんとなく記憶に残っていたんですよね。
それで、あの時の吉野川を探して某デパ地下に買いに行ったのが最初です。
それからしばらくはデパ地下で気になった日本酒を見つけては買って飲むようになりました。
いろんな銘柄を飲んでいくにつれて、日本酒ってこんなに味わいの幅が広いのか。
と、日本酒の奥深さを知るようになりました。
すっかり日本酒の虜になった私は、日本酒が美味しい角打ちで有名な地元のお店に足を運びました。
そこはお店の隣が酒屋さんになっていて、そこで仕入れたお酒を提供していました。
確か飲んだ銘柄は「たかちよ」。
めちゃくちゃ美味しかったです。
酒屋さんが仕入れるお酒ってこんなに美味しいのか！
と知った私は、以降酒屋さんで日本酒を買うようになりました。
百貨店やスーパーと違って個人でやっているお店も多いので、ちょっと最初は入るの勇気いりました。
でも1度入ってしまえればもう大丈夫です。
今では地元エリアにお気に入りのお店が3件あります。
どの酒屋さんm...いやこれくらいにしておこう。
開発
技術構成
おおまかな技術構成は次のとおりです。
- バックエンド： Hasura
- フロントエンド： Next.js(React)/TypeScript/Apollo Client/TailwindCSS
- 認証： Auth0
- ホスティング： Vercel
- データベース： PostgreSQL(Heroku)
まず、React を勉強したい想いが強かったのでフロントエンドは開発当初から変わっていません。
バックエンドについては最初の頃は Rails でAPIを開発していました。
ただ、一人で慣れない React でフロントエンドを開発し、さらにバックエンドも開発して...では Rails に慣れているとはいえめちゃくちゃ時間がかかってしまうなと悩んでいました。
そこでいろいろ調べて行き着いたのが Hasura でした。
Hasura はデータベース/テーブルを作成するとひととおりの GraphQL API を作ってくれます。
自分で API を作る必要がないので、 Hasura を導入すればフロントエンドの学習/開発に集中できると思いました。
チュートリアルもあったので基本的な使い方はマスターできましたし、 Auth0 との連携も比較的簡単にできました。
振り返ると Rails で開発していた分がけっこうなロスでした。
お世話になった教材
Next.js(React)/Hasuraで大変参考になった教材が『[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発』です。
まさに、自分が採用したい技術構成でした。
SakeDokoはこちらの教材をベースに構築しましたし、ApolloClientを使っているのもこちらの教材の影響です。
苦労したこと
React は入門学習から始めたので実装には苦労しました。
学んだことを応用して実現したい機能をコードに落とし込むのはやっぱり難しくて、トライアンドエラーで実践的なやり方が身に付いていく感じでした。
他に苦労したことといえば、特に次の3つかな。
- Googleマップの実装
- 機種依存によるスタイル崩れ
- 銘柄の登録
Googleマップの実装
SakeDokoの根幹になる機能で、
- 投稿データから目的の場所にピンを立てる。
- ピンを選択するとウィンドウが開くようにする。
- 検索結果から地図にピンを立てる。
などのGoogleマップに関する実装はかなり苦戦していました。挫けそうだった...。
React 学習しつつ React の書き方で Googleマップの機能を実装していくのは骨が折れました。
機種依存によるスタイル崩れ
スマートホンでのスタイル崩れがやっかいでした。
デベロッパーツールのスマホだと意図したとおりに表示されても、実機で確認すると崩れているとか。
特に日付入力フォームが iOS だとスタイルがあたらなくて苦労しました。
動作確認は必ず実機でやる必要があるんだなと実感しましたね。
ローカルでもスマホの実機で動作確認できるように下記の記事のとおりSSL対応しました。
銘柄の登録
単純作業なのですが数がとっても多かったので、途中から私の妻と友人の奥さんに入力作業を手伝ってもらいました。
酒蔵のサイトあるいは酒屋さんのオンラインショップで掲載されている銘柄を、スプレッドシートに入力する。
これを約2,000銘柄やりました。同銘柄の造り違いも合わせると約9,200になります。
今年の作業はほとんど酒蔵のサイトを見て銘柄チェックしてました😅
リリースは始まりに過ぎない
リリースはしましたがβ版ですし、正直まだまだ機能不足です。
まだやりたいことの5%もできていません。
今後も開発を続けて使っていただける人を増やしていきたいと考えています。
ゆくゆくは、飲み手・造り手・売り手を繋げられるようなサービスにしていきたい。
最後まで読んでくださり、ありがとうございました。
Discussion