works
フルスタック Web & AI（PHP / MySQL / JS / PWA / Linux VPS）
| 作品名 |
資産管理ダッシュボード（AI明細解析・複数金融機関連携） 🔗
※ログイン不要でダミーデータのままお試しいただけるデモ環境です |
|---|---|
| 制作期間 | 個人運用として継続開発中（複数回にわたる機能追加・不具合修正・設計見直しを重ねながら実運用） |
| 作品概要 | 銀行・証券・FX・クレジットカードの残高や収支を一元管理できる、個人〜少人数向けの資産管理PWAです。明細ファイル（PDF/CSV/画像）をAIが自動解析し、金融機関名の名寄せ・実在判定までを自動化した上で、口座ごとの残高推移や支出のカテゴリ内訳をダッシュボードで可視化します。 |
| 実装した 機能と工夫 |
① AI × 正規表現 × 辞書 × Web検索の多層解析パイプライン ・Gemini APIによる明細解析（銀行/証券/FX用、クレジットカード用でスキーマを分離し、一方で認識できなければもう一方へ自動フォールバック）。 ・フォーマットが既知の金融機関は正規表現ベースの専用パーサーでAPIコスト0円・高速に処理。 ・抽出した金融機関名は、まずローカル辞書（表記ゆれ・エイリアス対応）で名寄せし、未知の名称のみTavily Search APIで実在確認、確認できた機関は辞書へ自動学習させ、次回以降はAPI通信なしで即時判定される仕組みを構築。 ② データ整合性への配慮と実運用での障害対応 ・AES-256-CBCによる列単位暗号化（残高・取引内容などの機微情報を保護）。 ・複数月分の明細一括アップロード時の残高推移・収支自動バックフィルと重複インポート防止（dedup）。 ・実際に発生した「合計残高ではなく内訳の一部だけを記録してしまう」バグを実データで再現・特定・修正し、さらに誤って削除してしまった本番データをログテーブルから実際に復旧した経験あり（原因分析・再発防止・実データ復旧までを一通り経験）。 ③ PWA・モバイル実機対応 ・Android/iOSでのファイル選択（content:// URI）、複数ファイル一括アップロード、通信タイムアウト制御など、実機テストで見つかった不具合を個別に解消。 ・WebAuthn（パスキー）によるパスワードレスログインに対応。 ④ 権限・プライバシー設計 ・オーナーと一般ユーザー（同居家族などのサブアカウント）で、AI機能や特定の資産情報（FX取引の有無等）の見え方を細かく制御。一律の「管理者/一般」ではなく、機能ごとに公開範囲を判断する設計。 ⑤ ポートフォリオ公開用デモ環境の構築・分離運用 ・本番と完全に別のデータベース・ドメイン・暗号鍵で動作する見学用デモを構築し、実在しない金融機関名のダミーデータへ定期的に自動リセット。共有APIキーのコスト暴走を防ぐ利用回数制限も実装し、見知らぬ訪問者にも安全に公開できる形に仕上げた。 |
| 技術の 合体ポイント |
ひとこと掲示板で培ったAI連携（Gemini）・Web検索連携（Tavily）のノウハウを、実際にお金を扱うWebアプリという、より高い正確性・セキュリティが求められる文脈で発展させた集大成的な作品です。掲示板が「Webアプリ開発とAI連携の基礎」、マーケットトラッカーが「Python×外部API連携」を示すのに対し、本作は「データ整合性・暗号化・権限設計・障害対応」まで踏み込んだ、実務直結のフルスタック開発力を示す作品と位置づけています。 |
フルスタック Web & AI（PHP / MySQL / JS / Linux VPS）
| 作品名 | 時間帯連動型 ひとこと掲示板（画像投稿・セキュリティ対策済） 🔗 |
|---|---|
| 制作期間 | 約30時間（設計・データベース構築からサーバー公開まで） |
| 作品概要 | ユーザー登録・ログインを行い、テキストや画像をリアルタイム風に投稿・共有できる、Webアプリケーションの基本と応用を網羅した動的掲示板システムです。 |
| 実装した 機能と工夫 |
① バックエンド処理（PHP & MySQL） ・PDOを用いた安全なデータベース接続。 ・セッション管理によるログイン認証と、マイページ連携（ユーザーごとのプロフィール画像取得）。 ・ファイルのアップロード処理（投稿画像がサーバー内で重複しないよう、タイムスタンプを付与して保存）。 ② フロントエンド演出（HTML/CSS & JavaScript） ・時間帯連動型テーマ切り替え：PHP側で東京の現在時刻を取得し、アクセスした時間帯（朝・昼・夕方・夜）に応じて読み込むCSS（スタイルシート）を自動で動的に切り替える仕組みを実装。 ・Lightbox2による画像演出：投稿された画像を拡大表示するjQueryプラグインを導入し、ユーザー体験（UX）を高めました。 ③ 実務レベルのセキュリティ対策 ・SQLインジェクション対策：すべてのDB操作でプレースホルダ（`prepare`）を徹底。 ・XSS（クロスサイトスクリプティング）対策：`htmlspecialchars` を用いたサニタイズ処理。 ・CSRF（クロスサイトリクエストフォージェリ）対策：暗号論的に安全なトークン（`bin2hex(random_bytes)`）をセッションに発行・検証するロジックを実装。 ④ 生成AI連携 & 非同期チャットUI実装: ・Gemini 2.5 Flash API を統合し、過去の会話文脈（コンテキスト）を保持した自然な対話を実現。 ・Google検索ツール（Grounding）を組み込み、最新情報の検索・回答に対応。 ・Fetch API による非同期通信を採用し、画面リロードなしで即座に応答を描画。 ⑤ 本番インフラ構築・セキュリティ運用: ・VPS（Linux）環境の初期構築から、独自ドメイン取得・DNS設定、Certbot（Let's Encrypt）による常時SSL（HTTPS）化および証明書自動更新をすべて自力で完結。 |
| 技術の 合体ポイント |
フロントのデザイン（HTML/CSS）はもちろん、裏側のデータ保存（PHP/MySQL）、画面の動的な仕掛け（JavaScript）、さらにローカル環境で検証を重ねたPython（AIアシスタント機能）の連携ノウハウまで、これまで訓練校や自主学習で培ったすべての技術スキルを一つに集約・合体させた渾身のアプリケーションです。 |
Python バッチ処理・API連携（yfinance / Discord Webhook / cron）
| 作品名 | マーケットトラッカー（株価・為替・暗号資産の自動監視） 🔗 |
|---|---|
| 制作期間 | 個人運用として継続開発中 |
| 作品概要 | Pythonで株価・為替・暗号資産の価格を定期巡回し、急変動時にDiscordへ自動通知するバックエンドバッチシステムです。 |
| 実装した 機能と工夫 |
① 定期実行基盤（cron）：15分おきの常時巡回と、朝夕の定時レポート送信をcronで運用。 ② 外部API連携（yfinance）：日米の株価指数・個別銘柄・為替・暗号資産をまとめて取得。 ③ 変動検知ロジック：銘柄カテゴリごとに異なるしきい値（株3%・為替1.5%・暗号資産4%）を設定し、急変動時のみアラートを送信。 ④ Discord Webhook通知：取得結果をリアルタイムでDiscordチャンネルへ送信。 ⑤ 認証情報の管理：Webhook URLはwebroot外の環境変数ファイルで管理し、サーバー内でも安全に分離。 |
| 技術の 合体ポイント |
掲示板がPHP/MySQLでの「Webアプリ開発」を示す作品なのに対し、こちらはPythonでの「定期実行バッチ・外部API連携」を示す作品です。マーケットトラッカーの表示ページでは、このバッチが書き出した最新データをPHP側で読み込んで表示しており、2つの言語・プロジェクトを連携させています。 |