【個人開発】プレゼントして欲しいものを謎解きで伝えることができるアプリを開発しました #Rails

はじめに

はじめまして、samiと申します。
未経験からWebエンジニアへの転職を目指して、プログラミングスクールで学習しています。
この度、プレゼントして欲しいものを謎解きで伝えることができるWebアプリ「ギフトリクエスト」をリリースいたしました。

サービス名

ギフトリクエスト

ゲストログイン機能を実装したので、会員登録せずにお試しいただくこともできます。

サービスURL

Github

サービス概要

プレゼントして欲しいものがあるけど直接リクエストするのは言いづらいという方に。
自分がプレゼントして欲しいものを登録すると、それを元にAIが謎解きを生成します。
相手に謎を解いてもらうことで欲しいものを伝えることができる、プレゼント伝達アプリです。

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

誕生日やクリスマス、ちょっとしたお礼として、プレゼントを貰う機会は意外と多くあります。
また相手に送るものも、毎年となるとネタも尽き、ワクワクとしていたはずのプレゼント探しがいつしか悩みの種になっていました。
重複したものを渡してしまったり貰ったりしたことも。
しかし、直接欲しいものを言うのは気恥ずかしいという気持ちもあります。
ギフトリクエストは、こういったミスマッチやマンネリ化を解消し、楽しくプレゼント交換ができたらと思い考えました。

サービスの差別化ポイント

アプリに自分の欲しいものを登録しておき、ギフトを贈る人は、そのアプリ内で購入までできるアプリはありますが、プレゼントして欲しいものを直接知らせるのではなく、謎解きにしたことが最大の違いです。
プレゼント選びという手間と時間のかかる作業を、謎解きの面白さと組み合わせることで（閃いた時や謎が解けた時の嬉しさ、非日常感）その作業までも楽しめるような仕組みにしています。

機能紹介

🔶がついているものは、ログイン限定機能です。
ギフトリクエストでは、作成した謎解きのことを「Re:QUEST」と呼びます。

トップ画面	ログイン画面

メイン機能が一目でわかるようにし、すぐに機能がを使えるような動線にしました。？マークを押すと、詳細な説明を見ることができます。	多様なログイン方法を用意しました。ログインが必要な機能を触った時にログイン画面へ誘導するようにし、ログインするハードルを低くしました。

みんなのRe:QUEST一覧	Re:QUEST挑戦

すべてのRe:QUESTを見ることができます。タイトルを選ぶと、謎解きに挑戦できます。タグを選ぶと、同じタグをつけたものを一覧で見ることがきます。	謎解きに挑戦できます。XやLINEで共有すると、挑戦したRe:QUESTのリンクに設定されます。

🔶 Re:QUEST作成	🔶 Re:QUEST詳細

欲しいものをもとにOpenAIでRe:QUESTを作成します。作成中と分かるようにモーダルが表示されます。1日5つまで作成できます。	Re:QUESTの詳細内容を見ることができます。気になった箇所は、その場で編集できます。XやLINEで共有すると、作成したRe:QUEST挑戦画面へのリンクが設定されます。

🔶 フォロー機能	🔶 挑戦したRe:QUESTの背景色

他ユーザーをフォローできます。フォロー、フォロワーを一覧で確認できます。	正解したRe:QUESTは背景が自動変更されます。挑戦したかどうか一目でわかります。また正解した時の難易度で色が変わります(難しい→ピンク、簡単→黄色)

技術構成

使用技術

カテゴリ	技術
フロントエンド	JavaScript, TailwindCSS, Rails 7.0.8(Hotwire/Turbo)
バックエンド	Ruby 3.2.2, Rails 7.0.8
データベース	PostgreSQL
環境構築	Docker
インフラ	Render
Web API	Open AI API(GPT-4), LINE Login, Google Sign-In

画面遷移図

ER図

こだわった点

謎解きの内容

謎解きは、正解後に達成感を味わえるようにストーリー仕立てで考えました。ストーリーとその背景はChat-GPTで作りました。ユーザー毎に変化するのは、作中登場する「詩」「手がかり」「選択肢」です。挑戦者には「詩」の中に隠されたユーザーの欲しいものを読み解いて貰います。

Story1	Story2・3	Epilogue

ノートが落ちる	ノートを読む	ノートを戻す

「詩」「手がかり」「選択肢」をAIで生成する際は、以下のポイントでプロンプトを考えました。また、生成したいデータは一度に出力し、抽出して各カラムに保存しています。

トークン数を最小限にし費用を抑えること
欲しい情報が正確に得られること

実際のコード（一部抜粋）

app/services/openai_quest_generation_service.rb

def call
    client = OpenAI::Client.new(access_token: @api_key)

      response = client.chat(
        parameters: {
          model: "gpt-4",
          messages: [
            { role: "system", content: "You are a professional lyricist." },
            { role: "user", content: generate_prompt(@query) }
          ],
        }
      )


private

  def generate_prompt(query)
    "Please create lyrics based on the following conditions.

    # Conditions
    Theme: #{query}
    Do not use the theme word #{query} in the lyrics.
    Taste: longing
    Plese answer in Japanese.
    Output should be less than 300 tokens

    # Required Output
    - タイトル: Please provide a title within 20 characters, enclosed in quotation marks (「」).
    - 歌詞: Write the lyrics within 300 characters.
    - テーマのヒント: Provide 3 hints related to the theme, each within 30 characters, formatted as follows:
      - ヒント1:
      - ヒント2:
      - ヒント3:
    - Theme choices: Provide 2 words  associated with #{query} without explicitly including the word #{query} itself. formatted as follows:
      - 選択肢1:
      - 選択肢2:"
  end

app/services/create_quest_service.rb

def process_response(response)
  # 抽出したデータを保存
  match_quest = response.match(/歌詞:([\s\S]+?)- テーマのヒント:/)&.[](1)
  match_title = response.match(/タイトル:(.+?)\n/)&.[](1)
  hints = extract_hints(response)
  match_choices = extract_choices(response)
  # 抽出したデータがすべて存在するかチェック
  if match_quest.blank? || match_title.blank? || hints.values.any?(&:blank?) || match_choices.values.any?(&:blank?)
    return false # データが不完全な場合は失敗を返す
  else
    ActiveRecord::Base.transaction do
      # 抽出したデータを@user_requestに保存
      @user_request.quest = match_quest.strip
      @user_request.title = match_title.strip
      @user_request.save! #save! を使用して明示的に例外を発生
      save_hints(hints)
      save_choices(match_choices)
    end
    true # 保存が成功した場合、trueを返す
  end
end

def extract_hints(response)
  {
    1 => response.match(/ヒント1:(.+?)\n/)&.[](1)&.strip,
    2 => response.match(/ヒント2:(.+?)\n/)&.[](1)&.strip,
    3 => response.match(/ヒント3:(.+?)\n/)&.[](1)&.strip
  }
end

def extract_choices(response)
  {
    1 => response.match(/選択肢1:(.+?)\n/)&.[](1)&.strip,
    2 => response.match(/選択肢2:(.+)/m)&.[](1)&.strip
  }
end

def save_hints(hints)
  hints.each do |number, content|
    @user_request.hints.create(number: number, content: content) if content
  end
end

def save_choices(choices)
  choices.each do |number, content|
    @user_request.choices.create(number: number, content: content) if content
  end
end

ユーザビリティ

初めてアプリを使うユーザーにも、どのようなアプリかわかるようなイメージ画像、背景色にしました。

イメージ画像
ポップな3Dイラストで、楽しいゲームのような世界観を表現しました
背景色
謎解きをイメージして（思考が交錯し徐々に統合されていく様子を）グラデーションで表現しました

また、直感的に使ってもらえるように、以下の工夫をしました。

多様なログイン機能
MVPリリース時、ログインが面倒だというご意見を頂きました。
そのため、ゲスト、Google、LINEと多様なログイン方法を用意しました。
また、ログインが必要になった時ログインページへ誘導するようにし、ログインへのハードルをできる限り感じない工夫をしました。
　
各画面にヘルプボタンを設置
画面には簡潔な表示を心がけ、知りたい時だけ詳細をモーダルで表示させるようにしました。また、作業工程をステップに分け、分かりやすい説明を心がけました。

前ページに簡単に戻れるパンくず機能
どのページからリンクされたのかわかるようにしました。

今後の開発について

さらなるユーザビリティ向上に向け、フォローしている相手がRe:QUESTを作成したら通知が来るなど、LINE通知機能を付けたいと考えています。
また、より分かりやすいコードにするためリファクタリングを行っていきたいです。

おわりに

一人で１からアプリを作り上げるのは今回が初めてで、何をするにも壁にぶつかり、山を登っても登っても、また高い山が聳え立っているような感覚でしたが、一つ山を超える度に少しずつ成長しているのを感じ、機能が無事動いてくれた時はとても嬉しかったです。

無事リリースできたのは、的確なアドバイスをくださる講師の方々、困っていた時相談に乗ってくれた同期、先輩、後輩、そしてアプリを触ってくださった皆様のおかげです！心から感謝を申し上げます。
まだまだ未熟な部分が多いので、これからも学習を続け、もっとユーザーに寄り添ったサービスを提供できるよう努力します！

最後までお読みいただき、ありがとうございました。