こんにちは、こたろうです。
本日は私が作成したふるさと納税支援アプリ「ふるセレ」についてご紹介させていただきます。
アプリ名：「ふるセレ」https://furusele.herokuapp.com/
＜概要＞
ふるさと納税商品 の紹介アプリです
・周りにふるさと納税の経験がない人が多いことから作成しました。
・年収・家族構成で控除額を算出し、さらに好きなカテゴリーを選択することで、
その人に適切なふるさと納税の商品を勝手にセレクト！
・商品はユーザーの選択に応じて「さとふる」からスクレイピングで取得します
・選択した商品は全て購入サイトへのリンクになっており、リンク先から注文可能です
・キャラクターはココナラで外注しています。
■トップ画面
■ER図
■使用技術
▼フロントエンド
・HTML(HAML)・CSS（SCSS）・JavaScript（jQuery）
▼サーバーサイド
・Ruby 2.6.6・Ruby on Rails 6.0.3.4
▼インフラ・開発環境
・PostgreSQL 13.1・heroku・Rubocop・RSpec
■使用Gem
annotate/aws-sdk-s3/better_errors/binding_of_caller/devise/faker/activerecord-import/nokogiri/gon/google-analytics-rails/byebug/dotenv-rails/factory_bot_rails/pry-byebug/rails-erd/rspec-rails/rubocop-rails/erb2haml/capybara
https://github.com/kojikoji00/furusele-app
■主な機能
・ログイン機能（ゲストログイン）
・ふるさと納税詳細ページ
・控除額算出
・カテゴリー選択
・スクレイピング機能
（カテゴリーと控除額を条件にさとふるのランキング上位5つをスクレイピング）
・マイページ（過去に抽出した履歴の表示）
・お問い合わせページ
・セキュリティ対策
（セッション期限・アカウントロック・パスワードポリシー）
■アプリの作成について
＜作成方針＞
・技術をたくさん盛り込むよりも、まずはきちんと使えるサイトを作る。
・楽天やさとふるは商品を探す上でとても役立つサイトですが、商品の選択肢が多く、
その分何を選べば良いかわからなくなることがあるため、わかりやすさとシンプルさ
を重視して差別化を図る。
＜ターゲット＞
・初めてふるさと納税をする人
・ふるさと納税の商品をゆっくり選ぶ時間がない人
＜作った目的＞
・ふるさと納税に興味を持ちながらもできていないという人が周りに多いため
・技術をたくさん盛り込むことも重要だが、まずはシンプルできちんと使えるアプリ
を作ろうと考えた。
・他のふるさと納税支援サイトは商品が多く迷ってしまうため、選択したカテゴリー
と控除額によって勝手に商品をセレクトするアプリを作成しようと考えた。
＜作成手順＞
①ワイヤーフレームとサイトマップ・ER図を作成 ②使用技術の確認
③作成 ④Rspecによるテスト ⑤手動テスト
⑥家族に使ってもらいながらアップデート
＜苦労した点＞
・NokogiriのGemを使用してのスクレイピング
外部APIを使用することも考えたが、勉強のためスクレイピングで実装
スクレイピングはオンラインスクール等で習っていない技術のため、
自分で調べながら実装した。
■ワイヤーフレームとサイトマップ（一部抜粋）
■実際の操作画面
年収・家族構成登録（控除額算出）
カテゴリー選択
商品表示画面（例）
・スクレイピングによる商品情報表示（nokogiriを利用。さとふるから情報取得）
・商品をクリックすることでさとふるの商品購入画面へ遷移する。
■アプリの改善項目
＜機能面＞
Githubのissueにて管理をしているので、適宜更新していきます。
・カテゴリー選択後にスクレイピングが毎度走るので時間がかかる
→ ユーザーの離脱リスク を減らす
・ログインしていないユーザーでも機能を一部使えるよう修正
→ 会員登録への誘導
・セレクトボックス のレイアウトの修正
→ 初めてのユーザーが見てどのようなカテゴリーがあるかがわかり辛い
写真でカテゴリー一覧を見せるなど工夫が必要
・控除額の算出ロジックの修正
→ 現在はDBからおおよその金額を算出しているのみで正確な数字ではない。
ただし正確な金額を出すために所得税や住宅借入金等の細かい金額の入力が
必要であり、ユーザーにも手間がかかることから今回は実装を見送っている。
・商品表示のロジック修正
→ 選択した商品カテゴリーの選択される比率の修正。
現在はカテゴリーを選択した状態をスクレイピング先のURLとして指定。
共通のランキングから上位5つを持ってくるロジック。
ただそれだと場合によって選ばれないカテゴリーが出てきてしまう。
同じ比率で選ばれるよう設定する必要がある
・スクレイピングする対象を増やす。
→ ①さとふるだけでなく楽天等からも取得できるように。
②還元率や地域別などからも情報を取れるように
・レスポンシブ対応
→ 一般向けなので携帯画面からでも見れるようにする必要がある。
・AWS対応
→ 読み込みに時間がかかる。実運用だとAWSを使用しているケースが多いため。
＜コード面＞
・テスト項目を増やす
→ 現時点では手動テストを実施。機能面追加時には必要となる。
・自動テストの実装
→ 機能的に現状は不要と判断した。
・可読性の向上
→ コントローラーが肥大化している
・保守性の向上
アプリについての紹介は以上です。
ぜひよろしければ一度お試しください！
ご意見がありましたらぜひ問い合わせページよりお願いいたします。
■リンク