[{"id":"14d2df97-0676-420c-964d-13426eef1a61","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"12657671-6e6c-4608-ae6d-388d545858df","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"6ea4540d-1449-4cda-9476-7aea94fe92e4","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"8afa6dea-e859-46ff-9492-bbcfb9be02e6","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"3342d713-adf6-4d3d-927a-c18269454a2f","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"c4528dd2-d051-44fc-aaed-03fc5898b4e9","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"55dfa43c-32fc-40cb-ace2-6289ee64a56c","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"12e3d04c-a41d-44e3-bb5e-844d20706258","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"d743e457-9ea8-4a4c-8693-98b2914a8687","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"c29576aa-6a99-4d96-85f3-0c18fd4cc690","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"64db515c-5722-4cee-a216-402fe61de0ea","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"9a15e1ef-b289-40c7-8b67-86751cd27633","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"8bdc33fd-1f2a-418b-a930-a31f5bc2cdf8","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"46f440e9-0dc3-419d-9628-d1828c65a287","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"5daa39c5-b191-4c5e-9390-e1e99b01f262","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"1fac4778-f96c-4ebd-869f-721dbb56fdf9","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"c63ad869-9774-40a4-a810-e8822e878cdb","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"e20c310b-707e-4184-a34e-44efc18718e8","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"3f38aa91-b42d-4dcf-afc6-e168fa3643b1","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"0c39c17a-54f4-43ee-96e8-9e712712e73f","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"eb3f4f7d-3203-4434-8f6e-a8d0de4be95c","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"3d3d8e01-9dc6-4942-96ec-245e80322b4f","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"bd4e1539-7ff3-416e-9616-2ebd4dcf975a","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"c843ccac-1afb-4bf8-af53-ce2c372bd4d0","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"63c1f639-7fdc-4916-b88b-5feec0932d38","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"2dd357b0-2e3e-4bc7-a76a-6ffa143b539f","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"fefd2537-65ac-4ccc-ad4e-d7de9b97d390","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"6f1b7d46-2a6b-4f55-8e8d-976f91c0c538","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"31a616d1-2afb-4315-ac01-1679a605ee73","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"38f9879b-ac55-47be-aa85-cd6719c685cc","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"ceb327c0-7c44-431e-bcc2-edb578760b97","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"7c4e0318-8d49-4df0-91b8-f63ab944a9b1","tags":[{"product":null,"links":null,"id":"92283933-94f9-4e9a-8d93-15ba4ec8b3ec","name":"upd","color":"#7e678a","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]},{"id":"812e0f7f-9fd2-47bb-9ffa-a98b7af0565f","tags":[{"product":null,"links":null,"id":"e1d31134-0bda-4c05-bee0-b1f21f82940b","name":"new","color":"#00A273","productId":"77f3d9a0-2c87-4130-b77a-b94ccf13e3cb"}]}]
Svelteアプリケーションを作成する簡単な方法は、SvelteKitを使用することです。
SvelteKitを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。
コマンドプロンプトで次のコマンドを入力して、新しいSvelteアプリケーションを作成します。
npm create svelte@latest arjs-svelte-designer-app
コマンドを実行すると、いくつか質問されるのでそれぞれ下記のように入力していきます。
√ Which Svelte app template? » Skeleton project
√ Add type checking with TypeScript? » Yes, using TypeScript syntax
√ 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パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。
npm install @grapecity/activereports @grapecity/activereports-localization
SvelteKitを使用した場合、最初からVite.jsと連携する形でアプリケーションが作成されます。ActiveReportsJSをVite.jsで使用するには設定を追加する必要があります。プロジェクトのルートフォルダに「alias.js」を作成し、以下の内容を設定します。
import moment from "./node_modules/moment";
export const { fn, min, max, now, utc, unix, months,
isDate, locale, invalid, duration, isMoment, weekdays,
parseZone, localeData, isDuration, monthsShort, weekdaysMin,
defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;
export default moment;
アプリケーションのルートフォルダにあるvite.config.jsファイルの内容を次のように変更します。
import { sveltekit } from '@sveltejs/kit/vite';
import path from "path";
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
resolve: {
alias: [
{
find: /^moment$/,
replacement: path.resolve(__dirname, "./alias.js"),
},
{
find: /^gc-dv$/,
replacement: path.resolve(
__dirname,
"./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
),
},
{
find: /^\@grapecity\/ar-js-pagereport$/,
replacement: path.resolve(
__dirname,
"./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
),
},
{
find: /^barcodejs$/,
replacement: path.resolve(
__dirname,
"./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
),
},
],
},
};
export default config;
src\routes\+page.svelteファイルを開き、その内容を次のように変更します。
<script lang="ts">
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-designer.css";
import {Designer} from "@grapecity/activereports/reportdesigner";
import { onMount } from 'svelte';
import "@grapecity/activereports-localization/dist/designer/ja-locale";
onMount(() => {
let designer = new Designer("#designer-host", { language: "ja" });
designer.setReport({ id: "./reports/quick-start-sample.rdlx-json" });
});
</script>
<div id="designer-host"></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」を参照し、アプリケーションを表示します。