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

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

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

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

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

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

メシウス 開発支援ツール

September 02, 2021
Tweet

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

See All by メシウス 開発支援ツール
ActiveReports移行セミナー 基本の「キ」から、帳票アプリケーションのモダン化の具体例まで詳しく解説/activereports-migration-18
mescius_dev
0
76
あなたのアーキテクチャを拡張する高機能コンポーネント導入のススメ/Qiita Conference 2024 Day3
mescius_dev
1
110
エンジニアによる年間5000件の質問から考える製品開発のポイント / Qiita Conference 2023 Autumn Day3
mescius_dev
0
170
あなたのアーキテクチャを拡張する高機能コンポーネント導入のススメ/Developers Summit 2023 Summer
mescius_dev
0
82
プロダクトマーケティングマネージャーのはなし/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
300
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-systems
mescius_dev
0
320
あなたの会社の古いシステム、なんとかしませんか？～システム刷新から考えるDX化への道筋とバリエーション～/webinar20220420-grapecity
mescius_dev
0
400

Other Decks in Programming

See All in Programming
fs2-io を試してたらバグを見つけて直した話
chencmd
0
230
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
130
たのしいparse.y
ydah
3
120
선언형 UI에서의 상태관리
l2hyunwoo
0
160
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
420
フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
770
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
270
42 best practices for Symfony, a decade later
tucksaun
1
180
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
これが俺の”自分戦略” プロセスを楽しんでいこう！ - Developers CAREER Boost 2024
niftycorp
PRO
0
190
良いユニットテストを書こう
mototakatsu
8
2.4k

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.3k
4 Signs Your Business is Dying
shpigford
181
21k
Why Our Code Smells
bkeepers
PRO
335
57k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
KATA
mclloyd
29
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Building Your Own Lightsaber
phodgson
103
6.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Producing Creativity
orderedlist
PRO
341
39k
How to train your dragon (web standard)
notwaldorf
88
5.7k

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