はじめに
はじめまして、Ryuseiと申します。
プログラミングスクールでRubyとRuby On Railsを中心に学習しているのですが、
歯ブラシの情報収集を行いながら、歯ブラシのリサイクルを広めていくアプリとして「歯ブラシLife! ~Make up environment~」(以下歯ブラシLife)を作成しました。
アプリURL: https://www.haburashi-life.com
Github URL: https://github.com/TAMETOMO8/Haburashi_Life
なぜこのアプリを作ったのか？
以前からドラッグストアなどで、「歯の間が磨けていない気がするからこの歯ブラシを使おう」「今回はどんな歯ブラシを使おうか?」と店頭で見比べたり、実際に使ってみたりと歯ブラシに関心がありました。そんな中で、ふと「他の人はどんな歯ブラシを使用しているのか?」と疑問に感じました。他の人が使用している歯ブラシを知るサービス、アプリがないか調べましたが、調べた限りでは見つけることができなかったので、無いなら自分で作ってしまおうと考え、このアプリを作成しました。
歯ブラシのリサイクルについて
他の人が使用している歯ブラシを知るサービス、アプリがないか調べている際、LION株式会社さんが歯ブラシのリサイクルプログラムを実施していることを知りました。
こんな取り組みが存在していたなんて！と感銘を受けると同時に、この取り組みについて他の人が知らないのはすごく勿体無いと感じました。恥ずかしながら、自分も知りませんでした。
そこで、リサイクルなど歯ブラシを使い終わった後にも意識を向けていただきつつ、歯ブラシの情報収集を行えるアプリにしようと、本アプリを作成しました。
機能紹介
このアプリはLINEの機能を使用します。アプリのLINEアカウントを友だち登録することでメッセージの受信を行えます。
まずトップページのリンク、もしくはヘッダーからログインしてください。LINEでのログイン画面に移動するので、画面の指示に従ってください。
ログイン後は、歯ブラシの検索画面に移動します。ブランド名やメーカー名を入力して歯ブラシの検索を行い、使用する歯ブラシを登録しましょう。
登録後に歯ブラシの種類、ブラシのかたさ、使用終了日を設定し、ボタンを押すと使用開始です！使用終了日が来ると、LINEでお知らせします(ブラウザバックなどで使用開始ボタンを押し忘れた場合もLINEでお知らせします)
また、使用開始から3日後には、使ってみた感想の書くコメント機能の解放をLINEメッセージでお伝えします。
使い終わった後は、歯ブラシの詳細画面にリサイクルボタンと掃除ボタンが追加されます。
歯ブラシをリサイクル、または掃除道具として使用するを選ぶと、環境改善ページの改善度が上昇します。
みんなで改善度100%を目指しましょう！
主な使用技術
バックエンド
- Ruby
- Ruby On Rails
この二つの選定理由ですが、プログラミングスクールで学習したのがRubyとRuby On Railsだったからというのもありますが、働きながら開発を行うことになり、他言語をキャッチアップするには時間がかかり過ぎると判断しました。慣れた技術で少しでも開発速度を上げるため、選択しました。
フロントエンド
- Bootstrap
この技術もプログラミングスクールで使用していた技術です。ただ、スクールのカリキュラム中はかなり浅い段階での学習しかできていなかったので、この機会に改めて開発しながら学習していこうと考え選択しました。
特にグリッドシステムの概念を理解するのに苦労しましたが、その分より理解を深められたと思っています。
- JavaScript(バニラ)
元々興味があった技術で、必要があれば使ってみたいと考えていた言語でした。検索実行と検索結果画面でのページ遷移がかなり重くなってしまったので、これを解消するためのローディングアニメーションやローディングテキストの表示に使用しています。他には編集画面で電動ブラシを選択した際や、過去の日付を選択した際に、テキストやボタンを専用のものに切り替えるためにも使用しています。
- stimulus-autocomplite
歯ブラシ一覧画面に検索フォームを用意しているのですが、検索時の入力補完機能として使用しています。せっかくRails7系を使用しているので、関連したコンポーネントを使用したいと考え採用しました。
API
- 楽天API
歯ブラシの登録をユーザーに全て手入力してもらうのは流石にどうかと思い、どうするべきか考えていた時に、スクールの受講生の方から商品検索のAPIを使用することを提案いただきました。
他のAPIと比べてみても導入が容易で、使用のための条件も緩かったので選択しました。楽天APIの使用するにあたり、以前下記の記事で紹介した複数のジャンルIDでの検索処理を実装しています。
【Rails】楽天APIで一度に複数のジャンルIDで検索してみた
実際の開発では歯ブラシとデンタルグッズ、双方の検索で共用するためconcernsに処理をまとめ、更にそれぞれの検索で異なるジャンルIDとNGワードを使い分けられるようにするなど、改良を加えています。
- Messaging API
歯ブラシの使用終了のお知らせなど、各種通知を行うために導入しました。
この機能を利用できるのがLINEを利用しているユーザーに限られてしまうのが懸念点ですが、すでに多くの方がLINEを利用しているほか、使い慣れたアプリで情報のやり取りを行えた方がユーザーの負担にならないと考え使用を決めました。
デプロイ
- Heroku
他のデプロイ方法より素早く実装できると考え使用を決めました。
定期的なLINE通知のために、現在はHeroku schedulerを使用しています。
こだわったポイント
ユーザーが使いやいサービスになるように心がけました。
メーカーやブランドがわからない方をサポートするため、入力補完機能を備えたドロップダウンを作成し、ドロップダウン最上段に説明文を追加しています。歯ブラシの検索ではどの歯ブラシがどのジャンルかわからない、あるいは見つからないという事態を避けつつ、ユーザーに余計な手間を取らせないため、一度に複数ジャンルで検索するようにしました。また、編集画面で電動歯ブラシを選択した場合は他の歯ブラシとは違うテキスト内容へ切り替えるようにするなど、ユーザーが困惑することを避けるようにしています。
今後の方針
現在は歯ブラシに特化していますが、歯を磨く際に全体を丁寧に磨けたか、歯茎を傷つけないように力を抜いて磨けたかなど、自身のブラッシングを定期的に評価していける機能の実装など、よりデンタルアプリらしい機能を実装していきたいです。
機能実装のためにより柔軟で自由度の高いLINE通知を行う必要があると考えているので、Heroku SchedulerからActive Job、gem Sidekiq、Redisを使用した非同期のバックグラウンド処理に更新したいと考えています。現時点ではジョブのキューイングに行き詰まっているので、他のバックグラウンド処理の方法も含め引き続き学習を続けていきたいと思っています。
最後に
高い技術力をアピールできるアプリ、というわけではないと感じていますが、様々な機能やサービスを結びつけたユニークなアプリにはなったのではないかと考えています。
是非みなさんもこのアプリで歯ブラシの定期的な交換、そしてリサイクルを行っていきましょう！
最後まで読んでいただき、ありがとうございます！