次の方法で共有


Web ポータルのブランド化

適用対象: 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 ポータルにブランド パッケージを適用する

  1. Web ポータルにアクセスします。

  2. 右上にある歯車アイコンを選択し、[サイト設定] を選択します。

    [サイトの設定] オプションが強調表示された [設定] リストのスクリーンショット。

  3. [ブランド] を選択します。

    [ブランド化] タブが強調表示された [サイト設定] ページのスクリーンショット。

    [現在インストールされているブランド パッケージ] には、アップロードされたパッケージの名前が表示されるか、[なし] と表示されます。

  4. [ブランド パッケージをアップロードする] を選択します。 ブランド パッケージがレポート サーバーにアップロードされ、Web ポータルによって更新されたブランドが直ちにレンダリングされます。

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

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

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