はじめに

こんにちは! yukimuraと申します
未経験からのWebエンジニア転職を目指して、2023年11月からプログラミングスクール「RUNTEQ」に入学し、Ruby on Railsを中心にプログラミング学習を行っております。

今回「詐欺師の手帳」というアプリをリリースしました。
詐欺被害を未然に防ぐことを目的としております。

アプリ紹介

サービスURL(レスポンシブ対応済)

GitHub URL

開発背景

　自分自身や家族、友人などが詐欺被害に遭った経緯から、詐欺は身近であると同時にYoutubeなどで多くの人が詐欺に引っかかっている現状を知りました。このことから詐欺被害を未然に防ぐサービスを作ってみたいと強く思いました。

　詐欺被害の現状としては詐欺の立証が難しいことや、詐欺の種類が多いことから、詐欺の種類を把握しきれないということが挙げられます。

参照
https://www.moj.go.jp/content/001365737.pdf
https://keiji.vbest.jp/columns/g_property/6931/

詐欺被害にあった方は、「まさか詐欺だなんて想像もしていなかった」というケースが多いのではないかと考えます。

　また、怪しいと感じてもどんな詐欺の可能性が考えられるかを、何の詐欺を調べたらいいかわからないという問題もあると思います。

　以上のことから

怪しいと感じた時にユーザーが状況を入力して詐欺診断してもらうことで
ユーザーが詐欺について調べるきっかけを作る。
詐欺の情報に触れて備えることができる様に、他の人の詐欺被害の閲覧ができる
自分の詐欺被害の経験を他のユーザーに共有できる
詐欺知識向上のために、詐欺師の手口を知る
そんなアプリがあったらいいなと思い作成しました。

■機能一覧 (⭐️マークはログインなしで使えます)

状況入力⭐️	診断結果の表示⭐️

ユーザーは状況をステップ式フォームで入力できます。質問は全部で7つです。	７つの質問を入力後、診断開始をして該当の詐欺名と詳細、対策のポイントを提示してくれます

詐欺詳細⭐️	検索機能

詐欺の詳細ページです。`詐欺師視点の詐欺師の手口`が記載されています。	詐欺一覧と投稿一覧ではそれぞれ詐欺名での検索ができます。(オートコンプリート)

投稿機能	マークダウンでの記述

タイトル、詐欺名、具体的な内容を入力し、ユーザーの詐欺経験談を投稿することができます	投稿の際はマークダウン記法を用いて記述ができます。プレビューボタンですぐに確認もできます。(*マークダウンは全てに対応はしてません)

詐欺の相談先の一覧ページ⭐️	Xシェア⭐️

詐欺についての相談先の一覧です。	詐欺診断結果と詐欺の投稿をXにシェアできます。(投稿では詐欺のタイトルが,詐欺診断では詐欺名がそれぞれ動的OGPで表示されます)

マドフくんのささやかな応援メッセージ⭐️	マドフくんを友達追加

マドフくんをクリックするとランダムでユーザーに寄り添うような応援メッセージを表示します。	LINEで友達追加をすると、詐欺情報が毎朝７時に届きます

使用技術

実装スピードを上げることと、学んだことを自分で一から実装できる様になりたいという思いから、スクールで学習していたRuby on Railsを主に使用しました

カテゴリ	技術
フロントエンド	Rails 7.0.8.4 (stimulus), TailwindCSS, DaisyUI
バックエンド	Rails 7.0.8.4 (Ruby 3.2.3), sidekiq
db	PostqreSQL, Redis
インフラ	Render.com
開発環境	Docker
API	OpenAI API, LINE Messaging API
テスト	Rspec, rubocop

ER図

画面遷移図

工夫した点

UI&UX

ユーザーが直感的にわかりやすく操作できるよう、stimulusを使ってステップ式フォームで詐欺診断を行える様にしました。また、デザインなどは比較的シンプルにすることを意識しました
「詐欺師の手帳」というアプリの名前が少し強烈だと感じていたので、アプリのキャラクターを作成し、キャラの世界観を意識しました
　さらに、キャラから寄り添うようなメッセージを表示することで、警戒心の緩和とアプリの愛着を少しでも持ってもらえたらいいなと思いました。
LINEログインを実装して、ユーザーのログインのハードルを下げました

詐欺診断機能

詐欺診断でAIからの詐欺の情報を生成する時に、すでにデーターベースに同じ名前の詐欺名が存在する場合は新しく情報を生成しない様にしました
　従って、必要以上にOpenAI APIを使うことがなくコスト削減を行いました
詐欺診断では、精度を上げるために「その他」の選択肢を取り入れました
　選択肢はラジオボタンですが「その他」を選択した場合のみテキストで入力することができます

マークダウン記法の取り入れ

このアプリを作成すると決めてから、スクールの同期から「こんな詐欺に遭いそうだったよ」と伝えてもらう機会が何度かありました。その際に、ほとんどが画像とセットで伝えてくれていることに気づきました
　そして、画像をアップロードして表示するよりは文章に画像を組み込める形の方がユーザーは詐欺被害の投稿が行いやすいのではないかと考え、マークダウン記法を取り入れることにしました
また、画像以外のマークダウンでの記述ができることから、投稿の可読性の向上を期待することもできます

反省点

詐欺診断機能

詐欺診断の入力するフォームについて

　「その他」の入力欄を追加して精度を上げているといえど、もう少しユーザーに沿った入力フォームがあると感じています。幾度か入力フォームの調整を行いましたが、まだまだ自分自身の実力が足らない部分で、学習が必要である部分だったと思いました。他の診断アプリの入力フォームなどから学び、次に活かしていきたいです

AIの診断に頼りすぎている点

　入力してもらった情報を元にAIが診断を行ってくれるという実装を行いましたが、自分自身がまだAIを使いこなせていない点から、AIに投げかけるプロンプトの調整に何度かチャレンジしました。 AIへの質問の仕方などを学び、当初よりは向上ができたとは思いますが、それでもまだまだ診断の精度が良いとはいえないと思います。
　反省点として、AIに頼り切るのではなくてAIにサポートをして貰って、自分独自のロジックを組むことが必要だったのではないかと感じています
今回の詐欺についての知識が足らず、詐欺診断の精度が本当に高いのかを判断することがはっきりできませんでした。このことから、特に診断系の実装を行う時にはAIに任せすぎるのではなく、自分自身もある程度の知識を持って取り組む姿勢が大事である、と個人的に実感しました

実装した機能

アプリで実装した機能のいくつかについては、Zennの記事で紹介していますのでよければご覧ください

今後の展望

投稿一覧の部分で詐欺名をタグにする実装を検討しています
投稿に対するいいね機能の実装も検討しています
テストコードがまだ十分ではないので、追加していきたいです
詐欺の手口から、問題を作成してユーザーに回答してもらう様な機能もあればいいなと思っています

終わりに

　アプリ開発をするにあたって、相談に乗っていただいたり、応援していただいたり、アプリを触っていただいたり、嬉しい感想を送っていただいた方々。本当にありがとうございました！！感謝しかありません!

　沢山の方に支えられたおかげで作成することができたと思っております。
まだまだ未熟な点が多いですが、今後も学習を継続し、このアプリを改善していくとともに、いっそう誰かの役に立てる別のアプリなども開発していきたいです。
　
最後まで読んでいただき、ありがとうございました！

はじめに

アプリ紹介

サービスURL(レスポンシブ対応済)

GitHub URL

開発背景

■機能一覧 (⭐️マークはログインなしで使えます)

使用技術

ER図

画面遷移図

工夫した点

UI&UX

詐欺診断機能

マークダウン記法の取り入れ

反省点

詐欺診断機能

詐欺診断の入力するフォームについて

AIの診断に頼りすぎている点

実装した機能

今後の展望

終わりに