npm & ActiveReportsJSクイックスタート | GrapeCity.devlog

サーバーサイドJavaScript環境であるNode.jsは、近年フロントエンドの開発者にとってもほぼ必須の環境となっており、その中でも非常によく使われるのでが、Node.jsが提供するパッケージ管理ツール「npm」です。

2019年12月11日に発売したJavaScriptライブラリ製品「ActiveReportsJS（アクティブレポートJS）」も以下のnpmパッケージを公開しており、npmを使用してCLIから手軽にライブラリのダウンロードと配置を行うことができます。

パッケージ	概要
@grapecity/activereports	ActiveReportsJSのライブラリ本体
@grapecity/activereports-localization	日本語化用のリソースライブラリ

今回はこのnpmの仕組みを利用しながら、ActiveReportsJSの帳票ビューワを使用する方法をご紹介したいと思います。
※ 以下、Node.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。

プロジェクトの作成
ActiveReportsJSライブラリパッケージのインストール
アプリの実行

プロジェクトの作成

はじめにプロジェクトを作成します。今回は「my-app」という名前のプロジェクト用のフォルダを用意し、その中でアプリケーション構築を行なっていきます。
※ 今回はエディタとしてVisual Studio Codeを使用します。

プロジェクトフォルダの作成

ターミナルやコマンドプロンプトを開き、任意のディレクトリ上で以下のコマンドを実行して「my-app」フォルダの作成と同フォルダへの移動を行います。

mkdir my-app
cd my-app

プロジェクトの初期化

次にプロジェクトの初期化を行います。npm initコマンドを実行して、package.jsonファイル（npmパッケージの定義ファイル）を作成します。途中、プロジェクト名やバージョンなどの設定についていくつか質問されますが、以下のように-yオプションを指定することによって、それらの設定を一括で「既定」に設定することが可能です。

npm init -y

各種パッケージのインストール

次に開発に必要なパッケージをインストールしていきます。今回利用するパッケージは以下の6つです。

パッケージ	役割
webpack	モジュールバンドラー
webpack-cli	webpackのCLI
html-webpack-plugin	webpackでHTMLファイルを生成する
style-loader	styleタグにCSSコードを出力する
css-loader	CSSファイルをインポートする
file-loader	レポートファイル(rdlx-json)をバンドルせず外部ファイルとして出力する

以下のコマンドを実行しパッケージをインストールします。

npm install --save-dev webpack webpack-cli html-webpack-plugin style-loader css-loader file-loader

webpackと各種パッケージの設定

webpack.config.jsファイル（webpackの設定ファイル）を作成し、各種プラグインの設定を行います。

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.rdlx-json$/,
        use: [
          {
            loader: "file-loader",
            options: { name: "[name].[ext]", outputPath: "reports" },
          },
        ],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

Package.jsonファイルに下記のコードを追加して、buildコマンドでwebpackを実行するように定義します。

"scripts": {
  "build": "webpack" 
},

HTMLとJSファイルの作成

Webサイトの本体となるhtmlファイルとjsファイルを作成します。はじめに以下のコマンドでこれらのファイルを配置する「src」ディレクトリを作成します。

mkdir src

次にこのディレクトリ内に下記二つのファイルを作成します。

index.html
index.js

このうち、index.htmlには以下の内容を追記します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>npmクイックスタート</title>
  </head>
  <body>
  </body>
</html>

もう１つのindex.jsの方には、この時点では何も記載をする必要はありません（後ほど処理を記述します）。

ここまででプロジェクトの中のファイル構成は以下のようになっています。

各種パッケージインストール後のファイル構成

ActiveReportsJSライブラリパッケージのインストール

次にActiveReportsJSのビューワに必要なライブラリをインストールしていきます。以下のコマンドを実行し、冒頭でご紹介したActiveReportsJSのライブラリ本体と、日本語化用のリソースライブラリをインストールします。

npm install @grapecity/activereports@2.1.3 @grapecity/activereports-localization@2.1.3

index.htmlに、Viewerコントロールをホストするためのdiv要素を追加します。

<div id="arjsviewer" style="height:100vh;"></div>

index.jsで、使用する静的ファイルのインポートを行います。ビューワの生成に必要なActiveReportsJSのモジュール、日本語化のモジュール、スタイルをインポートしてから、コントロールを生成します。
ブラウザとしてIEでの表示が必要な場合は、@grapecity/activereports/dist/ie-polyfillsのインポートを前に追加してください。（IEでの表示が不要な場合は省略可能。）

また、先ほど行ったwebpack.config.jsの設定にしたがい、使用するレポートファイルもデプロイ対象として出力されるようインポートを行います。

import "@grapecity/activereports/dist/ie-polyfills";
import * as GCAR from "@grapecity/activereports";
import "@grapecity/activereports-localization";
import "@grapecity/activereports/styles/ar-js-viewer.css"; 

// レポートファイル読込 
import './reports/invoice_green.rdlx-json'; 

var arjsviewer = new GCAR.Viewer.Viewer('#arjsviewer',{language:'ja'});
arjsviewer.availableExports = ['xlsx','html'];
arjsviewer.open('./reports/invoice_green.rdlx-json');

「src」ディレクトリ配下で以下のコマンドを実行し、表示するレポートファイルを配置する「reports」ディレクトリを作成します。

mkdir reports

「reports」ディレクトリにレポートファイルを配置します。レポートファイルは以下で公開しているInvoice_green.rdlx-jsonを使用しました。

ここまででプロジェクトのファイル構成は以下のようになります。

ActiveReportsJSインストール後のファイル構成

アプリの実行

プロジェクトのビルド

以下のコマンドを実行して、プロジェクトをビルドします。

npm run build

ビルド完了後、distディレクトリにビルドされたファイルが出力されます。

ビルド後のファイル構成

Live Serverで実行する

最後にブラウザ上で動作を確認します。今回はVisual Studio Codeの拡張機能の「Live Server」を使用し、ローカルの開発サーバー上で実行します。distディレクトリ配下に生成されたindex.htmlを右クリックし、コンテキストメニューから「Open with Live Server」をクリックします。

Live Serverで実行

開発サーバーとブラウザが起動し、Webページに埋め込まれた帳票ビューワ上に帳票が表示されます。

Live Serverでの実行結果

webpack-dev-serverで実行する

今回はwebpackを使用しましたが、webpackには、webpack-dev-serverという開発サーバーが存在するので、そちらを使用した実行方法もご紹介したいと思います。

以下のコマンドを実行し、webpack-dev-serverをインストールします。

npm install --save-dev webpack-dev-server

Package.jsonファイルに下記のコードを追加して、startコマンドでwebpack-dev-serverを実行するように定義します。

"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server" 
},

以下のコマンドを実行して、Webサーバーを起動します。

npm start

起動が完了すると、ターミナルにURLが表示されるので、そちらを開きます。デフォルトではhttp://localhost:8080/となりますが、すでにポートが使用されている場合は別のポートが割り当てられます。

webpack-dev-serverの起動

表示されたURLを開くと、こちらも同様に、Webページに埋め込まれた帳票ビューワ上に帳票が表示されます。

webpack-dev-serverでの実行結果

グレープシティは2020年2月13日から開催される、ITエンジニアの祭典「Developers Summit 2020（デブサミ2020）」に協賛しています。

当日はスポンサーブースにて、今回ご紹介した「ActiveReportsJS」をはじめ、標準ツールに最適なUIセットの「Wijmo（ウィジモ）」、ExcelライクなUIを実現する「SpreadJS（スプレッドJS）」、日本仕様の入力をきめ細かくサポートする入力コントロールセットの「InputManJS（インプットマンJS）」を展示しておりますので、イベントにお越しの際はお気軽にお立ち寄りください！