アプリ概要
100円ショップ(通称100均)の商品情報を投稿し、共有出来るサイトです。
- 商品画像、星評価による５段階評価、購入ショップなどの情報が投稿出来ます。
- ユーザー登録はもちろん、ユーザー登録をせず、ゲストログインで使用することも出来ます。
- マイページでは自分の投稿、コメントした投稿、今後購入したい商品の買い物リストが見れます。
- その他ランキング機能、Google Mapを利用したショップ検索などが利用出来ます。
下記ページで公開中です。
https://hundred-100.net
制作背景
今回このアプリを作るに至った理由は主に
1、個人的に100円ショップをよく利用する。2、100円ショップに焦点を当てたサイトがあれば買い物するときに楽だと思った。3、100円ショップを利用しない人をあまり見たことがない。4、100円ショップも商品によって当たり外れがある。
の4つです。
少し詳しく述べさせていただきます。
1、個人的に100円ショップをよく利用する。
これは文字通りです。自分は何か買い物が必要な場合、まず100均で売っていないかと考えます。100均は非常に商品のラインナップが豊富なので、高確率で見つかります。100均で済んだ場合、費用を節約出来るのですごく満足感があります。
2、100円ショップに焦点を当てたサイトがあれば買い物するときに楽だと思った。
自分のリサーチ不足かもしれないですが、あまり100円ショップのみに焦点を当てたサイトを見たことがありませんでした。ショッピングサイトも数多くありますが、100円ショップの商品がそちらに掲載されていることは稀です。なので、100円ショップのみの口コミサイトなどあれば、見ていて楽しいし、買い物の際に楽かなと思いました。
3、100円ショップを利用しない人をあまり見たことがない。
こちらは割愛します。そのままです。
4、100円ショップも商品によって当たり外れがある。
100円ショップの商品でもすごく良かったものもあれば、外れだったものもあります。金額は安いですが、ゴミを出すのもあれですし、事前に商品について知ることなどが出来れば良いなと思いました。また、100円ショップも有名どころが何社かあり、同じ商品でも違いがあったりします。なので、そういった総合的なサイトになればユーザーにとっても役立つと思いました。
機能解説
今回実装している機能に関しては主に下記のようになっています。
| 機能 | |
|---|---|
| 1 | 投稿(CRUD) |
| 2 | アカウント(CRUD) |
| 3 | ログイン |
| 4 | ゲストログイン |
| 5 | マイページ |
| 6 | コメント |
| 7 | お気に入り（買い物リスト） |
| 8 | 画像投稿 |
| 9 | 星評価 |
| 10 | ランキング |
| 11 | ページネーション |
| 12 | 投稿検索 |
| 13 | フラッシュ |
| 14 | レスポンシブデザイン |
| 15 | サンプルムービー |
| 16 | マップ検索 |
| 17 | 管理者画面 |
上記機能のうち、工夫した実装に関して解説したいと思います。
7、お気に入り（買い物リスト）
よく使用されているブックマーク機能を買い物リストに転用しました。Ajax通信を利用し、動きをスムーズにし、買い物カゴに入っている状態と入っていない状態をボタンのデザインを変化させ、視覚的にわかりやすくしようと試みました。また、5、マイページのところで買い物リストを閲覧出来て、買い物時に利用することが可能です。
9、星評価
Raty.jsにて実装。最大５段階、最小値は1に設定。.5の評価も許可する設定。数値を入力するのではなく、星の画像をクリックすることで、直感的に評価出来るようにしています。口コミの際は評価数の平均を表示するようにしています。
10、ランキング
評価値の平均からランキングを作成しました。平均に用いた評価数も（）内に表示しました。また、同率の場合次順位を同率数分飛ばして表示するよう工夫をしました(例えば、同率1位が2つあった時、次順位を3位になるよう表示)。コードに関してはif文の場合分けで表現しました。
16、マップ検索
Geocoding API,Maps JavaScript APIにて実装。通常のMAP検索のみでは物足りないと思ったため、ユーザーが登録した購入店からショップリストを作成。マップ検索の画面からショップリストを表示、クリックでコピー出来るようにし、コピーしたショップ名で検索出来るようにしました。また、ショップ検索をした際には、郵便番号から住所を表示。カーナビなどにも利用できます。
設計資料
設計資料作成に関してはdraw.ioを利用しました。
1、ER図
ER図は下記のようになっております。
UsersモデルとPostsモデルが1対1の関係であり、ReviewsモデルとShoppingsモデルが中間テーブルとして位置しています。
2、AWS
インフラはAWSを利用しており、構造は下記のようになっています。EC2のサーバーやRDSは料金の安い標準のものを使用。データベースはPostgreSQLを使用。ACMを使い、通信をhttps化しています。ネームサーバーはAWSのRoute 53を使用。ドメインはお名前ドットコムで所得しました。他にはCloudFrontを使い、画像の高速化を実現。これらの構成で月額が7000円ほどとなっています。
使用技術
- ruby 2.7.1
- Rails 6.0.3.7
- HTML
- CSS
- Bootstrap
- AWS(VPC,RDS,EC2,S3,CloudFront,ALB,ACM)
以上が主な解説記事となります。レビューサイトを基に個人的に使いたい、あれば便利だなと思う機能を調べながら実装してみました。インフラはAWSを使用したので、コストはかかりましたが、勉強になることが多く、良かったと思っております。ただ、AWS Billing and Cost Managementなどを利用し、料金の管理は必須だと思いますので、注意が必要です。これからも実装出来る機能があれば実装し、より便利なアプリにして行きたいと思います。