初カキコ...ども...
文系からの未経験で一年ほどのSE歴から、初めてポートフォリオを作りました。
GitHubレポジトリ
以下その内容の説明です。
1. プロジェクト概要
- 論理チェッカー付きのSNS
- 基本的にはCRUD処理のよくあるポートフォリオ
- 追加要素としてopenAI APIによって投稿内容の攻撃性や論理性を精査
背景として、
- CRUD処理だけのポートフォリオは採用官も自分も面白みを感じられない
- 元より論理チェッカーによるデマや誹謗中傷の抑止効果への関心があった
- たまたま友人に触発されて論理学を学んでみたら面白かった
- 検索しても同じ試みをしている人があまりいなかった
- 就活だけでなく将来のライフワークになるものを制作したい
という観点から制作対象として選定しました。
2. 使った技術
- PHP（Laravel）：追加でBreezeを導入、MVCの役割
- React：コンポーネントでのリアルタイム表示
- OpenAI API：論理チェッカー機能(moderation, GPT-5)
- Cloudinary：サムネイル画像のアップロード連携
- Gmail OAuth：パスワードリセット時のメール送信機能
- Railway / Fly.io / Upstash：クラウド環境でのデプロイ
- chatGPT：要件定義からこの記事作成まで開発全体で利用
コーディングソフト上で質問できるCopilotなどではなく、勉強のためにあえて、ブラウザ上でコードを出力してもらって噛み合わない箇所を調べて修正するというやり方で進めました。
本当は無職でお金がないから使えなかった。
3. 設計内容
- 要件定義：背景、目的、対象ユーザー、機能要件、非機能要件
- システム構成図：下図参照
- ユーザーストーリー：「誰」が「何をしたい」ので「何をした」をスプレッドシートにリスト化
- 画面遷移図・ワイヤーフレーム：figmaで作成（とりあえず「見れば分かる」レベル）
- 画面仕様図：画面の表示内容や操作時の説明を画面ごとに作成
- ER図：下図参照
- DB設計図：カラム名・データ型・種類/備考
[システム構成図]
[ER図]
4. ざっくり内容概説
ログイン処理
- breezeのプリセットに準拠（アカウント登録、ログイン、パスワードリセット）
- メッセージの日本語化やcssデザイン、処理中のボタン無効化などのUI要素を改修
- メールアドレスだけでなくユーザー名でもログインできるようにするなどの改修
- パスワードのリセット機能のためにGmail OAuthと連携
CRUD処理
- 投稿作成と削除、タイムラインの読み取り、いいね機能（投稿内容の更新は未実装）
- マイページでのアカウント名とプロフィール文の更新
- 同じくマイページでCloudinary連携によるサムネイル更新
$\tiny{（ちなみにデフォルトでは私がこたつの中で熱燗を飲んでいるサムネイルとなります）}$
ちなみに、ダークモード機能も実装しています。
tailwindとにらめっこするのが実に面倒くさかった！
5. おまちかね論理チェッカー機能
ここからが本番です。
流れはざっくり以下のフローチャートの通り。
①第一関門moderation API
機能の詳細は公式ドキュメント(https://platform.openai.com/docs/guides/moderation )を見ていただくのが早いですが、要するに暴力的/性的な発言を感知してNGを出すopenAIのAPIです。無料です。
日本語の精度もまずまずですし、少々厳しいぐらいであれば、chatGPT APIにいきなり脅迫文とか送りつけてアカウントBAN喰らうよりは遥かにマシ、ということである程度は監視社会的なディストピア設計でやらせてもらいます。
この関門に引っかかると画像のような警告文が出て、文面を変えるまでは投稿ボタンは無効になります。
NGだった場合、投稿はもちろんDBへの文面保存もされません。ただし、悪質なユーザーの検知はしたいため、moderation APIに引っかかった回数をusersテーブルのtotal_moderation_false_countカラムでカウントするようにしています。同カラムの値が一定数を突破したタイミングで管理者に警告が飛ぶなどの実装ができたらと思っています。
②第二関門chat GPT API
今回のメインディッシュです。
moderation APIから無事OKが出たら、次はchatGPT APIに論理チェックをしてもらいます。APIモデルはGPT-5です。
問題ない文章であった場合は、論理的であることを示すチェックマークが付与された上で投稿されます。もしダメな場合は以下のようにダメな理由と直すヒントを提示したモーダルが表示されます。
そして修正かそのまま投稿の二択を選びます。なお、このまま投稿した場合は、アカウントの論理レベル（全投稿中の論理的な投稿の割合から算出）が落ちるよという警告文を載せています。
修正する場合はmoderationからやり直しになります。
なお、プロンプトは以下のとおりです。
以下の文章が批判的/攻撃的な文体であれば、その主張に論理的問題がないかチェックしてください。
ニュートラル、あるいは友好的な文体であれば、著しい論理破綻以外は無視してください。
非論理的な内容を引用した上で批判していないか文章の構造にも注意してください。
反語やジョークなどの主張の根幹ではない非論理的表現は無視してください。
投稿文：
$tweet
以下の形式で300文字程度でJSONで返してください：
{
"is_logical": true, または false,
"reason": "なぜそう判断したのかを一文40文字以内で簡潔に説明",
"hints": ["改善点や注意点などを1〜3点", "なければ空配列で良い"]
}
なお、投稿文は全てmoderation APIでflaggedがfalseであったものです。
不適切な文言が含まれている場合も書き手側の批判的態度を加味してください。
コグニティブ・デザイン、論理式など、出力の制度を挙げる構文が多々あることは承知していますが、これで一応及第点かなという判定にはなっているので、もし修正したとしても次のでかいデプロイまではこのままの予定です。
というわけで、晴れて二重チェックを合格して、論理的とされた投稿は先述のチェックマークが右上について表示されます。サムネイルの下のメダルは論理的な投稿が多い優良アカウントの印です。
6. 作成したファイル
- app/Http/Controllers内のController.phpファイル
- app/Http/Requests内のRequest.phpファイル
- app/Models内のModel.phpファイル
- app/Services内のService.phpファイル
- database内のMigrationファイル
- resources/js内のjsxファイル
/api, /components, /constants, /hooks, /pages配下のファイル
app.jsx, authApi.js - resources/views内のblade.phpファイル
- routes内のphpファイル
- Dockerfile, docker-entrypoint.sh, ngix.conf, fly.toml等デプロイ時のファイル
ひっそりと隠しファイルも入れています。ヴァニラCSSの限界が知りたくて遊んでいたものです。 ざっくり言うと某有名SF映画のOPのパロディーをしています。
7. 作成期間
以下のnotionで記録していました。
スケジュール
5月末から要件定義より着手し、8月頭に2回目のデプロイを行って、とりあえず完成、ということでおおよそ2ヶ月間。
実際には全く何もしない日もあったので、日数としては50日〜60日ほどで、時間としては1日4時間ぐらい。
総開発時間としては、雑に計算すると55日 * 4時間 = 220時間。
つまり、
220 / 8 = 27.5 人日
ほどです。
これが多いのか少ないのかは、工数見積もりを試しにやってみなと指示されるがまま、勘でやったことしかないので、よく分かりません。まあ、AIなしで初学者がここまでの期間でできるとは思えないので、よくやった部類なのかもしれませんが。
8. 開発上の課題
- 環境構築が初心者の鬼門というだけに、デプロイが最大の山場
→稼働が成功するまでにエラーと20時間ほど格闘することとなり、結果としてデプロイ先が3つになり破滅的に重いサイトとなってしまった
→ローカルでは一瞬で終わっていた処理が数秒にも長引き、ボタンを無効化する制御を厳密化する必要が生まれたため、怪我の功名でもあった。
- 記述ルールはすぐに乱れる
ファイル数は膨大ではないため、そこまで管理が難しいわけでもないが、楽な道を選ぶと命名法も記述も緩くなってしまう。
- アーキテクチャの学習要素の薄さ
自分のスキルや開発レベルでは勇足かもしれないが、アーキテクチャを意識したコーディングができていなかった。もしこのポートフォリオをどんどん改造していくなら、過去の自分のレガシーコードに苦しむことのないよう、早いところ手を打つ必要はある。
- テストの未実装
これが最大の課題かもしれない。先日、本物のスパゲティコードを見せてもらう機会があった。テスト無しにシステムが膨れ上がる恐ろしさ、テスト駆動開発なるものの重要性。これらがにわかに頭の中で湧き上がっている。
9. サービス上の課題
・moderation APIでflaggedがfalseでもchatGPT API側でBANされるリスク
→BANされた場合に備えて複数の生成AIのAPI KEYを用意する
→もしリスクを0にするなら自己ホストモデルのLLMが必要となる
・APIは最新情報やネット上のソース参照ができないため、
デマをスルーしてしまう可能性がある
⇔最新情報を得るスクレイピングには法的リスクが伴う上、
情報の質が高いサイトほど有料のためアクセス不可能の傾向
$\tiny{こんなことしてる間にMCPやAtlasが出てきているわけで...}$
・そもそもにこのサービスをユーザーに使ってもらうには、
問答無用のmoderationチェックとおせっかいなchatGPTに課金する魅力が必要
⇔SNS疲れをした人や建設的なやり取りをしたい人へのささやかなコミューンに
10. 今後実装した機能
- 論理レベルの細分化や基準の精度向上
- マイページ・ユーザー詳細に当アカウントの投稿一覧を表示
- ツイートやユーザーの検索機能
- フォロー・フォロワー機能
- リッチテキストや共有などの入力機能の拡張
- コミュニティ機能
- UI/UXの向上
- alt属性の入力支援、音声読み上げ、多言語対応などのアクセシビリティ機能の拡張
- パスワードの厳格化や二段階認証、不正アクセス通知・通報制度などのセキュリティ機能の拡充
- サーバーの負荷軽減対策（スロットリング）
+@ マネタイズ前提の機能
なお、論理性の高い人ほど安い料金にすることを想定しています。
- MCPによる精度向上（MCPミリ知らで言っています）
- コメント機能＆ツリー式での投稿機能
- 課金ユーザーは論理チェッカー対応の画像投稿機能や、文字数上限解放
誠実な人間が得をするような構造にしたいなとは思っているので、論理性を高めると料金が安くなるというのは結構キモなイメージではあります。
そのためには不正防止等対策すべきことはたくさんあるとは思いますが。
11. 終わりに
己のスキルの未熟さを感じつつも、一応形としては成立するものができたので及第点というところ。
冗談が分からないクソ真面目レフェリーが判定するクソサービスと思う人もいるだろうが、非論理的で事実無根の誹謗中傷が飛び交い死人も出続けているSNSや現実世界から距離を取る方法を作ることが、今の社会において喫緊の課題とは思うため、全く意義がないものとは思わない。
コーダーとしても設計者としてもブラッシュアップして、もっと現実的なプラットフォームに作り変えていくことを人生の目標の一つにしたい。