アプリ概要
都内のシェアハウス物件を簡単に、シェアハウスに対するリアルな評価を参考にしながら検索できるアプリです。
- 都内にあるシェアハウスを検索できる
- 内覧に行ったことがある物件や以前住んでいた物件の口コミを点数付きで投稿する機能を実装
- 気になる物件をマイページで管理できる機能を実装
下記ページで公開中です！
https://share-house-app.herokuapp.com/
このアプリを作った背景
自分が困った経験と、「こういうものがあればもっとシェアハウス入居者が増えるのでは」という思いつきから。
具体的には下記の通りです。
1. シェアハウスの良さを共有したい
2. シェアハウスならではのリアルな情報を得られるサイトがない
1. シェアハウスの良さを共有したい
私は２２歳のときに関西から上京し、女性限定の８名住みのシェアハウスに1年半住んでいます。上京した際にシェアハウスを選んだ理由は、「初期費用も含めて安い家賃で便利な立地に住むことができるから」です。値段と立地の選択肢だけでシェアハウスを選んだのですが、体調不良や災害時にお互いに助け合うことができる、友人ができる、不在時に郵便物を受け取ってもらえる、風呂トイレなどの掃除不要など、実際に住むと思ってた以上にメリットを感じました。
一方で、シェアハウスに住んでいると話すと、驚かれることも多いこと、シェアハウス経験者が少ないことを感じました。
そこから、「もっとシェアハウスの良さを知ってもらいたい、一人暮らし物件を探す時の選択肢にシェアハウスを考えてもらいたい！」
と考えるようになり、「シェアハウス版物件検索サイトを作ってみよう！」と考えました。
2.シェアハウスならではのリアルな情報を得られるサイトがない。
私は初めてシェアハウスを探した時に、どのサイトから探したらいいのか、シェアハウスってどういう雰囲気なのかはサイトからでは全くわからず、とても苦労しました。私の友人も含めて、シェアハウスは共同生活だからこそ、人間関係、共同部分の衛生環境、騒音、匂いなど内見だけじゃわからない不安点を持って入居を始めます。
そこで、「物件ごとの入居者・内見者の口コミ情報を集約できるサイトを作れば便利なのでは？」と思い、「それを実現できるサービスを作ってみたい」と今回の作成に至りました。
機能一覧
TOKYOシェア不動産に付けた全ての機能は以下の16機能です。
| 機能 | Gem | |
|---|---|---|
| ① | ログイン機能 | devise |
| ② | 物件登録機能(CRUD) | × |
| ③ | 部屋情報登録機能（CRUD 1対多のアソシエーション） | × |
| ④ | 保存機能(Ajax) | × |
| ⑤ | 口コミ投稿・評価機能(Raty.js) | × |
| ⑥ | エリア検索 | ransack |
| ⑦ | こだわり条件検索 | ransack |
| ⑧ | 検索結果ソート機能 | ransack |
| ⑨ | 地図表示機能（google map API) | geocoder |
| ⑩ | 共有設備の有無をアイコン表示機能(多対多のアソシエーション) | × |
| ⑪ | ページネーション機能 | kaminari |
| ⑫ | 口コミ評価結果をグラフ表示(css) | × |
| ⑬ | 画像アップロード機能 | CarrierWave |
| ⑭ | マイページ機能 | × |
| ⑮ | 簡単ログイン機能 | × |
| ⑯ | 管理者機能 | × |
ここから、特に工夫して実装した７機能について解説して行こうと思います！
1. 保存機能
機能の概要
- ユーザーは「良い！」と思った機能をボタン一つで保存し、簡単に保存物件情報を見返すことができる。
実装する際に工夫したこと
- ajaxを使って非同期実装。
- 実装理由：物件選びは、他の買い物やお店選びと比べて即決する人は少なく、数多くの物件情報を比較してじっくり検討すると考えました。いろんな情報を検討する上で、いいと思った物件を保存しあとからすぐに見返すことができる機能は必須だと考え、実装しました。
2.口コミ投稿・評価機能
機能の概要
- 内覧時、入居時のパターンを分けて口コミを投稿できる
- レビュー点数を星を使って登録・表示
実装する際に工夫したこと
- ユーザーが口コミを投稿する際に苦に感じないかつシェアハウス検索ユーザーにとって有益な情報提供ができる簡潔でシンプルな投稿フォーム。
- シェアハウス選びにおける不安を払拭するために、評価項目に「共用部の清潔さ」「騒音」「所在地」「人間関係」の入居者・内見者だからわかる４項目を追加。
- jQueryのプラグイン（Raty）を使用し、評価を★で表すことで一眼で物件の評価がわかるように実装。
3.グラフ表示機能
機能の概要
- 物件の口コミ評価点数を項目毎に棒グラフで表示
- rubyのif文での条件分岐とcssを組み合わせることで実装
実装する際に工夫したこと
- 一眼で物件評価をわかるようにシンプルな棒グラフ表示を選択。
- 最も簡単で工数のかからない実装をするために、javascriptではなくcssを使って実装。
- パーシャルを使って同じコードを繰り返し記入しないようにリファクタリング。
4.エリア検索機能
機能の概要
- 検索ボックスにエリア名を入力すると、エリア検索が可能
- エリア検索ボックス内のボタンからエリア検索が可能
実装する際に工夫したこと
- シンプルでユーザーが検索しやすいデザイン
- エリア名の元データ投入の際に、csvインポートのrakeタスクを使用。
5.こだわり検索検索
機能の概要
- ransack を使用
- 「大人数」「８畳以上のお部屋」「駅近」「家賃５万以下」「プライバシー充実」「コミュティ重視」「個室」 の7項目の条件から検索可能。（今後検索項目は追加予定です）
実装する際に工夫したこと
- 画像を使った検索ボタンにすることで、物件のイメージが湧きやすいようにしました。
<各項目の実装方法>
「大人数」「８畳以上のお部屋」「駅近」
ransackにて各数字の範囲を指定する条件で検索
「家賃５万以下」
ransackで関連するモデル(親や子)のカラムをまたいで検索
「プライバシー充実」「コミュティ重視」
物件のその他情報を記載するカラム（string型）に"オートロック、鍵","イベント開 催、パーティ"の文字が含まれているか部分一致検索しています。(実装方法を修正予定）
「個室」
boolean型で部屋タイプカラムを作成しtrue/falseで条件分岐
6.地図表示機能
機能の概要
-
Google map APIを使用し、物件の所在地を地図表示
実装する際に工夫したこと
このアプリを作成する上で詰まった箇所の１つです。
【エラー内容】
geocoder が作動せず、住所をビュー上で変更しても緯度と経度がテーブルに追加されない。
【解決策】
google map API に加えて、Geocoding APIを有効にし、GoogleAPIのHTTPリファラーの制限外す
7.マイページ機能
機能の概要
- 口コミ投稿した物件一覧を閲覧できる
- 保存した物件一覧を閲覧できる
- 登録した物件一覧を閲覧できる
実装する際に工夫したこと
- 物件情報表示部分は、パーシャルを使って各ページのビューにて同じコードを繰り返し記入しないようにリファクタリング。
- 物件登録数、レビュー物件数、保存済み数を表示。
8.追加実装予定
- 検索機能の複雑化
- 部屋の家具情報ページの追加
- 物件画像を複数投稿、複数表示
- 物件投稿者へのお問い合わせ機能
- rspecを使ったテストコード
- レスポンシブ対応
- 管理者画面で口コミ集計結果を表示
- AWSにデプロイ
TrelloのURLに詳しく記載しております。https://trello.com/b/Cdp4Es2l/%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%8F%E3%82%A6%E3%82%B9%E6%A4%9C%E7%B4%A2%E3%82%B5%E3%82%A4%E3%83%88
9.その他ポイント
・実際にシェアハウスに住んでいる友人とシェアハウスに興味がある友人に物件探しで重視することや心配事をヒアリングし、アプリの仕様を検討
・管理者権限を持ったアカウントのみ、物件情報を扱える仕様に
・GithubでプルリクとTreroでタスク管理を丁寧に行いながら開発
10.使用技術等
- 言語：Ruby
- フレームワーク：Ruby on Rails
- フロント：html、Sass、JavaScript(jQuery)
- インフラ：heroku
- ソースコード管理：GitHub
- その他：Trelloでタスク管理
11.環境
- Ruby 2.6.6p146
- Rails 6.0.3.4
- PostgreSQL 12.3
- Heroku