SPD Editor for VS Code

SPD（構造化プログラム設計図）を方眼の画面で描いて編集する VS Code 拡張機能です。 HTML/JavaScript 製の SPD エディタ（kawaba/spd-editor）を VS Code の中で使えるようにしたもので、Eclipse 版（kawaba/eclipse-spd-plugin）と同じ機能です。

使い方

1. SPD エディタを開く

.py のファイル（C なら .c）を開いているときに、次のどちらかで開きます。

タブの右上に出る SPD のアイコン（青い木構造の図）を押す
ショートカットキー Ctrl+Alt+D（mac は Cmd+Alt+D）

SPD エディタは画面下のパネル（「ターミナル」「問題」と同じ場所）に開きます。この開き方には次の特徴があります。

上にソースコード、下に SPD を並べて見ながら作業できます
ファイルを作る必要はありません。描いた内容は自動で保管され、VS Code を閉じても次に開いたときに前回の続きから使えます
保管される SPD は1つだけです。別の SPD を描くと前の内容は上書きされるので、残したいものはソースコードに貼り付けておきます

パネルの高さは境目をドラッグして変えられます。パネル右上の「パネルを最大化」で広げることもできます。コマンド「SPD: SPDエディタを開く」や「表示 → ビューを開く…」→「SPD エディタ」でも開けます。

2. SPD をソースコードに貼り付ける（主な使い方）

SPD エディタで SPD を描く
Export を押す。SPD がコメントで囲まれた形（Python は """、C は /* */）でクリップボードにコピーされる
.py のファイルの先頭など、貼り付けたい場所で Ctrl+V

あとで SPD を直したいときは、次のようにします。

ソースコード中の SPD（コメント記号を含めてもよい）をコピーする
SPD エディタの Import を押す。SPD エディタに読み込まれる
直してからもう一度 Export し、ソースコードの SPD と貼り替える

画面の操作方法は、SPD エディタ右上の 📖（解説）・💡（記述パターン）を参照してください。

3. `.spd` ファイルとして残す（必要なときだけ）

SPD をソースコードとは別のファイルとして残したい・提出したいときに使います。普段は 2. の使い方で十分です。

パネルの SPD エディタから保存する：「保存…」ボタン（Ctrl+S）で名前を付けて .spd に保存します。初めに表示される名前は、開いているソースコードと同じ名前（例：hello.py なら hello.spd）です
新しく作る：「ファイル → 新しいファイル…」→「SPD ファイル」で言語（Python / C）と保存先を選びます。エクスプローラーでフォルダーを右クリック →「新規SPDファイルを作成」でも作れます
開く：エクスプローラーで .spd ファイルを開くと、タブに SPD エディタの画面が開きます。保存（Ctrl+S）・未保存マーク（タブの ●）・閉じるときの保存確認は、普通のファイルと同じです

フォント

SPD の罫線を全角幅で表示するフォント PlemolJP HS を同梱しています。SPD エディタの画面ではインストールしなくても使われます。 Export した SPD がソースコードのエディタでずれるときは、コマンド「SPD: フォントのフォルダを開く」で開くフォルダの README.txt を見てください。

インストール

Marketplace から

VS Code の拡張機能ビュー（Ctrl+Shift+X）で「SPD Editor」を検索する
発行者が T.Kawaba の「SPD Editor」を選んで「インストール」を押す

コマンドでインストールすることもできます。

code --install-extension kawaba.spd-editor

インストールしたあとは、新しい版が出ると自動で更新されます。

`.vsix` ファイルから（授業で配布する場合）

配布された spd-editor-X.Y.Z.vsix を用意する
VS Code の拡張機能ビュー（Ctrl+Shift+X）右上の「…」→「VSIX からのインストール…」で選ぶ

コマンドでインストールすることもできます（ポータブル版の自動セットアップなど）。

code --install-extension spd-editor-X.Y.Z.vsix

設定

設定	既定値	説明
`spd.defaultLanguage`	`python`	空のファイル・SPD ビューを開いたときの言語（`python` / `c`）

言語のラジオボタンは Python と C だけです。Eclipse 版などで Java 系の言語で保存した .spd を開いたときは、その言語のラジオボタンも表示されます（知らないうちに別の言語へ変わらないようにするため）。

設定を変えたあとに開いた画面から反映されます。

`.spd` ファイルの形式

SPD エディタの「保存」と同じ JSON（UTF-8）です。Eclipse 版・ブラウザ版と相互に読み書きできます。

{
  "lang": "python",
  "data": {
    "3,1": "│",
    "3,2": "aa"
  }
}

lang：python / c（Eclipse 版で作ったファイルでは java（JavaSE）/ spring / thymeleaf もある）
data：キーは "x,y"（0 起点の列,行）、値はそのマスの文字。空マスは持たない

テキストとして見たいときは、タブを右クリック →「エディターを開き直す…」→「テキストエディター」で開けます。

開発

npm install
npm run compile

F5（「拡張機能を実行」）で拡張機能開発ホストが起動します。
.vsix の作成：npm run package
画面（media/editor.html とスケルトン media/*-patterns.js）は元の SPD エディタの複製です。直接編集せず、元を直してから powershell -ExecutionPolicy Bypass -File .\sync-web.ps1 で複製します（拡張機能の版も SPD エディタの版にそろいます）。
拡張機能の側だけを直して出し直すときは、版の Z を上げます（1.22.0 → 1.22.1）。そのため SPD エディタの版とずれることがあります。
公開は、版と同じタグ（v1.22.1 など）を push すると GitHub Actions（.github/workflows/publish.yml）が Marketplace に出します。

ライセンス

拡張機能：EPL-2.0（LICENSE）
同梱フォント PlemolJP HS：SIL Open Font License 1.1（media/fonts/LICENSE-PlemolJP.txt）

SPD Editor

T.Kawaba