はじめに
皆様初めまして、ヒデボーと申します!
プログラミングスクール「RUNTEQ」に入学し現在、WEBエンジニア転職を目指して学習&転職活動を行なっています！
今回、個人開発ポートフォリオとしてEnigmaPortals~謎クリエイト~を開発しました！
サービス名
EnigmaPortals ~謎クリエイト~
・サービスURL
・Github URL
サービス概要
自作の謎を投稿、AIを使用して謎を生成するなど自由に謎の投稿・閲覧・解答するためのサービスです。 謎の正解数に応じてポイントが付与され、ポイント数によってランキング表示があり、回答者・出題者としても楽しめるサービスです。
開発背景
私はリアル脱出ゲームや謎解きが趣味で、よく参加しています。
ただ本格的な謎解きは時間がかかる為、気軽に短時間で謎解きを体験したい。
また、自分も謎解きの問題を作成できたら良いなと考えていました。 しかし、玄人やプロが作った謎の投稿サービスはあるのですが、謎作成の初心者が気軽に投稿できる様な投稿サービスはあまりなかったので作成してみました！
機能紹介
| トップ画面 | ログイン画面 |
|---|---|
 |
 |
| トップページでメイン機能の使い方がわかるようにGif動画を挿入し、各説明文の近くにログインボタンを配置しました。 | ログインはGoogle認証とゲストログインボタンのみにしており、ユーザー登録やログイン時の入力の手間をなくすようにしています。 |
| 作成された謎一覧 | ユーザーランキング |
|---|---|
 |
 |
| 作成された謎の一覧を表示しています。 クリックすることで謎に回答することができます! | 謎を一問正解する毎に1謎ポイントを付与しており謎ポイントの保有数でランキング表示をしています。 |
| AI謎生成 | オリジナルで謎作成 |
|---|---|
 |
 |
| 誰でも気軽に作成できるように、カテゴリと正解を入力するだけでAIがタイトル・文章・画像を生成してくれるようにしました。 | オリジナルで謎解きを考えたい方向けにタイトル、ジャンル、謎の内容と画像を自分で投稿できるようにしています。 |
| 謎への回答 | 正解済み・自作の謎は背景色変更 |
|---|---|
 |
 |
| 他のユーザーが作成した問題に回答できます。Xで共有時に現在の謎がリンク設定されます。 | 自作の問題や正解済みの問題は背景色を変更し、まだ正解していない問題がすぐにわかるようにしています。 |
技術構成
| カテゴリ | 使用技術 |
|---|---|
| フロントエンド | Rails 7.1.3.2(Hotwire.Turbo), JavaScript |
| CSSフレームワーク | TailwindCSS, daisyUI |
| バックエンド | Rails 7.1.3.2 (Ruby 3.2.2) |
| データベース | PostgreSQL |
| ファイルサーバー | AWS S3 |
| アプリケーションサーバー | heroku |
| Web API | OpenAI API(GPT-4・DALLE-3), Google API |
| 開発環境 | Docker |
選定理由
- スクールでRuby on Railsを中心に学習していたので、学習した内容の復習も兼ねてRuby on Railsで開発しました。
- フロントエンドの知識が薄かった事もあり、TailswindCSS + daisyUIで開発効率の向上を図るため導入しました。
- 以前ミニアプリでローカル開発でのデプロイは経験していたので、Dockerでの開発・デプロイに挑戦しました。
こだわったポイント
UI/UX
カラーを青系統と黒をメインにし、違和感のないデザインを心がけ、レスポンシブにも対応させました。
触っていてストレスを感じさせないように入力項目などはできるだけ削ぎ落とし、直感的に操作ができるようにしました。
また、UXの向上を図る為HotWireのTurboを用いて「ページネーション・謎の回答機能」を非同期で実装しました。
・ トップページ
機能紹介をGifで行うことで、できるだけシンプルに文字を少なく案内できるようにしました。
また、各機能紹介のすぐ下にログインボタンを配置する事で興味を持ってもらえたタイミングですぐにログインができるようにしました。
・謎一覧画面
正解済み、自作した謎はすぐにわかるように背景色を変更しました。
また、MVP後にユーザーから「謎の作成者・何人が正解したのか・自分の保有している謎ポイント数を知りたい」と声をいただいたので、追加実装することで正解数から難易度の予測も可能にしました。
・AIでの謎の作成
入力項目をジャンルと謎の正解のみにし、ジャンルは選択式にすることでユーザーの離脱率を下げられるようにしました。
また、AIで謎を生成する性質上どうしても生成中の待ち時間が発生してしまいます。
その待ち時間を楽しんでもらえるように、自作した謎をランダムでモーダル表示することにより、待ち時間も謎解きを体験できるようにしました。
処理部分を非同期にすることも考えましたが、待ち時間にも謎に触れて欲しいと思いこちらを採用しました。
・謎の回答
他のユーザーが作成した問題で、未正解の問題のみ回答ができるようにしています。
HotWireのTurboを使用することで答えの入力後、リアルタイムで正誤判定できるようにしました。
正解後はすぐに答えを表示し再回答できないようにしています。
最後に
自分のオリジナルのアプリを作成することで、アプリ開発の大変さ・楽しさを経験することができました！
しかし開発していくうちに「こっちで実装したほうが良いかも...」や「この技術でできると思ってたけどできない!?」などがあり、事前の技術検証と設計の作り込みの大切さを痛感しました。
まだまだ分からない事だらけなので日々学習を継続し、頭に描いたアイデアをそのまま実現できるようになりたいと考えています！
最後までご覧いただきありがとうございました！！