DDD(Doki Doki Development)

https://github.com/DDD-hack/DDDapp

―

Swift

Next.js

Go

TypeScript

Firestore

情熱が足りないとコミットできない開発環境

oto

rina

kgkqoos8g8o

推しアイデア

ヒートマップの2色化です。従来のGitHub草グラフは「いつコミットしたか」しかわからないが、DDDはコミット密度をマスで、心拍数を色相で表現し「いつ・どれだけ熱量を持って書いたか」まで可視化します。情熱の可視化というコンセプトを最も体現した機能。

作った背景

開発者は一日中椅子に座り、運動せず、心拍60台でコードを書く。平常心で書いたコードは、信用できない。心臓は限りなく静止に近い。ならば証明してもらおう、心拍が低いままではgit commitできない環境を作った。

推し技術

WebSocketによる1Hzリアルタイム通信です。HTTPポーリングではなく常時接続で1秒ごとに心拍を送り続け、commit判定のレイテンシを3秒以内に抑えました。

プロジェクト詳細

みなさん情熱持ってコードを書いていますか？

Doki Doki Development (DDD)
  • git commit する瞬間の心拍数が閾値（デフォルト 120bpm）を超えていないとコミットを拒否する開発環境
  • 「情熱を持ってコードを書こう」を生体情報レベルで強制するプロダクト

機能内容

心拍ゲート付き git commit（コア機能）
  • git commit 時に pre-commit hook がローカルデーモンへ HTTP 問い合わせ
  • 過去 10 秒の平均 bpm が閾値を超えていなければ赤文字で煽って拒否
  • 情熱が足りないコードは master に到達できない image image

Web ダッシュボード
  • 自分とチームメンバーのリアルタイム心拍数を一画面で確認
  • チームごとのランキングで競い合える
  • 自分のコミット履歴・心拍推移の分析結果を表示 image image image

VS Code 拡張
  • コミット拒否時にエディタ内でアニメーション再生
  • 画面右下のステータスバーにリアルタイム心拍数を常時表示
  • 心拍数が高くないとコード自体が書けないモード追加 image image image

Discord 連携
  • コミット時に Discord へ自動通知
  • そのコミット時の心拍数も合わせて共有
  • チームメンバーが互いのコミット状況を即座に把握できる image

推しアイデア

ヒートマップを2色化し、コミット数と心拍数を同時に可視化

従来のGitHub草グラフは「いつコミットしたか」しかわからない。
DDDのヒートマップは、「いつ・どれだけ熱量を持って書いたか」まで一目でわかる。

2色で、2つの情報を同時に表現

🟦 青 = コミット数

たくさんコードを書いた時間帯。

🟥 赤 = 心拍数

感情が高ぶっていた時間帯。

🟪 紫 = “熱狂”

コミット量と心拍数、その両方が高かった瞬間。

紫は、偶然では生まれない

「量をこなした」だけでも紫にはならない。
「興奮していた」だけでも紫にはならない。

大量のコミットと高い心拍数。
その2つが重なった時だけ、紫になる。

DDDが可視化したいのは、単なる作業ログではない。
“本気で没頭していた瞬間” そのもの。

2色だから成立する体験

これは「2色を使ったデザイン」ではない。

青と赤を混ぜることで、
“情熱の密度” が紫として浮かび上がる。

つまり、

  • 青だけでは「作業量」
  • 赤だけでは「感情」
  • 紫になって初めて「熱狂」

が見える。

「平常心で書いたコードは、信用できない。」

DDDは、コードではなく “熱量” を記録する。

使用技術

フロントエンド（ダッシュボード）
  • Next.js 16.2 (App Router, Turbopack)
  • React 19
  • TypeScript 5
  • Tailwind CSS v4 (@tailwindcss/postcss)
  • shadcn/ui (UI コンポーネント)
  • Radix UI / @base-ui/react (ヘッドレス UI)
  • lucide-react (アイコン)
  • recharts (心拍数チャート可視化)
  • class-variance-authority / clsx / tailwind-merge (条件付きスタイル)
  • Firebase Web SDK 12 (Auth + Realtime Database)
  • Vercel (ホスティング・デプロイ)

バックエンド（Go デーモン）
  • Go 1.25
  • Echo v4 (HTTP / WebSocket ルーター)
  • gorilla/websocket (Apple Watch・VS Code 拡張との双方向通信)
  • spf13/viper (環境変数・設定管理)
  • modernc.org/sqlite (Pure Go SQLite — Windows クロスビルド対応)
  • firebase.google.com/go/v4 (Firebase Admin SDK)
  • cloud.google.com/go/firestore (Firestore クライアント)

iOS コンパニオン（独自アプリ）
  • Swift / SwiftUI で iPhone アプリ + Apple Watch アプリを独自実装
  • HealthKit (HKWorkoutSession でリアルタイム心拍取得)
  • WatchConnectivity (WCSession で iPhone ↔ Apple Watch 通信)
  • URLSessionWebSocketTask (daemon への WebSocket クライアントを自作)
  • Background delivery 対応 (Workout 中もアプリ閉じても心拍中継継続)

VS Code 拡張
  • TypeScript 5
  • VS Code Extension API
  • bun (バンドラ・ビルドツール)
  • WebView API (HTML / CSS / JS による演出パネル)

Git Hook
  • Go (pre-commit hook をクロスプラットフォーム単一バイナリで配布)

クラウド・インフラ
  • Firebase Realtime Database (1Hz BPM + コミット履歴の中継)
  • Firebase Authentication (Google ログイン)
  • Firebase Firestore (補助的データ保存用)
  • Vercel (Next.js デプロイ)
  • Discord Webhook (コミット結果の自動通知)
  • GitHub Actions (CI: lint / test / build)

開発環境・ツール
  • mise (Go / Node / bun / firebase CLI のバージョン統一)
  • bun (JavaScript / TypeScript パッケージマネージャ・ランタイム)
  • gh CLI (GitHub 操作)
  • Vitest / Go test (テスト)
  • ESLint / gofmt / go vet (リンタ・フォーマッタ)

アーキテクチャ特徴
  • WebSocket リアルタイム通信 (心拍数の 1Hz ストリーミング)
  • ハイブリッドクラウド設計 (ローカル daemon + RTDB フォールバック)
  • Fail-safe 設計 (Firebase 未設定でもローカルで完結動作)
  • クロスプラットフォーム (macOS / Windows / Linux 対応)

技術構成図

image

  • 心臓 → Apple Watch → iPhone → ローカルデーモンへ心拍が流れる
  • commit の瞬間に hook がデーモンへ問い合わせて判定
  • デーモンは SQLite に記録しつつ Firebase RTDB へ同期
  • ダッシュボードと Discord にも配信
  • Swift / Go / TypeScript / shell の 4 言語をまたぐリアルタイムパイプライン

技術的ポイント

WebSocket による 1Hz リアルタイム通信
  • HTTP ポーリングではなく WebSocket で常時接続
  • 1 秒ごとに心拍数を送信し続ける
  • コミット判定のレイテンシを 3 秒以内に抑え、体感遅延をなくした
  • ステータスバー表示・ダッシュボードのリアルタイム順位も同じチャネルに乗せている

Apple Watch関連

クエリ型 → ストリーム型への切り替えで遅延を解消

  • 当初構成は 既製の Workout アプリ → HealthKit Store → iPhone の HKAnchoredObjectQuery で読む方式
  • → サンプル反映に 数秒〜数十秒の遅延で、1Hz リアルタイム判定が成立しない
  • 現構成は 独自 Watch アプリ内で HKLiveWorkoutBuilder を直接購読
  • → センサーからサブ秒で BPM を取り、人体の反応速度に追従

三重経路によるフォールトトレラント設計

  1. Path 1 (メイン): Watch → WCSession.sendMessage → iPhone → WebSocket → daemon
  2. Path 2 (低レイテンシ): Watch → DaemonDirectClient → daemon に直送（同一 WiFi 時）
  3. Path 3 (保険): iPhone の HealthKitManager がフォアグラウンドで HealthKit クエリ

頑張ったこと
  • 生体情報 × 開発フロー というやったことのない統合に取り組んだ
  • Swift / Go / TypeScript / shell の 4 言語をまたぐリアルタイムパイプラインを破綻なく統合
  • 人体をひとつのデバイスとして扱う構成
  • 全コミット試行を commit_attempts テーブルに記録 + Firebase RTDB 同期 → 拒否履歴まで全部残る
  • mise でツールバージョンとタスクを統一 → 3 OS で同じコマンドで動く

難しかったこと
  • 生体情報を開発体験に統合する UX 設計
    • ただ拒否するだけでは体験が悪すぎる
    • リアルタイム bpm 表示 + 煽り文で「拒否される側もエンタメ」に
  • WebSocket の再接続管理
    • iPhone のスリープ / Wi-Fi 切断 / デーモン再起動への対応
    • 「繋ぐ」より「切れた時」の処理のほうがずっと重い
  • Apple Watch の心拍取得頻度
    • HealthKit は毎秒くれない
    • ワークアウトセッションを使って Watch にずっと運動中だと思わせて 1Hz サンプリング
  • ヒートマップの色域設計
    • 色覚多様性ユーザーでも識別できる配色選定
    • 最終的に viridis 系グラデーション に落ち着いた

ぜひ、あなたも心臓に正直な開発を

oto

@oto