DX時代の帳票開発ツール「ActiveReportsJS」の使いどころを徹底解説 / GrapeCity ECHO week 2020

DX時代の帳票開発ツール「ActiveReportsJS」の使いどころを徹底解説グレープシティ株式会社ツール事業部プロダクトマーケティングチーム福井潤之

2 GrapeCity Developer Solutions はじめに

近年の業務システムと帳票開発事情 3 GrapeCity Developer Solutions DX（デジタルトランスフォーメーション）推進でクラウドシフトが加速脱ハンコによる帳票のペーパーレス化の需要増 Web化などテレワークに対応した業務基盤への移行が急務に

4 GrapeCity Developer Solutions アクティブレポートJS

5 GrapeCity Developer Solutions ActiveReportsJSのご紹介

ActiveReportsJS 6 GrapeCity Developer Solutions 帳票開発ツール「ActiveReports」の DNAを受け継ぐ、モダンWeb開発に対応した「帳票開発支援JavaScriptライブラリ」クライアントサイドで帳票生成
Windows／Macで使えるデザイナマルチブラウザ対応のビューワ

ActiveReportsJSでの帳票出力 7 GrapeCity Developer Solutions server client network 帳票定義ファイル
帳票生成帳票データ

ActiveReportsJSデザイナ 8 GrapeCity Developer Solutions ツールバーで簡単レイアウト Windows / Mac
対応豊富なレポートコントロール直感的に使えるプロパティグリッドデザイナ上で直接プレビューが可能

データバインディング 9 GrapeCity Developer Solutions APIだけでなく、埋め込みやファイル形式にも対応データソースはJSON形式で設定しますヘッダやクエリパラメータの設定にも対応
各レポートコントロールとのバインディングもGUIでらくらく APIのURIを指定パラメータで動的に変更も可能

レイアウト作成を効率化するコントロール（Table） 10 GrapeCity Developer Solutions １つのコントロールなので、各セルがずれることなく、素早くデザインできる。列の追加・削除もかんたん！

日本仕様 11 GrapeCity Developer Solutions

ActiveReportsJSビューワ 12 GrapeCity Developer Solutions ⚫ ツールバーなどの外観は CSSによる変更に対応 ⚫ エンドユーザーに
帳票プレビュー機能を提供するビューワ ⚫ 検索や拡大/縮小のほか印刷やPDF出力も実行可能 ⚫ マルチブラウザに対応

ActiveReportsJSのコーディング例 13 GrapeCity Developer Solutions <body onload="load()"> <div id="Viewer" style="height:
100vh"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#Viewer', { language: 'ja' }); viewer.open('./reports/test.rdlx-json'); } </script> </body>

14 GrapeCity Developer Solutions ActiveReportsJSの活用シーン

クラウドサービスとの連携 ActiveReportsJSの活用シーン 15 GrapeCity Developer Solutions 1 2 3 JavaScriptUIライブラリとの連携
JavaScriptフレームワーク上での利用

クラウドサービスとの連携 16 GrapeCity Developer Solutions ActiveReportsJSはJSON形式のデータソースをサポートしているので、 Web APIなどを介してクラウドサービスと簡単に連携することが可能です。社内で使用しているクラウドサービスの帳票機能が弱いので、何か別の帳票ツールとデータを連携させて帳票を出力したいです。
最適な帳票ツールはありますか？

クラウドサービスとの連携例（既存システムに追加） 17 GrapeCity Developer Solutions クラウドサービス既存システム API

クラウドサービスとの連携例（既存システムに追加） 18 GrapeCity Developer Solutions クラウドサービス既存システム API サーバー側のOS、Webサーバー、フレームワークを選びません

クラウドサービスとの連携例（サブシステムとして追加） 19 GrapeCity Developer Solutions クラウドサービスサブシステム API 既存システム API
API

クラウドサービスとの連携例（サブシステムとして追加） 20 GrapeCity Developer Solutions クラウドサービスサブシステム API 既存システム API
API サーバー側のOS、Webサーバー、フレームワークを選びません

JavaScriptUIライブラリとの連携 21 GrapeCity Developer Solutions ActiveReportsJSならフロントエンド側の処理だけで、各ライブラリと連携ができるのでおススメです。 UIコンポーネントとして、WijmoやInputManJSといった JavaScriptライブラリを使った開発をしています。帳票出力機能を追加する場合に使えるツールはありますか？

WijmoとInputManJS 22 GrapeCity Developer Solutions 40 以上のコントロールと機能
を収録洗練されたアルゴリズムによる高速処理 AngularなどトレンドのFWに対応充実の日本語制御和暦や漢数字表現に対応漢字からのふりがな取得

ActiveReportsJSのパラメータ機能 23 GrapeCity Developer Solutions レポートファイルにパラメータを追加して、外部からデータを供給することが可能です

InputManJSとの連携 24 GrapeCity Developer Solutions InputManJS var params = [
{ Name: 'paramName', Value: [gcName.getText()] }, { Name: 'paramCode', Value: [gcCategory.getDisplayText()] }, ・・ ]; viewer.open('SampleReport.rdlx-json', { ReportParams: params });

Wijmoとの連携 25 GrapeCity Developer Solutions Wijmo grid = new wijmo.grid.FlexGrid(
'#grid' , { itemsSource: cv, isReadOnly: true, columns: [ {header: 'ID', binding:'ID', maxLength: 5, width: 50 }, {header: 'お客様コード', binding:'CustomerID', width: 110 } ・・ ] } );

Wijmoとの連携 26 GrapeCity Developer Solutions Wijmo var params = [
{ Name: 'paramReportData', Value: [JSON.stringify(cv.items)] } ]; viewer.open('SampleReport.rdlx-json', {ReportParams:params});

CodeZineで詳しい実装方法を公開中 27 GrapeCity Developer Solutions CodeZine 「ActiveReportsJS」とUIコンポーネントの組み合わせで帳票データの入力環境を強化しよう https://codezine.jp/article/detail/13074

JavaScriptフレームワーク上での利用 28 GrapeCity Developer Solutions ActiveReportsJSはAngularをはじめとした主要なJavaScriptフレームワークでの開発に対応しているので、安心してお使いいただけます。トレンドのSingle Page
Application（SPA）でシステムを開発しています。フレームワークにはAngularを使用していますが、帳票出力に最適なツールを教えてください。

主要JavaScriptフレームワークをサポート 29 GrapeCity Developer Solutions Angular React Vue.js

各フレームワーク専用のパッケージを用意 30 GrapeCity Developer Solutions npm install @grapecity/activereports-angular npm install
@grapecity/activereports-react npm install @grapecity/activereports-vue

詳しい使い方はヘルプやブログで 31 GrapeCity Developer Solutions 製品ヘルプ GrapeCity.devlog (https://demo.grapecity.com/activereportsjs/docs/GettingStarted/Introduction) (https://devlog.grapecity.co.jp/archive/category/ActiveReportsJS)

32 GrapeCity Developer Solutions ActiveReportsJS 新バージョン「V2J」のご紹介

最新バージョン「V2J」 33 GrapeCity Developer Solutions 2020年12月16日最新バージョン「V2J」リリース

エンドユーザーデザイナ機能 34 GrapeCity Developer Solutions Webデザイナコンポーネント

データバインディング機能の強化 35 GrapeCity Developer Solutions 階層形式のJSONデータに対応 { "Customers": [ {
"CompanyName": "喫茶たいむましん", "ContactName": "林千春", "SalesData": [ { "OrderDate": "2020-11-29T00:00:00", "OrderNumber": "2110", "ProductName": "バタートースト", "QuantityPerUnit": "500g×5本", "UnitPrice": 450, "UnitsOnOrder": 10 }, { "OrderDate": "2020-11-29T00:00:00", "OrderNumber": "2110", "ProductName": "コーンフレークプレーン", "QuantityPerUnit": "200g×30箱", "UnitPrice": 220, "UnitsOnOrder": 30 } ] }, { "CompanyName": "東海道スーパー", "ContactName": "鈴藤哲也", "SalesData": [ { "OrderDate": "2020-02-23T00:00:00", "OrderNumber": "1017", "ProductName": "メロンミルクキャンディー", "QuantityPerUnit": "180g×30袋", "UnitPrice": 160, "UnitsOnOrder": 30 }, { "OrderDate": "2020-02-23T00:00:00", "OrderNumber": "1017", ・・・

デザイン機能の強化 36 GrapeCity Developer Solutions レイヤー機能プレビュー印刷

37 GrapeCity Developer Solutions 参考資料のご紹介

Webで技術情報を公開中（一部再掲） 38 GrapeCity Developer Solutions CodeZine GrapeCity.devlog (https://codezine.jp/article/corner/823) (https://devlog.grapecity.co.jp/archive/category/ActiveReportsJS)

Webでデモアプリケーションを公開中 39 GrapeCity Developer Solutions オンラインデモ (https://demo.grapecity.com/activereportsjs/demos/)

40 GrapeCity Developer Solutions まとめ

ActiveReportsJSの推しポイント 41 GrapeCity Developer Solutions 強力なデータバインディング機能でクラウド連携も容易に実現できます 1 2 3 4
サーバーに依存しないので、お好みのWebアプリケーションに組み込めますモダンなWebアプリケーション開発に最適です厳しい帳票要件を実現する機能が充実しています

DX時代の帳票開発ツール「ActiveReportsJS」の使いどころを徹底解説 / Grap...

DX時代の帳票開発ツール「ActiveReportsJS」の使いどころを徹底解説 / GrapeCity ECHO week 2020

More Decks by メシウス 開発支援ツール

Other Decks in Programming

Featured

Transcript

More Decks by メシウス開発支援ツール