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 メシウス 開発支援ツール
あなたのアーキテクチャを拡張する高機能コンポーネント導入のススメ/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
120
300+のライブラリを定期リリースする品質管理のあれこれ/Developers Summit 2022 Summer
mescius_dev
0
290
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
mescius_dev
0
320
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-grapecity
mescius_dev
0
400
不安なあなたにおくるエンジニアのキャリア形成ガイド/Developers Boost 2021
mescius_dev
0
210

Other Decks in Programming

See All in Programming
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.7k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.1k
Piniaの現状と今後
waka292
5
1.5k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.2k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
160
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
Identifying User Idenity
moro
6
7.9k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250

Featured

See All Featured
Thoughts on Productivity
jonyablonski
67
4.3k
Adopting Sorbet at Scale
ufuk
73
9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Facilitating Awesome Meetings
lara
49
6k
Navigating Team Friction
lara
183
14k
What's new in Ruby 2.0
geeforr
342
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Fireside Chat
paigeccino
32
3k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Writing Fast Ruby
sferik
626
61k

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 セミナー受講、誠にありがとうございました。