第7章動的プラグイン

7.1. 動的プラグインの概要

動的プラグインを使用すると、実行時にカスタムページおよびその他のエクステンションをインターフェイスに追加できます。ConsolePlugin カスタムリソースはコンソールと共にプラグインを登録し、クラスター管理者は console-operator 設定でプラグインを有効にします。

動的プラグインを使用すると、以下のカスタマイズを OpenShift Container Platform エクスペリエンスに設定することができます。

プラグインの作成時には、以下の一般的なガイドラインに従ってください。

プラグインをビルドして実行するには、Node.js と yarn が必要です。
CSS クラス名の前にプラグイン名を付けて、競合を回避します。例: my-plugin__heading および my-plugin_\_icon
他のコンソールページとの一貫したルック、フィール、および動作を維持します。
プラグインの作成時には、react-i18next のローカリゼーションガイドラインに従ってください。以下の例のように useTranslation フックを使用できます。
```
conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};
```
要素セレクターなど、プラグインコンポーネント外のマークアップに影響を与える可能性のあるセレクターは避けてください。これらは API ではなく、変更される可能性があります。これらを使用すると、プラグインが破損する可能性があります。プラグインコンポーネント外のマークアップに影響を与える可能性のある要素セレクターなどのセレクターを回避します。

プラグインを作成する場合は、PatternFly の使用に関する以下のガイドラインに従ってください。

PatternFly コンポーネンツと PatternFly CSS 変数を使用します。コア PatternFly コンポーネントは SDK から利用できます。Pattern Fly コンポーネントと変数を使用すると、将来のコンソールバージョンでプラグインが一貫しているように見えます。
PatternFly’s accessibility fundamentals に従って、プラグインにアクセスできるようにします。
Bootstrap や Tailwind などの他の CSS ライブラリーは使用しないでください。これらは、PatternFly と競合する可能性があり、コンソールのルックアンドフィールとは一致しません。