使い方・ドキュメント
progFocusは、目的→仕様→構成を段階的に整理する思考ツールです。
いきなりコードを書く前に、やるべきことと構造を可視化しましょう。
階層化
複雑な機能はShift+クリックで詳細へ。大きな森と木を分けて描けます。
思考フロー
ノードを繋ぐ矢印に「理由」や「データ」をメモ。実装の意図を残せます。
ファイル保存
作成したデータはMarkdown形式で手元に保存。管理も共有も簡単です。
AI連携
保存したMarkdownをAIに渡して設計改善やコード生成を依頼できます。
1設計の考え方
迷わずに設計するための4ステップです。
- ゴールを置く
右・下側に「出力」を置き、作りたいものや価値を書きます。 - インプットを洗う
左側に「入力」を置き、必要なデータを書き出します。 - 処理を繋ぐ
「処理」や「機能」でステップを分け、矢印で結びます。 - 意図を残す
矢印のラベルに「なぜ必要か」「渡すデータ」をメモします。
2基本的な操作
キャンバス操作
- パン（移動）ホイール長押し ドラッグ / Space + ドラッグ
- ズームCtrl + ホイール（カーソル中心に拡大縮小）
- 範囲選択何もないところをドラッグして矩形選択
ノード操作
- 追加左サイドバーからドラッグ＆ドロップ
- 編集タイトルや本文をクリックして直接編集
- 階層移動「機能」ノードを Shift + クリックで下層へ、パンくずリストで上層へ
接続（コネクション）
- 接続ノードの四辺にあるハンドル（●）をドラッグして他のノードへ
- ラベル編集矢印上のラベルをダブルクリック。Enterで改行＋箇条書き入力が可能
- ラベル移動ラベル枠をドラッグして見やすい位置へ調整
キーボードショートカット
- 元に戻すCtrl + Z（Macは ⌘ + Z）
- やり直しCtrl + Shift + Z
- 削除ノード/接続を選択して Delete または Backspace
3保存と読み込み
データはブラウザに自動保存されますが、大切なデータは「ファイル保存」で手元に残すことをおすすめします。
ファイル保存
ワークスペース右上のメニューから。Markdown形式（.md）でダウンロードされます。
読み込み
トップページの「読み込み」ボタンから、保存したファイルを選択して復元します。
4ツリービュー
設計の全体像をツリーで把握
ワークスペース上部の切替ボタンで、キャンバスモードとツリービューモードを切り替えられます。
ツリービューでできること
- • 設計全体の階層構造を一覧で確認
- • ノードの親子関係をツリー形式で表示
- • 全体像の把握や抜け漏れチェックに便利
使い分けのコツ
- • キャンバス: ノードの配置・接続など編集作業
- • ツリー: 全体構造の確認・レビュー
5プログラム定義
ノードにプログラム要素を定義する
各ノードに「クラス」「関数」「インターフェース」などのプログラム要素を紐づけて、設計と実装の対応を明確にできます。
使い方
- ワークスペース上部の「定義」ボタンをクリックしてONにする
- 各ノードの下部に「プログラム定義」セクションが表示される
- 「種別」ドロップダウンからプログラム要素を選択する
- ファイル名・クラス名・引数など、種別に応じたフィールドを入力する
対応する種別（8種）
クラス名・メソッド・プロパティ
メソッド名・引数・戻り値・可視性
インターフェース名・メソッド
関数名・引数・戻り値
変数名・型・初期値
構造体名・フィールド
列挙型名・値一覧
モジュール名・エクスポート
名前の共有（定義レジストリ）
入力したファイル名・クラス名などは、プロジェクト全体の「定義レジストリ」に自動登録されます。
- • 他のノードでも候補として選択可能
- • 名前の表記ゆれを防止
- • Markdownエクスポート時にも保存される
💡 AI連携との組み合わせ
プログラム定義を設定した状態でMarkdownを保存しAIに渡すと、クラス構成や関数シグネチャを理解した、より正確なコード生成が期待できます。
6よくある質問
ブラウザを閉じるとデータは消えますか？
はい、消えてしまう可能性が高いです。
自動保存は一時的なものなので、作業を終えるときは必ず右上のメニューから「ファイル保存」を行ってください。
操作を元に戻せますか？
Ctrl + Z（Macは ⌘ + Z）で戻せます。やり直しは Ctrl + Shift + Z です。
7AI活用ガイド
⚠️ 必ず2つのファイルをセットで渡してください
AIに設計の編集やコード生成を依頼する際は、以下の2つのファイルを必ずセットで渡してください：
① あなたの設計ファイル
ワークスペースから「ファイル保存」したMarkdown
② AI編集ルール
下のボタンからダウンロードできます
progFocusで作成した設計図はMarkdown形式で保存されます。
このMarkdownとAI編集ルールをAI（ChatGPT, Claude, GitHub Copilotなど）に渡すことで、設計の改善提案やコード生成を依頼できます。
AIとの連携フロー
設計 → Markdown保存 → AI編集ルールと一緒にAIに渡す → 提案を反映 → 再インポート
AIにMarkdownを渡す準備
- このページ上部の「AI編集ルールをダウンロード」ボタンからルールファイルを保存
- ワークスペース右上のメニューから「ファイル保存」を選択して設計ファイルを保存
- 両方のファイルの内容をAIチャットに貼り付ける
💡 なぜ両方必要？
AI編集ルールには、ノードの配置ルール・接続方向・フォーマット仕様が記載されています。
これがないとAIが正しい形式で出力できず、再インポート時にエラーになる可能性があります。
プロンプト例：設計の改善・追加
設計の追加
以下の「AI編集ルール」と「設計Markdown」を読んでください。
【AI編集ルール】
[AI_editing_rules.mdの内容を貼り付け]
---
【設計Markdown】
[あなたの設計ファイルを貼り付け]
---
この設計に「ログイン機能」を追加してください。
入力（ユーザー情報）→ 処理（認証）→ 出力（結果表示）の流れで
ノードと接続を追加し、同じフォーマットで出力してください。設計のレビュー
以下の「AI編集ルール」と「設計Markdown」を読んでください。
【AI編集ルール】
[AI_editing_rules.mdの内容を貼り付け]
---
【設計Markdown】
[あなたの設計ファイルを貼り付け]
---
この設計をレビューしてください。
- 抜け漏れている処理はありますか？
- データフローに問題はありますか？
- 改善すべき点があれば具体的に教えてください。ゼロから設計を作成
以下の「AI編集ルール」に従って、progFocus用のMarkdownを生成してください。
【AI編集ルール】
[AI_editing_rules.mdの内容を貼り付け]
---
作りたいもの：ECサイトの商品検索機能
- 入力：検索キーワード、カテゴリフィルター
- 処理：検索クエリ構築、DB検索、並び替え
- 出力：検索結果一覧
フォーマットはprogfocus.markdown.v1です。
左から右へのデータフロー（入力→処理→出力）で配置してください。プロンプト例：コード生成
設計からコードを生成
以下の「AI編集ルール」と「設計Markdown」を読んでください。
【AI編集ルール】
[AI_editing_rules.mdの内容を貼り付け]
---
【設計Markdown】
[あなたの設計ファイルを貼り付け]
---
この設計をもとに、Pythonでコードを実装してください。
各ノードを関数として実装し、接続の流れに沿ってデータを渡すようにしてください。
処理の詳細はノードのmemo欄を参考にしてください。特定のノードを実装
以下の「AI編集ルール」と「設計Markdown」を読んでください。
【AI編集ルール】
[AI_editing_rules.mdの内容を貼り付け]
---
【設計Markdown】
[あなたの設計ファイルを貼り付け]
---
「PWM算出」ノード（id: process-pwm）の処理を実装してください。
入力は「スティック入力情報」から受け取り、出力は「PWM信号出力」へ渡します。
言語：Python（Raspberry Pi想定）
フレームワーク：RPi.GPIOAPI設計を生成
以下の「AI編集ルール」と「設計Markdown」を読んでください。
【AI編集ルール】
[AI_editing_rules.mdの内容を貼り付け]
---
【設計Markdown】
[あなたの設計ファイルを貼り付け]
---
この設計をもとに、REST APIの仕様書を作成してください。
各ノードをエンドポイントまたは処理ステップとして扱い、
入力ノード→処理ノード→出力ノードの流れをAPIフローとして表現してください。
出力形式：OpenAPI 3.0 (YAML)AIからの出力を再インポート
- AIが出力したMarkdownをコピー
- テキストエディタに貼り付けて.mdファイルとして保存
- progFocusのホーム画面で「読み込み」ボタンをクリック
- 保存した.mdファイルを選択してインポート
⚠️ 注意: AIの出力は必ずフォーマット（フロントマター、JSON構造）が 正しいか確認してください。nodeCountやconnectionCountが実際の数と一致している必要があります。
✅ AIに依頼する際のチェックリスト
- □AI編集ルール（AI_editing_rules.md）をダウンロードした
- □ワークスペースから設計ファイルを「ファイル保存」した
- □両方のファイルをAIチャットに貼り付けた
- □やりたいことを具体的に書いた