Output
養鶏場にIoTの土台をつくる
アクト・ノードの企業ブログ記事。山口県「こっこ」様の養鶏場にStarlink衛星インターネットを設置し、IoTシステムの基盤を構築した現地作業レポート。山奥の通信環境の課題を克服し、最終的に220Mbpsの高速通信環境を実現しました。
React学習教材
友人に React の基本的な概念や使い方を教えるために作った学習教材。視覚的にわかりやすいインタラクティブな教材でコンポーネントの作成、状態管理、イベントハンドリングなど、React の基礎を実践的に学べます。
3D 太宰府天満宮デモ
AI画像生成（Nano Banana Pro）× AI 3Dモデル生成（Meshy.ai）× React Three Fiber で構築した太宰府天満宮 仮殿の3Dジオラマ。藤本壮介設計の「屋根に森が生える」建築をインタラクティブに体験できます。
墨流し (Suminagashi) デモ
水面に落とした墨を漂わせる日本の伝統技法「墨流し」を、WebGL2 の流体シミュレーション（Stable Fluids）で再現。Navier–Stokes を GPU で解いて墨を流れに乗せ、Beer–Lambert で和紙に滲ませます。なぞると墨と色が溶け合うインタラクティブ体験。
AI NEWS APP
AIが毎日自動で公式ブログやGit Hub から情報を取得し、要約をしてSlackのチャンネルにニュースを発信するアプリケーション。障害情報も通知するように設定。
Tanstack Start & Convex
Tanstack StartとConvexを使用して、リアルタイムアプリケーションのデモを作成。データは定期的に削除されるので複数ブラウザを立ち上げて遊んでみてください。
SVG Beam 解説デモ
SVG path + mask + radialGradient + CSS offset-path を使った光るビームアニメーションの仕組みをステップバイステップで解説。スライダーやボタンでインタラクティブに体験できます。
3D Marquee 解説デモ
CSS 3D Transform と Motion を使った3Dマーキーの仕組みをステップバイステップで解説。perspective、rotateX/Y/Z、アニメーションの各要素をインタラクティブに体験できます。
MCP Apps デモ
MCP（Model Context Protocol）の公式UI拡張「MCP Apps」を使ったインタラクティブUIデモ。AIチャット内にiframeサンドボックスで安全に描画されるUIを構築。Anthropic + OpenAI共同策定のStable仕様に基づく実装。
3D My Desk
自分の作業デスクをMeshy AIで個別パーツごとに3D生成し、React Three Fiberで組み立てた3Dデスク。gltf-transformでDraco+WebP圧縮し、PC/モバイル別アセットで最適化。
ローカル LLM チャットデモ
LLM をサーバーではなく「あなたのブラウザの中」で実行するチャットデモ。WebLLM が WebGPU 経由で端末の GPU を直接使い、モデルのダウンロードから推論まで全て端末内で完結。API キー不要・通信ゼロ・入力はどこにも送信されません。
HTML-in-Canvas デモ
「canvas に本物の HTML は描けない」という Web の20年来の壁を壊す新 API(Chrome origin trial 中)のデモ。生きた DOM を WebGL テクスチャとして毎フレーム転送し、シェーダーで歪ませる。非対応ブラウザには SVG foreignObject の古典技法で自動フォールバック。
建てられる量 — 斜線・日影シミュレータ
土地の価値は「そこに何が建てられるか」で決まる。用途地域・前面道路・季節を動かすと、斜線制限と日影で建てられる最大ボリュームがリアルタイムに変わる3Dシミュレータ。不動産DX・物件査定の核心を体感できる。
Web Haptics 体験デモ
和太鼓・花火・餅つきの3つのインタラクティブ振動体験。タップに連動してデバイスが振動するモバイルWebの触覚フィードバックを体感できます。
Claude Code Permission Popup
Claude Codeの権限リクエストをmacOSネイティブポップアップで表示するツール。コマンドの内容を日本語で解説し、リスクレベルを5段階で色分け表示。許可/拒否をポップアップから直接操作できます。
freee 退勤通知 Chrome 拡張機能
freeeでの8時間勤務をサポートするChrome拡張機能。複数回の休憩にも対応し、退勤前に自動でデスクトップ通知します。
生成画像スクロールデモ
チップが分解・組み立てされるスクロール連動アニメーション。Google Whisk と Flow で生成したフレームを Canvas で滑らかに描画。スクロールして体験してみてください。
AI Podcast App
AIがSlackチャンネルの動きを要約して、1週間のまとめをPodcastで発信するアプリケーション。クリックすると、AIが生成したサンプルのポッドキャストを聴くことができます。
MCP AI Chat App
AIとチャットを通してTODOの状態を更新するアプリケーション。MCPサーバーを自作して、AIと連携することで、チャットでTODOの状態を更新を実現。
商品管理・在庫管理・購入履歴管理システム
Shopify を参考に商品管理画面を作成。Next.js + Drizzle + Stripeを使用して作成。商品登録のエディタにこだわりUXを最大限向上。