ActiveReportsJS/Cloudflare/JavaScript/Next.js/TypeScript

CloudflareとActiveReportsJSでつくるサーバーレスWeb帳票！

by MESCIUS-dev

いまや、システム開発でクラウドを使うのはすっかり一般的になってきました。オンプレミスと比べて初期費用を抑えつつ、必要に応じてリソースを増減できる柔軟性や、世界中に散らばった拠点を活かした低レイテンシ化は、Webサービスの快適さを支える大きなポイントです。とくに、CDN（コンテンツ配信ネットワーク）による高速コンテンツ配信やWAF（Web Application Firewall）を使った不正アクセス対策は、多くの企業がまず検討する機能でしょう。

そんなインフラ領域で注目を集めているのが、「Cloudflare（クラウドフレア）」です。CDNやWAFといった基本サービスは、世界中の大手ECサイトやニュースメディア、SNSなどで広く使われていて、“名前は聞いたことがある”という方も多いのではないでしょうか。さらに最近では、静的サイトを手軽にホスティングできる「Pages」や、サーバーレスでAPIを動かせる「Workers」、軽量データベースの「D1」などをそろえ、Webアプリ開発に必要な機能を一通りカバーするフルスタック基盤へと進化しています。

Cloudflareの開発プラットフォームを活用したアプリケーションの作成方法は以下の記事で紹介しています。記事では、Cloudflare開発プラットフォームの代表的なサービスである「Pages」、「Workers」、「D1」とNext.jsを利用して、CRUD処理が行えるWeb APIの作成方法を詳しく解説しています。

また、つぎの記事では、Cloudflare上に作成済みのWeb APIを利用して、JavaScriptライブラリ「Wijmo（ウィジモ）」の「FlexGrid（フレックスグリッド）」によって、グリッド形式のUI操作によってCRUD処理が行えるアプリケーションの作成方法について解説しています。Cloudflare上でWebアプリを構築したいとお考えの方は、ぜひこれらの記事をご覧ください。

今回の記事では、これまで紹介してきた、Cloudflare上のWebアプリに、JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」を用いて帳票機能を実装する方法をご紹介していきます。

事前準備

以下の開発環境を事前に準備してください。

  • VSCode（Visual Studio Code）
  • Node.js ※ LTS (長期サポート) バージョンのご利用をお勧めします
  • Cloudflare C3（create-cloudflare CLI）
    Next.jsをはじめとする、さまざまなJSフレームワークのWebアプリケーションプロジェクトを作成できる、スキャフォールディング対応のCLIツールです。Workers & PagesのWebアプリケーションプロジェクト作成に利用します。
  • Cloudflare Wrangler ※ C3を実行すると、自動的にインストールされます
    Cloudflareの開発者向けCLIツールです。D1にデータベースを作成したり、WorkersやPagesなどのリソースのデプロイ、管理、設定変更を行うために利用します。ローカル環境での開発やプレビュー機能にも対応しており、Cloudflare開発プラットフォームを効率的に操作できます。

さらに、これまで以下の記事で紹介してきたCloudflare上に作成したWebアプリを事前に作成してください。

上記に加え、ActiveReportsJS「V5.1J（v5.1.4）」を使用します。あらかじめ製品版、またはトライアル版をインストールしてください。トライアル版は無料で以下より入手可能です。

ActiveReportsJSの帳票Webアプリケーションの作成

それでは、事前に準備したWebアプリケーションに、ActiveReportsJSを用いて帳票機能を追加していきます。

ActiveReportsJSのインストール

まず、作成済みのWebアプリケーション「cf-crud-app」のプロジェクトをVSCodeで開き、ターミナルから以下のコマンドを実行してActiveReportsJSのReact対応パッケージ※とビューワを日本語化するためのローカライズパッケージをインストールします。
※ React対応パッケージは@mescius/activereportsパッケージに依存しており、React対応パッケージをインストールすると同時にインストールされます。

npm install @mescius/activereportsjs-react@5.1.4  @mescius/activereportsjs-i18n@5.1.4

コンポーネントの実装

つづいて、コンポーネントを実装していきます。以下のように「components」フォルダ内に「ReportViewer.tsx」を追加します。

コンポーネント実装

ActiveReportsJSはクライアントサイドでのみ動作するため、サーバーサイドレンダリングに対応した「Next.js」を使用する場合は、該当コンポーネントがクライアントサイドで実行されることを'use client';の指定によって明示する必要があります。「ReportViewer.tsx」に実装するコードは以下の通りです。

'use client';

import { Core } from "@mescius/activereportsjs";  // ActiveReportsJSのCoreライブラリを読み込み、ライセンス設定などに使用
import { Viewer,Props as ViewerProps} from "@mescius/activereportsjs-react"; // ActiveReportsJSViewerコンポーネント,Props型のインポート
import "@mescius/activereportsjs/pdfexport";      // PDFエクスポートモジュール
import "@mescius/activereportsjs-i18n";           // ローカライズモジュール

import useLicense from '../hooks/useLicense';
import React, { useEffect, useRef } from "react"; 

// ActiveReportsJSのCSS設定
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";


// ViewerWrapper コンポーネント
const ViewerWrapper = (props: ViewerWrapperProps) => {
  // ライセンス読み込み状態
  const isLicenseLoaded = useLicense(Core, 'activereportsjs');
  // Viewerコンポーネントにアクセスするためのrefを作成
  const viewerRef = useRef<Viewer>(null);

  useEffect(() => {
    if (isLicenseLoaded && viewerRef.current) {
      viewerRef.current.Viewer.open(props.reportUri);
    }
  }, [props.reportUri, isLicenseLoaded]);

  // ライセンスが読み込まれるまでは、ローディングメッセージを表示
  if (!isLicenseLoaded) {
    return <div>Loading license...</div>;
  }

  // Viewerレンダリング
  return <Viewer {...props} ref={viewerRef} />;
};

// ViewerWrapperProps型
export type ViewerWrapperProps = ViewerProps & { reportUri: string };

// ViewerWrapperコンポーネントをデフォルトエクスポート
export default ViewerWrapper;

ページ実装

つづいて、コンポーネントを呼び出すためのページを作成するために「app」フォルダ配下に「activereportsjsviewer」フォルダを作成し、その中に「page.tsx」を追加します。

activereportsjsviewerページの追加

「page.tsx」ファイルは以下のように実装します。「components/ReportViewer.tsx」ファイルを動的インポートし、その際{ ssr: false }オプションを指定することで対象ファイルをSSR（サーバーサイドレンダリング）しないように設定します。

"use client";
import type { NextPage } from "next";
import React from "react";
import { ViewerWrapperProps } from "../../components/ReportViewer";

// 動的インポートを使用して、レポートビューワのラッパーをロードします。詳細については、「https://nextjs.org/docs/advanced-features/dynamic-import」を参照してください。
import dynamic from "next/dynamic";
const Viewer = dynamic<ViewerWrapperProps>(
  async () => {
    return (await import("../../components/ReportViewer")).default;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  return (
    <div
      style={{ width: "100%", height: "100vh" }}
    >
      <Viewer reportUri="reports/Invoice_green.rdlx-json" language="ja" />
    </div>
  );
};

export default Home;

レポートファイルの作成

つづいて、帳票として出力するレポートファイルを作成します。今回はGitHubに公開中の以下のレポートを使用します。

GitHubより取得したレポートファイルは、次のように「public」フォルダに「reports」フォルダを作成し、その中に格納します。

activereportsjsviewerページの追加

格納したファイルをActiveReportsJS デザイナより開き、データソースの設定を変更します。次のようにデータソースの編集アイコンを選択してデータソースダイアログを開きます。ダイアログ表示後、「形式」を「外部ファイルまたはURL」へ変更します。

データソースの設定変更1

変更すると、次のように、エンドポイントの指定が可能となりますので、ここに作成済みのWeb API「/api/Invoices」を設定し、［変更を保存］ボタンを押します。

データソースの設定変更2

つづいて、データセットの設定を変更します。次のように、データセットの編集アイコンを選択しデータセットダイアログを開きます。ダイアログ表示後「JSONパス」に「$.*」を設定し、［変更を保存］ボタンを押します。この際に「変更内容は検証されていません。変更内容を保存しますか？」のメッセージが表示されますが、そのまま保存します。

データセットの設定変更

この設定により、帳票のデータソースとして作成済みのWeb APIからデータを取得できるようになりました。

ライセンスキーの設定

さいごに、ActiveReportsJSのライセンスキーを「.env.local」に設定します。設定済みのWijmoの環境変数の下に、変数名「ACTIVEREPORTSJS_LICENSE_KEY」として追加してください。

WIJMO_LICENSE_KEY = "取得した開発用ライセンスキー"　
ACTIVEREPORTSJS_LICENSE_KEY = "取得した開発用ライセンスキー"

ローカル環境で動作確認

ここまでの実装が完了しましたら、ローカル環境で動作確認を行ってみます。以下のコマンドでアプリケーションを実行してください。

npm run preview

実行後、ブラウザで「http://127.0.0.1:8787/activereportsjsviewer」にアクセスすると、ActiveReportsJSで作成された請求書帳票が表示されます。表示された帳票には、CRUD処理で追加したデータが反映され、Web APIから取得した情報をもとに帳票が生成されていることを確認できます。

Cloudflareにデプロイ

正しく動作することも確認できましたので、Cloudflare環境へデプロイしていきます。以下のコマンドを実行してデプロイします。

npm run deploy

デプロイが成功すると、以下のようにメッセージとデプロイ先のURLが表示されます。

デプロイ成功

Cloudflare上に環境変数を設定

デプロイ後、Cloudflare環境に配布用ライセンスキーを設定するため、環境変数を追加します。手順は以下の記事で設定した内容と同様です。

同様の手順で、ActiveReportsJSの配布ライセンスも以下のように環境変数として設定し、［デプロイ］ボタンを押します。

環境変数の設定1

デプロイ後、ActiveReportsJS、Wijmoそれぞれの環境変数が以下のように設定されます。

環境変数の設定2

Cloudflare上の環境変数の設定については、上記の設定のほか、以下のように「wrangler.jsonc」ファイルに含めてデプロイすることも可能です。

環境変数の設定3

デプロイしたアプリの動作確認

さいごに、「https://デプロイ先のURL/activereportsjsviewer」にアクセスして動作確認を行います。Web APIから取得したCloudflare上のD1データベースの内容が、請求書帳票上に反映されており、正しくデプロイされていることが確認できます。

ActiveReportsJSとWijmoの連携

ここまでで、ActiveReportsJSを利用した帳票機能の実装方法をご紹介してきましたが、前回ご紹介したWijmoと連携させることで、ユーザーが入力した内容をそのまま帳票として表示することも可能です。

つぎの動画では、Wijmoの「MultiRow（マルチロウ）」とActiveReportsJSを組み合わせ、画面上で編集したデータを帳票として出力する機能を実現しています。

Cloudflareと、グリッド入力や帳票など用途の異なる複数のJavaScriptライブラリを組み合わせることで、高機能な業務用Webアプリケーションを、サーバーレス環境でスピーディに構築できます。

さいごに

今回は、CloudflareのPagesやWorkers、D1を活用し、サーバーレス構成のWebアプリにActiveReportsJSを組み込む手順を解説しました。さらに、WijmoのMultiRowと組み合わせて、画面上で編集した情報を帳票として出力する業務向けアプリの実装例もご紹介しています。クラウドベースのシステム開発やサーバーレス環境の導入を検討されている方は、ぜひ本記事を参考にしていただけると幸いです。

今回ご紹介したソースコードはGitHubで公開しています。こちらも是非ご確認ください。

製品サイトでは、今回ご紹介したActiveReportsJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／