Home›VS Code / Dev Env›「ACR Viewer for VSCode」をVS Code Marketplace / Open VSXに公開するまで
「ACR Viewer for VSCode」をVS Code Marketplace / Open VSXに公開するまで

「ACR Viewer for VSCode」をVS Code Marketplace / Open VSXに公開するまでPublishing ACR Viewer for VSCode on VS Code Marketplace and Open VSX

元記事を読むRead original articleqiita.com(新しいタブで開きます)(opens in a new tab)
AI2 点サマリSummary highlight
  • ACR Viewer for VSCodeは、Rust製SkiaコアをNAPI-RSでネイティブ連携し、VS Code MarketplaceとOpen VSXで公開された。
  • MarkdownやHTMLを高精度にプレビューし、印刷やPDF出力を行いたい開発者に役立つ。

ACR Viewer for VSCode links its Rust Skia core through NAPI-RS and is now on VS Code Marketplace and Open VSX, enabling accurate previews, printing, and PDF export.

本ページの本文と要約は AI による自動生成です。日本語版と英語版は言語ごとに独立して生成されるため、表現や詳しさが異なる場合があります。正確性は元記事 (qiita.com) をご確認ください。The body and summaries are AI-generated independently for each language, so wording and detail may differ. Verify accuracy at the original source (qiita.com).

要約と収集メタデータに基づく AI 解説。元記事全文の転載・翻訳ではありません。AI explainer based on the summaries and collected metadata, not a copy or translation of the full source article.

ACR Viewer for VSCodeは、帳票エンジンACRのレンダリングコアをVS Code内で利用できるようにした拡張機能だ。MarkdownやHTMLの高精度なプレビューに加え、印刷やPDF出力を行う手段として、VS Code MarketplaceとOpen VSXで公開された。

ACRの描画基盤

ACRはGoogle Skiaをレンダリングコアに据え、JSONを中間描画モデルとして扱う。実機がなくても「1ドットも狂わないWYSIWYGプレビュー」を実現してきたとされ、POS、ラベル、レシート印刷や、ActiveReports互換の帳票designerに対応している。ACR Viewer for VSCodeは、この描画基盤をVS Codeへ持ち込んだものだ。

ネイティブ連携

当初はChrome拡張のACR Report Rendererと同様に、WASM化したSkiaコアをブラウザ上で動かす構成が想定されていた。しかし、VS Code拡張のホストはNode.jsで動作するため、AcrossReportDesignerが利用するRustのcdylibビルドをNAPI-RS経由でバインドする方式へ変更された。これにより、WASM経由のオーバーヘッドや制約を避けている。

既存資産の再利用

MarkdownやHTMLからACRのJSON中間モデルへの変換は、pulldown-cmarkベースのacr_mdクレートを使い、Rust側で処理する。Node.js側は単一のエントリーポイントを呼び出す薄いクライアントとした。ページ送りも新規実装せず、acr_coreにある高さベースの自動改ページplace_sectionを再利用している。

Open VSX公開

実装では既存資産を壊さず活用する方針が徹底された。一方、実装以上に苦労したのはMarketplaceへの登録段階だったと説明されている。公開先はVS Code MarketplaceとOpen VSXである。

ACR Viewer for VSCode

ACR Viewer for VSCode brings the ACR rendering core into VS Code, providing accurate previews, printing, and PDF export for Markdown and HTML. It addresses the lack of a suitable way within VS Code itself to print or convert Markdown, HTML, and text files to PDF.

ACR, or AcrossReport, is a custom report engine built around Google Skia as its rendering core. It uses JSON as an intermediate drawing model. The author says this approach enables WYSIWYG previews that remain accurate to a single dot without requiring the actual device.

Rust Skia core

The original plan was to use the same browser-based structure as the ACR Report Renderer Chrome extension, running a WebAssembly version of the Skia core. However, the VS Code extension host runs in Node.js rather than in a browser sandbox.

That difference allowed the extension to bind directly, through NAPI-RS, to the same Rust cdylib build used by AcrossReportDesigner, which is built with Avalonia. The implementation therefore switched to a native add-on approach, avoiding the overhead and constraints associated with going through WebAssembly.

JSON intermediate model

Conversion from Markdown or HTML into ACR’s JSON intermediate model is handled on the Rust side. The implementation uses the acr_md crate, which is based on pulldown-cmark, while the Node.js side remains a thin client that calls a single entry point.

The extension also avoids implementing new page-flow logic. Instead, it reuses acr_core’s existing height-based automatic pagination function, place_section. This follows the project’s stated policy of building on existing assets without disrupting code already used in practice.

VS Code Marketplace and Open VSX

ACR itself incorporates work covering POS, label, and receipt printing, along with an ActiveReports-compatible report designer and 30 years of field experience. ACR Viewer for VSCode applies that rendering foundation inside the editor.

The extension is now available through both VS Code Marketplace and Open VSX. According to the account, the Marketplace registration stage proved more difficult than the implementation itself.

ポコとTECHガイドPoko & TECH Guide

ポコと当サイトのTECHガイドが、記事の要約と収集した情報から読みどころを語るAI生成の対話です。Poko and TECH Dashboard's own TECH Guide discuss the article's highlights in an AI-generated conversation based on its summary and collected source details.

  1. ポコPokoこれを使うと、普段VS CodeでMarkdownやHTMLを書く作業は何が変わるの?What changes in everyday work when writing Markdown or HTML in VS Code?
  2. TECHガイドTECH Guideこの記事では、高精度にプレビューし、そのまま印刷やPDF出力ができるようになると紹介されておるぞ。The piece says you can preview documents accurately, then print them or export them as PDFs right from your workflow.
  3. ポコPokoへえ、前のVS Codeではできなかったの? それと、NAPI-RSって何?Oh, couldn’t VS Code do that before? And what exactly is NAPI-RS?
  4. TECHガイドTECH Guide本文だと、VS Code自体には十分な印刷・PDF化手段がなかったそうじゃ。NAPI-RSはRustの機能をNode.jsから呼ぶ橋渡し役じゃよ。The article says VS Code itself lacked a proper printing and PDF option. NAPI-RS acts as a bridge that lets Node.js call the Rust code.
  5. ポコPokoつまり、VS Code内で文書をきれいに確認して、印刷やPDFまで進められるのが一番の収穫なんだね!So the big win is checking documents clearly inside VS Code and taking them all the way to print or PDF. Nice!
  6. TECHガイドTECH Guideそうじゃな。VS Code MarketplaceとOpen VSXで公開され、既存のRust製コアを再利用している点にも注目じゃ。Exactly. It’s now published on VS Code Marketplace and Open VSX, and the piece also highlights how it reuses the existing Rust core.
記事情報・収集記録Article details & collection record
出典Source
Qiita VSCodeコミュニティCommunity
公開日時 (JST)Published (JST)
収集日時 (JST)Collected (JST)
配信形式Format
ブログBlog
原文言語Source language
JA
重要度の位置づけImportance in this lane
MediumMedium priority(VS Code / Dev Env 58件中、同等以上 39件)(39 of 58 VS Code / Dev Env entries are equal or higher)
出典の平均重要度(掲載直近 30 件・最大 30 件)Source average (last 30 listed, up to 30)
1.7 / 31=情報 · 2=中 · 3=高1=Info · 2=Medium · 3=High
情報の寿命Half-life
中期 (チュートリアル)Medium-term (tutorial)

🔷VS Code / Dev Env の他の記事More from VS Code / Dev Envもっと見る →View more →

ページ上部へScroll to top