はじめに
こんにちは！レイと申します！
未経験からエンジニア目指して日々学習をしております。
今回、釣り道具に特化した「Tackle Master(タックルマスター)」というサービスを開発しました。
釣りに興味のある方や好きな方には、ぜひ使っていただけると嬉しいです。
自己紹介
地元の工業高校で情報系コースを専攻し、PC操作やプログラミング（Python、SQL、HTML/CSS）を簡単に学びました。
卒業後は総合化学品メーカーで製造オペレーターとして約3年間勤務。その際、社内ITシステムに助けられた経験から、システム開発に興味を持ちました。
2024年2月からプログラミングスクール「RUNTEQ」に入学し、エンジニアを目指しています。
1.サービス紹介
「Tackle Master」は釣り道具に特化したサービスで、釣り道具の管理・登録・検索ができます。
サービス概要
- これから釣りを始めたい方でも釣りや釣り道具について知ることができます
- ユーザーの釣り具の登録・管理ができます
- ユーザーの条件に合わせて釣り道具を提案させていただきます
▼サービスURL
▼Github
開発背景
私は、釣りが好きで、釣り道具を眺めるのも大きな楽しみの一つです。
しかし、釣り具の管理が行き届かない時や新しい釣りを始める際に釣り具の選び方がわからない時がありました。
そこで、釣り具の管理に加えて、楽しく釣り道具を探せるアプリを作りたいと思いました。 このアプリを通じて、釣りに出かける際の確認に使ったり、提案機能で見つけた釣り具をもとに、釣具を楽しく探せたら良いと思っています。
このサービスを通じて、釣り道具選びの「楽しさ」はそのままに、「わからない」「管理が大変」といったネガティブな部分を解消し、より多くの人が釣りという趣味を楽しめるようになったらと思っています。
工夫した点
Google認証
セキュリティ面の安全性向上と新規登録のハードルを下げるために、Google認証を導入しました。Google OAuthを利用してユーザーの認証を行い、パスワード管理の手間を省きつつ、セキュリティを強化しました。
「Open AI API」「Rakuten API」の組み合わせ
2つのAPIを組み合わせることで、タックルの提案文の生成と、関連する商品を表示させるようにしました。具体的には、Open AI APIを使って
- 狙う魚
- 予算
- 釣りの場所
- 釣りの種類
- 釣りの経験レベル(選択)
- 釣り具の種類(選択)
- メーカー(選択)
これらのユーザー入力に基づいた提案文を自動生成し、Rakuten APIを利用してその提案に関連する商品情報を取得・表示しました。これにより、ユーザーに対してワクワク感や楽しさを提供するアプリに仕上げました。
レスポンシブデザイン
PCとスマホに合わせてレスポンシブデザインを整えました。画面サイズに応じたレイアウトの調整、文字の大きさ、スペースの調整によりユーザーインターフェースの最適化を行いました。
| PC画面(1280px) | SP画面(400px) |
|---|---|
 |
 |
メイン機能紹介
| 釣り入門ページ | スムーススクロール |
|---|---|
 |
 |
| 初心者はここから。釣り道具や釣りに関する知識を深めましょう。 | 目次から知りたい情報にアクセスできます。また、右下のボタンからページトップに戻ることができます。 |
| 釣り具提案機能(生成) | 釣り具提案機能(一覧) |
|---|---|
 |
 |
| 狙う魚、予算、釣りの場所、釣りの種類、釣りの経験レベル、釣り具の種類、メーカーを入力してください。あなたに最適な釣り具を提案し、関連する商品も紹介します。いろんな釣り具に出会いましょう！提案は1日3回まで受けることができます。 | 提案内容は保存されるので、随時見返すことが可能です。 |
| 釣り具登録機能(タックル作成) | 釣り具登録機能(ロッド、リール、小物作成) |
|---|---|
 |
 |
| タックルを作成し、そこにロッド、リール、小物を自由に追加してください。お好みのタックルを作りましょう！画像の登録は任意で、なければデフォルトの画像が設定されます。スマホからの利用をおすすめします。 | 作成したタックルに、ロッド、リール、小物お好きな分追加してください。こちらも画像登録は任意で、なければデフォルトの画像が設定されます。 |
| 釣り具登録機能(登録後) | 釣り具登録機能(詳細アクセス) |
|---|---|
 |
 |
| タックル一覧ページから登録している各タックルに登録しているロッド、リール、小物の数が確認できます。 | 画像をクリックするとタックル、ロッド、リール、小物の詳細画面にアクセスすることができます。 |
2.使用技術
| カテゴリ | 使用技術 |
|---|---|
| バックエンド | Ruby 3.2.3 ・ Ruby on Rails 7.1.3.4 |
| フロントエンド | JavaScript |
| CSSフレームワーク | TailwindCSS ・ daisyUI |
| Web API | OpenAI API(GPT-4o) ・ Rakuten API |
| データベース | PostgreSQL |
| 環境構築 | Docker |
| インフラ | Render ・ AWS S3 |
| 認証 | Sorcery ・ Google OAuth |
内容一覧
- ユーザー管理
- ユーザー登録/ログイン、パスワードリセット機能
- Googleによるユーザー登録/ログイン機能
- 退会機能
- 釣り入門ページ
- 新規登録不要で閲覧可能
- スムーススクロール機能（目次、トップへ戻る）
- 釣り具の提案
- ログイン必要、1日3回まで
- 提案一覧、提案作成（Open AI API、Rakuten API）、提案詳細、提案更新
- 提案のXシェア機能
- タックル登録
- ログイン必要
- 一覧、詳細、登録、更新、削除
- 画像登録/プレビュー機能（画像がない場合はデフォルト画像）
- ロッド登録
- ログイン必要
- 登録、詳細、更新、削除
- 画像登録/プレビュー機能（画像がない場合はデフォルト画像）
- リール登録
- ログイン必要
- 登録、詳細、更新、削除
- 画像登録/プレビュー機能(画像なければデフォルト画像)
- 小物登録
- ログイン必要
- 登録、詳細、更新、削除
- 画像登録/プレビュー機能(画像なければデフォルト画像)
- レスポンシブ対応
- PC/SP対応
技術選定理由
バックエンド：Ruby on Rails
プログラミングスクール「RUNTEQ」で中心的に学んだものであり、これまでの学習内容の復習に加えて、新しい技術やGemを試すために採用しました。
フロントエンド：JavaScript
Reactを使用したかったですが、短期間での開発を目指していたため、キャッチアップが間に合いませんでした。そのため、必要な部分だけにJavaScriptを使用して動きをつけることにしました。今後、キャッチアップが進めばReactへの移行も検討しています。
開発環境：Docker
開発環境の一貫性を保つために採用しました。Dockerfileやcompose.ymlを編集することで、使用するプログラミング言語やライブラリのバージョンを簡単に変更でき、コンテナの起動や停止がコマンド一つで容易に行えるため、開発効率が向上すると考えました。
インフラ：Render
過去にRenderを使用してデプロイした経験があり、コストを抑えつつ、render.ymlファイルに必要な記述をするだけで迅速にサービスを作成してデプロイできるため採用しました。
ER図
画面遷移図
3.今後の展望
機能のブラッシュアップ
釣り入門ページの内容充実、提案機能にローディング画面の追加、タックル登録時の画像を色々選択できるようにしようと考えています。
RSpecテスト実装
テストを実行できる環境は準備しているものの、開発中はテストコードが書けていなかったので、テストコードを書いていこうと思います。
4.記事紹介
ここでは、アプリ開発を進めながら作成した記事の紹介をします。現在開発されてる方やこれから開発される方でもお役立ちできそうな記事を紹介します。
【Figma】アプリ開発ページ画面遷移図作成まとめ
同期の方々から好評をいただいた「画面遷移図」の記事です。この記事で「助かった！」という声をたくさんいただき、随時アップデートを繰り返しました。
これから開発を始めたい方の参考になれば嬉しいです！
【Rails】Sorcery使用によるGoogle認証の注意点
Gem「Sorcery」によるGoogle認証するやり方についての記事が少なく感じ、誰かの助けになればと思って書いた記事です。こちらも多くの方に読んでいただき、「助かった！」という声もいただけて、すごく嬉しかったです。
もしも「Sorcery」使っているけど、「Google認証実装できない」ってなったら読んでいただきたいと思います。
【React導入】既存のRailsアプリにReactを導入する
Railsで環境構築したアプリに、Reactを導入する方法について書かれた記事が少なく、こちらも誰かのお役に立てればと思って書きました。
バック(Ruby on Rails)のみで環境構築して開発したけど、後からReactも導入したいという方はぜひ参考にしていただければと思います。
私自身まだまだキャッチアップができてないので、こちら間に合えば実装していこうと思います。
おわりに
今回の開発を通じて、多くの学びを得ることができました。
開発の過程で何度も壁にぶつかりましたが、自分の思い描いたアイデアを形にしていくのは想像以上に楽しかったです。その過程で必要な技術を調べ、実装することにより、自然とスキルが向上し、幅広い実装ができるようになったと感じています。
もちろん、まだ改善の余地は多く、技術的にも至らない部分があることは自覚しています。今後も学習とブラッシュアップを継続し、より多くの人の役に立ち、課題解決につながるアプリを開発していきたいと考えています。
最後までお読みいただき、誠にありがとうございました。