Web ポータルのブランド化

[アーティクル]
07/01/2024

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

ブランドパッケージを使用して、Web ポータルをビジネスに合わせてブランディングすることで、Web ポータルの外観を変更できます。ブランドパッケージは、カスケードスタイルシート (CSS) に関する深い知識がなくても作成できるように設計されています。

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

Reporting Services のブランドパッケージは 3 つのアイテムから構成されており、zip ファイルとしてパッケージされています。ファイルには、次の名前が必要です。

colors.json
metadata.xml
logo.png (任意)

それらのファイルを zip ファイルにパッケージ化します。ただし、zip ファイルの名前は自由に設定できます。

metadata.xml

metadata.xml ファイルにより、ブランドパッケージの名前を設定できます。また、このファイルには、colors.json ファイルと logo.png ファイルの両方の参照エントリが含まれています。

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

    name="Multicolored example brand"

任意で、ブランドパッケージにロゴ画像を含めることができます。このアイテムは Contents 要素内にリストアップされます。

ロゴファイルなしの例:

<Contents>
    <Item key="colors" path="colors.json" />
</Contents>

ロゴファイルありの例:

<Contents>
    <Item key="colors" path="colors.json" />
    <Item key="logo" path="logo.png" />
</Contents>

colors.json

ブランドパッケージがアップロードされると、サーバーは colors.json ファイルから適切な名前と値のペアを抽出し、それを主要な LESS スタイルシート brand.less とマージします。この LESS ファイルが処理され、結果的に生成された CSS ファイルがクライアントに提供されます。スタイルシートのすべての色を 6 文字の 16 進数で表現します。

LESS スタイルシートには、次の例のように、いくつかの定義済み LESS 変数を参照するブロックが含まれています。

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

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

たとえば、colors.json ファイルに次の値が含まれていたとします。

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

出力が処理されるとき、LESS 変数の @primaryButtonBg が検索され、 primaryと呼ばれる json プロパティにマッピングされていることが確認されます (この例では、#009900)。その後、適切な CSS が出力されます。

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

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

Reporting Services の colors.json ファイルには、アイテムがグループ化される 2 つのメインカテゴリがあります。

インターフェイス: Reporting Services の Web ポータルに固有の項目が含まれます。
テーマ: 作成したモバイルレポートに固有の項目が含まれます。

インターフェイスセクションは、以下のグループに分類されます。

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

ブランドパッケージが展開されている Mobile Report Publisher を使用してサーバーに初めて接続すると、アプリの右上のメニューで使用できるテーマにテーマが追加されます。

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

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

ロゴを使用する

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

ロゴのために追加するファイルには PNG ファイル形式を使用する必要があります。ファイルのサイズは、サーバーにアップロードされると拡大縮小されます。約 290 px x 60 px に拡大縮小する必要があります。

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

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

右上にある歯車アイコンを選択します。
[サイトの設定] を選択します。
[ブランド] を選択します。画面には次の要素が表示されます。
- 現在インストールされているブランドパッケージには、アップロードされたパッケージの名前が表示されるか、「None」が表示されます。
- [ブランドパッケージのアップロード] では、ローカルフォルダーから zip ファイルを選択し、Web ポータルにパッケージを適用するように求めるメッセージが表示されます。その効果はすぐに確認できます。
- パッケージを [ダウンロード] したり、 [削除] したりすることもできます。パッケージを削除すると、Web ポータルはすぐに既定のブランドにリセットされます。

metadata.xml 例

<?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 例

{
    "name":"Multicolored example brand",
    "version":"1.0",
    "interface":{
        "primary":"#b31e1e",
        "primaryAlt":"#ca0806",
        "primaryAlt2":"#621013",
        "primaryAlt3":"#e40000",
        "primaryAlt4":"#e14e50",
        "primaryContrast":"#fff",

        "secondary":"#042200",
        "secondaryAlt":"#0f4400",
        "secondaryAlt2":"#155500",
        "secondaryAlt3":"#217700",
        "secondaryContrast":"#49e63c",

        "neutralPrimary":"#d8edff",
        "neutralPrimaryAlt":"#c9e6ff",
        "neutralPrimaryAlt2":"#aedaff",
        "neutralPrimaryAlt3":"#88c8ff",
        "neutralPrimaryContrast":"#0a2b4c",

        "neutralSecondary":"#e9d8eb",
        "neutralSecondaryAlt":"#d9badc",
        "neutralSecondaryAlt2":"#b06cb5",
        "neutralSecondaryAlt3":"#a75bac",
        "neutralSecondaryContrast":"#250a26",

        "neutralTertiary":"#f79220",
        "neutralTertiaryAlt":"#f8a54b",
        "neutralTertiaryAlt2":"#facc9b",
        "neutralTertiaryAlt3":"#fce3c7",
        "neutralTertiaryContrast":"#391d00",

        "danger":"#ff0000",
        "success":"#00ff00",
        "warning":"#ff8800",
        "info":"#00ff",
        "dangerContrast":"#fff",
        "successContrast":"#fff",
        "warningContrast":"#fff",
        "infoContrast":"#fff",

        "kpiGood":"#4fb443",
        "kpiBad":"#de061a",
        "kpiNeutral":"#d9b42c",
        "kpiNone":"#333",
        "kpiGoodContrast":"#fff",
        "kpiBadContrast":"#fff",
        "kpiNeutralContrast":"#fff",
        "kpiNoneContrast":"#fff",
        
        "itemTypeIconColor":"#ffffff",
        "reportIconBackground":"#12239e",
        "excelIconBackground":"#217346",
        "folderIconBackground":"#4668c5",
        "datasetIconBackground":"#c94f0f",
        "otherIconBackground":"#000000", 
        
        "primaryButton": "#bb2124",
        "primaryButtonHover": "#d31115",
        "primaryButtonPressed": "#3d0000", 
        
        "link": "#d31115",
        "linkHover": "#671215",
        "linkVisited": "#3d0000", 
        
        "radioButtonCheckBox": "#bb2124",
        "radioButtonCheckBoxHover": "#d31115"
        },
        "theme":{
        "dataPoints":[
            "#0072c6",
            "#f68c1f",
            "#269657",
            "#dd5900",
            "#5b3573",
            "#22bdef",
            "#b4009e",
            "#008274",
            "#fdc336",
            "#ea3c00",
            "#00188f",
            "#9f9f9f"
        ],  

        "good":"#85ba00",
        "bad":"#e90000",
        "neutral":"#edb327",
        "none":"#333",

        "background":"#fff",
        "foreground":"#222",
        "mapBase":"#00aeef",
        "panelBackground":"#f6f6f6",
        "panelForeground":"#222",
        "panelAccent":"#00aeef",
        "tableAccent":"#00aeef",

        "altBackground":"#f6f6f6",
        "altForeground":"#000",
        "altMapBase":"#f68c1f",
        "altPanelBackground":"#235378",
        "altPanelForeground":"#fff",
        "altPanelAccent":"#fdc336",
        "altTableAccent":"#fdc336"
    }
}

サンプルブランドパッケージをダウンロードする

サンプルを GitHub サイトサンプルブランドパッケージからローカルフォルダーにダウンロードします。詳細については、この記事の「Web ポータルにブランドパッケージを適用する」を参照してください。

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

次の方法で共有

Web ポータルのブランド化

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

metadata.xml

colors.json

ロゴを使用する

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

metadata.xml 例

colors.json 例

サンプルブランドパッケージをダウンロードする

フィードバック

フィードバック

その他のリソース

次の方法で共有

Web ポータルのブランド化

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

metadata.xml

colors.json

ロゴを使用する

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

metadata.xml 例

colors.json 例

サンプル ブランド パッケージをダウンロードする

関連するコンテンツ

フィードバック

フィードバック

その他のリソース

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

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

サンプルブランドパッケージをダウンロードする