JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」では、主要なJavaScriptフロントエンドフレームワークであるReact、Vue.js、Angular、Svelteに対応したパッケージをそれぞれ用意しています。今回はその中からSvelteでActiveReportsJSを使う方法をご紹介いたします。
※ 以下、Node.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。また、エディタとしてVisual Studio Codeを使用します。
Svelteアプリの作成
Svelteアプリの作成には、SvelteのWebアプリ開発向けのレンダリングフレームワーク「SvelteKit」を使用します。
以下のSvelteKitのCLIコマンド※を実行し、「svelte-reporting-app」という名前のプロジェクトを作成します。
※ 2024年11月時点で、ActiveReportsJSの日本語版最新バージョン「V5J」がサポートするSvelteのバージョン「4」を使用する場合、SvelteKitのCLIコマンド「npm create svelte@6.4.0」を利用する必要があります。なお、Svelteの最新バージョン「5」に対応したCLIコマンド「npx sv」は現在対応していませんが、今後対応を予定しています。
npm create svelte@6.4.0 svelte-reporting-appコマンドを実行すると、作成するプロジェクトについての選択肢が表示されます。設定内容については、次の画像を参考にしてください。
プロジェクトが作成されたら、以下のコマンドを実行し、プロジェクトのフォルダ配下に移動します。
cd svelte-reporting-app続いて以下のコマンドを実行し、必要なパッケージのインストールを行います。
npm installここまでの手順でテンプレートプロジェクトの作成が完了しましたので、次のコマンドを実行し動作確認を行います。
npm run devブラウザで「http://localhost:5173/」を参照すると以下のような画面が表示されます。また、ソースファイルを変更すると自動的に変更が反映されます。
ActiveReportsJSのインストール
次に以下のコマンドを実行し、ActiveReportsJSのSvelte用のパッケージおよびビューワを日本語化するためのローカライズパッケージをインストールします。
※ 2024年11月時点の最新の日本語版「V5J」をインストールします。
npm install @mescius/activereportsjs-svelte@5.0.3 @mescius/activereportsjs-i18n@5.0.3バージョンを指定せずに最新版をインストールする場合は以下のようにコマンドを実行します。
npm install @mescius/activereportsjs-svelte @mescius/activereportsjs-i18nソースコードの修正
次に、ActiveReportsJSのビューワーを組み込むため、src\routes\配下にある「+page.svelte」を次のように書き換えます。
<script lang="ts">
// ARJS関連インポート
import '@mescius/activereportsjs/styles/ar-js-ui.css';
import '@mescius/activereportsjs/styles/ar-js-viewer.css';
import {Core} from "@mescius/activereportsjs";
import {Viewer} from "@mescius/activereportsjs-svelte";
import '@mescius/activereportsjs-i18n';
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/xlsxexport";
import "@mescius/activereportsjs/tabulardataexport";
//ライセンス登録
Core.setLicenseKey('Your License Key'); //ここでライセンスキーを設定します。
let viewerInst:Viewer;
</script>
<div id="viewer-host">
<Viewer report={{ Uri: 'reports/Invoice_green_ipa.rdlx-json' }} language="ja" bind:this={viewerInst}></Viewer>
</div>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>サーバーサイドレンダリングの無効化
SvelteKitを使用してアプリケーションを作成した場合、サーバー上でページを作成・描画しクライアント側にHTMLを送信するサーバーサイドレンダリング（SSR）で作成されます。しかし、ActiveReportsJSはクライアントサイドレンダリングのみをサポートしているため、サーバーサイドでのレンダリングを無効化する必要があります。
無効化を行うには、「+page.svelte」が配置されているsrc\routes\配下に「+page.js」ファイルを作成して、以下のような無効化の設定を記述します。
export const prerender = false;
export const ssr = false;レポートファイルとフォントファイルの配置
表示するレポートファイルは「public」フォルダ配下に配置します。また、PDFエクスポートを行う場合はフォントファイルも同フォルダ配下に配置します。
以下のGitHubで公開しているサンプルレポート（Invoice_green_ipa.rdlx-json）を「public/reports」フォルダに、フォントファイル（ipag.ttf）を「public/fonts」フォルダにそれぞれコピーして下さい。
配置したフォントファイルを読み込ませる為、「+page.svelte」へ次のコード（強調部分）を追加します。
<script lang="ts">
// ARJS関連インポート
import '@mescius/activereportsjs/styles/ar-js-ui.css';
import '@mescius/activereportsjs/styles/ar-js-viewer.css';
import {Core} from "@mescius/activereportsjs";
import {Viewer} from "@mescius/activereportsjs-svelte";
import '@mescius/activereportsjs-i18n';
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/xlsxexport";
import "@mescius/activereportsjs/tabulardataexport";
import { onMount } from 'svelte';
//ライセンス登録
Core.setLicenseKey('Your License Key'); //ここでライセンスキーを設定します。
let viewerInst:Viewer;
onMount(() => {
const fonts = [
{
name: "IPAゴシック",
source: "fonts/ipag.ttf"
}
];
// フォント登録
Core.FontStore.registerFonts(...fonts);
});
</script>
<div id="viewer-host">
<Viewer report={{ Uri: 'reports/Invoice_green_ipa.rdlx-json' }} language="ja" bind:this={viewerInst}></Viewer>
</div>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>アプリケーションの実行
以上でアプリケーションの作成は完了です。以下のコマンドを実行して、開発サーバー上でアプリケーションを起動します。
npm run devブラウザで「http://localhost:5173/」を参照すると、ActiveReportsJSの帳票ビューワが表示され、作成した帳票の閲覧や、PDFなど各種形式への保存が実行できます。
さいごに
以上がSvelteでActiveReportsJSを使用して帳票を出力する方法でした。ActiveReportsJSでは今回ご紹介したSvelte以外にも、JSフロントエンドフレームワークのReact、Vue.js、Angularや、レンダリングフレームワークのNext.js、Nuxt.jsでもご利用可能です。詳しくは以下の記事もご覧ください。
また、製品Webサイトでは、無料で試せるデモアプリケーションやトライアル版も公開しています。トライアル版では今回ご紹介できなかった帳票デザイナを含めたすべての機能が使用可能なほか、手元で動かして試せるサンプルも付属していますので、気になった方は是非一度お試しいただけますと幸いです。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。