Save 37% off PRO during our Black Friday Sale! »

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

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

2020年12月21日~25日 開催
オンラインイベント「GrapeCity ECHO week 2020」、2日目のセッション資料です。

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

グレープシティ株式会社
ツール事業部 マーケティング部
福井 潤之

Transcript

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

  2. 2 GrapeCity Developer Solutions はじめに

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

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

  5. 5 GrapeCity Developer Solutions ActiveReportsJSのご紹介

  6. ActiveReportsJS 6 GrapeCity Developer Solutions 帳票開発ツール「ActiveReports」の DNAを受け継ぐ、モダンWeb開発に対応した 「帳票開発支援JavaScriptライブラリ」 クライアントサイドで 帳票生成

    Windows/Macで 使えるデザイナ マルチブラウザ対応の ビューワ
  7. ActiveReportsJSでの帳票出力 7 GrapeCity Developer Solutions server client network 帳票定義 ファイル

    帳票生成 帳票 データ
  8. ActiveReportsJSデザイナ 8 GrapeCity Developer Solutions ツールバーで 簡単レイアウト Windows / Mac

    対応 豊富なレポートコントロール 直感的に使える プロパティグリッド デザイナ上で 直接プレビューが可能
  9. データバインディング 9 GrapeCity Developer Solutions APIだけでなく、 埋め込みやファイル形式にも対応 データソースはJSON形式で設定します ヘッダやクエリパラメータの 設定にも対応

    各レポートコントロールとのバイン ディングもGUIでらくらく APIのURIを指定 パラメータで動的に変更も可能
  10. レイアウト作成を効率化するコントロール(Table) 10 GrapeCity Developer Solutions 1つのコントロールなので、 各セルがずれることなく、素早くデザインできる。 列の追加・削除もかんたん!

  11. 日本仕様 11 GrapeCity Developer Solutions

  12. ActiveReportsJSビューワ 12 GrapeCity Developer Solutions ⚫ ツールバーなどの外観は CSSによる変更に対応 ⚫ エンドユーザーに

    帳票プレビュー機能 を提供するビューワ ⚫ 検索や拡大/縮小のほか 印刷やPDF出力も 実行可能 ⚫ マルチブラウザに対応
  13. 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. 14 GrapeCity Developer Solutions ActiveReportsJSの活用シーン

  15. クラウドサービスとの連携 ActiveReportsJSの活用シーン 15 GrapeCity Developer Solutions 1 2 3 JavaScriptUIライブラリとの連携

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

    最適な帳票ツールはありますか?
  17. クラウドサービスとの連携例(既存システムに追加) 17 GrapeCity Developer Solutions クラウドサービス 既存システム API

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

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

    API
  20. クラウドサービスとの連携例(サブシステムとして追加) 20 GrapeCity Developer Solutions クラウドサービス サブシステム API 既存システム API

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

  22. WijmoとInputManJS 22 GrapeCity Developer Solutions 40 以上の コントロール と 機能

    を収録 洗練されたアルゴリズムによる高速処理 AngularなどトレンドのFWに対応 充実の日本語制御 和暦や漢数字表現に対応 漢字からのふりがな取得
  23. ActiveReportsJSのパラメータ機能 23 GrapeCity Developer Solutions レポートファイルにパラメータを追加して、 外部からデータを供給することが可能です

  24. 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 });
  25. 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 } ・ ・ ] } );
  26. Wijmoとの連携 26 GrapeCity Developer Solutions Wijmo var params = [

    { Name: 'paramReportData', Value: [JSON.stringify(cv.items)] } ]; viewer.open('SampleReport.rdlx-json', {ReportParams:params});
  27. CodeZineで詳しい実装方法を公開中 27 GrapeCity Developer Solutions CodeZine 「ActiveReportsJS」とUIコンポーネントの 組み合わせで帳票データの入力環境を強化しよう https://codezine.jp/article/detail/13074

  28. JavaScriptフレームワーク上での利用 28 GrapeCity Developer Solutions ActiveReportsJSはAngularをはじめとした 主要なJavaScriptフレームワークでの開発に対応しているので、 安心してお使いいただけます。 トレンドのSingle Page

    Application(SPA)でシステムを開発しています。 フレームワークにはAngularを使用していますが、 帳票出力に最適なツールを教えてください。
  29. 主要JavaScriptフレームワークをサポート 29 GrapeCity Developer Solutions Angular React Vue.js

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

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

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

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

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

  35. データバインディング機能の強化 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. デザイン機能の強化 36 GrapeCity Developer Solutions レイヤー機能 プレビュー 印刷

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

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

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

  40. 40 GrapeCity Developer Solutions まとめ

  41. ActiveReportsJSの推しポイント 41 GrapeCity Developer Solutions 強力なデータバインディング機能でクラウド連携も容易に実現できます 1 2 3 4

    サーバーに依存しないので、お好みのWebアプリケーションに組み込めます モダンなWebアプリケーション開発に最適です 厳しい帳票要件を実現する機能が充実しています
  42. END