OpenXML Viewer
Office Open XML 形式のファイル（.xlsx / .docx / .pptx）を Visual Studio Code 上で直接プレビュー するための拡張機能です。
ファイルをダブルクリックするだけで、Excel・Word・PowerPoint を起動せずに中身を素早く確認できます。
[!NOTE]
本拡張機能は 閲覧（読み取り専用） を目的としています。ファイルの編集・保存機能は提供しません。
目次
主な機能
- 📊 Excel ブック（
.xlsx）の閲覧
- シート単位でセル内容を表形式で表示
- 複数シートのタブ切り替え
- 📝 Word 文書（
.docx）の閲覧
- 📑 PowerPoint プレゼンテーション（
.pptx）の閲覧
- スライドごとのテキスト・図形・画像を表示
- スライド一覧（サムネイル）からのジャンプ
- 🖱️ シームレスな操作
- エクスプローラーでファイルを開くだけでプレビューを起動（カスタムエディター）
- 外部アプリケーションの起動が不要
- 🔒 安全な閲覧
- 読み取り専用のため、誤編集による破損が発生しない
- Webview のコンテンツセキュリティポリシー（CSP）により外部リソース読み込みを制限
対応ファイル形式
| 種類 |
拡張子 |
形式 |
対応状況 |
| Excel ブック |
.xlsx |
SpreadsheetML |
✅ 閲覧 |
| Word 文書 |
.docx |
WordprocessingML |
✅ 閲覧 |
| PowerPoint |
.pptx |
PresentationML |
✅ 閲覧 |
[!IMPORTANT]
対象は Office Open XML（OOXML）形式 のファイルです。
旧バイナリ形式（.xls / .doc / .ppt）やマクロ有効形式（.xlsm など）は対象外です。
動作要件
- Visual Studio Code
1.90.0 以降
- 追加のランタイムや外部アプリケーション（Microsoft Office など）のインストールは 不要
インストール
Visual Studio Code Marketplace から
- VS Code のサイドバーから 拡張機能（Extensions） ビューを開く（
Ctrl+Shift+X / ⌘+Shift+X）
OpenXML Viewer を検索- Install をクリック
VSIX ファイルから
code --install-extension openxml-viewer-<version>.vsix
または、コマンドパレット（Ctrl+Shift+P / ⌘+Shift+P）から
「Extensions: Install from VSIX...」 を実行し、.vsix ファイルを選択します。
使い方
- VS Code のエクスプローラーで
.xlsx / .docx / .pptx ファイルを開きます。
- 本拡張機能のカスタムエディターが自動的に起動し、内容がプレビュー表示されます。
- 既定のテキストエディターなどで開きたい場合は、ファイルを右クリックして
「Open With...（アプリケーションを選択して開く）」 から開き方を切り替えられます。
[!TIP]
既定の開き方を変更したい場合は、「Open With...」→「Configure default editor for '*.xlsx'...」 から
拡張子ごとに既定エディターを設定できます。
コマンド
コマンドパレット（Ctrl+Shift+P / ⌘+Shift+P）から利用できます。
| コマンド |
コマンドID |
説明 |
| OpenXML Viewer: Open Preview |
openxml-viewer.openPreview |
アクティブなファイルをプレビューで開く |
| OpenXML Viewer: Reload |
openxml-viewer.reload |
現在のプレビューを再読み込みする |
設定
settings.json（ユーザー設定 / ワークスペース設定）から構成できます。
| 設定キー |
型 |
既定値 |
説明 |
openxmlViewer.spreadsheet.maxRows |
number |
1000 |
スプレッドシートで一度に描画する最大行数 |
openxmlViewer.spreadsheet.showGridlines |
boolean |
true |
セルのグリッド線を表示するか |
openxmlViewer.document.showImages |
boolean |
true |
Word 文書内の画像を表示するか |
openxmlViewer.presentation.thumbnails |
boolean |
true |
スライドのサムネイル一覧を表示するか |
openxmlViewer.theme |
string |
"auto" |
プレビューの配色（auto / light / dark） |
設定例:
{
"openxmlViewer.spreadsheet.maxRows": 5000,
"openxmlViewer.theme": "dark"
}
仕様
設計方針（依存関係）
本拡張機能は、F# / JavaScript ともに標準ライブラリ以外の外部ライブラリを原則として利用しない 方針で設計しています。
- フルスクラッチ実装: OOXML のパーサー（ZIP 展開・XML 解析）およびビューアー（レンダリング）は、外部ライブラリに依存せず自前で実装します。
- 方針の理由:
- 依存ライブラリの脆弱性・破壊的変更・メンテナンス停止といったリスクを排除する
- 拡張機能のサイズと読み込みコストを最小化する
- 解析・描画の挙動を完全に制御し、読み取り専用・オフライン動作を保証する
- 例外: ビルドツールチェーン（F# → JavaScript 変換を行う Fable、
.vsix を生成する @vscode/vsce など）や、VS Code 拡張ホストが提供する vscode API は対象外です。これらは実行時の機能ライブラリではなく、開発・配布のための基盤として利用します。
アーキテクチャ
本拡張機能は F# で実装し、Fable（F# → JavaScript コンパイラ）で
VS Code 拡張として動作する JavaScript へトランスパイルします。
VS Code の Custom Editor API（CustomReadonlyEditorProvider）を利用して、
対象拡張子のファイルに対するカスタムエディターを登録します。
描画は Webview 上で行い、拡張機能本体（Extension Host 側）でファイルを解析した結果を Webview へ送信します。
┌──────────────────────────────────────────────────────────────┐
│ VS Code Extension Host │
│ （F# → Fable → JavaScript） │
│ │
│ ┌────────────────────────┐ ┌──────────────────────────┐ │
│ │ CustomEditorProvider │ ──▶ │ OOXML Parser (F#) │ │
│ │ (.xlsx/.docx/.pptx) │ │ (ZIP 展開 + XML 解析) │ │
│ └────────────┬───────────┘ └──────────────────────────┘ │
│ │ postMessage │
│ ▼ │
│ ┌────────────┐ │
│ │ Webview │ ◀── HTML/CSS/JS でレンダリング │
│ └────────────┘ │
└──────────────────────────────────────────────────────────────┘
技術スタック
ファイル解析
- Office Open XML ファイルは実体が ZIP アーカイブ であり、内部の XML パーツ（
xl/, word/, ppt/ 配下）を解析します。
- ZIP 展開（DEFLATE 解凍）および XML 解析は、外部ライブラリを使わずフルスクラッチで実装 します。
- 解析対象の主なパーツ:
.xlsx: xl/workbook.xml, xl/worksheets/sheet*.xml, xl/sharedStrings.xml, xl/styles.xml.docx: word/document.xml, word/styles.xml, word/media/*.pptx: ppt/presentation.xml, ppt/slides/slide*.xml, ppt/media/*
レンダリング方針
- フルスクラッチ: ビューアー（レンダリング）は外部 UI ライブラリ・フレームワークを使わず、標準の HTML/CSS/JS のみで実装します。
- 読み取り専用: Webview からファイルへの書き込みは行いません。
- 段階的描画: 大きなファイルでもフリーズしないよう、行・スライド単位で段階的に描画します（上限は設定で調整可能）。
- テーマ追従: VS Code のカラーテーマに追従して表示色を切り替えます（
openxmlViewer.theme で固定も可能）。
セキュリティ
- Webview には厳格な Content Security Policy（CSP） を適用し、外部スクリプト・外部リソースの読み込みを禁止します。
- 文書内に埋め込まれた画像は、拡張機能が
webview.asWebviewUri で安全に変換した上で表示します。
- 外部ネットワークへの通信は行いません（オフラインで完結します）。
制限事項
- 編集・保存・印刷には対応していません（閲覧専用）。
- 複雑なレイアウト（高度な図形・SmartArt・グラフ・条件付き書式・マクロなど）は簡略化、または非表示となる場合があります。
- パスワード保護・暗号化されたファイルは開けません。
- 数式は計算結果のキャッシュ値を表示します（再計算は行いません）。
- 旧バイナリ形式（
.xls / .doc / .ppt）には対応していません。
開発
必要環境
セットアップ
git clone https://github.com/tatsuya-midorikawa/openxml-viewer.git
cd openxml-viewer
# .NET ローカルツール（Fable など）の復元
dotnet tool restore
# npm 依存関係の復元
npm install
ビルド / デバッグ実行
# F# を JavaScript へコンパイル（ウォッチモード）
npm run watch # dotnet fable watch src --outDir build --test:MSBuildCracker
# 単発ビルド（Fable → esbuild）
npm run build # dotnet fable src ... && esbuild build/Extension.js ...
VS Code でプロジェクトを開き、F5（Run Extension）を押すと、
拡張機能を読み込んだ Extension Development Host が起動します。
そのウィンドウで .xlsx / .docx / .pptx を開いて動作を確認できます。
パッケージング
npm run package # Fable ビルド後に .vsix を生成（vsce package）
詳細な手順は DEVELOPMENT.md、Marketplace への公開は PUBLISHING.md を参照してください。
プロジェクト構成
openxml-viewer/
├── src/ # 拡張機能のソース（F#）
│ ├── Core/ # フルスクラッチの基盤
│ │ ├── Inflate.fs # DEFLATE 解凍（RFC 1951）
│ │ ├── Zip.fs # ZIP アーカイブ読み取り
│ │ ├── Xml.fs # XML パーサー
│ │ ├── Text.fs # UTF-8 デコード
│ │ └── Opc.fs # Open Packaging Conventions
│ ├── Parsers/ # 各形式パーサー
│ │ ├── Spreadsheet.fs # .xlsx（SpreadsheetML）
│ │ ├── Document.fs # .docx（WordprocessingML）
│ │ └── Presentation.fs # .pptx（PresentationML）
│ ├── Model.fs # Webview へ渡す共有モデル
│ ├── Vscode.fs # VS Code API への最小バインディング
│ ├── Extension.fs # エントリーポイント / カスタムエディター登録
│ └── OpenXmlViewer.fsproj # F# プロジェクトファイル
├── media/ # Webview アセット・アイコン
├── .config/dotnet-tools.json # Fable のローカルツール定義
├── package.json # 拡張機能マニフェスト
├── README.md / DEVELOPMENT.md / PUBLISHING.md / CHANGELOG.md
└── LICENSE
ロードマップ
- [x]
.xlsx ビューアー（セル・複数シート）
- [x]
.docx ビューアー（本文・表・画像）
- [x]
.pptx ビューアー（スライド・サムネイル）
- [ ] 検索・コピー対応
- [ ] グラフ・図形の描画強化
- [ ] エクスポート（PDF / HTML）
コントリビュート
バグ報告・機能要望・プルリクエストを歓迎します。
Issues からお気軽にご連絡ください。
ライセンス
本プロジェクトは MIT License の下で公開されています。
