Web ポータルのブランド化
適用対象: SQL Server 2016 (13.x) Reporting Services and later Power BI Report Server
ビジネスのブランドを設定することで 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 ポータルに固有の項目が含まれます。
- テーマ: 作成したモバイル レポートに固有の項目が含まれます。
インターフェイス セクションは、以下のグループに分類されます。
Section | 説明 |
---|---|
プライマリ | ボタンとホバーの色。 |
セカンダリ | タイトル バー、検索バー、左側のメニュー (表示される場合)、それらのアイテムのテキストの色。 |
ニュートラル プライマリ | ホームとレポート領域の背景。 |
ニュートラル セカンダリ | テキスト ボックスとフォルダー オプションの背景、設定メニュー。 |
ニュートラル ターシャリ | サイト設定の背景。 |
危険/警告/成功メッセージ | これらのメッセージの色。 |
KPI | 色を good (1)、neutral (0)、neutral (-1)、none で調整します。 |
ブランド パッケージが配置されている Mobile Report Publisher で初めてサーバーに接続するときに、そのテーマが、アプリの右上のメニューから利用できるテーマに追加されます。
その後、作成したあらゆるモバイル レポートにこのテーマを利用できます。テーマを配置した同じサーバーでなくても構いません。
ロゴを使用する
ブランド パッケージでロゴを追加する場合、Web ポータルの [サイト設定] メニューに設定した名前の代わりに Web ポータルに表示されます。
ロゴのために追加するファイルには PNG ファイル形式を使用する必要があります。 ファイルの寸法はサーバーにアップロードした後に拡大されます。 約 290 px x 60 px に拡大縮小する必要があります。
Web ポータルにブランド パッケージを適用する
次の手順に従って、ブランド パッケージの追加、ダウンロード、または削除を行います。
右上にある 歯車 アイコンを選択します。
[サイトの設定] を選択します。
[ブランド] を選択します。
[現在インストールされているブランド パッケージ] には、アップロードされているパッケージの名前が表示されるか、何も表示されません。
[ブランド パッケージのアップロード] では、ローカル フォルダーから 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 ポータルにブランド パッケージを適用する」セクションを参照してください。
関連するコンテンツ
フィードバック
https://aka.ms/ContentUserFeedback。
近日公開予定: 2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub イシューを段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、以下を参照してください:フィードバックの送信と表示