スタイルを設定して適用する

Slate は Palantir のオープンソースフレームワークである Blueprint を基盤として構築されており、ほかの Web サイトと同様に、CSS を使用して DOM にスタイルを適用します。これにより、ウィジェットの外観と操作感が統一され、「ダークモード」への切り替え機能も組み込まれています。これらは「スキン」や「テンプレート」ではなく、各 Slate ウィジェットに組み込まれたものです。

つまり、アプリケーションの設計で特定の UI が必要な場合、開発作業の中心は、新しいルールを定義するスタイルのオーバーライドを用意することになります。これには複雑さが伴います。Slate のデフォルトスタイルがどこに適用されているかを理解したうえで、それをオーバーライドするために適切な詳細度を持つ CSS セレクターを作成する必要があるためです。

アプリのスタイルを開発する際に最も頼りになるのは、Chrome デベロッパーツール、特に「インスペクター」です。これを使うと、Web ページの任意の要素について、レンダリングされた HTML と CSS を表示できます。右クリック →「検証」で、クリックした要素が強調表示された状態でインスペクターが開きます。これは、どの要素にどのクラスが適用されているか、ひいてはどのクラスを拡張または上書きする必要があるかを特定するうえで重要です。

厳密には、Slate アプリ内で記述する CSS は、Less ↗ と呼ばれるプリコンパイラー用の派生言語です。Less は、冗長な CSS を簡潔にする構文を提供し、読みやすさを維持しながら複雑なスタイルを記述するための強力なツールです。ページの読み込み時に、すべての LESS が CSS にコンパイルされるため、LESS の機能を活用している場合、レンダリングされたページを検証すると記述内容との違いが見られることがあります。一般的なパターンや便利な機能の詳細については、LESS のドキュメントを参照してください。

ウィジェットのスタイル

各ウィジェットの表示設定にあるスタイル入力領域で、ウィジェットレベルのスタイルやクラスを定義できます。これらのスタイルは、選択したウィジェットでのみ利用可能です。ウィジェットがコンテナの場合は、その配下にネストされたすべての子要素でもスタイルを利用できます。

ウィジェット内に記述したスタイルは、1か所にまとめて保存したスタイルと比べて、管理や把握が難しくなることがあります。大規模なプロジェクトでは、個々のウィジェットにスタイルを記述することは避け、代わりにスタイルパネルで管理することを推奨します。

スタイルシート

最も整理しやすいパターンは、スタイルパネルで新しいクラスを定義し、追加クラス設定を使って個々のウィジェットに適用する方法です。より複雑なスタイルに対応するため、2種類のスタイルシートを利用できます。

ローカルスタイルシート

ローカルスタイルシートでは、アプリケーションレベルのスタイルとクラスを定義します。各 Slate アプリケーションにはローカルスタイルシートが必ず1個あり、アプリケーション全体から参照できます。

Blueprint のスタイル

Slate は、Palantir が作成したオープンソースフレームワークである Blueprint ↗ のスタイルを使用しています。

アプリケーションで多くの Blueprint のクラスやアイコンを使用して、一般的な UI 要素を HTML で作成できます。これにより、アプリケーションの外観をプラットフォームのほかの部分により自然に揃え、プロフェッショナルで本番環境にふさわしい外観と操作感を実現できます。

色

Blueprint は、WCAG 2.0 への準拠（アクセシブルなアプリケーション設計）を考慮して選ばれた、コアおよび拡張色名 ↗を提供しています。

これらは、LESS 変数を使用して Slate のスタイルから直接参照できます。

コンポーネント

Blueprint には、動的なユーザーインタラクション要素の作成や、アプリケーションの仕上がりを向上させるのに役立つコンポーネントが多数あります。ボタン ↗、進行状況バー ↗、タグ ↗などがその例です。

これらを Slate で使用するには、各コンポーネントの（JavaScript API ではなく）CSS API セクションを確認し、該当する pt-x クラスと HTML 要素を使って Slate で同様のコンポーネントを作成できるかどうかを把握します。

アイコン

Blueprint には、アプリケーションにバッジとして、あるいは小さな UI 要素として簡単に組み込める、豊富なアイコン ↗も含まれています。

Blueprint のアイコンを参照する方法は、バージョンによって異なります。Blueprint のアイコンを参照するには、使用しているバージョンの Icon CSS API の手順に従ってください。

たとえば、Blueprint v6 では、次のようにアイコンを参照します。

Copied!
1
<span class="bp6-icon-standard bp6-icon-clean"></span>

動的スタイルのパターン

Slate のスタイルはページの読み込み時に決定する必要があるため、すべての CSS スタイルは静的でなければなりません。つまり、たとえば、ウィジェットの色やその他のプロパティを変更するために、CSS クラス内に Handlebars の文を記述することはできません。ただし、動的なスタイル設定を実現するためのパターンはいくつかあります。

動的な「追加クラス」

クラスをその場で_生成_したり_変更_したりすることはできませんが、Handlebars を使用して各ウィジェットの追加クラス設定をテンプレート化できます。一般的なパターンは、さまざまなクラスを事前に定義し、関数を使って特定の状況でどのクラスを適用するかを判断する方法です。状態を持つ大規模なアプリケーションを構築する場合（上記のセクションを参照）は、どの条件でも、すべてのウィジェットに適用する適切なクラスをまとめて判断する共通の関数を用意するとよいでしょう。その関数から、ウィジェットと適用する適切なクラスとの、より複雑なマップを返すことができます。

この方法により、色やアイコン、その他の表示プロパティを変更して応答するアプリや、ウィジェット全体を表示または非表示にすることで自身のサイズまで変更するアプリを簡単に構築できます。このパターンの詳細については、上記の「レスポンシブレイアウト」セクションを参照してください。

Style 属性

アプリケーションの CSS は事前にコンパイルする必要がありますが、HTML ウィジェットの style プロパティは Handlebars を使用してテンプレート化できます。これは、HTML ウィジェット、またはセルに表示する HTML を指定するテーブルにのみ適用されます。このような場合は、CSS を動的に生成して、その要素の style 属性 ↗に設定できます。

ダークモードの読み込み画面

初回のページ読み込み時には、通常、暗いサイドバーと、読み込み中の白い画面が表示されます。画面全体を暗い配色で読み込むには、クエリパラメーター ?$theme=dark を使用します。これにより、サイドバーに揃えたダークテーマでページ全体が読み込まれます。

これは1回限りの読み込みに適用され、クエリパラメーターを追加しない限り、ページを再読み込みしても保持されません。また、Slate アプリケーションの読み込みが開始してからのみ適用され、ブラウザーがまだアプリケーションへのルーティングを行っている間は適用されません。

カスタムフォント

Slate はカスタムフォントの使用をサポートしており、アプリケーションの外観を組織に合わせてさらに調整できます。カスタムフォントを使用するには、まずフォントを otf ファイルとして Foundry にアップロードする必要があります。アップロード後は、スタイルシートからフォントをインポートし、フォントファイルの RID を使用してフォントファミリーに割り当てることができます。

Copied!
1
2
3
4
5
@font-face {
    font-family: alliance1;
    src: url("https://<FOUNDRY_URL>/blobster/api/salt/ri.blobster.main.blob.<RID>")
        format("opentype");
}