StreamlitでChatGPTのUIを作る—LangChain ReActエージェントとGoogle検索の組み合わせ
Streamlit と LangChain を組み合わせて、Google検索・Wikipedia検索ツールを持つ ChatGPT エージェントのWebUIを作りました。LangChain の ReAct（Reason + Act）エージェントが自律的にツールを選択して質問に答えます。
[Read More]
Xのタイムラインを自動要約！FastAPI + LLMで作るトピックダイジェストシステムの設計
関心のあるトピック（キーワード）を登録すると、X（Twitter）の関連ツイートを収集しLLMで要約するWebアプリ「TopicDigestX」の設計を紹介します。FastAPI + SQLAlchemy + React + Viteの構成で、Docker Composeで手軽に起動できます。
[Read More]
ジムから住む場所を決める！Go + Reactで作る「筋肉不動産」アプリの設計
「まずジムを選んでから家を探す」という筋トレ愛好家向けの住まい探しWebアプリ「筋肉不動産」を開発しました。Go + Gin のClean Architectureバックエンドと、React + TypeScriptフロントエンドの実装を解説します。
[Read More]
漫画の続刊を買い忘れない！Go + Reactで作った続刊管理Webアプリ「tsuzukan」
手持ちの漫画・小説の続刊をピックアップし、Amazon/楽天のカート追加URLを自動生成するWebアプリ「tsuzukan（続刊）」を開発しました。Amazon・楽天の購入履歴CSVをインポートしてシリーズ管理し、新刊が出たら即カートに追加できます。
[Read More]
ローカルLLMでデッサン添削アプリを作った！Ollama + Qwen3.5 + Go + Reactの構成
Ollama上で動くVLM（Qwen3.5）を使ってデッサン添削Webアプリを開発しました。iPadから写真を撮ってアップロードするだけで、AIが6つの評価項目ごとに10点満点でスコアとアドバイスを返します。クラウドAPIを使わないため、絵の内容が外部に送信されることもありません。
[Read More]
配信録画を自動で分割！FFmpegのsilencedetectで作る動画分割Webアプリ
FFmpegのsilencedetect フィルターを使って動画を無音区間で自動分割する Webアプリ「JamSlicer」を開発しました。従来の librosa/moviepy 実装と比べてメモリ使用量を 1/100 以下に抑えつつ、分割速度を10〜20倍に向上させた実装を解説します。
[Read More]
BookingButler：Googleカレンダー連携で出張管理を自動化するWebアプリ
出張の移動時間計算とスケジュール調整を自動化するBookingButlerの開発記録。Googleカレンダーと連携し、予定間の最適な移動ルートを算出する技術実装を紹介。
[Read More]
サークル写真管理の分散・重複問題をSHA256ハッシュで解決 - drive-gallery開発事例
はじめに
サークルやチームでイベントの写真・動画を管理していると、「どこに何の写真があったっけ？」「同じ写真が複数の場所にアップされている」といった問題に直面することはありませんか？本記事では、音楽セッショングループ「Luke Avenue」のメディア管理課題を解決するために開発した「drive-gallery」における分散・重複問題の技術的解決アプローチについて詳しく解説します。
[Read More]ViteでReact の環境構築
環境構築
npx create-react-app my-app
cd my-app
npm start
上の方法は古いらしい
下記の方法でViteを利用してReact+TypeScriptの環境構築を行う
npm create vite@latest