VS Code初心者ガイド
ベータ版は招待者に別途提供します。受け取ったVSIXをPCに保存してから進めてください。マニュアルをClaude Codeアプリに渡す例も入手案内にあります。
VS Codeの中だけで、二枚のスライドを作ってPDFにします。先に拡張機能をインストールしてください。この手順ではターミナル・npm・CLIコマンドは使いません。
画像は隔離したVS Codeプロファイルと現在のテスト版拡張機能で撮影した実画面です。架空のローカル資料だけを表示しています。開発ホストの表示は撮影環境を示します。UIは英語ですが、本文と作例は日本語で案内します。
画像はサイトの明暗設定にかかわらず、VS CodeのLight Modernテーマで統一しています。
画像を選ぶと、実画面を大きく表示できます。
1. 資料用のフォルダーを開く
「1. 資料用のフォルダーを開く」の節へパソコンに my-first-deck という空のフォルダーを作ります。VS Codeで ファイル(File)→ フォルダーを開く(Open Folder…) を選び、そのフォルダーを指定します。左のエクスプローラーにフォルダー名が出れば準備できています。
今回は自分で作った空のフォルダーを使います。作成者を信頼するか尋ねられたら、今作ったフォルダーであることを確認して判断してください。レイアウト検証・書き出しには信頼済みの状態が必要です。手順を進めるためだけに、知らないファイルを信頼しないでください。
2. WworPointのコマンドを見つける
「2. WworPointのコマンドを見つける」の節へ表示(View)→ コマンドパレット(Command Palette…) を選びます。macOSでは画面上部、WindowsではVS Code上部のメニューです。ショートカットはmacOSが Shift + Command + P、Windows/Linuxが Ctrl + Shift + P です。
検索欄に WworPoint と入力し、使いたいコマンドを選んでEnterを押します。以下のInit・Preview・Validate・Exportも、この方法で実行します。
3. フォルダーを初期化する
「3. フォルダーを初期化する」の節へWworPoint: Init を実行し、16:9スライドを作る Presentation を選びます。Paged document はA4文書を作る選択肢です。
エクスプローラーに document.md・design/theme.css・.wworpoint/project.json・エージェントガイド(AGENTS.md)などが増えます。既存ファイルは上書きしません。初期化済みのプロジェクトで再度Initを実行しても、ファイルは変わりません。
組み込みのbusinessテーマが選ばれているので、この手順はCSSを書かなくても完了できます。見た目を調整したくなったら、プロジェクト内の design/theme.css を編集し、プレビューで確認できます。
4. 二枚のスライドを書いて保存する
「4. 二枚のスライドを書いて保存する」の節へエクスプローラーの document.md をクリックし、内容を次の小さな作例に置き換えます。
# 次の一歩
チームに向けた短い提案。
---
## 小さく始める
- 目標を一つ決める- 動く作例を作る- 結果を一緒に見直す--- の行で次のスライドが始まります。ファイル → 保存、またはmacOSの Command + S/Windows/Linuxの Ctrl + S で保存します。
5. ソースの横でプレビューする
「5. ソースの横でプレビューする」の節へWworPoint: Preview を実行すると、テキストエディターの横にプレビューが開きます。ページ送りの矢印で二枚を確認できます。要素をダブルクリックするか Source を選ぶと、元のMarkdownに戻れます。
拡張機能のプレビューは未保存の編集にも追従します。初回は Layout not validated(レイアウト未検証)と表示されます。検証と書き出しは保存済みファイルを使うため、次の手順で保存します。
6. 保存してから検証する
「6. 保存してから検証する」の節へファイル → すべて保存(Save All) で変更を保存し、WworPoint: Validate を実行します。検証は保存済みファイルを読み、ローカルの書き出し用ブラウザーでレイアウトを確認します。
表示 → 問題(Problems) で結果を確認します。エラーを直し、警告や表示されたページ番号を確認してください。修正後は保存して再度Validateを実行します。Layout validated は最後の検証とプレビューが一致している状態を示します。事実の正しさやデザインの良さを保証する表示ではありません。
7. PDFを書き出す
「7. PDFを書き出す」の節へWworPoint: Export を実行し、PDF を選んでEnterを押します。ほかに HTML (single file) と HTML (folder) を選べます。エラーがあると書き出しは止まり、警告があると続行の確認が出ます。内容を確認してから判断してください。
今回のフォルダーと標準設定では dist/my-first-deck.pdf ができます。エクスプローラーの dist を開いて探します。完了メッセージの Open は関連付けられたアプリで出力を開き、Reveal はパソコンのファイル管理画面で場所を表示します。
共有前にPDF自体を確認してください。単一ファイルHTMLの標準出力は dist/my-first-deck.html、フォルダーHTMLは dist/html/index.html から開きます。フォルダーHTMLを共有するときは、フォルダー全体を一緒に渡します。
編集後の検証状態
「編集後の検証状態」の節へ以下は一度検証・書き出しを終えた後の別の編集画面です。
拡張機能のプレビューは未保存のテキスト編集にも追従します。編集後に出る Validation is stale は「最後のレイアウト検証と現在の表示が一致していない」という意味です。Layout not validated は、現在のレイアウト検証をまだ行っていない状態です。プレビューが見えても、保存した資料を書き出せることまでは確認できていません。
次は、普段使っているAIと下書きする
「次は、普段使っているAIと下書きする」の節へ生成された AGENTS.md と書式マニュアルを外部AIに渡し、ソースの修正を依頼できます。内容を確認し、自分でファイルに反映します。WworPointにはAIモデル・自動接続・利用枠は搭載されていません。資料を渡す前に、そのAIサービスの料金とデータの取り扱い条件を確認してください。
A4文書は別の空フォルダーを作り、Initで Paged document を選びます。A4の作例もご覧ください。ターミナル操作は別の上級者向けCLIガイドで案内します。
メニューとショートカットはVS Code公式のUI説明を確認しています。この手順はWworPoint 0.1.0テスト版の 35090ac で確認しました。








