はじめに
「このzipファイル、解凍する前にちょっと中身だけ確認したい」——そんな場面は開発中に何度もある。でもVS Codeのデフォルト動作はバイナリ表示か外部アプリの起動。わざわざ解凍してフォルダを作って、確認して、また消して——そんな手間をなくしたくて作ったのが今回の拡張機能だ。
開発はClaude Codeとの対話でゼロから進め、広告収益モデルも仕込んだ。そしてマーケットプレイスに公開したら、何も宣伝していないのに1時間で10件以上ダウンロードされた。その一部始終を書く。
拡張機能「Zip & Archive Viewer」とは
Zip & Archive Viewer（publisher: Takeshi-Fuchi）は、アーカイブファイルを解凍せずにVS Code上で直接中身をプレビューできる拡張機能だ。
zipを選ぶとそのままツリー表示され、リストされたファイル名をマウスダウンするだけで中身がポップアップされる。解凍先フォルダを作る必要も、後で掃除する必要もない。「中を確認したい」という目的に対して、これが最短の動線だ。
対応フォーマット
.zip / .7z / .tar / .tar.gz / .tgz / .tar.xz / .tar.bz2 / .tar.zst など17種類の圧縮形式に対応。Zstandard（zst）のような比較的新しいフォーマットも含む。
主な機能
ファイルリスト表示
アーカイブをVS Codeで選ぶだけで、ファイル名・サイズ・タイムスタンプがツリー表示される。
ファイルプレビュー（解凍不要）
ファイル名をマウスダウンしている間だけプレビューが表示され、離すと閉じる。テキストの先頭N行（設定可能、デフォルト20行）をその場で確認できる。解凍は一切発生しない。
画像プレビュー（解凍不要）
JPG / PNG / GIF / WebP / BMP / SVG / ICO / TIFF / AVIFをインラインプレビュー。アーカイブの中の画像をその場で目視確認できる。
Markdownプレビュー（解凍不要）
レンダリング済みMarkdownをアーカイブ内から直接表示。アーカイブ内の画像参照も自動で解決して埋め込まれる。配布物のドキュメントを確認するときなどに便利だ。
ネスト圧縮ファイルのブラウジング
tar.gzの中にzipが入っているような入れ子構造でも、クリック一つで中身を展開表示できる。もちろん解凍は不要。
パスワード保護対応
ZIPと7Zのパスワード付きアーカイブに対応。セッション中はパスワードを記憶する。
ファイル・フォルダの解凍
プレビューして「やはり必要だ」となれば、右クリックで個別ファイルやフォルダを解凍できる。チェックボックスで複数選択してバッチ解凍も可能。あくまで解凍は「確認した上での意図的な操作」として設計されている。
Claude Codeでゼロから作った話
きっかけ
ある日、受け取ったzipファイルの中身をざっと確認したかっただけなのに、解凍→確認→フォルダ削除という手順を踏んでいる自分がいた。「これVS Codeの中で完結してほしい」と思ったのが始まりだ。
既存の拡張機能を探したが、動作が不安定だったり対応フォーマットが少なかったり。ならば作ろう、と。ただVS Code拡張機能の開発は初めて。WebviewAPI、CustomEditorProvider、extension contextの管理——知らない概念が多い。そこでClaude Codeを相棒にすることにした。
開発の進め方
会話はシンプルだった。「VS Codeの拡張機能でzipファイルを選んだとき、解凍せずにツリー表示したい」と伝えて雛形を生成してもらい、そこから「7zも対応して」「パスワード付きを処理して」「Markdownをレンダリングして」と機能を積み上げていった。
コードの総量はメインの src/extension.ts だけで約2,000行。各フォーマットの解凍処理（解凍せずに読み取るストリーム処理）、Webviewに渡すHTML生成、プレビューのロジック、パスワードダイアログ、バッチ抽出——全部一つのファイルに凝縮されている。
テストも書いた。ユニットテストから実際のアーカイブファイルを使ったインテグレーションテスト、Playwrightを使ったE2Eテストまで。Claude Codeとのやり取りの中で「テストが落ちている」「この挙動がおかしい」とフィードバックを渡すと修正案が返ってくる。バグ修正のサイクルが普段より明らかに速かった。
Gitのコミット履歴を見ると、最初の Initial commit から機能追加・バグ修正・バージョンアップが積み重なっている。ゼロから公開まで、一人の開発者とAIの対話だけで完結している。
開発体験として感じたこと
Claude Codeで特に助かったのは「知らないAPIを調べなくていい」点だ。vscode.window.showInputBox() でパスワードダイアログを出す、retainContextWhenHidden でWebviewの状態を保持する——こういった細かい仕様をその都度調べることなく、「こうしたい」を伝えるだけで動くコードが出てくる。
もちろん全部が一発で動くわけではない。CSPの設定を間違えて画像が表示されなかったり、tarのツリー階層が崩れたり、細かいバグは出る。ただ「このテストが落ちている、原因を調べて」と渡すと的確に直してくる。人間がデバッグする時間が大幅に減った。
VS Code拡張機能に広告を載せるビジネスモデル
拡張機能を公開するにあたって、一つ面白い試みを仕込んだ。拡張機能のUI内に広告スペースを設けるというものだ。
READMEにも明記している：
This extension may display advertisements in designated advertising spaces within the interface. Revenue from advertisements is used for the development, maintenance, and improvement of the extension.
VS Code拡張機能への広告掲載は、まだあまり前例が多くない。スマホアプリやWebサービスではフリーミアム＋広告は当たり前だが、開発ツールのエコシステムでは珍しい。
開発者向けツールに広告を載せることへの反発は予想される。ただ、いくつかの前提がある。
- 機能を損なわない：広告はUIの端に設置し、アーカイブのプレビュー操作を妨げない
- 完全ローカル動作：ファイルデータは外部に送らない。プライバシーポリシーに明示
- 透明性：READMEで広告があることを事前に伝える
開発者ツールでどこまで広告受容性があるか、実際に試してみようという実験でもある。
マーケットプレイスに上げたら1時間で10件ダウンロードされた
正直、最初は全く期待していなかった。宣伝は何もしていない。SNSには投稿していないし、Product Huntにも上げていない。ただ VS Code Marketplace に公開した、それだけだ。
公開から1時間も経たないうちに、ダウンロード数が10件を超えていた。
驚いた。
考えてみれば当たり前の話ではある。VS Code Marketplaceには毎日大量の開発者がアクセスし、キーワードで拡張機能を検索している。「zip viewer」「archive viewer」と検索したとき、新着として上位に出てくる。SEOもリスティング広告もなしに、マーケットプレイスの検索インデックスが勝手に集客してくれる。
Webサービスを立ち上げたとき、公開直後はほぼゼロからのスタートだ。SEO、SNS、口コミ、広告——何かしら手を打たないと人は来ない。でもマーケットプレイス型のエコシステムは違う。既にそこに人がいる。需要と供給を繋ぐインフラが整っている。
Apple App StoreもGoogle Play Storeも同じ構造だが、VS Code Marketplaceはカテゴリが「開発者ツール」に絞られている分、ニーズとのマッチング精度が高い。「zipの中身をVS Codeから確認したい」という需要は確実に存在していて、ちゃんとしたソリューションが公開されれば自然に見つけてもらえる。
現在と今後
バージョンは現在2.1.2。初期リリース（1.0.0）でZIP/TAR系5形式のプレビューからスタートし、2.0.0で17形式対応＋UIの大幅改善、2.1.0でMarkdownプレビュー・画像プレビュー・バッチ抽出などの機能追加と、着実に育っている。
広告モデルの実験結果、ダウンロード数の推移、開発者コミュニティからのフィードバック——続報があればまた書こうと思う。
「このzip、解凍する前にちょっと中身だけ見たい」と思ったことがある人は、ぜひ試してみてほしい。
VS Code Marketplace → Zip & Archive Viewer（Takeshi-Fuchi）で検索
ソースコードは https://github.com/t-fuchi/zip-viewer で公開中。