レポートのテーマ

テーマを使用すると、レポートのルック&フィールをカスタマイズし、単一の構成で複数のレポートの外観を決定できます。テーマは、リンクされたリソースからレポートタイトルや列ヘッダなどの静的なテキストを取得する多言語レポートを作成するのに役立ちます。

テーマの構造

テーマは、カラーパレット、フォントプロパティ、画像のリスト、およびテキスト値を含むJSONオブジェクトです。ActiveReportsJSでは、次の手順を使用して最初からテーマを作成できます。

rdlx-json-themeという拡張子の新しいファイルを作成します。
次のコンテンツを新しく作成したファイルにコピーし、独自の値に置き換えます。base64-imageなどのオンラインツールを使用して、画像をbase64文字列にエンコード（変換）できます。

{
  "Theme": {
    "Colors": {
      "Dark1": "#000000",
      "Dark2": "#1a1a1a",
      "Light1": "#40cddf",
      "Light2": "#e6e6e6",
      "Accent1": "MediumTurquoise",
      "Accent2": "Gold",
      "Accent3": "DeepPink",
      "Accent4": "#557bd2",
      "Accent5": "#8acc1f",
      "Accent6": "#409dcc",
      "Hyperlink": "#aaa",
      "HyperlinkFollowed": "#3c3c3c"
    },
    "Fonts": {
      "MajorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "20pt",
        "Weight": "Medium"
      },
      "MinorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "9pt",
        "Weight": "Normal"
      }
    },
    "Images": [
      {
        "Name": "Logo",
        "MIMEType": "image/png",
        "ImageData": "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVRIie2UzW3CQBCFn1OB0wG3dyUVABUk6SDpIHRAB0AFoQPSAaEDru8UOmBLiFYao9F6gZXZW/Iky9q/93lnxoN/3VLj1yWdALTJmTnJ1dBIPiTj1Dzq+Z40pYDqKgGMa97gO7OnlTQYkgIOmT3BniqAfcZ8RvI4FNCkE5J+AIycee5WxcoleW3v9kLZ3g3YAOhCsqwOIBlDM7fhWNJnVYBBvgB07eHtEkTS6FYJ95KcGOwATG24Ifnu1qLxzvIUXInvSS5KAfHw1kEOFr7gzHsiefa9CnCgmOwPNxWuVZgHFDU7kvGrX111FZdvcTe1xD9ZiIr/7KIQ5STpBcDEuu3UbQkkH4f6/jUB+AWm0kmTmeXA3wAAAABJRU5ErkJggg=="
      }
    ],
    "Constants": [
        {
          "Key": "Title",
          "Value": "販売レポート"
        }
      ]
  }
}

レポートをテーマにリンクする

レポートをテーマにリンクするには、rdlx-json-themeファイルをレポートファイルと同じディレクトリに保存する必要があります。これにより、テーマプロパティの隣にあるドロップダウンリストに使用可能なテーマが表示されます。テーマを選択したら、次の式を使用してテーマの値を参照できます。

テーマ値	式
「淡色1」テーマ色	{Theme.Colors!Light1}
「淡色2」テーマ色	{Theme.Colors!Light2}
「濃色1」テーマ色	{Theme.Colors!Dark1}
「濃色2」テーマ色	{Theme.Colors!Dark2}
「アクセント1」テーマ色	{Theme.Colors!Accent1}
「アクセント2」テーマ色	{Theme.Colors!Accent2}
「アクセント3」テーマ色	{Theme.Colors!Accent3}
「アクセント4」テーマ色	{Theme.Colors!Accent4}
「アクセント5」テーマ色	{Theme.Colors!Accent5}
「アクセント6」テーマ色	{Theme.Colors!Accent6}
「ハイパーリンク」テーマ色	{Theme.Colors!Hyperlink}
「表示済みのハイパーリンク」テーマ色	{Theme.Colors!HyperlinkFollowed}
メジャーフォントの設定	{Theme.Fonts!MajorFont.Family}
メジャーフォントのサイズ	{Theme.Fonts!MajorFont.Size}
メジャーフォントのスタイル	{Theme.Fonts!MajorFont.Style}
メジャーフォントの太さ	{Theme.Fonts!MajorFont.Weight}
マイナーフォントの設定	{Theme.Fonts!MinorFont.Size}
マイナーフォントのサイズ	{Theme.Fonts!MinorFont.Size}
マイナーフォントのスタイル	{Theme.Fonts!MinorFont.Style}
マイナーフォントの太さ	{Theme.Fonts!MinorFont.Weight}
画像データ^*	{Theme.Images!<Image Name>.ImageData}
画像のMIMEタイプ	{Theme.Images!<Image Name>.MIMEType}
定数値	{Theme.Constants("<Constant Key>")}

テーマの画像を使用するには、Imageコントロールの［ソース］プロパティを「Database」に設定します。

スタイルプロパティ

いくつかのレポートコントロールには、スタイルプロパティがあり、複数のテーマベースの値を設定するために使用できます。たとえば、TextBoxのレイアウトセクションのスタイルプロパティには、Light1 Accent1 Majorなど、スペースで区切られた3つの値で構成されるアイテムのリストが含まれています。Light1 Accent1 Majorを選択すると、テキストボックス内のテキストの前景色に最初の値（例：Light1）、背景色に2番目の値（例：Accent1）、フォントに3番目の値（例：Major）が適用されます。

ランタイムテーマの適用

レポートを実行してエクスポートしたり、レポートをビューワにロードしたりするアプリケーションは、実行時にテーマを適用する必要があります。そのために、リソースロケーターを使用できます。たとえば、rdlx-json-themeファイルをアプリケーションの静的アセットに保存し、そのコンテンツをリソースロケーターを実装する時のコードで返すことができます。また、テーマを動的に変更することもできます。