Webデザイナコンポーネントの使用（Svelte）
Svelteアプリケーションを作成する
Svelteアプリケーションを作成する簡単な方法は、SvelteKitを使用することです。
SvelteKitを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。
コマンドプロンプトで次のコマンドを入力して、新しいSvelteアプリケーションを作成します。
npm create svelte@6.0.10 arjs-svelte-designer-appコマンドを実行すると、いくつか質問されるのでそれぞれ下記のように入力していきます。
Which Svelte app template?……Skeleton project
Add type checking with TypeScript?……Yes, using TypeScript syntax
Select additional options (use arrow keys/space bar)
Add ESLint for code linting……No
Add Prettier for code formatting……Yes
Add Playwright for browser testing……No
Add Vitest for unit testing……No作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。
cd arjs-svelte-designer-appコマンドプロンプトで次のコマンドを入力してActiveReportsJSのSvelte対応パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。
npm install @mescius/activereportsjs-svelte @mescius/activereportsjs-i18nsrc\routes\+page.svelteファイルを開き、その内容を次のように変更します。
<script lang="ts">
// ARJS関連インポート
import '@mescius/activereportsjs/styles/ar-js-ui.css';
import '@mescius/activereportsjs/styles/ar-js-designer.css';
import {Designer} from "@mescius/activereportsjs-svelte";
import '@mescius/activereportsjs-i18n/dist/designer/ja-locale';
import { onMount } from 'svelte';
let designerInst:Designer;
function onInit() {
return {
language:"ja"
};
};
onMount(() => {
// レポート読込
designerInst.setReport({id:"reports/quick-start-sample.rdlx-json"});
})
</script>
<div id="designer-host">
<Designer onInit={onInit} bind:this={designerInst}></Designer>
</div>
<style>
#designer-host {
width: 100%;
height: 100vh;
}
</style>SvelteKitを使用してアプリケーションを作成した場合、サーバー上でページを作成・描画しクライアント側にHTMLを送信するサーバーサイドレンダリングで作成されますが、ActiveReportsJSはクライアント側でしか動作しません。そのためサーバー上の描画を無効にする必要があります。サーバー上のレンダリングを無効にするには、+page.svelteファイルを含むフォルダに+page.jsファイルを追加し、以下の内容を設定します。
export const prerender = false;
export const ssr = false;static\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
次のコマンドを入力してSvelteアプリケーションを実行します。
npm run devブラウザで「localhost:5173」を参照し、アプリケーションを表示します。
