手書きノート風図解（コードで描画） は何をしますか？
1 枚の図 ＝ 1 つの JSON。scripts/render.py がローカルの Google Chrome（または Microsoft Edge）をヘッドレスで起動し、scripts/sketchnote.html を開いて JSON に従って描画した後にスクリーンショットを撮ります。文字はすべて JSON 由来なので誤字がありません。その代償として、生成 AI モデルによる図よりは整っています。
必要なもの：macOS 標準の「手札体」（Hannotate SC）と「翩翩体」（HanziPen SC）、Google Chrome、Python 3（標準ライブラリのみ使用）。
ファイル
| 場所 | 説明 | 参照タイミング |
|---|---|---|
scripts/render.py | コマンドライン：新規作成、チェック、出力、エディタ起動 | 毎回 |
scripts/sketchnote.html、editor.js | 描画プログラムとブラウザエディタ | 読む必要なし、render.py が呼び出す |
scripts/テンプレート/*.json | 新規作成用の 5 つのテンプレート | --list-templates で一覧表示 |
scripts/templates.js | エディタ用にテンプレートをバンドル、自動生成、手動編集不要 | テンプレート変更後に --templates を実行 |
references/json-format.md | JSON の各フィールド、セクション、アイコン、落書き、色名、既知の制限 | JSON を編集する前に |
references/style.md | スタイル規定：レイアウト区分、配色、形状の意味、文字数、禁止事項、出力後の確認 | 初回描画時、ノードタイプと文字数を決めるとき |
references/editor.md | ブラウザエディタの使い方 | ユーザーに手動調整を任せるとき |
assets/サンプル/ | 3:4 縦長と 16:9 横長のサンプル（JSON ＋ PNG） | レイアウトに迷ったときの参考 |
以下のコマンドで、R はこのスキルの scripts/render.py（絶対パスで呼び出す）を指します。各図の JSON と出力 PNG はユーザーのプロジェクト内に配置し、スキル内には保存しません。
コマンド
python3 R --list-templates # テンプレート一覧表示
python3 R --new 03_02_フィールド順序 --from 1 # テンプレート 1 から specs/03_02_フィールド順序.json を作成（specs はカレントフォルダに生成）
python3 R --new 表紙 --dir specs --output ../画像/表紙.png # JSON の保存先と出力先を自分で指定
python3 R --check specs/03_02_フィールド順序.json # レイアウトチェック（重なり、キャンバス外）のみ、数秒；警告がある場合は終了コード 1
python3 R specs/03_02_フィールド順序.json --scale 1 # 1 倍の小図で確認（1600×900）
python3 R specs/03_*.json # 2 倍の正式図を出力（3200×1800）、各 JSON の output に従って保存
python3 R specs/xxx.json --svg # SVG も同時に保存
python3 R --edit specs/xxx.json # Chrome でエディタを開き、ユーザーがドラッグ調整
python3 R --templates # scripts/テンプレート/ を変更した後にテンプレートを再バンドル
--newの名前を<章番号>_<図番号>_<内容>の形式にすると、上の階層で<章番号>_*.mdのノートを検索し、outputをその隣の同名フォルダ内の<図番号>.pngに設定します。見つからなければ設定しないので、出力前にoutputを補うか--outputを指定してください。outputはこの JSON からの相対パスです。
図を描くフロー
- まず、この図で伝えたいことを決め、本文中のどこに配置するかを決めます。 図中の文字は本文中にある表現のみを使い、新たな説明を加えません。文字数の多い図は、まず対話で文案をユーザーと確定してから JSON を書きます。
- テンプレートを選びます：
--list-templatesで最も構造が近いもの（プロセスの閉ループ、上下 2 グループの比較、4 ステップのサイクル、空白横長、縦長 3:4）を選び、--newで新規作成します。 - JSON を編集します：
references/json-format.mdに従ってテキストと座標を修正します（座標は 1600×900 で見積もり、ノードのx、yは中心点）。references/style.mdの第 5 節に従って各ノードのタイプを決めます。input青い丸：資料、アイデア、インスピレーション、ソースproduceオレンジの四角：成果物、アクションfeedback緑の六角形：確認、振り返り、まとめ 同じ図の中で同じ種類のものは同じ形状を使い、凡例を 1 つ配置します。
--checkで警告がなくなるまで修正し、1 倍の小図を出力して 実際に開いて確認します：矢印の向き、文字が隠れていないか、余白の均一さ、文字数が style.md 第 6 節に合っているか。レイアウト調整が難しい場合は--editでブラウザエディタを起動し、ユーザーにドラッグしてもらい、⌘S で保存後、再度出力します。- 2 倍の正式図を出力し、
outputに保存します。 - ユーザーに配置場所を伝えます：各図を本文のどの文の後ろに配置するか、埋め込み方法を指示します。
注意事項
- 中国語は自動改行されません：JSON 内では
\nを使い、エディタでダブルクリックして文字を編集するときは「/」を使います。 - 16:9 と 3:4 を相互変換するとき、要素の位置は自動変換されません。
--checkの警告に従って再配置してください。 - 署名はデフォルトでは描画しません。ユーザーが署名を希望する場合は、JSON に
"signature": { "text": "署名", "x": 40, "y": 862 }を追加します。ユーザーに何を書きたいか一度尋ね、以降の図でも同じものを使用します。 references/style.mdの色を変更した場合は、scripts/sketchnote.html内の色定数も合わせて変更してください。