アプリのスタイル設定

アプリにスタイル設定を適用し、会社の基準に基づいてアプリをカスタマイズすることができます。選択したスタイルはアプリ内のすべてのシートに適用されます。アプリが公開されると、アプリのスタイルを変更することはできません。

次のスタイル設定オプションを選択できます。

  • テキストや数字の文字列内の文字の方向を変更する。
  • デフォルトのアプリのテーマを変更する。
  • シート タイトルの背景色を変更する。
  • シート タイトルのフォント色を変更する。
  • ロゴなどの画像を追加または配置する。
ヒント: 開発者は、カスタム テーマ拡張により、より多様なスタイル設定をアプリに適用することができます。

アプリのオプションを開く

アプリのオプションは、未公開アプリの任意の場所から開くことができます。データの探索、データ モデルの構築、またはデータ ストーリーテリングを行っているかどうかに関係しません。

次の手順を実行します。

  • 未公開アプリで、をクリックしてから、Vをクリックし、アプリのオプションを開きます。

  • Eをクリックして、アプリのオプションを閉じます。

注: モバイル デバイスを使用している場合は、アプリのオプションは使用できません。
注: Qlik Sense June 2018 現在、アプリのオプションは、アプリ リソースでの更新アクションに関してカスタム セキュリティ ルールが定義されているとしても、公開済みアプリでは使用できません。

読む方向を変更

次の手順を実行します。

  1. 未公開アプリで、V の順にクリックし、アプリ オプションを開きます。
  2. [スタイル]、[右から左] の順に選択し、[オン] または [オフ] を選択します。
注: Qlik Sense チャートを使用してビジュアライゼーションが共有されている場合は、アプリの読む方向を変更すると共有されているチャートの読む方向にも影響します。詳細については、「共有チャート内での読む順序が正しくない」を参照してください。

デフォルトのアプリのテーマを変更する。

未公開アプリの場合、アプリのテーマは、[アプリのテーマ] ドロップダウン メニューを使用して既定の Qlik テーマの 1 つを設定可能です。また、ユーザーが作成してインストールした任意のカスタム テーマを適用することも可能です。

既定の Qlik テーマ: 

  • [Sense クラシック] - オブジェクトをよりコンパクトに表示して、オブジェクト間のスペースを制限します。
  • [Sense フォーカス] - タイトルに指定されたスペースを提供し、オブジェクトの周りのパディングとスペースを調整します。
  • [Sense Breeze] - [Sense フォーカス]をベースとしていますが、カラー設定が異なります。

次の手順を実行します。

  1. 未公開アプリで、をクリックしてから、Vをクリックし、アプリのオプションを開きます。
  2. [アプリのテーマ] ドロップダウン メニューから、適用するテーマを選択します。
注: 公開済みアプリでテーマを変更することはできません。

カスタム テーマ

カスタム テーマは、ユーザーの会社の基準に基づいて作成することもできます。テーマを使えば、アプリ全体を通して全般設定または詳細設定で、フォント、フォントのサイズ、フォントの太さ、フォントのスタイルを指定するだけでなく、色を変えたり、画像や背景を追加したりすることでアプリを正確にデザインできます。また、カラー パレットを定義したり、マージンやパディング、スペースの仕様をカスタマイズしたりすることもできます。

ヒント: カスタム テーマはアプリに依存しません。これは、たとえばカスタム テーマで定義されている色を変更すると、そのテーマを使用するすべてのアプリで、そのアプリが公開されている場合でも、それらの色が更新されることを意味します。

カスタム テーマを作成した場合は、拡張機能として Qlik Sense に保存します。JSON ファイルや CSS ファイルなどのすべての追加リソースは、圧縮して Qlik Management Console (QMC) に拡張としてインポートします。これによって、セキュリティ ルールを QMC に追加して、特定のユーザーがどのテーマを利用可能かを制御できるようになります。

カスタム テーマは、[アプリのテーマ] ドロップダウン メニューの [カスタム] の下に表示されます。

App theme drop-down menu.

色の変更

シート タイトルの背景色は、単色に設定するか、2 色を選択してグラデーション色に設定することができます。シート タイトルのフォントは、単色にのみ設定できます。

注: モバイル デバイスを使用している場合は、シート タイトルの背景に 2 色を設定していても、単色で表示されます。

色を選択するときには、次のオプションも選択できます。 

  • デフォルトの色パレットから色を選択します。
  • #入力項目に 6 文字を入力することにより、16 進数で色を設定します。
  • パレットをクリックして他のカラー オプションを表示します。
    • 色ホイールをクリックして色を選択します。
    • スライダをドラッグして、色の彩度を変更します。

デフォルトの色パレットからの色の選択

次の手順を実行します。

  1. 色ドロップダウンで S をクリックします。

    ダイアログ ボックスが開き、デフォルト色が表示されます。

  2. パレットでいずれかの色をクリックします。

    その色が選択されます。

  3. ダイアログ ボックスの外側をクリックします。

    ダイアログ ボックスが閉じます。

これで、デフォルトの色パレットで選択することにより、色が設定されました。

デフォルトの色パレットおよび青色が選択されている色ダイアログ ボックス

Default color palette.

16 進数での色の入力

次の手順を実行します。

  1. 色ドロップダウンで S をクリックします。

    ダイアログ ボックスが開き、デフォルト色が表示されます。

  2. 16 進数の入力項目に次の 6 文字を入力します。 #.

    色はパレットで選択します。

  3. ダイアログ ボックスの外側をクリックします。

    ダイアログ ボックスが閉じます。

これで、16 進数値を入力することにより、色が設定されました。

高度な色オプションの使用

次の手順を実行します。

  1. 色ドロップダウンで S をクリックします。

    ダイアログ ボックスが開き、デフォルト色が表示されます。

  2. ダイアログの下部で Ü をクリックします。

    ダイアログが変わり、高度なオプションが表示されます。

  3. 以下のいずれかを行います。

    • 色ホイールをクリックします。

      色が変わり、それに応じて 16 進数の色コードが更新されます。

    • スライダをドラッグします。

      彩度が変わり、それに応じて 16 進数の色コードが更新されます。

    どちらの方法でも色が選択されます。

  4. ダイアログ ボックスの外側をクリックします。

    ダイアログ ボックスが閉じます。

色ホイールとスライダを使用することにより、色が設定されました。

高度なオプションが表示され、青色が選択されている色ダイアログ

Color wheel.

画像の追加

ロゴなどの画像をシート タイトルに追加することができます。 次の形式がサポートされています。pngjpgjpeg、およびgif

次の手順を実行します。

  1. [画像] の横の画像プレースホルダをクリックします。

    [メディア ライブラリ] が開きます。

  2. メディア ライブラリ内の [アプリ内] や [デフォルト] といったフォルダーをクリックします。
  3. シート タイトルに追加する画像を選択します。

    画像のプレビューが表示されます。

  4. [挿入] をクリックします。

    画像が追加されます。

  5. 、またはをクリックして、左、中央、または右に画像を配置します。

これで、画像がシート タイトルに追加され、配置が選択されました。