Web ポータルのブランド化

[アーティクル]
08/14/2024

適用対象: SQL Server 2016 (13.x) Reporting Services 以降 Power BI Report Server

ビジネスのブランドに合わせて SQL Server Reporting Services (SSRS) または Power BI Report Server Web ポータルをカスタマイズする方法について説明します。アップロードしたブランドパッケージを使用すると、Web ポータルで色、ロゴ、その他のスタイル要素を変更できます。ブランドパッケージは、ZIP ファイルとしてパッケージ化した 3 つの項目で構成されます。次のセクションでは、ブランドパッケージ内の項目について説明し、内容の例を示します。

前提条件

SQL Server Reporting Services (SSRS) または Power BI Report Server がインストールおよび構成されている。
Reporting Services Web ポータルへのアクセス。
レポートサーバーデータベースへの接続。

ブランドパッケージの作成

ブランドパッケージを作成するには、ゼロからファイルを作成するか、GitHub サイトからサンプルをダウンロードできます。

最初から始める場合は、まず各ファイルを作成し、ブランドパッケージ内のファイルに次の名前を付けます。

metadata.xml
colors.json
logo.png (省略可能なファイル)

ZIP ファイルには任意の名前を付けることができます。

サンプルブランドパッケージを使用する場合は、ZIP ファイルをダウンロードし、必要に応じて編集できるようにファイルを抽出します。

ブランドメタデータの定義 (`metadata.xml`)

metadata.xml ファイルはブランドパッケージの名前を指定し、colors.json ファイルと logo.png ファイルを参照します。

ブランドパッケージの名前を変更するには、 SystemResourcePackage 要素の name 属性を変更します。

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
</SystemResourcePackage>

ブランドパッケージにロゴを含めることができます。この項目は、Contents 要素に含まれています。

次の例では、ロゴファイルが含まれていません。

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
    <Contents>
        <Item key="colors" path="colors.json" />
    </Contents>
</SystemResourcePackage>

次の例では、ロゴファイルが含まれています。

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
    <Contents>
        <Item key="colors" path="colors.json" />
        <Item key="logo" path="logo.png" />
    </Contents>
</SystemResourcePackage>

配色の定義 (`colors.json`)

colors.json ファイルは、ブランドパッケージの配色を定義します。ブランドパッケージをアップロードすると、サーバーはこのファイルから名前と値のペアを抽出し、プライマリ LESS スタイルシート (brand.less) とマージします。スタイルシートを処理し、結果の CSS ファイルをクライアントに提供します。スタイルシートのすべての色を 6 文字の 16 進数で表現します。

colors.json ファイルの例を次に示します。

{
    "name": "Multicolored example brand",
    "version": "1.0",
    "interface": {
        "primary": "#009900",
        "primaryContrast": "#ffffff",
        "secondary": "#042200",
        "neutralPrimary": "#d8edff",
        "neutralSecondary": "#e9d8eb",
        "danger": "#ff0000",
        "success": "#00ff00",
        "warning": "#ff8800"
    },
    "theme": {
        "dataPoints": ["#0072c6", "#f68c1f", "#269657"],
        "good": "#85ba00",
        "bad": "#e90000",
        "neutral": "#edb327"
    }
}

LESS 変数のしくみ

LESS スタイルシートには、事前定義済み LESS 変数を参照するブロックが含まれます。次の例は、スタイルシートが LESS 変数を使用する方法を示しています。

/* primary buttons */
.btn-primary {
    color:@primaryButtonColor;
    background-color:@primaryButtonBg;
}

この構文は CSS に似ていますが、@ 記号が接頭辞として付く色の値は LESS に固有のものです。 colors.json ファイルは、これらの変数を設定します。

たとえば、colors.json ファイルには次の値が含まれる場合があります。

"primary":"#009900",
"primaryContrast":"#ffffff"

処理されると、LESS 変数は、colors.json ファイル内の対応する値にマップされます。結果の CSS は次の例のようになります。

.btn-primary {
    color: #ffffff;
    background-color: #009900;
}

プライマリボタンはすべて濃い緑でレンダリングされ、白いテキストが付きます。

`colors.json` 内のオブジェクト

colors.json ファイルには、次の 2 つの主要なオブジェクトが含まれています。

インターフェイス: Web ポータルに固有のプロパティ。
テーマ: 作成するモバイルレポートに固有のプロパティ。

interface オブジェクトは、次のプロパティに分類されます。

セクション	説明
プライマリ	ボタンとホバーの色。
セカンダリ	タイトルバー、検索バー、左側のメニュー (表示される場合)、それらのアイテムのテキストの色。
ニュートラルプライマリ	ホームとレポート領域の背景。
ニュートラルセカンダリ	テキストボックスとフォルダーオプションの背景、設定メニュー。
ニュートラルターシャリ	サイト設定の背景。
危険/警告/成功メッセージ	これらのメッセージの色。
KPI	色を good (1)、neutral (0)、neutral (-1)、none で調整します。

theme オブジェクトは、次のプロパティに分類されます。

セクション	説明
データポイント	グラフと視覚エフェクトのデータポイントの色。
良好/不良/どちらでもない	状態を示す色。
背景	全体的な背景色。
前景	全体的な前景色。
マップベース	マップの基本色。
パネルの背景/前景/アクセント	パネルの色。
表のアクセント	テーブルのアクセントカラー。

ブランドパッケージが展開されている Mobile Report Publisher を使用してサーバーに初めて接続すると、パブリッシャーはテーマを使用可能なテーマのリストに追加します。

[カラーパレットの選択] ダイアログのスクリーンショット。

その後、作成したあらゆるモバイルレポートにこのテーマを利用できます。テーマを配置した同じサーバーでなくても構いません。

ロゴを使用する (`logo.png`)

ブランドパッケージにロゴを含めると、Web ポータルに最初に設定した名前の代わりに、そのロゴが Web ポータルに表示されます。

ロゴが PNG ファイル形式であることを確認してください。ファイルのサイズは、サーバーにアップロードされるとスケーリングされます。ロゴは約 290 x 60 ピクセルにスケーリングされます。

Web ポータルにブランドパッケージを適用する

Web ポータルにアクセスします。
右上にある歯車アイコンを選択し、[サイト設定] を選択します。
[ブランド] を選択します。

[現在インストールされているブランドパッケージ] には、アップロードされたパッケージの名前が表示されるか、[なし] と表示されます。
[ブランドパッケージをアップロードする] を選択します。ブランドパッケージがレポートサーバーにアップロードされ、Web ポータルによって更新されたブランドが直ちにレンダリングされます。

ブランドパッケージをダウンロードまたは削除する

[現在インストールされているブランドパッケージ] ボックスにブランドパッケージが表示されている場合は、パッケージのダウンロードまたは削除を選択できます。既存のパッケージを調整し、それらの変更を適用する場合は、パッケージをダウンロードできます。パッケージを削除すると、Web ポータルはすぐに既定のブランドにリセットされます。実行するアクションに応じて、[ダウンロード] または [削除] のいずれかを選択します。

その他の質問 Reporting Services フォーラムで質問してみてください。

次の方法で共有

Web ポータルのブランド化

前提条件

ブランドパッケージの作成

ブランドメタデータの定義 (`metadata.xml`)

配色の定義 (`colors.json`)

LESS 変数のしくみ

`colors.json` 内のオブジェクト

ロゴを使用する (`logo.png`)

Web ポータルにブランドパッケージを適用する

ブランドパッケージをダウンロードまたは削除する

フィードバック

その他のリソース

次の方法で共有

Web ポータルのブランド化

前提条件

ブランド パッケージの作成

ブランド メタデータの定義 (metadata.xml)

配色の定義 (colors.json)

LESS 変数のしくみ

colors.json 内のオブジェクト

ロゴを使用する (logo.png)

Web ポータルにブランド パッケージを適用する

ブランド パッケージをダウンロードまたは削除する

フィードバック

その他のリソース

ブランドパッケージの作成

ブランドメタデータの定義 (`metadata.xml`)

配色の定義 (`colors.json`)

`colors.json` 内のオブジェクト

ロゴを使用する (`logo.png`)

Web ポータルにブランドパッケージを適用する

ブランドパッケージをダウンロードまたは削除する