本節では、CSSのチュートリアルは⾏いませんが、JasperReports Server上で CSS でテーマを作るにあたっての、小技と豆 知識を紹介します。本節では、開発したテーマをテストする⽅法と、CSS の振る舞いを JasperReports Server のユーザインター フェースに適合させる方法について説明します。加えて、多くの CSS エディタやテストツールを紹介し、テーマ開発のひとつ の推奨方法として本節を捕えることができます。
This section is not a CSS tutorial but rather a collection of tips and tricks for working with the CSS that makes up the themes in JasperReports server. This section focuses on how to test the themes you develop and match the CSS to its behavior in the JasperReports Server UI. Additionally, there are many different editors for CSS and tools for testing it, so the recommendations in this section are just one way of developing a theme.
5.4.1 テーマ開発手順
テーマを開発するに当たっての大きな選択は、シンプルなテーマを使ってオーバーライドするか、あるいは「5.2.3 CSS の優先 スキームとカスタムオーバーライド」（p.121）で述べたように、テーマファイルを複製して修正するかです。通常は、テーマ を修正する範囲の広さによって、どちらの方法を採用するかが決定されます。
The major choice to make when developing a theme is whether to use simple theme overrides or to duplicate and modify theme files, as described in section 5.2.3, “CSS Priority Scheme and Custom Overrides,” on page 94. Usually, the extent of your modifications determines which method to use.
⽅法を決定すれば、テーマの作成準備は完了です。テーマの主な開発⼿順は以下の通りです。
Once you have made that determination, you are ready to create your theme. The principal steps in a theme development workflow are as follows:
手順 参照
1. 規定のテーマをダウンロードし、修正したいファイルや CSS ルールのコピーを取得します。
Download the default theme so you have a copy of the files and CSS rules that you want to modify.
「5.3.2.2 テーマの ZIP ファイルをダウンロー ド・アップロードする」（p.125）
2. 新しい CSS ルール、CSS ファイル、画像ファイルを作成します。
Create your new CSS rules, CSS files, and image files.
「5.4.2 Firefox 用 の Firebug プ ラ グ イ ン」
（p.128）
3. 新しいファイルをテスト環境にアップロードし、そのテーマをアクティ ブにするか、アクティブテーマの中にそれらを配置します。
Upload your new files to a test platform, and activate the theme or place them in an active theme.
「5.3.2.1 テーマフォルダとファイルリソースを 作る」（p.124）
4. ユーザインターフェース上で、変更したところを確認します。
Verify your changes wherever they occur in the UI.
「5.4.3 テスト環境」（p.129）
「5.4.4 ユ ー ザ イ ン タ ー フ ェ ー ス サ ン プ ル」
（p.130）
5. テーマの変更が完了するまで、すべての変更について、⼿順 2 から 4 を繰り返します。
Repeat step 2 through step 4 for all your changes until the theme is finalized.
6. テーマを利⽤者に配布します。
Deploy your theme to your users.
「5.3.1 アクティブテーマを設定する」（p.122）
5.4.2 Firefox 用の Firebug プラグイン
前述の手順 2 において、CSSルールの発⾒、修正、閲覧に役⽴つツールのひとつとして、Mozilla Firefox ブラウザ用の Firebug プラグインがあります。Firebug は、ブラウザに表示されているWebページの HTML、JavaScript、CSS ルールを表示します。
表示する要素はWebページから動的に選択することができ、その要素に適用されている CSS ルールだけを表示することができ ます。また、それらのルールをその場で修正して、即座にWebページで効果を確認することもできます。
One tool to help you find, modify, and view CSS rules in step 2 above is the Firebug plug-in for the Mozilla Firefox browser. Firebug displays the HTML, JavaScript, and CSS rules of web pages as you browse. It has a dynamic interface that lets you select an element on the web page, and it displays the specific CSS rules that apply to the element. It also allows you modify those rules and immediately see the effect on the web page.
Firebug は、JasperReports Serverのテーマの修正を⾏うには理想的なツールです。修正したいページと要素を表示し、Firebug を使えば、修正後のプロトタイプを直接作ることができます。例えば、変更した⾊や修正した隙間の効果を全体的に眺めること ができます。
The Firebug tool is ideal for modifying themes in JasperReports Server. Once you locate the pages and elements that you want to modify, you can prototype your changes directly within the tool. For example, you can see overall effect
of changing a color or modifying the spacing.
カスタムオーバーライド方式で実装する場合は、Firebugウィンドウに表示される CSS ルールを直接 overrides_custom.css ファイルにコピーすることができます。Firebugはそのオリジナルファイルのルール全体を表⽰するので、コピーは正確に⾏っ てください。規定のテーマの他のファイルを修正したい場合には、Firebugはそのルールのファイル名と⾏番号を表⽰するので、
コピーしたファイルからその部分を⾒つけることが容易に⾏えます。
If you are implementing your theme through custom overrides, you can copy the CSS rules from the Firebug window directly into the overrides_custom.css file. Firebug displays the entire rule from its original file, so the copy will override it exactly. If you are modifying other files from the default theme, Firebug show you the filename and line number of the rule, so that you can easily find it in your copy of the file.
そして、オーバーライドを使ったテーマをテストする場合、Firebug は、overrides_custom.css によるアクティブな CSS と、
継承したテーマのテーマファイルのオリジナルルールの両方を表示します。オリジナルルールの部分には取消線が入るので、ど のルールがアクティブでどのルールがオーバーライドされているかが容易に判断できます。
And when you are testing a theme that uses overrides, Firebug displays both the active CSS rule from overrides_custom.css and the original rule in the regular theme file of the inherited theme. The original rule is displayed in strike-through, so you can easily tell which rule is active and which rule it overrides.
Firebug の詳細とダウンロードについては、Firebug のWeb サイトを参照してください。
For more information and downloads, see the Firebug website.
5.4.3 テスト環境
テーマをアップロードしてそれをアクティブにすると、サーバにログインしているすべてのユーザがその変更の影響を受けます。
アクティブテーマのファイルを修正したりアップロードした場合でも、それは即座にユーザインターフェースに反映されます。
テーマの開発には、アップロード、アクティベート、CSS ルールのテストなど多くの手順を必要とするため、テーマの開発は本 番環境で⾏うべきではありません。
When you upload a theme and make it active, it is immediately visible to every user on the server. Even editing or uploading a file into an active theme is reflected immediately in the user interface. Because developing a theme requires many iterations of uploading, activating, and testing CSS rules, you shouldn’t develop themes on a production server.
最も簡単なケースは、JasperReports Server を本運用に乗せる前にテーマを開発し、テストすることです。サーバを開発環境 としてテストしている間は、実在のユーザには何の影響も与えません。本運用開始後にテーマを開発する場合は、そのテーマを 2つめのサーバ上で⾏います。例えば、ローカルコピーを同じコンピュータ上にインストールして、そこでテーマの開発を⾏い ます。
In the simplest case, you can develop and test your themes before putting your JasperReports Server into production.
As you test your server during the deployment, you can develop your themes without impacting real users. For deployments that are in production, you can test your themes on a second installation of the server. For example, you could install a local copy on the same computer where you develop the theme.
テーマのテストが進み、完成に近づいてきたら、それを本番環境のサーバでテストすることができます。テーマを Themes フォ ルダーにアップロードしますが、アクティブにはしません。そして、以下のパラメータを URL の末尾に付けて、テストユーザ でログインします。
&theme=<テーマ名>
これにより、テストユーザのセッションがタイムアウトするまでの間、テストユーザはそのテーマをアクティブにしてアクセス することができます。そのテストユーザはアプリケーション全体を通過することができ、他の実際のユーザに影響を与えること なく、本番環境でテーマの効果を確かめることができます。
When your theme is well-tested and nearly complete, you can test it on the production server. Upload your theme to the Themes folder, but do not activate it. Log in as a test user and add the following parameter to the URL:
&theme=<theme-name>
This will activate your theme for the test user on all pages that you access until the user session times out. This allows you to navigate the entire application and see the effect of your theme in the production environment, without affecting other users.
これらのテスト環境すべてで、同じブラウザかつ同じバージョンのブラウザで、テーマの生成するユーザインターフェースを確 認すべきです。エラーが発生した場合は、Firefox上でエラーが報告されなくても、Firebug を使って、エラーを引き起こした CSSルールを検索することができます。
On all of these test platforms, you should look at the user interface generated by your theme with the same browsers and browser versions that your users have. If you see errors, you can also use Firebug to look at the CSS rules that are involved, even if the errors do not show up on Firefox.
5.4.4 ユーザインターフェースサンプル
テーマのテストを⾏う際には、JasperReports Server のすべてのページとダイアログについて効果を確認するべきです。テス トユーザは、サーバのすべての機能にアクセスすることができ、すべての状況下のユーザインターフェースを⾒ることができま す。そして、開発中のテーマを使ったユーザインターフェースサンプルを確認するテストを追加で⾏います。
When testing your theme, you should look at its effect across all pages and dialogs of JasperReports Server. Your test user should access all the features of the server to view the user interface under all conditions. An additional test is to look at the user interface samples with the theme you are developing.
ユーザインターフェースサンプルページは、インターフェースを再設計した新しいページです。管理者だけがアクセスすること ができます。
The user interface sample page is a new page included with the redesign of the interface. It is only accessible to administrators:
1. 管理者（jasperadmin）としてテスト環境にログインします。
Log into your test environment as administrator (jasperadmin).
2. まだ⾏っていないなら、テーマをThemes フォルダにアップデートして、それをアクティブにします。
If you haven’t already done so, upload your theme to the Themes folder and make it active.
3. 任意のページのメインニューで、[表示] > [サンプル] を選択します。
Select View > Samples from the main menu on any page.
4. サンプルギャラリーのそれぞれで、サンプルコンポーネントを確認します。例えば、ボタンギャラリーを⾒れば、すべて のアクションお状態におけるあらゆる種類のボタンを⾒ることができます。
Look at all the sample components in each of the sample galleries. For example, the buttons gallery shows all the different types of buttons in every possible action state.
図 5-6 ボタンコンポーネントのサンプルギャラリー
5. 「Standard Layouts」パネルの項目をクリックすると、サンプルページが表示されます。メインメニューから [表示] > [サ ンプル] を選択すると、ギャラリーページに戻ります。