スタイリング シート
シートのスタイルをカスタマイズしたり、タイトルと説明を変更したり、シートがアプリに表示される条件を追加したり、シート サムネイルを追加したりすることができます。
シートのタイトルと説明の変更
シートのタイトルと説明は、いつでも変更できます。固定のシートのタイトルを使用することも、数式に基づく動的なシートのタイトルを使用することもできます。
次の手順を実行します。
- アプリ概要で
をクリックし、シートを表示します。 - 以下のいずれかを行います。
- グリッド ビュー
の場合は、シート タイトルを選択し、![[編集]](../../Resources/Images/Icons/ic_edit.svg)
をクリックします。 - リスト ビュー
の場合は、 をクリックします。
- グリッド ビュー
- [タイトル] と [説明] を編集します。
- テキスト エリアの外側をクリックします。
動的なシートのタイトルの使用
シート プロパティ パネルの [タイトルの数式] プロパティで、数式に基づいて動的なシートのタイトルを設定できます。有効なチャートの数式を使用することができます。詳細については、「ビジュアライゼーションにおける数式の使用」を参照してください。
動的なシートのタイトルを設定する場合、固定のタイトル ([タイトル]) は使用されません。
ツール バー、シート ヘッダー、アプリのナビゲーション バー オプションを非表示にする
アプリのツールバーとシート ヘッダーを非表示にできます。つまり、これらの領域は、権限に関係なく、どのシートでも、どのユーザーでも、表示されないことになります。 アプリで編集可能権限を持つユーザーは、これらの要素をオン/オフに切り替えることができます。アプリのナビゲーション バー、ツール バー、シート ヘッダーの個々の要素を非表示にすることもできます。
ツール バー
ツール バーは、次のボタンを含むシートの上に領域にあります。
アセット
シート
ブックマーク
Insight Advisor
スマート検索 (
)選択ボタン:
[1 段階戻る] 選択 (
)[1 段階進む] 選択 (
)選択をすべてクリアする (
)
選択ツール (
)シートの編集
必要に応じて、 [アセット]、 [シート]、 [ブックマーク] のボタンをツール バーから非表示にすることができます。[アセット] を削除すると、 [シート] と [ブックマーク] はアセット パネルなしで表示されます。
次の手順を実行します。
アプリ ナビゲーション バーで
をクリックし、
[設定] をクリックします。メニューで [UI 設定] タブに切り替えます。
以下のいずれかを行います。
- ツール バーを非表示にするには、 [ツール バー] をオフにします。
- [アセット] を非表示にするには、 [ツール バー] で [アセット] を選択します。
- [シート] を非表示にするには、 [ツール バー] で [シート] を選択します。
- [ブックマーク] を非表示にするには、 [ツール バー] で [ブックマーク] を選択します。
- [完了] をクリックします。
シート ヘッダー
シート ヘッダーとは、シート上の領域で、シートタイトル、タイトル画像、シートナビゲーション矢印が含まれます。
シート ヘッダーを非表示にすると、ナビゲーション矢印はツール バーに移動します。
必要に応じて、シート タイトルを非表示にできます。
次の手順を実行します。
アプリ ナビゲーション バーで
をクリックし、 [設定] をクリックします。メニューで [UI 設定] タブに切り替えます。
以下のいずれかを行います。
- シート ヘッダーを非表示にするには、 [シート ヘッダー] をオフにします。
- シート タイトルを非表示にするには、 [シート ヘッダー] で [シート タイトル] を選択します。
- [完了] をクリックします。
アプリのナビゲーション バー
必要に応じて、アプリのナビゲーション バーで次のオプションを非表示にできます。
ロゴ
ナビゲーション
Insight Advisor に質問
リソース センター
通知
プロファイル
次の手順を実行します。
アプリ ナビゲーション バーで
をクリックし、 [設定] をクリックします。メニューで [UI 設定] タブに切り替えます。
- [アプリのナビゲーション バー]で、アプリのナビゲーション バーで非表示にするオプションを選択します。
- [完了] をクリックします。
アプリのインターフェイス要素を非表示にするタイミング
長所
ツールバーやシート ヘッダーを隠すことで、チャートやフィルター パネルなどのスペースが確保できます。
シートヘッダーをオフにすると、シートのダウンロードや共有、サブスクリプションの送信、Qlik Automate レポートの作成時に、この領域が表示されなくなります。これは、シートを使って PowerPoint プレゼンテーションやダッシュボードを作成する場合に便利です。
ツールバーを削除すると、他のユーザーが簡単にアクセスできる機能を、アプリ開発者によるコントロールが向上します。例えば、[シートの編集] ボタンを非表示すると、他のアプリ開発者がアプリを編集しにくくなります。
短所
ツールバーを非表示にしても、ブックマーク、メモ、Insight Advisor、シート編集などの機能は完全に削除されません。例えば、ブックマークはこれまで通りアプリの概要で確認することができます。しかし、アプリ消費者は、これらの機能が使えなくなったと思うかもしれません。
ツールバーとシート ヘッダーを非表示にすると、シート間をナビゲーションする唯一の方法はキーボード ショートカットかボタン オブジェクトです。詳しくは「アプリのキーボード ナビゲーションとショートカット」と「ボタンの作成」を参照してください。
選択領域が非表示になっていると、ユーザーはアプリに選択領域が適用されていることに気づかない可能性があります。シートにフィルター ペインを追加したり、個々のチャートにフィルターを追加したりする必要が考えられます。詳細については、「フィルター パネルの作成」および「ビジュアライゼーションにフィルターを適用する」を参照してください。
例
ツールバーとシート ヘッダーが表示されたシート。ツールバーには、メモ、Insight Advisor、現在の選択などが表示されます。シート ヘッダーには、シート タイトル、タイトル画像、シート ナビゲーション矢印が含まれます。
上記と同じシートですが、ツールバーが表示され、シート ヘッダーが非表示となっています。ユーザーにタイトル画像、シート タイトル、ナビゲーション矢印が表示されなくなります。
上記と同じシートですが、シート ヘッダーが表示され、ツールバーが非表示となっています。どの選択が適用されたか見えません。
上記と同じシートですが、シート ヘッダーとツールバー両方が非表示となっています。
カスタム ロゴの追加
アプリのナビゲーション バーにカスタム ロゴを追加できます。これらは、テナントのナビゲーション バーに設定されているロゴを置き換えます。
次の手順を実行します。
アプリ ナビゲーション バーで
をクリックし、 [設定] をクリックします。メニューで [UI 設定] タブに切り替えます。
[アプリのナビゲーション バー] で、
をクリックします。[ロゴ] で、
をクリックします。既存の画像を選択するか、新しい画像をアップロードします。
[挿入] をクリックします。
シートの表示条件の設定
数式の評価が true か false かに応じて、アプリでシートを表示または非表示にするには、[条件の表示] で条件を設定できます。シートは数式が true と評価された場合にのみ表示されます。シートを非表示にしても、アプリ内のデータが非表示になったり除外されたりすることはありません。
例えば、特定の値がデータに存在する場合にのみ使用できるシートを作成できます。通常、if 関数を使用する必要があります。詳細については、「if スクリプトおよびチャート関数」を参照してください。
シート サムネイルの変更
アプリ概要およびアセット パネルでシートを見分けやすくするために、既定のサムネイルを置き換えることができます。 シートの画像を生成することも、既定の画像のいずれかまたは自分の画像を使用することもできます。
次の点に注意してください。
- .png、.jpg、.jpeg、.gif の形式がサポートされています。
- サムネイルの最適な縦横比は 8:5 (幅:高さ) です。
- プライベート シートのサムネイルに対して実行できるのは、追加または変更のみです。
次の手順を実行します。
- アプリ概要で をクリックし、シートを表示します。
- 以下のいずれかを行います。
- グリッド ビュー の場合は、シート タイトルを選択し、 をクリックします。
- リスト ビュー の場合は、 をクリックします。
- グリッド ビュー
- 次のいずれかを実行します。
シートに基づいてサムネイルを生成する場合は、
をクリックします。サムネイル画像を選択する場合は、次の手順を実行します。
デフォルトのサムネイル上にある
をクリックします。[メディア ライブラリ] が開きます。
- シートのサムネイルとして使用する画像を選択し、[挿入] をクリックします。
- 編集を中止するには、
をクリックします。
選択した画像がシートのサムネイルとして使用され、アセット パネルとアプリ概要に表示されます。
詳細については、Qlik Sense サイトの管理: コンテンツ ライブラリにオブジェクトをアップロード(英語のみ) を参照してください。
背景色または画像の追加
シートの背景をカスタマイズできます。特定の背景色を選択したり、数式ごとに色分けしたりできます。メディア ライブラリの画像はどれも背景として設定できます。画像が全体の背景に合わない場合は、配置とサイズを変更できます。
.png、.jpg、.jpeg、.gif の形式がサポートされています。.gif を使用する場合は、動画にも静止画にもできます。
Qlik Cloud Government はシート内の背景画像や色をサポートしていません。
次の手順を実行します。
- 編集モードでシートを開きます。
- [シート プロパティ] で、[スタイリング] をクリックします。
- [背景] を [カスタム] に設定します。デフォルトでは [自動] になっています。
背景色:
単色: 色選択ツールを使用して色を選択します。
数式を使用: ユーザー定義の数式を使用する色を設定します。詳細は、数式による色分けをご覧ください。
- 背景画像: メディア ライブラリから画像を選択します。既定では [なし] になっています。
デフォルトのサムネイル上にある
をクリックします。[メディア ライブラリ] が開きます。
使用する画像を選択し、[挿入] をクリックします。
必要な画像がメディア ライブラリにない場合は、 [新しいアップロード] をクリックして画像を追加します。
- ドロップ ダウンで画像のサイズを変更します:
- 元のサイズ
- 常に適合
- 幅に合わせる
- 高さに合わせる
- 縮小/拡大して合わせる
- 常にページ幅に合わせる
- [位置] で、画像の配置を変更できます。例えば、画像をシートの中央や右上隅にできます。
選択した画像と背景色がシートに表示されるようになります。
[編集] モードのシート、左に設定された背景画像
CSS によるシート スタイルのカスタマイズ
CSS で個々のシートのスタイルをカスタマイズできます。これは、テーマでカバーされていない要素をカスタマイズできるようにすることで、カスタム テーマを補完するのに役立ちます。カスタマイズされたシート スタイルは、アプリケーションに適用されたテーマのスタイルを上書きするためにも使用できます。
CSS のシート スタイルの使用はできるだけ少なくすることが推奨されます。カスタム CSS の代わりに、可能な限り利用可能なスタイル プロパティとスタイル オプションを使用することをお勧めします。
CSS スタイルは、他の選択肢がない場合にのみ使用するのが最適です。どのシートの CSS 構造も静的ではなく、API でもなく、いつでも変わる可能性があります。CSS スタイルは最小限にとどめ、それが正しいことを確認し、変更によってそれが崩れても簡単に修正できるようにしてください。
カスタム テーマについては、「カスタム テーマ」をご覧ください。
次の手順を実行します。
- 編集モードでシートを開きます。
- [シート プロパティ] で、[スタイリング] をクリックします。
- [カスタム スタイル] を [アクティブ] に設定します。
- 入力ボックスに CSS スタイルを入力します。
制限事項
シートのカスタムCSSスタイルにはいくつかの制限があります。追加された CSS は解析され、アプリケーションの機能を隠したり壊したりする要素を削除して無視するようにサニタイズされます。サポートされていない CSS を入力した場合は通知されます。フォローでは、スタイル シートに CSS を使用する際の制限について概説します:
font-size は 18px より大きくできません。
HTML タグはサポートされていません。
以下のセレクタは使用できません。
疑似セレクタ
ルート セレクタ
* セレクタ
以下の @ ルールはサポートされていません。
charset
color-profile
counter-style
font-face
font-feature-values
font-palette-values
import
keyframes
media
namespace
page
position-try
property
インジェクションは許可されていません。
display:none は、カスタムのユーザー定義要素またはクラスに対してのみサポートされています。
コメントは適用されません。
カスタム CSS スタイルは、Qlik Analytics モバイル アプリのアプリケーションではサポートされていません。