サポートコンソール開発者トライアルの開始お問い合わせ

第7章 動的プラグイン

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

7.1.1. 動的プラグインについて

動的プラグインは実行時にリモートのソースからロードされ、解釈されます。動的プラグインをコンソールに提供して公開する 1 つの方法は、OLM Operator を使用することです。OLM Operator は、プラグインをホストする HTTP サーバーを備えたプラットフォーム上にデプロイメントを作成し、Kubernetes サービスを使用してそれを公開します。

動的プラグインを使用すると、実行時にカスタムページやその他の拡張機能をコンソールユーザーインターフェイスに追加できます。ConsolePlugin カスタムリソースはコンソールにプラグインを登録し、クラスター管理者はコンソールの Operator 設定でプラグインを有効にします。

7.1.2. 主な特長

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

  • カスタムページの追加。
  • 管理者と開発者を超えたパースペクティブを追加します。
  • ナビゲーション項目の追加。
  • リソースページへのタブおよびアクションの追加。

7.1.3. 全般的なガイドライン

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

  • プラグインをビルドして実行するには、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 ではなく、変更される可能性があります。これらを使用すると、プラグインが破損する可能性があります。プラグインコンポーネント外のマークアップに影響を与える可能性のある要素セレクターなどのセレクターを回避します。
  • プラグイン Web サーバーが提供するすべてのアセットの Content-Type 応答ヘッダーを使用して、有効な JavaScript Multipurpose Internet Mail Extension (MIME) タイプを指定します。各プラグインデプロイメントには、そのプラグインの生成済みアセットをホストする Web サーバーが含まれている必要があります。
  • Webpack バージョン 5 以降を使用して、Webpack でプラグインをビルドします。
  • 競合を避けるために、CSS クラス名の前にプラグイン名を付けます。例: my-plugin__heading および my-plugin_\_icon
  • 他のコンソールページと一貫性のある外観、操作性、動作を維持します。
  • 要素セレクターなど、プラグインコンポーネント外部のマークアップに影響を与える可能性のあるセレクターは避けてください。これらは API ではなく、変更される可能性があります。
  • プラグイン Web サーバーによって提供されるすべてのアセットに対して、Content-Type 応答ヘッダーを使用して有効な JavaScript Multipurpose Internet Mail Extension (MIME) タイプを指定する必要があります。各プラグインデプロイメントには、そのプラグインの生成済みアセットをホストする Web サーバーが含まれている必要があります。

PatternFly ガイドライン

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

  • PatternFly コンポーネンツと PatternFly CSS 変数を使用します。コア PatternFly コンポーネントは SDK から利用できます。PatternFly コンポーネントと変数を使用すると、今後のコンソールバージョンでプラグインが一貫しているように見えます。

    • OpenShift Container Platform バージョン 4.14 以前を使用している場合は、Patternfly 4.x を使用します。
    • OpenShift Container Platform 4.15 以降を使用している場合は、Patternfly 5.x を使用します。
  • PatternFly’s accessibility fundamentals に従って、プラグインにアクセスできるようにします。
  • Bootstrap や Tailwind などの他の CSS ライブラリーは使用しないでください。これらは PatternFly と競合し、コンソールの他の部分とマッチしない可能性があります。プラグインには、基本の PatternFly スタイルに加え、評価対象のユーザーインターフェイスに固有のスタイルのみを含めます。@patternfly/react-styles/*/.css などのスタイルや @patternfly/patternfly パッケージからのスタイルは、プラグインにインポートしないでください。
  • コンソールアプリケーションは、サポートされているすべての PatternFly バージョンの基本スタイルをロードします。

7.1.3.1. react-i18next でメッセージを翻訳する

この プラグインテンプレート は、react-i18next を使用してメッセージを翻訳する方法を示しています。

前提条件

  • プラグインテンプレートをローカルに複製する必要があります。
  • オプション: プラグインをローカルでテストするには、コンテナー内で OpenShift Container Platform Web コンソールを実行します。Docker または Podman 3.2.0 以降を使用できます。

手順

  1. 名前の競合を避けるために、名前の前に plugin__ を付けます。このプラグインテンプレートは、デフォルトで plugin__console-plugin-template namespace を使用します。プラグインの名前 (例: plugin__my-plugin) を変更する場合は更新する必要があります。たとえば、useTranslation フックを使用できます。 

    conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};
    重要

    i18n namespace を ConsolePlugin リソースの名前と一致させる必要があります。

  2. 必要な動作に応じて spec.i18n.loadType フィールドを設定します。

    例7.1 plugin__console-demo-plugin

    spec:
  backend:
    service:
      basePath: /
      name: console-demo-plugin
      namespace: console-demo-plugin
      port: 9001
    type: Service
  displayName: OpenShift Console Demo Plugin
  i18n:
    loadType: Preload 1
    1
    ロード中、動的プラグインの後に、i18n namespace からプラグインのすべてのローカリゼーションリソースを読み込みます。

  3. console-extensions.json 内のラベルに %plugin__console-plugin-template~My Label% という形式を使用します。コンソールは、値を plugin__console-plugin-template namespace の現在の言語のメッセージに置き換えます。以下に例を示します。 

      {
    "type": "console.navigation/section",
    "properties": {
      "id": "admin-demo-section",
      "perspective": "admin",
      "name": "%plugin__console-plugin-template~Plugin Template%"
    }
  }

  4. i18next-parser の TypeScript ファイルにコメントを追加して、console-extensions.json からのメッセージをメッセージカタログに追加します。以下に例を示します。 

    // t('plugin__console-demo-plugin~Demo Plugin')

  5. メッセージを追加または変更するときにプラグインテンプレートの locales フォルダー内の JSON ファイルを更新するために、次のコマンドを実行します。 

    $ yarn i18n
Red Hat logoGithubRedditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

© 2024 Red Hat, Inc.