Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのActiveReportsJS（帳票デザインの基本編）/activereportsj...

メシウス 開発支援ツール
September 02, 2021
Programming
0
240

 はじめてのActiveReportsJS（帳票デザインの基本編）/activereportsjs-design

※ グレープシティ株式会社は、2023年11月1日よりメシウス株式会社に社名を変更しました

グレープシティのオンラインセミナー「はじめてのActiveReportsJS（帳票デザインの基本編）」のセッション資料です。

メシウス 開発支援ツール

September 02, 2021
Tweet

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

See All by メシウス 開発支援ツール
ActiveReports移行セミナー 基本の「キ」から、帳票アプリケーションのモダン化の具体例まで詳しく解説/activereports-migration-18
mescius_dev
0
52
あなたのアーキテクチャを拡張する高機能コンポーネント導入のススメ/Qiita Conference 2024 Day3
mescius_dev
1
110
エンジニアによる年間5000件の質問から考える製品開発のポイント / Qiita Conference 2023 Autumn Day3
mescius_dev
0
160
あなたのアーキテクチャを拡張する高機能コンポーネント導入のススメ/Developers Summit 2023 Summer
mescius_dev
0
76
プロダクトマーケティングマネージャーのはなし/Developers Summit 2023
mescius_dev
0
5.5k
Vue.jsのUIを強化するグレープシティのJavaScriptライブラリ/Vue Fes Japan Online 2022
mescius_dev
0
130
300+のライブラリを定期リリースする品質管理のあれこれ/Developers Summit 2022 Summer
mescius_dev
0
290
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
mescius_dev
0
320
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-grapecity
mescius_dev
0
400

Other Decks in Programming

See All in Programming
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
330
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
230
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
ヤプリ新卒SREの オンボーディング
masaki12
0
130

Featured

See All Featured
Designing Experiences People Love
moore
138
23k
Adopting Sorbet at Scale
ufuk
73
9.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Statistics for Hackers
jakevdp
796
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Designing for humans not robots
tammielis
250
25k
Six Lessons from altMBA
skipperchong
27
3.5k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M

Transcript

  1. はじめてのActiveReportsJS（帳票デザインの基本編） グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 福井潤之

  2. 2 GrapeCity Developer Solutions ActiveReportsJSのご紹介

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

    Windows／Macで 使えるデザイナ マルチブラウザ対応の ビューワ

  4. ActiveReportsJSでの帳票開発の流れ 4 GrapeCity Developer Solutions 1. 付属の帳票デザイナでレポートファイルを作成 2. 表示するデータをJSONフォーマットで作成する 3.

    レポートファイルをブラウザ上で実行し、 作成された帳票を、帳票ビューワで閲覧、各種形式への保存、印刷

  5. 5 GrapeCity Developer Solutions ActiveReportsJSデザイナのご紹介

  6. ActiveReportsJSデザイナ 6 GrapeCity Developer Solutions ツールバーで 簡単レイアウト Windows / Mac

    対応 豊富なレポートコントロール 直感的に使える プロパティグリッド デザイナ上で 直接プレビューが可能

  7. 18種類のレポートコントロール 7 GrapeCity Developer Solutions • TextBox • TableOfContents •

    CheckBox • Container • Line • Shape • InputField • Bullet • Image • Barcode • Tablix • Sparkline • SubReport • OverflowPlaceHolder • List • Table • BandedList • Chart データ領域コントロール

  8. データバインディング 8 GrapeCity Developer Solutions APIだけでなく、 埋め込みやファイル形式にも対応 データソースはJSON形式で設定します ヘッダやクエリパラメータの 設定にも対応

    各レポートコントロールとのバイン ディングもGUIでらくらく APIのURIを指定 パラメータで動的に変更も可能

  9. 日本仕様 9 GrapeCity Developer Solutions

  10. 選べる2つのレポート形式 10 GrapeCity Developer Solutions • 印刷結果とまったく同じレイアウトで帳票を デザインできる • 出力される帳票のレイアウトはデータの量に

    応じて変化 • 日本に多い定型のレイアウトを作成するのに最適 • 印刷よりもアプリケーション上でプレビューする 用途に最適

  11. 11 GrapeCity Developer Solutions デモ

  12. デモで作成する請求書 12 GrapeCity Developer Solutions

  13. アプリケーションへの組み込みもわずかなコードで 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 帳票のレイアウトにあわせて最適なデータ領域コントロールを選択する 1 2 3 動的な制御や集計処理には「式」を使用する

    グループ化でキー項目ごとにデータをまとめた帳票を作成する

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

  16. セミナーの内容や製品に関するご質問・ご相談を承っています 16 GrapeCity Developer Solutions お問い合わせ グレープシティ株式会社 ツール事業部 営業部 製品に関するご相談を

    オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催 など、柔軟にご対応可能です。 セミナーの内容に関してご質問がある方は グレープシティ営業部までお気軽に お問い合わせください。 050-5490-4661 [email protected]

  17. END セミナー受講、誠にありがとうございました。