CardKnot

思考を結び、アイデアを解き放つ無限キャンバスツール。 CardKnotは、ブラウザ上で直感的にカードを作成・配置・接続し、複雑なアイデアを整理するためのWebアプリケーションです。

✨ 特徴

• 無限キャンバス: 広大なスペースに自由にカードを配置。ズームやパン操作で自在に移動できます。
• 直感的な接続: カードの端からドラッグするだけで、カード同士を線で結び関係性を可視化できます。
• リッチコンテンツ: テキストだけでなく、画像URLやWebリンク（タイトル自動取得）をカードに埋め込めます。
• プレゼンテーションモード: 作成したマップをスライドショーとして再生できます。
• 自動保存: データはブラウザのローカルストレージに自動的に保存されます。
• その他便利機能:
  • ダークモード対応
  • ミニマップによる全体把握
  • 自動整列機能
  • カードの折りたたみ
  • Undo/Redo, コピー＆ペースト対応

🚀 使い方

基本操作

• カード追加: 画面下の「＋」ボタン、またはキャンバスをダブルクリック。
• 移動: カードをドラッグ。Shiftキーを押しながらドラッグで範囲選択も可能。
• 接続: カードの左右にある丸いポイントからドラッグして他のカードへ接続。
• ズーム/パン: マウスホイールでズーム、背景ドラッグ（またはスペースキー+ドラッグ）でパン移動。

ショートカットキー

キー操作	動作
Double Click	カード追加
Delete / Backspace	選択したカードを削除
Ctrl + Z	元に戻す (Undo)
Ctrl + Shift + Z / Ctrl + Y	やり直し (Redo)
Ctrl + C	コピー
Ctrl + V	貼り付け
Ctrl + A	全選択
Shift + Click	複数選択 / 選択解除
Shift + Drag	範囲選択

🛠️ 開発・インストール

このプロジェクトは静的なHTML/JS/CSSで構成されていますが、スタイリングにTailwind CSSを使用しています。

必要要件

• Node.js (Tailwind CSSのビルドに必要)

セットアップ

1. リポジトリをクローン

   git clone https://github.com/eimax9668/CardKnot.git
   cd CardKnot

2. 依存パッケージのインストール

   npm install

3. Tailwind CSSのビルド

   npx tailwindcss -i ./style.css -o ./dist/output.css --watch

4. index.html をブラウザで開く

📄 ライセンス

MIT License