はじめに
のすけと申します。
現在、プログラミングスクール「RUNTEQ」に通ってRuby on Railsを学習しております。
ポートフォリオとして「Smart Phone Choice」という、スマホの契約時における「料金プラン」と「購入方法」に関する情報収取から購入までサポートするアプリを開発しました。
今回はそのサービス内容についてまとめたものを記載いたします。
先に伝えておきますが、本記事ではコードについての記載はせずに実施していきます。
サービスについて
GitHubのリポジトリについて
開発の背景
開発のきっかけ
自分の前職として某携帯電話の代理店で働いていました。
近年、オンラインプランの登場や機種変更までの期間の拡大、スマートフォン間のデータ移行の簡略化により、携帯電話ショップでの機種変更を必要とするお客様が減少してきました。
この状況に対応するため、店舗では一人当たりの売上を上げる方針へと転換していきました。しかし、お客様自身でできることが増えているにも関わらず、携帯電話ショップでは高額な料金設定となっています。
例えば、2024年12月時点で通常の受付でiPhone15を購入する場合、Appleストアと携帯電話のキャリアショップとでは、3～5万円ほどキャリアショップの方が高額になっています。
この価格差について知っている人と知らない人との情報格差を埋めることで、不要に高額な支払いをする人を減らしたいと考え、このアプリ開発を決意しました。
技術構成
| カテゴリ | 技術内容 |
|---|---|
| サーバーサイド | Ruby 3.2.3 |
| フレームワーク | Rails 7.2.1 |
| フロントエンド | HTML, CSS, Bootstrap, Hotwire（JS） |
| データベース | PostgreSQL |
| インフラ | Render.com |
| 開発環境 | Docker |
| Web API | 楽天API, LINEMESSAGING API, LINEログイン |
技術選定理由
Rails
- RUNTEQで学んでいたのがRailsであったこと
- 自分のメインの機能「CGM」のサービスにしたかったのもあり、Railsにしています
- 環境構築が8月下旬だったので、その当時の最新状態になる「Rails 7.2.1」を採用しています
Bootstrp、Hotwire
- フロントエンドのキャッチアップは最小限でかつ、処理速度の速さが担保されるようにBootstrapにしています
- 最小限のJavaScriptで動的なUI実装が可能なHotwireを選定しています
Docker
- RUNTEQでのカリキュラムではDockerでの環境構築を実施していたので、Dockerにしています
- バージョン管理はGitHubにしている点もあり、Dockerを選択しています
Render
- 初めてのデプロイだったので、デプロイのしやすさと、ログの見やすさを最重視して、Fly.io、Herokuも考えたのですが、Renderにしています
機能
会員登録
sorceryでのユーザー登録とLINEログインAPIを使ってのユーザー登録を実施しています。
登録後もユーザー名とメールアドレスの変更は出来るようにしています。
掲示板機能（検索機能）
トップページであり、掲示板機能になっています。
自分の投稿については編集と削除が出るように実施しています。
その他のユーザーの投稿の場合にはお気に入り出来るようにしています。
検索機能では、ENUMで実施しているタイトル検索と、
本文の投稿内容による検索と本文の投稿内容に対してのインクリメンタルサーチの実装をしています。
通知機能
コメントとお気に入りを受けた場合に通知機能を実施しています。
通知機能は未読時にヘッターの色が赤くなるように実施しています。
LINEでの通知を受信が出来るようにしています。
LINEでの通知を受けた場合は以下のようなLINEが届きます。
通知ページに遷移して、未読を既読に変更するように実施をしています。
投稿機能
本文以外は全て選択式にしています。
投稿のハードルを下げつつ、他の人と比較がしやすいのと、参考にしやすい作りにしています。
本文の内容は記載が難しいと思い、未読時には記載の例が出るようにしています。
モデルファイルを軸にした診断機能
20通りの回答に対して、モデルファイルがどの回答を出すかという診断機能を作成しています。
ユーザーの属性に合うように自分で考えて実装をしました。
画面遷移を軸にした診断機能
コントローラーとルートで回答に合わせた質問内容が出る診断機能になっています。
実装がシンプルな分、操作性もシンプルになっています。
商品検索
楽天APIを使ってユーザーがスマホの検索が出来るようにしています。
ここまでの診断機能での回答が生きるように、「新品」「中古」そして「楽天モバイル」と「SIMフリー端末」という選択を出来るように実施しています。
工夫した点
こちらの内容についてはすでに別の記事でまとめています。
初学者なりに考えて実装した内容になっているので、是非見て頂けると嬉しいです。
実施したいこと
-
テストコードの記載
テストコードは仕様書としての役割もあるということなので、テストコードの記載から実施していこうと思います -
リファクタリングの実施
- RuboCopの警告を解消
- メソッドの共通化による重複コードの排除
- そのほか、コードの整理・簡素化
-
機能の追加（余裕があれば）
- 商品検索のオートコンプリート検索
- 商品検索のお気に入り機能×通知機能
- 投稿機能のお気に入り機能の数の表示
- スクレイピング機能を実施して最新の乗り換えに関する情報の提供
- フォロー機能
最後に
ここまで見て頂きありがとうございました。
このアプリを見て足りない部分はたくさんあるかと思います。
このアプリで一番大事にしている、僕の実体験を通じてエンジニアになりたいのかというのが伝わるようなアプリにしたくて本アプリを作成しました。
是非よろしくお願いいたします。