VS Codeにインストールする
利用環境・OSごとの確認状況を先に確認できます。
まずは WworPointのVS Code拡張機能から始めましょう。資料を作るエンジンが同梱されているので、拡張機能だけで使えます。Node.js・npm・グローバルCLIを別途インストールする必要はありません。
画像を選ぶと、実画面を大きく表示できます。
1. VS Codeとブラウザーを用意する
「1. VS Codeとブラウザーを用意する」の節へ| 必要なもの | 条件 |
|---|---|
| デスクトップ版VS Code | 1.101以上。公式ダウンロード |
| ローカルのブラウザー | Google Chrome・Microsoft Edge・Chromiumのいずれか154以上 |
| 資料用フォルダー | 自分で作った、または内容を確認したローカルフォルダー |
拡張機能にはエンジン・ツール資材・フォントが同梱されています。実行環境にはVS Codeに含まれるものを使います。ブラウザーの自動ダウンロードは行いません。レイアウト検証・書き出し・Mermaid図の描画にはブラウザーが必要です。Web版VS Codeと仮想ワークスペースには対応していません。
2. コマンドパレットを開く
「2. コマンドパレットを開く」の節へメニューの 表示（View）→ コマンドパレット（Command Palette…） を選びます。macOSでは画面上部、WindowsではVS Code上部のメニューにあります。
ショートカットでも開けます。macOSは Shift + Command + P、Windows/Linuxは Ctrl + Shift + P です。エディター上部に検索欄が現れたら、コマンド名を入力し、候補を選んでEnterを押します。
3. 受け取ったVSIXを入れる
「3. 受け取ったVSIXを入れる」の節へ- 受け取った
.vsixファイルを、見つけやすい場所に保存します。 - コマンドパレットを開き、Extensions: Install from VSIX を入力します。日本語UIでは「VSIXからのインストール」に相当するコマンドを選びます。
- コマンドを選び、ファイル選択画面で受け取ったVSIXを指定します。
- インストールが終わったら、コマンドパレットに WworPoint と入力し、Init・Preview・Validate・Exportが表示されることを確認します。
拡張機能ビューの … メニューからも VSIXからのインストール… を選べます。画像は隔離したVS Codeプロファイルと現在のテスト版で撮影した実画面です。Marketplace掲載画面ではありません。開発ホストの表示は撮影環境を示します。画面のUIは英語ですが、操作の流れは同じです。
Marketplace公開後の入れ方
「Marketplace公開後の入れ方」の節へMarketplaceで公開する場合は、その配布案内で正式な掲載先を示します。その段階で 表示 → 拡張機能 を開き、案内した掲載先と製作者を確認してインストールします。これは将来の配布経路で、現時点で利用できるダウンロード先ではありません。
4. VS Codeで最初の資料を作る
「4. VS Codeで最初の資料を作る」の節へ信頼するのは自分で作った、または内容を確認したフォルダーだけにしてください。レイアウト検証・書き出し・図表（Mermaid図・Vega-Liteグラフ）の描画にはワークスペースの信頼が必要です。中身の分からないダウンロードを、表示を消すためだけに信頼しないでください。
ブラウザーが自動検出されない場合は、設定で wworpoint.browserPath を検索し、ユーザー設定に実行ファイルの絶対パスを指定します。資料プロジェクトからこの設定を変更することはできません。
必要な方だけ：CLIと自動化
「必要な方だけ：CLIと自動化」の節へCLIはターミナル操作や自動化のための別の選択肢です。VS Codeの初心者ガイドには不要です。上級者向けCLIインストール →
メニュー・ショートカット・VSIXの導入方法は、VS CodeのUI公式説明と拡張機能の公式説明を確認しています。