Table of Contents
はじめに
これはDeafEngineers Advent Calendar 2022の11日目の記事です。
こんにちは
株式会社WE UPというスタートアップでフロントエンドエンジニアとして働いている、Aki(@jsjx1995)です。
今回はDeafEngineersのアドベントカレンダーということで、自分もご多分に漏れず聴覚障害を持っている一人です。
今回は障害者手帳で割引が効くかどうかを検索するときに、食べログのように場所と割引情報が簡単に検索できるようなサービスがあればいいのにな、という想いから土日の二日間で自分でそういうサービスを作った話を書きます。
アドベントカレンダーに書きます！というふうに意思表示でもしないとアウトプットしないなと思ったのと、これから色々な人を巻き込んでいきたいなと思ったので、記事にしようと思いました。
作ったサービス
TRIPASS
https://tripass.xyz
Github
https://github.com/jsjx1995/tripass-pwa
開発の目的
自身の問題をITで解決したい
冒頭でもお話したように、私は聴覚障害を持っており、同時に障害者手帳を持っているのですが、障害者手帳を持っていると実は思っているよりも様々な場所で割引が受けられます。
しかし、自分は昔から調べることが苦でないし、パソコンやスマホに慣れているので、問題なく自分が欲しい情報を手に入れる事ができますが、自分がこれから行こうとしている駐車場料金がいくらなのか、利用しようとしている施設がいくらなのか、もっと簡単に検索したいと感じていました。
また、そういったことを調べるのが難しい、あるいはかなり億劫だと感じる人は、障害の有無に関わらずに、少なくないと思うので、そういった人のためにも、こういったサービスは需要がある
そのため、そういった情報を某グルメ検索サービスやその他の便利なアプリのように、ITリテラシーが低い人でも情報にアクセスできるアプリがあればいいなと感じていましたが、既存のサービスは文字ベースで、GoogleMapsのように直感的に検索できるものではなかったため、せっかくだから自分でそれを作ろうと思いました。
自分のサービスを持ってみたい
エンジニアなら誰しも持つ野望の一つだと思います。
自分自身のサービスをなにか作りたいなとずっと思っていましたが、モチベーションが長続きしなかったり、技術力が足りないとか言い訳したりで何度も挫折しています。
挫折した理由の一つとして、技術力が足りないのはあると思いますが、ユーザによるレーティング機能や、写真投稿機能、お気に入り機能など、最初の段階で様々な機能を盛り込みすぎたことでした。
そのため、色々な機能を盛り込みたいという気持ちを抑えて、スコープを極限まで削ぎ落として、百聞は一見にしかず、ということで、人に見せることができる形あるものをつくる、土日の二日間で開発できるレベルのものにする、というふうにしたのがよかったのかなと思います。
ただ、実際に作ってみると、マップに表示させるだけだとUI/UXもあったもんじゃないし、サービス名もホーム画面もないから認知はされづらいわで、使ってもらいたいのであれば最初の規模はそれなりのものにする必要があるのだなと感じました。
使用した技術
フロントエンド: TypeScript, Next.js, Material-UI(v5), Mapbox
バックエンド: MySQL, tRPC
インフラ: PlanetScale, Vercel
その他: Python, BeautifulSoup
フロントエンドは、現在の仕事や副業でも使っていたNextJSとTypeScriptです。
バックエンド（API）は簡単なリクエスト処理しかしないので、NextJSのAPI機能を使ってやろうと思いました。
本当は勉強がてらGoを使って書こうと思ったのですが、個人開発では、技術学習のためにやるのか、サービス・アプリのためにやるのかはっきりさせて、サービス・アプリのためにやるならあまり慣れない技術を使うなと聞いたことがあり、言語学習は別の機会にすることにしました。
ただ、tRPCは使ってみたかったのと、学習コストがそんなに高くないなと思ったので使ってみました。
インフラはVercelです。
DBに関しては、最初Firebaseのfirestoreでやろうと思ったのですが、key-value形式はどうにもやりにくいなと思い、調べたらPlanetscaleというサービスが最近熱い模様なので、MySQLを使ってそこにDBを置いています。
今回サービス内部で表示するデータですが、某サイトからPython, BeautifulSoupを使ってスクレイピングして取得しました。
また、マップ表示はMapboxを使っているのですが、緯度経度情報はGoogleMapsのGeocoding APIを使ってデータを取得しました。
この時GCPを登録したばっかりだったので無料枠があったのですが、それでも全部で３，４万ぐらいかかってしまいました。
今思うと、都道府県ごとでデータセットが分けられていたので、月ごとで細かくAPIを叩けば、月ごとの無料枠でやりくりすることができたのかもしれないなと思いました笑
これからやりたいこと
Next Actionとして、以下のことをやりたいと思っています。
- アイコンをもう少し統一感のあるものにする。
- PCの場合だとマウスをアイコンにホバーすると吹き出しが表示されて、それをクリックするとモーダルが表示されるのだけど、スマホだとタッチすると吹き出しは一瞬しか表示されずに、モーダルがそのまま表示される。
- アイコンをマップに表示させるまでが遅すぎるので、どうやれば改善できるのか調べる。
- 別のアプリとしてのほうがいいかもしれないが、都民は都営が無料で利用でき、都営の路線情報や時刻情報が公開されているため、都営の路線（地下鉄やバス）のみを利用した乗換案内サービスを実装したい。
- アルゴリズムとしてもダイクストラ法とかの勉強になりそう。
一人でやっていると自分のモチベ次第になってしまうので、やはりデザインができる人や他の開発者など、様々な人を巻き込んでいくのがいいですね。
以上です。