3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@RYA234(RYA234)

生成AI活用 ActiveReports帳票の共通デザインのレビューを自動化してみた（Claude Code + /reviewReport）

3
Posted at

生成AI活用 ActiveReports帳票の共通デザインのレビューを自動化してみた（Claude Code + /reviewReport）

注意事項・免責事項

本記事について

  • 本記事は個人的な検証プロジェクトの成果をまとめたものです。実際の業務システムではなく、学習・検証目的で作成したサンプル帳票を対象としています。
  • 試用版ライブラリを使用しています。ActiveReports for .NET 18.0Jの試用版を使用してレビューを実施しました。
  • 商用利用する場合は正式なライセンスが必要です。メシウス社の製品を実際のプロジェクトで使用する場合は、必ず正式なライセンスを取得してください。
  • 本記事はメシウス社の公式見解ではありません。記載内容は筆者個人の見解であり、メシウス社の公式なサポートや推奨を示すものではありません。

メシウス社について

本記事で使用している ActiveReports for .NET は、メシウス株式会社（旧グレープシティ）が開発・販売する.NET帳票開発コンポーネント製品です。

正確な製品情報や技術サポートについては、上記の公式リソースをご参照ください。

背景と課題

ActiveReportsを使った帳票開発プロジェクトにおいて、以下の課題がありました：

  • 共通デザインルールの習得に時間がかかる: 新規メンバーがプロジェクトの帳票デザイン規約（フォント、色、レイアウト）を理解するのに時間がかかる
  • デザインレビューの工数が大きい: 既存帳票が共通デザインに準拠しているかのチェックに、1帳票あたり15〜30分かかる
  • 目視レビューの見落とし: フォント名の微妙な違い（MS ゴシック vs IPAゴシック）や色コード（#000000 vs #505050）を見落としがち
  • 修正作業の煩雑さ: rdlxファイルをデザイナーで開いて手動修正する必要があり、複数箇所の修正に時間がかかる
  • 属人化: デザイン規約を熟知した担当者に依存し、レビュー品質にばらつきが出る

本記事では、生成AI（Claude Code）を活用して、これらの課題に対処し、共通デザイン仕様書に基づいた自動レビュー・自動修正を実現した過程と解決策を共有します。

AI活用のポイント: 単なるコード生成ではなく、「カスタムコマンド /reviewReport の設計」「仕様書とrdlxファイルの自動照合ロジック」「XMLベースの自動修正処理」まで、AIとの対話を通じて実装しました。

注: 本記事ではClaude Codeを使用しましたが、GitHub Copilotでも同様のアプローチが可能です。AIツールの選択は開発環境や好みに応じて選択してください。

生成AIへのプロンプト例

実際にAIをどのように活用したか、具体的なプロンプト例を紹介します。

カスタムコマンドの設計

ActiveReportsの帳票デザインをレビューするカスタムコマンドを作成したい。

要件：
- コマンド名: /reviewReport
- 引数: ファイルパス（.rdlx）
- ファイル拡張子から処理を自動判定
  - .rdlx → 仕様書と照合してレビュー

.github/copilot-instructions.md にカスタムコマンドの定義を追加してください。

デザイン仕様書の作成

C:\path\to\sales-slip-page.pdf からデザイン仕様書を作成したい。

抽出項目：
- フォント名、サイズ、飾り（太字など）
- 前景色、背景色（16進数カラーコード）
- レイアウト（用紙サイズ、余白、配置）
- 罫線（太さ、種類、色）
- テーブル構造（列幅、ヘッダー）

report-design-template.md をベースに、
report-common-design.md として保存してください。

rdlxファイルのレビュー

/reviewReport ActiveReport/Report/Invoice_bluegray.rdlx

デザイン仕様書（report-common-design.md）と照合して、
以下をチェックしてください：
- フォント・サイズの一致
- 色（前景色・背景色）の一致
- レイアウトの準拠
- 罫線の仕様適合

相違点をMarkdown表形式でレポートしてください。

自動修正の実行

レビュー結果に基づいて、Invoice_bluegray.rdlx を修正できますか？

修正内容：
- フォント統一（IPAゴシック/メイリオ → MS ゴシック）
- タイトルサイズ修正（36pt → 18pt）
- 色の統一（グレーブルー → 標準黒/白）

バックアップを作成してから実行してください。

ポイント

  • 具体的なファイルパスを指定: 実際のファイルを明示
  • 期待する出力形式を明確に: Markdown表、レビューレポート、修正スクリプト
  • 段階的に指示: 仕様書作成 → レビュー → 修正 の順で進める
  • 安全策を要求: バックアップ作成、段階的な修正適用

このように具体的で明確なプロンプトを使うことで、AIが適切な処理を実装しやすくなります。

導入手順

ここでは、帳票デザインレビューの自動化を実際に動かすための手順を説明します。

前提条件

以下の環境が必要です：

  • OS: Windows 10/11
  • ActiveReports: ActiveReports for .NET 18.0J以降（試用版でも可）
  • 開発ツール: Visual Studio Code + Claude Code CLI（または GitHub Copilot）
  • Git: バージョン管理用

ステップ1: デザイン仕様書テンプレートの作成

プロジェクトルートに report-design-template.md を作成します：

cd your-project
touch report-design-template.md

テンプレート内容（例）：

# [帳票名] デザイン仕様書

## 1. フォント、色

名称|フォント名|サイズ|飾り|前景色|背景色|用途|備考
---|---|---|---|---|---|---|---
タイトル|[フォント]|[サイズ]|[飾り]|[色]|[色]|帳票タイトル|
本文|[フォント]|[サイズ]|[飾り]|[色]|[色]|通常テキスト|

## 2. レイアウト構成

- 用紙サイズ：[サイズ]
- 余白：上下左右 [mm]

## 3. テーブル定義

...

ステップ2: カスタムコマンドの登録

.github/copilot-instructions.md に /reviewReport コマンドを追加：

## カスタムコマンド

### /reviewReport

帳票のデザイン仕様書を作成・レビューするコマンドです。

#### 使用方法

\`\`\`
/reviewReport <ファイルパス>
\`\`\`

#### 動作

- .pdf → デザイン仕様書を自動生成
- .rdlx → 仕様書と照合してレビュー
- .md → テンプレートに変換

ステップ3: 既存帳票からデザイン仕様書を作成

PDFサンプルがある場合、AIに以下のように依頼：

ActiveReport/Report/sales-slip-page.pdf からデザイン仕様書を作成してください。

report-design-template.md をベースに、
フォント、色、レイアウト、罫線を抽出して
report-common-design.md として保存してください。

AIが自動的に：

  1. PDFを解析
  2. フォント、色、レイアウトを抽出
  3. report-common-design.md として保存

サンプルPDFの入手先:

今回はメシウス公式サイトのサンプル帳票から「売上伝票」を使用しました。

サンプル帳票（売上伝票）

ステップ4: rdlxファイルをレビュー

/reviewReport ActiveReport/Report/Invoice_bluegray.rdlx

AIが自動的に：

  1. 仕様書を検索（同ディレクトリ or プロジェクトルート）
  2. rdlxファイルと照合
  3. 相違点をレポート（Invoice_bluegray-review.md）

ステップ5: レビュー結果の確認

生成されたレビューレポートを確認：

# 帳票デザインレビュー結果

## レビューサマリー

### 総合評価
⚠️ **要修正** - 複数の重要な相違点が検出されました

### チェック結果

レビュー項目|結果|備考
---|---|---
フォント・サイズが仕様書と一致しているか|❌ 不一致|IPAゴシック使用
色が仕様書通りか|❌ 不一致|グレーブルー系
...

ステップ6: 自動修正の適用

レビュー結果を確認後、修正を依頼：

このレビュー結果に基づいて、Invoice_bluegray.rdlx を修正できますか？
バックアップを作成してから実行してください。

AIが自動的に：

  1. バックアップ作成（.bak）
  2. XMLベースで修正（sed/Python）
  3. 修正内容をログ出力

なぜ自動レビュー・自動修正なのか？

結論から言うと、手動レビューの工数削減と品質の均一化のためです。

手動レビューの課題

  • ❌ 1帳票あたり15〜30分かかる
  • ❌ フォント名や色コードの微妙な違いを見落としがち
  • ❌ 複数人でレビューすると判定基準にばらつきが出る
  • ❌ rdlxファイルをデザイナーで開いて手動修正する必要がある

自動レビュー・自動修正の利点

  • ✅ レビュー時間が数秒に短縮
  • ✅ 仕様書との完全一致をチェック
  • ✅ 判定基準が常に統一される
  • ✅ XMLベースで自動修正が可能

注意: 完全自動化は難しい

ただし、以下の項目は自動化が困難です：

  1. 背景色の完全再現: rdlxファイルの背景色指定が複雑な場合、完全には修正できないことがある
  2. レイアウトの微調整: 座標値の自動調整は難しく、手動確認が必要
  3. 特殊なスタイル: カスタムスタイルや条件付き書式は個別対応が必要

実用性を考慮した運用:

  • 基本項目（フォント、色、サイズ）は自動修正
  • レイアウトや特殊スタイルは手動確認
  • 修正後は必ずActiveReportsデザイナーで目視確認

レビュー対象の帳票

今回レビューした帳票は、メシウス社のサンプルから取得した請求書（Invoice_bluegray.rdlx）です。

レビュー対象帳票（Invoice_bluegray.rdlx）

帳票の特徴

  • 帳票種類: 請求書
  • レイアウト: A4縦
  • デザイン: グレーブルー配色、IPAゴシックフォント
  • タイトルサイズ: 36pt

レビュー実行

/reviewReport ActiveReport/Report/Invoice_bluegray.rdlx

実行時のやりとり（抜粋）

コマンド実行後、AIが自動的にrdlxファイルを読み取り、デザイン仕様書と照合します：

レビュー実行画面（1/2）

レビュー実行画面（2/2）

自動修正の実行と結果

レビュー結果を確認後、AIに修正を依頼しました。

修正依頼

このレビュー結果に基づいて、Invoice_bluegray.rdlx を修正できますか？
バックアップを作成してから実行してください。

修正実行ログ

AIが以下の手順で自動修正を実行します：

修正実行ログ（1/4）- バックアップ作成

修正実行ログ（2/4）- フォント統一

（中略: タイトルスタイル修正、色の統一処理）

修正実行ログ（3/4）- 色の統一

修正実行ログ（4/4）- 完了

修正結果

修正後のActiveReportsデザイナー画面で、フォントとスタイルが統一されていることを確認できます：

修正後の帳票デザイン

✅ 正しく修正された項目

  • フォント統一: すべてのテキスト要素が MS ゴシック に変更された
  • タイトルサイズ: 36pt → 18pt（太字）に修正された
  • テキスト色: #505050 → #000000 に統一された
  • 罫線色: #697683 → #000000 に統一された

⚠️ 部分的に修正された項目

  • 背景色: 一部の要素は正しく #FFFFFF に変更されたが、一部は反映されていない
    • 原因: rdlxファイル内で背景色の指定が複数階層に分散している
    • 対応: ActiveReportsデザイナーで手動確認・修正が必要

より精度を上げるには

教訓: 共通デザイン仕様書を作成する際に、実際のrdlxファイルをベースにすると精度が向上します。

今回の反省点：

  • PDF帳票からデザイン仕様書を作成したため、rdlxファイルの内部構造と完全には一致しなかった
  • 背景色の指定方法が複雑な場合、自動修正が不完全になる可能性がある

改善策:

  1. rdlxファイルからデザイン仕様書を作成: XMLを直接解析して仕様書を生成
  2. 段階的な修正: 優先度の高い項目（フォント、テキスト色）から順に修正
  3. 手動確認の併用: 自動修正後は必ずデザイナーで目視確認

ベストプラクティス

✅ やるべきこと

  1. デザイン仕様書を先に作成してGit管理（Markdown形式、テンプレート活用）
  2. カスタムコマンドで効率化（/reviewReport で自動レビュー）
  3. 段階的なレビュー・修正（レポート確認 → 優先度判断 → バックアップ → 修正）
  4. rdlxファイルをベースに仕様書作成（PDF帳票ではなくXML構造から）
  5. 修正後の確認を徹底（デザイナーで目視確認、再レビュー実施）

❌ 避けるべきこと

  1. PDF帳票だけを参考にする（rdlx内部構造と乖離する可能性）
  2. バックアップなしで修正（復元できない）
  3. 目視確認なしで本番適用（背景色・レイアウトは手動確認必須）
  4. 仕様書のメンテナンス不足（常に最新の状態を保つ）

効果

生成AIによる開発効率化

生成AI（Claude CodeやGitHub Copilot）を活用したことで、帳票デザインレビューが劇的に効率化されました：

  • レビュー時間の短縮: 手動15〜30分 → 自動数秒（約100倍の高速化）
  • 修正時間の短縮: 手動5〜10分 → 自動1分（約10倍の高速化）
  • 見落としの防止: フォント名や色コードの微妙な違いを確実に検出
  • 判定基準の統一: 誰がレビューしても同じ結果が得られる

従来の手作業との比較:

  • 仕様書作成: 手動で1時間 → AIとの対話で15分
  • レビュー実施: 手動で30分 → AIが自動で数秒
  • 修正作業: デザイナーで手動修正10分 → AIが自動修正1分

AIツールについて: 本記事ではClaude Codeを使用しましたが、GitHub Copilot Chat、Claude API、その他のコーディング支援AIでも同様の効果が期待できます。

導入の容易性

Markdown形式のデザイン仕様書とカスタムコマンドの組み合わせにより、すぐに導入可能です。特別なツールは不要で、Visual Studio CodeとAIツールがあれば開始できます。

生成AIの活用により、帳票デザイン規約の習熟期間を大幅に短縮できました。

導入工数

生成AI活用により、デザイン仕様書作成からレビュー・修正まで約1.5〜2時間で完了しました。

従来の手作業では半日〜1日かかっていた作業が、AIとの対話により大幅に短縮：

  • デザイン仕様書作成: 1時間（AI支援でPDFから自動抽出）
  • カスタムコマンド実装: 30分（AIがコマンド定義を生成）
  • レビュー・修正の実施: 10分（AIが自動実行）

削減効果

手動レビューと比較して、以下の効果が得られました：

  • レビュー時間: 手動30分 → 自動数秒（約100倍の高速化）
  • 修正時間: 手動10分 → 自動1分（約10倍の高速化）
  • 見落とし率: 手動5〜10% → 自動0%（仕様書との完全一致を保証）
  • 属人性の排除: 特定の担当者に依存せず、誰でも同じ品質でレビュー可能

自動レビュー・自動修正により、帳票開発プロジェクトの品質を大幅に向上し、工数を削減できました。

変更に強いシステムへ

自動レビューの導入により、システム全体の保守性と長期的な品質が大幅に向上します：

日常的な開発での安心感

  • デザイン規約の徹底: 新規帳票作成時も自動レビューで規約違反を即座に検出
  • リファクタリングの安全性: 共通デザインを変更しても、全帳票をレビューして影響を確認できる
  • 品質のセーフティネット: 手動レビューの見落としを自動レビューが補完

実行可能なドキュメントとしての価値

  • 仕様の明文化: デザイン仕様書が「帳票がどう見えるべきか」を示す明確なドキュメントとして機能
  • 新メンバーのオンボーディング: 仕様書とレビュー結果を見ることで、デザイン規約を具体的に理解できる
  • 仕様書との乖離防止: 自動レビューにより、仕様書と実装が常に同期

チーム開発での品質向上

  • 属人性の排除: 特定の担当者がいなくても、自動レビューが品質を保証
  • 品質のセーフティネット: 他のメンバーが変更を加えても、レビューが破壊的な変更を検出
  • CI/CD パイプラインへの統合: 自動レビューにより、マージ前に品質を確認できる

長期的な投資効果: 初期投資（デザイン仕様書作成、カスタムコマンド実装）は1.5〜2時間ですが、保守フェーズでのレビュー工数削減、品質担保、仕様確認の効率化により、年間で数十〜数百時間の工数削減が見込めます。特に大規模な帳票開発プロジェクトでは、この効果は累積的に大きくなります。

まとめ

生成AI（Claude Code、GitHub Copilotなど）を活用することで、ActiveReports帳票の共通デザインレビューが大幅に効率化されました。

技術的なポイント

帳票デザインレビューを自動化するために押さえるべきポイント：

  1. デザイン仕様書をMarkdown形式で作成してGit管理（AIがPDFから自動抽出）
  2. カスタムコマンド /reviewReport で自動レビューを実現（AIがコマンド定義を生成）
  3. XMLベースで自動修正を実装（AIがsed/Pythonスクリプトを生成）
  4. rdlxファイルをベースにすることで精度向上（PDF帳票ではなくrdlxから仕様書作成）

生成AI活用の効果

  • 開発時間: 従来半日〜1日 → AI活用で1.5〜2時間（約75%削減）
  • 品質向上: 見落とし率0%、判定基準の統一
  • 学習効果: AIとの対話を通じて帳票デザイン規約を習得

「共通デザインのレビューに時間がかかる」問題は、帳票開発の最大の課題ですが、生成AIの支援により、適切な自動化を迅速に導入できます。

帳票デザインレビューの自動化に課題を感じている方は、ぜひ生成AI（Claude Code、GitHub Copilot、その他のコーディング支援AI）の活用を検討してみてください。どのツールを使用しても、本記事で紹介したカスタムコマンドとMarkdown仕様書のアプローチは有効です。

参考資料

関連ドキュメント

今回の成果物は以下のリポジトリで公開しています：

GitHubコミット: 共通デザインレビュー自動化の実装

masius-legacy-and-ai-develop
├── ActiveReport/Report
│   ├── Invoice_bluegray.rdlx        # 修正済み帳票
│   ├── Invoice_bluegray.rdlx.bak    # バックアップ
│   └── Invoice_bluegray-review.md   # レビューレポート
├── report-common-design.md          # 共通デザイン仕様書
├── report-design-template.md        # デザイン仕様書テンプレート
└── .github
    └── copilot-instructions.md      # カスタムコマンド定義

ActiveReportsを使った帳票開発プロジェクトの品質向上に取り組んでいる方の参考になれば幸いです。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?