はじめに
共同ワークやアイデアを付箋ボードでまとめたいとき、普段はMiroが使えるので何も不自由していないのですが、Miroを使えないメンバーとの共同ワークなど、お手軽に使えるボードはないものかと思い、GWを使って個人的に開発してみました（Claude Codeと一緒に）
こんな感じのボードになります
リポジトリは以下になります。
概要
ローカルで起動させたWebアプリケーションに対してHTTPトンネル（Cloudflare Quick Tunnels）を使って一時的なURLを発行しています。
pnpmが使えれば以下で簡単に起動できます。
git clone https://github.com/Trippy3/ephemeral_board.git
cd ephemeral_board
pnpm share
────────────────────────────────────────────────────────────────
Ephemeral Board is live
Local: http://localhost:3000
Tunnel: https://{multiple words}.trycloudflare.com
(pass --qr to also print a scannable QR code for the tunnel URL)
⚠ Anyone with this URL can read & write the board.
[b] open in browser [c] copy URL [q | Ctrl+C] stop
────────────────────────────────────────────────────────────────
Quick Tunnels自体の起動が不安定なこともあるため、実際は上記メッセージ前後にcloudflaredのログ出力も合わせて表示するようにしています。
ボードでのワークは短時間かつ使い捨てを想定しているためDBへの保存などはなく、サーバーを停止させるとデータも消えます。md形式でボード状態をエクスポートとインポートをできるようにしており、万が一セッションをまたいでボードを保存したい場合にはこちらが使えます。
ログイン時の初期状態にはボードの使い方を説明するシステム付箋を付けています。
最大で10名程度の同時利用までを想定しています
Skillsを使ったボード生成ができます
リポジトリにcreate-sticky-boardというSkillsを格納しています。こちらを使うと、入力した情報を元に、付箋ボードインポート用のmdを自動生成することができます。活用例を紹介します。
例1: 記事の内容や構成を付箋に整理する
過去に自分が書いた以下記事を付箋に整理してもらってみました。
矢印の使い方や色など多少気になる点はありますが、記事のアウトラインに沿って、それっぽく整理されています。
例2: GitHubリポジトリの内容を整理する
最近公開したリポジトリを整理してもらってみました。整理するための指針やどういった観点で付箋を作成してほしいかを伝えておくのが良さそうです。
/create-sticky-board \https://github.com/Trippy3/fetch_market_dataリポジトリを見て、技術的な構成を詳細に掘り下げた上で整理してください。
開発中の気づきメモ
基本的には実現したい機能を/planモードで伝えて進めました。最初はもっと簡易的なボードツールを想定していたのですが、使ってみる中でほしい機能が増えていったので、一度に一気に作り上げたというよりは細かく使いながら継ぎ足していった形になります。なので、LinterとFormatterも途中で追加しました。選定もsettings.local.jsonへのhooks追加も/planに頼っています。テストも終盤に追加しました。なお、テスト設計に関してはテスト戦略で参考になる記事をいくつか与えて、それに沿ってテスト粒度を含めた調整をしてもらいました。具体的にはテストサイズを考慮し、壊れにくいテストをコアな動作の保証に充てるというものです。詳細はリポジトリのskills/test-strategy-plannerにまとめています。
デバッグにおいては、Vercelが提供しているagent-browserを使えるように設定していましたが、明示的に伝えないとなかなか使ってくれなかったり、スクショを多用した分析をしてしまったりと想定より自分が上手く使いこなせず改善点が残ります。改善点で言うと、Everything Claude Codeも随分前に一部設定をしていたのですが、ぜんぜん自分が使いこなせておらず/strategic-compact以外もスムーズに使えるようになっておきたいと思いました。
今回は重めの実装をした際にはCodex pluginでcodexにレビューしてもらいましたが、claude code単体では気づかなかった指摘をしてくれてとても助かりました。どちらも進化と競争が激しいので、Codex CLIのほうももっとキャッチアップしていかないとと思った次第です。
/create-sticky-board 以下開発中の気づきメモを元に、Good, Keep, Problem, Try(GKPT)のフレームワークで整理してもらえますか？GKPTは有名なKPTフレームワークにGoodを追加したフレームワークになります。フレームワークについて詳細を知りたい場合はWebで検索してもらって構いません。
{# 開発中の気づきメモを添付}
上に記載したメモ文章をskillsにGKPTフレームワークで整理してもらった図
Discussion