テーマは、Themas という名前の特別なフォルダに格納されます。このフォルダは、リポジトリの root に表示されています。
Themes フォルダには、規定のテーマと、いくつかのカスタムテーマフォルダが含まれています。それぞれのテーマは自身のフォ ルダに格納され、フォルダの名前で識別されます。”default”という名前のフォルダには、JasperReports Server に付属する規 定のテーマを構成するすべてのスタイルの完全な定義が含まれています。規定のテーマを修正することは、管理者であってもで きません。
Themes are stored in a special folder named Themes that appears at the root of the repository. The Themes folder
contains a default theme and any number of custom theme folders. Each theme is stored in its own folder and is known by the name of the folder. The folder named “default” contains the complete definition of every style that makes up the default theme shipped with JasperReports Server. The default theme cannot be modified, even by administrators.
リポジトリを通じて規定のテーマのファイルを修正することはできません。リポジトリを通さずにそれを試みた場 合は、不注意でユーザインターフェースを使えない物に変えてしまうかも知れません。こうなってしまったら、
JasperReports Serverを再インストールするしか復旧する⽅法はないでしょう。
You cannot modify the files of the default theme through the repository. If you try to do so by circumventing the repository, you could inadvertently change rules that make the UI unusable. In this situation you would need to re-install JasperReports Server to recover.
Themesフォルダには、管理者を除くすべてのユーザに対して「実⾏のみ」権限が与えられています。管理者だけ がテーマに関する特別なコンテクストメニューにアクセスすることができ、⼀般のユーザはテーマを変更すること ができません。潜在的にユーザインターフェースを使い物にならなくしてしまうことを避けるためにも、Themes フォルダの権限は変更してはなりません。
The Themes folder has execute-only permission for all users except administrators. However, only administrators have access to the special context menus for themes, so regular users cannot change themes. To avoid situations that can potentially make the UI inaccessible, do not change the permissions on the Themes folder.
Themes フォルダ内では、テーマのうちの１つがアクティブなテーマとして指定されます。アクティブテーマは、そのフォルダ 名（とそのサブフォルダ名）がリポジトリ内で太字で表⽰されます。すべてのユーザはすべてのページでアクティブテーマを⾒
ることでしょう。それはログインページも例外ではありません。インストール直後は、規定のテーマがアクティブテーマとなっ ています。次の図は、規定のテーマの CSS ファイルを示しています。
In the Themes folder, one of the themes is designated as the active theme; the name of the folder (and its subfolders) are bold in the repository to indicate that it is the active theme. All users will see the active theme on all pages, including the login page. After installation, the default theme is the active theme. The following figure shows the CSS files of the default theme.
図 5-1 Themes フォルダの中の規定(default)のテーマ
5.2.1 テーマファイル
完全なテーマは、以下のファイルと、参照されているすべての画像ファイルで厳密に構成されています。
A complete theme consists of exactly the following files, along with all referenced images:
1. theme.css 5. lists.css 9. dialogSpecific.css 2. pages.css 6. controls.css 10. overrides_ie7.css 3. containers.css 7. dataDisplays.css 11. overrides_ie8.css 4. buttons.css 8. pageSpecific.css 12 overrides_custom.css
加えて、規定のテーマは samples.css ファイルを含んでいます。このファイルは、[表示] > [サンプル] を選択したときのペー ジでのみ使用されます。詳細については、「5.4.4 ユーザインターフェースサンプル」（p.130）を参照してください。
overrides_ie7.css と overrides_ie8.css は、ユーザのブラウザがインターネットエクスプローラ 7 または 8だった場合にのみ、
それぞれ読み込まれます。
In addition, the default theme contains the file samples.css that is only used by the View > Samples page described in Section 5.4.4, “User Interface Samples,” on page 99. The files overrides_ie7.css and overrides_ie8.css are only loaded when the user’s browser is Internet Explorer 7 or 8, respectively.
規定のテーマは、images という名前のフォルダの中に、参照する画像ファイルを格納しています。規定のテーマには、おおよ そ 80個の画像ファイルがあります。規定のテーマから画像を変更するには、２つの⽅法があります。
The default theme stores referenced image files in a folder named images. There are approximately 80 image files in the default theme. There are two ways to change an image from the default theme:
置き換えたい画像と同じフォルダに同じ名前で画像ファイルを格納します。
Use a folder named images and image files with the same name as the ones you want to replace.
対応する CSS ルールを修正し、画像ファイルが置かれている場所（フォルダとファイル名）を再定義します。
Modify the corresponding CSS rules to redefine the location (folder and file name) where they can be found.
CSS ルールを修正する場合は、画像ファイルやその他の任意のヘルパファイルを参照するために、以下の方法のいずれかを使用 することができます。
When you modify the CSS rules, you can use any of the following ways to reference image files, or any other helper file:
テーマフォルダの中に直接ファイルを置きます。この場合、そのファイルは CSS からパスを付けずにアクセスすることが できます（例：”myfile.png”）。
Directly in the theme folder. In this case the file is referenced without a path, for example "myfile.png "in CSS.
テーマフォルダ内に構造化された任意のフォルダ内にファイルを置きます。例えば、テーマフォルダの中に MyImages という名前のフォルダを作成してそこに画像ファイルを置くなら、カスタム CSS ファイルは ”MyImages/myfile.png”
で参照することができます。
In any folder structure located in the theme folder. For example, your custom CSS file could refer to
"MyImages/myfile.png" if you create a folder named MyImages in the theme folder and upload your images there.
インターネット上のどこかにファイルを置きます。CSS 標準に従えば、カスタム CSS は、画像ファイルや任意のヘルパ ファイルを、URL文法で参照することができます。
Anywhere on the internet. Following the CSS standard, your custom CSS can refer to images, or any helper file, with a regular URL.
5.2.2 継承の仕組み
ユーザインターフェースを描画するために、JasperReports Server は、それぞれのテーマファイルを読み込まなければなりま せん。それぞれのファイルが別々のテーマに格納されることもあるので、どのファイルを読み込むかを決定するには継承という 仕組みを使います。
In order to render the user interface, JasperReports Server must load each of the theme files. Because each file can be stored in multiple themes, the inheritance mechanism determines which file to load.
サーバは、「5.2.1 テーマファイル」（p.120）で示した CSS ファイルを、リストアップされている順番に読み込みます。サーバ は、ファイルを探すときには以下の場所を以下の順番に検索します。
The server loads each of the CSS files in section 5.2.1, “Theme Files,” on page 93 in the order they are listed. To locate
the file, the server looks in the following locations, in the following order:
1. アクティブテーマのフォルダ。
The active theme folder.
2. 規定のテーマ。
The default theme.
画像ファイルやヘルパファイルを参照している CSS ファイルがあり、それらのファイルへの任意のパスが CSS ファイルに含ま れている場合、サーバは、同じ２つの方法で、同じ順番に、そのパスとファイル名を探します。このように、それぞれのファイ ルと画像は細書にアクティブテーマで解決され、もし⾒つからなければ、規定のテーマで解決されます。規定のテーマによって ファイルの解決が保証されているので、アクティブテーマはすべてのファイルを含んでいる必要はありません。
When one of the CSS files references an image file or a helper file, including any path to that file, the server looks for that path and filename in the same two locations, in the same order. In this way, each file and image is resolved first in the active theme, and if not found, then in the default theme. The active theme does not need to contain all the files because the default theme is guaranteed to have them.
5.2.3 CSS の優先スキームとカスタムオーバーライド
継承によってどのファイルが読み込まれるかが決定してしまえば、標準CSS 優先スキームは、どのルールが適用可能であるか を、ファイルを読み込む順番に基づいて決定します。
Once the inheritance mechanism determines which files to load, the standard CSS priority scheme determines which rules will be visible, based on the order in which files are loaded.
このことから、カスタムテーマを開発するための典型的な２つの方法が導かれます。
This leads to two general ways of developing custom themes:
もっとも手早い方法は、個々の CSS ルールを規定のテーマファイルからコピーし、ユーザインターフェースを変更する ルールを修正し、これらを overrides_custom.css ファイルとして保存することです。Overrides_custom.css は常に最 後に読み込まれるので、他のファイルで記されてる同じルールを上書きします。これにより、任意の数のルールを簡単に 変更することができ、それらすべてを１つのファイルで管理することができます。
例えば、規定のテーマにおけるすべてのボタンの文字のサイズを大きくしたい場合は、overrides_custom.css ファイル に少しのルールを記述するだけで実現できます。特定のボタンについてはスペース調整などが必要になるかもしれません が、この⽅法は限られた数のルールだけを変更したい場合にのみ使⽤すべきです。
The quickest way is to copy individual CSS rules from the default theme files, modify the rules to change the UI, and save them in the overrides_custom.css file. Because overrides_custom.css is always the last CSS file to be loaded, its rules will override the same rules in other files. This allows you to easily change any number of rules, and manage them all in a single file.
For example, if you want to increase the size of text on all the buttons in the default theme, you can do this with a few rules in the overrides_custom.css file. You may need to adjust the spacing for certain buttons, but the idea is you only need to change a limited number of rules.
ユーザインターフェースを広範囲にわたって修正する場合は、規定のテーマにおける既存の CSS ファイル構造を使うこと ができます。この場合、適切なファイルを規定のテーマからコピーして、修正を⾏い、⾃分の新しいテーマのフォルダに 保存します。そのテーマがアクティブになったとき、継承によってこの新しいファイルが使用されます。
If you modify the user interface extensively, you can use the existing structure of CSS files in the default theme.
In this case, copy the relevant files from the default theme, make your modifications, and save the file in your new theme. The inheritance mechanism will use this new file when you activate the theme.
規定のテーマにあるボタン⾃⾝のサイズを⼤きくしたいような場合には、これらの広範囲な変更のサンプルが適していま す。buttons.css ファイルの大半のルールを書き換え、新しいボタンの画像を作成する必要があるでしょう。この場合、
多くのルールを overrides_custom.css ファイルにコピーするよりも、buttons.css ファイルをコピーするほうがはるか に簡単です。ボタンの周りの空間を調整したい場合などのように、ほんの少ししかルールを修正しない場合には、
overrides_custom.css ファイルを使うほうが適しています。
An example of these extensive changes would be if you want to increase the size of the buttons themselves in the default theme. You would need to rewrite the majority of the rules in the buttons.css file and create images for the new buttons. In this case, it is much easier to copy the buttons.css file than to copy dozens of rules into the overrides_custom.css file. You could still use the overrides_custom.css file to adjust the spacing of elements around the buttons, because there would be fewer of those rules to modify.