https://github.com/yusuke-97/foodie_scout
- Role基本設計、開発、テスト
- TechHTML / CSS / JavaScript / jQuery / PHP / Laravel / Amazon S3
開発したきっかけ
市場には数多くの飲食店予約サイトが存在しますが、真のグルメを満足させる飲食店の紹介に特化したサービスは不足していると感じました。 このサービスは、グルメ愛好家が個性豊かな美食店を発掘できることを目的に開発しました。
概要
主にLaravelとVue.jsを用いてこのWebをアプリケーションを開発しました。ユーザーが口コミで投稿した画像やプロフィール画像などは、Amazon S3に保存しております。また、検索機能はElasticsearchを用いて実装しました。さらに、口コミの星の評価は、バッジ処理を用いて実装しております。この開発では、Dockerでの開発環境の構築やVue.jsといったモダンな技術を取り入れるなど、実務を想定して取り組みました。今後は実務レベルでこれらの技術を活用していきたいと考えております。
画面構成
主にトップ画面と飲食店詳細画面、検索結果画面、プロフィール画面、レビュー作成画面などの 7画面から構成される飲食店予約サービスのWebアプリケーションです。
トップ画面

トップ画面では、ユーザーが「料理ジャンル」や「おすすめ店舗」、「注目の店舗」から、飲食店を探すことができます。 また、「人気ユーザー欄」からは食通なユーザーのおすすめのお店やユーザーのおすすめ店舗ランキングを知ることができます。この箇所にあるユーザーの評価(星の評価)は、バッジ処理を用いて実装しました。さらに、ユーザーにはバッジが付与され、そのバッチのランクによってユーザーの信頼性も視覚的にわかるような仕様にしました。
飲食店詳細画面

飲食店詳細画面では、飲食店の基本情報やネット予約機能、ユーザーの口コミを表示させており、ユーザーが予約するために必要なコンテンツを掲載しております。カレンダーに〇がついている日付は、残りの予約可能枠までの人数を選択することができ、時間帯によって予約が埋まっている場合は、その時間帯で選択できないような仕様になっています。
検索結果画面

検索機能は、Elasticsearchで実装しました。検索結果画面では、検索条件に合ったものが表示されます。例えば、「東京 和食」で検索した場合、東京にある和食の飲食店が表示されるようになっております。 また、数値的な評価 (星の評価) を載せることによって、ユーザーがより良い飲食店を見つけることができるようにしております。
プロフィール画面

プロフィール画面では、ユーザーが訪れたことがある飲食店(本サービスで予約して来店したことがある飲食店)の口コミをランキング付きで投稿した場合に、このプロフィール画面に画像が表示されます。口コミとランキングはジャンルごとに作成することができ、他のユーザーは、プロフィール画面でジャンル別のおすすめ店舗を見つけることができます。
レビュー作成画面

レビュー作成画面では、料理ジャンルごとに口コミの投稿とランキングを作成することができます。ランキングは、同じ順位をつけないような仕様になっています。
重視している点について

このサービスは、グルメ業界における無断キャンセルとフードロスという深刻な問題に対処するため、予約時に予約料金を先払いするシステムを導入しました。 予約料金は店舗が設定した予算の50%で、これによりお客様の予約へのコミットメントを促し、同時にレストランの収益損失を最小限に抑えることが可能です。 このアプローチは、持続可能な飲食文化を促進し、業界全体の責任ある運営に貢献することが期待されます。例えば、上記の画像では、予算が1人あたり¥4,500なので、予約時には1人あたり2,250P(¥2,250相当)の予約料金が発生する仕様になっています。 また、ポイント残高が不足している場合は、『確認画面へ』というボタンが非活性化される処理を実装しております。
コーディングについて
Webアプリケーションを開発する上で、PCはもちろんのこと、スマートフォンでも見やすくするためレスポンシブ対応を施しております。