01PWA / 自動生成 / 音声認識
katatte
写真を見ながら語るだけ。記事が自動で仕上がる。
旅の思い出写真と音声をセットにするだけで、旅行記事を自動生成するPWAアプリ。音声チャンク分割アップロードやモバイル操作性まで設計した実装例。
- ✓音声 + 画像 + LLMの統合設計
- ✓PWA対応（ホーム画面追加・オフライン対応）
- ✓スマートフォン操作を最優先に設計
使用技術
Next.js 15OpenAI APITailwind CSSVercelPWA
Portfolio
実績・ポートフォリオ
実際に動いているプロダクトを中心に掲載しています。要件定義から実装、運用までを一貫して担当した案件です。
サイトを見る
02最適化アルゴリズム / モダンUI
PP Route Optimizer
SFC修行の最高効率ルートを自動計算。
ANA SFC修行（2026年5月以降の新運賃）に対応した最適ルート計算ツール。フライト数・PP数・費用の3軸で旅程を提案。
- ✓新運賃体系への対応
- ✓組み合わせ最適化アルゴリズム実装
- ✓レスポンシブ対応
使用技術
ReactTypeScriptTailwind CSSVercel
03業務自動化 / API連携 / GAS
O365→GCal 自動同期
Outlook予定が、毎朝Googleカレンダーに届く。
Outlook予定をGoogleカレンダーへ毎朝自動同期するスクリプト。ICS取得からGoogle Calendar API登録までを自動化。
- ✓O365 ICS → GCal APIのパイプライン化
- ✓差分更新対応
- ✓実務で使える堅牢な運用
使用技術
Node.jsGoogle Calendar APIMicrosoft Graph APIGAS
04自動化設計 / Cursor / 業務設計
朝の自動化コンシェルジュ
起きたら、もう今日の仕事が動き始めている。
毎朝のルーティンを自動実行する仕組み。カレンダー取得、思考ログ、SNS下書き、git pushまでを連携。
- ✓8ステップの定常業務を自動化
- ✓Claude API + GAS + GitHub連携
- ✓運用前提のエージェント設計
使用技術
Claude APIGoogle Apps ScriptGitHub ActionsCursor AI
05Next.js / PWA / 認証
Master Flow Viewer
マスタープランの処理フローを可視化。
処理フローを閲覧・管理するダッシュボード。Edge Basic認証、PWA対応、Vercel自動デプロイを実装。
- ✓Edge Basic認証
- ✓PWA対応
- ✓GitHub push → Vercel自動デプロイ
使用技術
Next.js 15TypeScriptTailwind CSSVercel Edge RuntimePWA