Go to Qiita Advent Calendar 2024 Top
LoginSignup
20
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nakayama-bird(Hikaru NAKAJIMA)

【個人開発】ソロ活をお助け！ひとり外食専用投稿アプリを作成しました🍽️【Rails】

Last updated at Posted at 2024-09-16

はじめに

こんにちは、なかじ(@nakayama-bird)と申します。
現在、プログラミングスクールに通ってRuby on Railsを学習しております。
今回スクールの卒業制作として、ひとり外食に特化した飲食店の投稿アプリを作成しました。

サービスURL
Me Time Meals | ひとり外食投稿アプリ
ogp.png

リポジトリ

私はプログラミング学習中で、初学者です。
内容に誤りのある場合がございます。
もし間違いがあればご指摘いただけますと幸いです。

目次

1.アプリの紹介
2.技術構成
3.こだわった点
4.改善したい箇所
5.参考にした記事

1. アプリの紹介

サービスの概要

「MeTime Meals（ミータイムミールズ）」は、「ひとり外食」に特化した飲食店投稿アプリです。一人だからこそ快適な空間で、周りを気にすることなく食事を楽しめる飲食店を探したいという方々が情報を共有することで、ソロ活の強い味方になります。地図上や個性的なタグからご自身のニーズにあったお店を探すことができます。

このサービスへの思い・作りたい理由

前職が当直のシフト勤務であったため、友人と休みが合わず一人で外食する機会が多々ありました。その際、食べログなどのレビューサイトやGoogleマップのレビューを参考にしながらお店を探すのですが、一人で入店しても大丈夫なお店なのかを調べるのに苦労しました。そこで、同じように一人で外食している方の生の声を集めることで、ひとり外食のお店探しの一助になればいいと思いこのサービスの開発を決意しました。

機能紹介（🔑はログインが必要な機能）

トップ画面 カード一覧・検索機能
Image from Gyazo Image from Gyazo
アプリの使用場面とログイン後に使える機能を紹介しています リストで投稿の一覧を確認でき、店名・場所・ジャンルのでの検索も可能です
地図一覧 地図検索・現在地取得
Image from Gyazo Image from Gyazo
地図上で投稿一覧を確認でき、ピンをタップするとモーダルが開きます 現在地や店名・場所・ジャンルでの検索からお店を探せます
投稿詳細 投稿共有の動的OGP
Image from Gyazo Image from Gyazo
各投稿の詳細画面では表を使って情報をまとめています 詳細ボタンから各投稿のシェアを行うとその投稿の写真が動的OGPとして表示されます
投稿作成🔑 ブックマーク機能🔑
Image from Gyazo Image from Gyazo
住所のオートコンプリート、直感的なレーティング、おすすめのタグによってひとり外食の投稿を作成可能です 気になるお店をブックマークして、マイページでまとめて確認できます

2. 技術構成

使用技術

カテゴリー 使用技術
フロントエンド Rails 7.1.3.4 / TailwindCSS / DaisyUI / Javascript
バックエンド Rails 7.1.3.4 (Ruby 3.2.3)
インフラ heroku / AmazonS3
DB MySQL
開発環境 Docker
CI/CD GitHub Actions
Web API Google Maps API（Places API / Maps JavaScript API / Geolocation API）/ Cloud Vision API

ER図

詳細はこちら

画面遷移図

3. こだわった点

アプリのコンセプト・ターゲットとなるユーザーの明確化

今回作成したアプリがCGMのアプリケーションであったことから、自分のアプリケーションで提供できる価値が何であるかを明確にしておきたいと考えました。そのために、より多くの方からの意見を集めたいと考え「アプリアイデアの壁打ち」と「外部サイトでのアンケート」を実施しました。

また個人的に類似サービスとの比較・検討も行い、差別化できるよう検討も行ないました。

類似サービスとの比較⚖️

【比較したサービス①】飲食店レビューサイト（食べログ/ぐるなび/Retty）

【差別化ポイント】

  • 「一人」などのタグで検索して探すことはできるものの、一人用のお店に特化しているわけではないので、必ずしも正しい情報が集められるわけではない
  • 例えば食べログで、【お一人様OK！】東京でおすすめの居酒屋をご紹介！を見ると、「一人3品頼めて60分飲み放題」や「串は一人一本にしました」といったように一人で行ったのではない情報も混在しているため探しにくい状況

=>このアプリでは「お一人様外食」に特化しているため、必ず一人で外食したところから投稿を探すことができる

【比較したサービス②】 ひとり外食専用アプリ「ソロメシ」

【差別化ポイント】

  • 一人で確実に入りやすい店を紹介していますが、エリアと店舗が限定されており使えるユーザーが限定的

=>このアプリではエリアは日本全国の「お一人様外食」の投稿を想定しており、さらに幅広い層が利用可能になると考えられる

アプリアイデアの壁打ち

通っているプログラミングスクールの方々にご協力いただき、壁打ちを3回ほど実施しました。この壁打ちの中でひとり外食のお店選びの際は、お店の空間が重要な要素になってくるという知見を得ることができました。

サービスの開発にあたっての事前アンケートの実施

今回のアプリを開発するにあたり一人外食のお店選びの実情及び実装する機能に関して、調査システム：Questantを利用してアンケートを実施しました（回答数:110）。こちらのアンケートを通じてサービス利用のイメージ、ユーザー層、必要な機能を明確にすることができました。

アンケート結果の分析📍

サービス利用のイメージ

  • 一人で外食した時のみ投稿できるサービス
  • 事前アンケート（Q3）で、一人外食の検索ツールの課題として、29.7%の方が「一人向けの情報が少ない」と回答しているため

ユーザー層

  • 一人で外食する20~30代女性
  • 事前アンケート（Q2）で、一人で外食する際、飲食店レビューサイト（29.7%）やInstagramやXのハッシュタグ（#一人飯、ソロ飯）（28.4%）で検索していると回答した層に向けたアプリケーションをイメージ

地図を使った機能

  • 投稿の際、Google Maps APIを利用してお店の場所の情報を保存できるようにする
  • 事前アンケート（Q6）で地図上での一覧表示と現在地からお店を探す機能はニーズが高かった

飲食の大まかな金額

  • 飲食に使った金額をおおまかに入力できるようにする
  • 事前アンケート(Q5)で、一人外食をする際お店選びで重要視する点として価格が手頃という回答をしていたため

投稿内容の項目について

ユーザーの投稿によってコンテンツが充実するアプリであるため投稿を簡単にできるというのは重要です。一方で、ひとり外食に特化しているアプリであるためその意図に沿った投稿をユーザーにしてもらう必要もありました。そこで、投稿内容にレーティングとタグ入力の下におすすめタグの表示を盛り込むことにしました。

レーティング

ひとり外食のおすすめ度を分かりやすくするために、レーティング機能を実装しました。
フォームでの入力は簡単に、投稿一覧・地図上のモーダル、地図上のピン、投稿詳細でそれぞれレーティングを表示できるようにしています。詳細画面のレーティングの表示はdecoratorに処理を書いています。

入力画面 表示画面
Image from Gyazo Image from Gyazo
フォームで簡単にレーティングが入力できます 星4つ以上の場合地図上でピンに星が表示され、モーダルや詳細画面にも評価が表示されます
コード一部抜粋（スター表示） 
#app/decorators/post_decorator.rb
def star_rating
    full_star = '<svg class="w-6 h-6 ml-2 text-secondary" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
        <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
        </svg>'
    empty_star = '<svg class="w-6 h-6 ml-2 text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
            <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
        </svg>'

    # full_starを評価数分繰り返して表示。enumが0からなので1プラス。
    stars = full_star * object.rating_before_type_cast

    # 残りの星はempty_starで補う。
    stars += empty_star * (4 - object.rating_before_type_cast)

    stars.html_safe
  end

おすすめタグの表示

タグの入力フォームの下にひとり外食の際、嬉しいポイントをおすすめタグをして表示しています。またそのタグをタップするとフォームにカンマとともに入力されるようにJavascriptで実装しました。

入力画面
Image from Gyazo
コード一部抜粋（レーティング） 
#app/views/posts/_form.html.erb
<div class="flex justify-center flex-wrap">
      <%= link_to '券売機', '#', class: 'tag-link badge badge-ghost badge-lg mr-4 mt-4 mb-3' %>
      <%= link_to 'カウンター', '#', class: 'tag-link badge badge-ghost badge-lg mr-4 mt-4 mb-3' %>
      <%= link_to 'スマホ注文', '#', class: 'tag-link badge badge-ghost badge-lg mr-4 mt-4 mb-3' %>
      <%= link_to 'タブレット注文', '#', class: 'tag-link badge badge-ghost badge-lg mr-4 mt-4 mb-3' %>
      <%= link_to 'ひとり用メニュー', '#', class: 'tag-link badge badge-ghost badge-lg mr-4 mt-4 mb-3' %>
      <%= link_to '静か', '#', class: 'tag-link badge badge-ghost badge-lg mr-4 mt-4 mb-3' %>
      <%= link_to '広々', '#', class: 'tag-link badge badge-ghost badge-lg mr-4 mt-4 mb-3' %>
</div>

// app/javascript/tags.js
document.addEventListener('turbo:load', () => {

    // テキストボックスを取得
    const tagInput = document.querySelector('input[name="post[tag_names]"]');
  
    // タグをクリックした時の処理
    const tagLinks = document.querySelectorAll('.tag-link');
    tagLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        // リンクのデフォルト動作を無効化
        e.preventDefault();
        // テキストボックスの内容にタグを追加
        const clickedTag = e.target.innerText.trim();
        if (tagInput.value) {
          tagInput.value = `${tagInput.value},${clickedTag}`;
        } else {
          tagInput.value = `${clickedTag}`;
        }
      });
    });
  
  });

ユーザビリティ

使いやすいアプリを目指してユーザビリティを意識したUI/UXの設計を意識しました。デザインに関する学習はこちらにまとめております。

特にスマートフォンでの使用を想定していたため、モバイルファーストのデザインを意識しました。タッチターゲットを意識した実装やボトムナビゲーションによってスマートフォンで使いやすいようなデザインにしました。

タッチターゲット ボトムナビゲーション
Image from Gyazo Image from Gyazo

4. 改善したい箇所

今後下記の点を改善していきたいと思います。

  • テストコード
    • 現状rubocopの導入にとどまっています
    • RSpecを順次追加していきバグやエラーを早期発見できるようにしたいです
  • リファクタリング
    • 特にJavascriptに関して、現状erbファイルにscriptを書いている箇所が多いのでリファクタリングを進めたいです

5. 参考にした記事・使用したイラスト

Google Maps API関連

Cloud Vision API

Google認証

画像投稿関連

フラッシュメッセージ

ローディングアニメーション

Googleアナリティクス

イラスト

おわりに

今回のアプリ作成にあたりお力添えしてくださった全ての方々に心よりお礼申し上げます。ありがとうございました！
何とか完成まで辿り着くことができ、とても嬉しい気持ちです。
今後個人開発される方の参考になりましたら幸いです！
ここまで読んでいただきありがとうございました！

  • Xもやっておりますのでよろしくお願いします！

  • 今回の開発に関連した記事・メモ

20
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
20
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?