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

Red Hat Developer Hub のカスタマイズ

Red Hat Developer Hub 1.7

テンプレート、Learning Paths、Tech Radar、Home ページ、クイックアクセスカードなど、Red Hat Developer Hub の外観と機能をカスタマイズします。

Red Hat Customer Content Services

概要

承認されたユーザーは、テンプレート、Learning Paths、Tech Radar、Home ページ、クイックアクセスカードなど、Red Hat Developer Hub (RHDH) の外観と機能をカスタマイズできます。

はじめに
リンクのコピー

承認されたユーザーは、テンプレート、Learning Paths、Tech Radar、Home ページ、クイックアクセスカードなど、Red Hat Developer Hub (RHDH) の外観と機能をカスタマイズできます。

第1章 Red Hat Developer Hub のタイトルのカスタマイズ
リンクのコピー

デフォルトの Red Hat Developer Hub 表示名を変更できます。

前提条件

手順

  • カスタム app-config.yaml ファイルに、<Red Hat Developer Hub> などの Developer Hub インスタンスの表示名を入力します。

    app-config.yaml の抜粋

    app:
  title: My custom Red Hat Developer Hub title
    Copy to Clipboard Toggle word wrap

第3章 Red Hat Developer Hub バックエンドシークレットのカスタマイズ
リンクのコピー

デフォルトの Red Hat Developer Hub 設定では、サービス間認証用の Developer Hub バックエンドシークレットを定義します。

カスタム Developer Hub バックエンドシークレットを定義できます。

前提条件

手順

  1. Developer Hub のバックエンドシークレットを定義するには、カスタムの <my_product_secrets>.txt ファイルに、base64 でエンコードされた文字列を含む BACKEND_SECRET 環境変数を追加します。各 Developer Hub インスタンスに一意の値を使用します。 

    $ echo > <my_product_secrets>.txt "BACKEND_SECRET=$(node -p 'require("crypto").randomBytes(24).toString("base64")')"
    Copy to Clipboard Toggle word wrap

    <my_product_secrets>.txt の例

    BACKEND_SECRET=3E2/rIPuZNFCtYHoxVP8wjriffnN1q/z
    Copy to Clipboard Toggle word wrap

  2. カスタム app-config.yaml ファイルにバックエンドシークレットを追加します。

    バックエンドシークレットを定義する app-config.yaml の抜粋

    backend:
  auth:
    externalAccess:
      - type: legacy
        options:
          subject: legacy-default-config
          secret: "${BACKEND_SECRET}"
    Copy to Clipboard Toggle word wrap

第4章 Software Template について
リンクのコピー

Red Hat Developer Hub の Software Template は、ソフトウェアコンポーネントを効率的に作成し、Git などのさまざまなバージョン管理リポジトリーに公開する方法を提供します。プラットフォームエンジニアは、Red Hat Developer Hub で Software Template を作成および管理します。

Software Template を設定してソフトウェアコンポーネントを作成し、これらのコンポーネントを Git リポジトリーに公開できます。コンポーネントが Git リポジトリーに公開されたら、これらのコンポーネントをソフトウェアカタログに登録します。

テンプレートは、YAML ファイルで定義されたさまざまな UI フィールドで構成されるフォームです。テンプレートには、actions が含まれます。これは順番に実行されるステップで、条件付きで実行することもできます。

4.1. Template Editor を使用して Software Template を作成する
リンクのコピー

Red Hat Developer Hub Template Editor を使用して Software Template を作成します。

または、Template Editor を使用して、次のいずれかのアクションを実行することもできます。

  • File > Open template directory
  • File > Create template directory
  • File > Close template editor
  • Custom Fields Explorer ボタンを使用して、templates.yaml ファイル内のカスタムフィールドをテストする
  • Installed Actions Documentation を表示する

手順

Template Editor のテンプレートを使用して Software Template を作成するには、次の手順を実行します。

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog > Self-service をクリックします。または、Self-service ページに移動するには、ヘッダーメニューで (+) アイコンをクリックします。

  2. More options アイコンをクリックし、Manage Templates を選択します。

    テンプレートエディター
    View larger image
    テンプレートエディター
    注記

    • Managed Templates ページの次のオプションでは、Red Hat Developer Hub インスタンスにソフトウェアコンポーネントは作成されません。

      • Template Form Playground: templates.yaml ファイルの作成とテストに使用します。
      • Custom Field Explorer: カスタムフィールドをテストするために使用します。

  3. Managed Templates ページで、次のいずれかのオプションを選択します。

    • Load Template Directory: 既存の templates.yaml ファイルをロードするために使用します。

      • ローカルファイルマネージャーで、templates.yaml ファイルが保存されているフォルダーに移動し、Select をクリックします。

    • Create New Template: templates.yaml ファイルを作成するために使用します。

      1. ローカルファイルマネージャーで、Template Editor で templates.yaml ファイルを作成するフォルダーに移動し、Select をクリックします。
      2. Template Editor ページで、templates.yaml ファイルを選択します。

      3. (オプション) テンプレートの仕様をプレビューしてテストできます。

        1. Fill in some steps タブで、必須フィールドにテキストを入力し、Next をクリックします。
        2. Repository Location タブで、必須フィールドにテキストを入力し、Review をクリックします。
        3. テンプレートのパラメーターの YAML 定義を変更します。これらのパラメーターの詳細は、「YAML ファイルとして Software Template を作成する」 を参照してください。
        4. 入力した情報が正確であることを確認してから、Create をクリックします。
      4. Software Template が作成されたら、RHDH インスタンスに Software Template をインポートします。

検証

  1. ナビゲーションパネルの Catalog タブをクリックします。
  2. Kind ドロップダウンメニューで、Template を選択します。
  3. テンプレートが既存のテンプレートのリストに表示されていることを確認します。

次のステップ

4.2. YAML ファイルとして Software Template を作成する
リンクのコピー

Template オブジェクトを YAML ファイルとして定義することで、Software Template を作成できます。

Template オブジェクトは、Software Template とそのメタデータを記述します。また、必要な入力変数と、スキャフォールディングサービスによって実行されるアクションのリストも含まれています。

Template オブジェクトの例

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: template-name
1 

  title: Example template
2 

  description: An example template for v1beta3 scaffolder.
3 

spec:
  owner: backstage/techdocs-core
4 

  type: service
5 

  parameters:
6 

    - title: Fill in some steps
      required:
        - name
      properties:
        name:
          title: Name
          type: string
          description: Unique name of the component
        owner:
          title: Owner
          type: string
          description: Owner of the component
    - title: Choose a location
      required:
        - repoUrl
      properties:
        repoUrl:
          title: Repository Location
          type: string
  steps:
7 

    - id: fetch-base
      name: Fetch Base
      action: fetch:template
      # ...
  output:
8 

    links:
      - title: Repository
9 

        url: ${{ steps['publish'].output.remoteUrl }}
      - title: Open in catalog
10 

        icon: catalog
        entityRef: ${{ steps['register'].output.entityRef }}
# ...
Copy to Clipboard Toggle word wrap

1
Software Template の名前を指定します。
2
Software Template のタイトルを指定します。これは、Self-service ビューの Software Template タイルに表示されるタイトルです。
3
Software Template の説明を指定します。これは、Self-service ビューの Software Template タイルに表示される説明です。
4
Software Template の所有権を指定します。owner フィールドには、システムまたは組織内で Software Template の管理または監視を行うユーザーに関する情報が提供されます。上記の例では、owner フィールドは backstage/techdocs-core に設定されています。これは、この Software Template が、backstage namespace の techdocs-core プロジェクトに属していることを意味します。
5
コンポーネントタイプを指定します。この必須フィールドには任意の文字列値を指定できますが、組織でこれらに対して適切な分類を確立する必要があります。Red Hat Developer Hub インスタンスはこのフィールドを読み取り、その値に応じて異なる動作をする場合があります。たとえば、website タイプのコンポーネントは、Web サイト専用のツールを Red Hat Developer Hub インターフェイスに表示する場合があります。

このフィールドに共通する値は次のとおりです。

service
通常 API を公開するバックエンドサービス。
website
Web サイト
library
npm モジュールや Java ライブラリーなどのソフトウェアライブラリー。
6
parameters セクションを使用して、ユーザーが Red Hat Developer Hub コンソールで Software Template を使用してコンポーネントを作成する際に、フォームビューに表示されるユーザー入力のパラメーターを指定します。タイトルとプロパティーによって定義される各 parameters サブセクションにより、その定義を含む新しいフォームページが作成されます。
7
バックエンドで実行されるステップを指定するには、steps セクションを使用します。これらのステップは、一意のステップ ID、名前、およびアクションを使用して定義する必要があります。https://<rhdh_url>/create/actions URL にアクセスすると、Red Hat Developer Hub インスタンスで利用可能なアクションを表示できます。
8
output セクションを使用して、テンプレートの使用時に作成される出力データの構造を指定します。output セクション、特に links サブセクションには、テンプレートから作成されたコンポーネントにアクセスして操作するためにユーザーが利用できる貴重な参照と URL が提供されます。
9
生成されたコンポーネントに関連付けられたリポジトリーへの参照または URL を提供します。
10
さまざまなコンポーネントが表示されているカタログまたはディレクトリーで、生成されたコンポーネントを表示できるようにする参照または URL を提供します。

4.3. Software Template を使用して新しいソフトウェアコンポーネントを作成する
リンクのコピー

プラットフォームエンジニアが作成した標準 Software Template を使用して、新しいソフトウェアコンポーネントを作成できます。スキャフォールディングプロセスは、Red Hat Developer Hub インスタンスで実行されます。

手順

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog > Self-service をクリックします。
  2. Self-service ページで、Templates タイルの Choose をクリックして、テンプレートのスキャフォールディングプロセスを開始します。

  3. ウィザードの指示に従って、必要な詳細を入力します。パラメーターは、事前に定義されたオプションのセットから選択できます。

    • オプション: デプロイメント情報 のステップでは、OpenShift AI 用のワークベンチを作成する オプションがあります。

      注記

      この手順は、いくつかのテンプレートに対してのみ使用できます。

  4. Review ステップで、入力したパラメーターを確認し、Create をクリックします。

    注記
    • 現在のステップで中止がサポートされている場合のみ、テンプレートの実行ステップ中に Cancel をクリックしてソフトウェアコンポーネントの作成を中止できます。その後、中止信号がタスクに送信され、後続のステップはいずれも実行されません。
    • ソフトウェアコンポーネントの作成中に、Show Logs をクリックしてログ情報を表示します。

検証

  • ソフトウェアコンポーネントが正常に作成されなかった場合は、エラーページでログを確認できます。同じテンプレートフォームと以前入力した値を含む Self-service ページに戻るには、Start Over をクリックします。
テンプレートの作成に失敗しました
View larger image
テンプレートの作成に失敗しました

  • Software Template が正常に作成されると、次のイメージの例のような作成完了ページが表示されます。

    template-creation-successful
    View larger image
    template-creation-successful

4.4. Red Hat Developer Hub インスタンスでの Software Template の検索とフィルタリング
リンクのコピー

新しいソフトウェアコンポーネントを作成するために使用する Software Template を検索およびフィルタリングできます。

手順

Software Template を検索およびフィルタリングするには、次の手順を実行します。

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog > Self-service をクリックします。

  2. 探しているテンプレートの名前を Search ボックスに入力します。

    • 特定のカテゴリーのテンプレートを探している場合は、Categories ドロップダウンを使用できます。

4.5. 既存の Software Template を Red Hat Developer Hub にインポートする
リンクのコピー

Catalog Processor を使用して、既存の Software Template を Red Hat Developer Hub インスタンスに追加できます。

前提条件

  • 少なくとも 1 つのテンプレート YAML ファイルを含むディレクトリーまたはリポジトリーを作成した。
  • オプション: GitHub リポジトリーに保存されているテンプレートを使用するために、Developer Hub と GitHub の統合 を設定した。

手順

  • app-config.yaml 設定ファイルで、catalog.rules セクションを変更して Software Template のルールを含め、追加する Software Template を参照するように catalog.locations セクションを設定します (次の例を参照)。 

    # ...
catalog:
  rules:
    - allow: [Template]
    1 
    
  locations:
    - type: url
    2 
    
      target: https://<repository_url>/example-template.yaml
    3 
    
# ...
    Copy to Clipboard Toggle word wrap
    1
    新しい Software Template をカタログに追加できるようにするには、Template ルールを追加する必要があります。
    2
    GitHub や GitLab などのリポジトリーからテンプレートをインポートする場合は、url タイプを使用します。
    3
    テンプレートの URL を指定します。

検証

  1. ナビゲーションパネルの Catalog タブをクリックします。
  2. Kind ドロップダウンメニューで、Template を選択します。
  3. テンプレートが既存のテンプレートのリストに表示されていることを確認します。

4.6. Red Hat Developer Hub での Software Template のバージョン管理
リンクのコピー

プラットフォーム管理者は、scaffolder バックエンドモジュール内の既存のカスタムアクション catalog:scaffolded-from および catalog:template:version を使用して、Software Template のバージョンを管理できます。これらのカスタムアクションを使用すると、scaffolder テンプレートのバージョンと、そこから作成された対応するバージョンのエンティティーを追跡できるため、ライフサイクル管理が強化されます。

前提条件

  • Red Hat Developer Hub に対する管理者権限を持っている。

手順

Software Template の yaml ファイルにバージョン管理を追加するには、次の手順を実行します。

  1. 更新する必要がある Software Template を変更します。

  2. 次のタスクのうち、どちらか一方または両方を完了します。

    • テンプレートに backstage.io/template-version アノテーションを含めます。このアノテーションがテンプレート内に存在する場合、このアノテーションはカタログエンティティーにアノテーションを付けるために自動的に使用され、デフォルトのバージョン値が表示されます。
    • backstage.io/template-version アノテーションをアクションへの入力として渡します。この方式は、テンプレート自体のアノテーションよりも優先されます。この方式を使用すると、テンプレートを実行するユーザーが生成するバージョンを指定できます。 
    # ...
- id: version-templateRef
  name: Append the version of this template to the entityRef
  action: catalog:template:version
  input:
    annotations:
      backstage.io/template-version: ${{ parameters.version }}
# ...
    Copy to Clipboard Toggle word wrap

検証

  1. 更新した Software Template を使用してカタログコンポーネントを作成します。このステップでは、Backstage に新しいコンポーネントを作成し、必要に応じてファイルを外部リポジトリー (GitHub、GitLab など) にプッシュします。

  2. Catalog UI でコンポーネントを確認します。

    1. Catalog ページで、新しく作成したカタログコンポーネントを見つけます。
    2. エンティティーに backstage.io/template-version アノテーションが存在することを確認します。INSPECT ENTITY を使用して、YAML Raw または JSON Raw ビューを選択すると、コンポーネント定義内のアノテーションを確認できます。

  3. カタログコンポーネントを公開している場合のみ: リポジトリー内のコンポーネントファイルを確認します。

    1. UI に VIEW SOURCE が表示される場合: VIEW SOURCE をクリックして、リポジトリーに保存されているコンポーネントファイルを開きます。
    2. ファイルを手動で見つけて、backstage.io/template-version アノテーションが存在することを確認します。

第5章 ソフトウェアカタログについて
リンクのコピー

Red Hat Developer Hub ソフトウェアカタログは、サービス、Web サイト、ライブラリー、データパイプラインなど、エコシステム全体のすべてのソフトウェアを可視化する集中型システムです。これを使用すると、各コンポーネントの所有権の詳細とメタデータを 1 カ所で表示できます。

ソフトウェアカタログ内のコンポーネントのメタデータは、バージョン管理システム内のコードと一緒に存在する YAML ファイルとして保存されます。バージョン管理リポジトリーには、1 つまたは複数のメタデータファイルを含めることができます。ソフトウェアカタログは項目をエンティティーとして整理します。エンティティーには、Components、Resources、APIs、およびその他の関連タイプが含まれます。各エンティティーには、関連付けられたメタデータが含まれます。たとえば、所有者、タイプ、その他の関連情報などです。

コードと一緒に YAML ファイルにメタデータを保存することで、Red Hat Developer Hub は、明確で視覚的なインターフェイスを通じてこの情報を処理および表示できるようになります。ソフトウェアカタログを使用すると、ソフトウェアを管理および保守し、エコシステムで利用可能なすべてのソフトウェアを把握し、サービスとツールの所有権を取得できます。

コンポーネントの Overview ページには、ソースコード、ドキュメント、依存関係、所有権の詳細へのリンクなどの重要な情報が提供されます。特定のニーズに合わせて、プラグインを使用してこのページをカスタマイズできます。

5.1. Red Hat Developer Hub インスタンスに新しいコンポーネントを追加する
リンクのコピー

前提条件

  • Red Hat Developer Hub インスタンスをインストールして設定した。
  • 必要な権限がある。Red Hat Developer Hub での認可 を参照してください。

手順

次の方法を使用して、RHDH インスタンスにコンポーネントを追加できます。

  • 必要な権限を持った状態で、GUI または app-config.yaml を使用してコンポーネントを手動で登録します。
  • Software Template を使用して新しいコンポーネントを作成します。
  • 必要な権限を持った状態で一括インポートプラグインを使用します。詳細は、GitHub リポジトリーの一括インポート を参照してください。

5.1.1. Red Hat Developer Hub インスタンスに新しいコンポーネントを作成する
リンクのコピー

RHDH インスタンスのソフトウェアカタログに新しいコンポーネントを作成できます。Red Hat Developer Hub は、開発者またはプラットフォームエンジニアがテンプレートを使用して作成したすべてのコンポーネントをソフトウェアカタログに自動的に登録します。

前提条件

  • Red Hat Developer Hub インスタンスをインストールして設定した。
  • 必要な権限がある。Red Hat Developer Hub での認可 を参照してください。

手順

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog をクリックします。
  2. Catalog ページで、Self-service をクリックします。

5.1.2. RHDH インスタンスにコンポーネントを手動で登録する
リンクのコピー

RHDH インスタンスにコンポーネントを手動で登録するには、catalog-info.yaml ファイルを作成し、Red Hat Developer Hub インスタンスに登録します。catalog-info.yaml ファイルには、ソフトウェアコンポーネントに登録するメタデータが含まれています。

前提条件

  • Red Hat Developer Hub インスタンスをインストールして設定した。
  • 必要な権限がある。Red Hat Developer Hub での認可 を参照してください。

手順

  1. ソフトウェアプロジェクトの root ディレクトリーに、catalog-info.yaml という名前のファイルを作成します。 

    apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
    name: _<your_software_component>_
    description: _<software_component_brief_description>_
    tags:
         - example
         - service
    annotations:
         github.com/project-slug: _<repo_link_of_your_component_to_register>_
spec:
    type: _<your_service>_
    owner: _<your_team_name>_
    lifecycle: _<your_lifecycle>_
    Copy to Clipboard Toggle word wrap
  2. catalog-info.yaml ファイルをプロジェクトソースコードリポジトリーの root にコミットします。
  3. Red Hat Developer Hub のナビゲーションメニューで、Catalog > Self-service に移動します。
  4. Self-service ページで、Register Existing Component をクリックします。
  5. Register an existing component ページで、リポジトリー内の catalog-info.yaml ファイルの完全な URL を入力します。例: Artist lookup component.
  6. ウィザードの指示を完了します。

検証

  • ソフトウェアコンポーネントは、ソフトウェアカタログにリストされます。詳細を表示して、すべてのメタデータが正確であることを確認できます。

5.2. Red Hat Developer Hub インスタンスのソフトウェアカタログ内のコンポーネントを更新する
リンクのコピー

Red Hat Developer Hub インスタンスのソフトウェアカタログ内でコンポーネントを更新できます。

前提条件

  • Red Hat Developer Hub インスタンスをインストールして設定した。
  • 必要な権限がある。Red Hat Developer Hub での認可 を参照してください。

手順

Red Hat Developer Hub インスタンスのソフトウェアカタログ内でコンポーネントを更新するには、次の手順を実行します。

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog をクリックします。

  2. 編集するソフトウェアコンポーネントを見つけて、Actions の下の Edit アイコンをクリックします。

    注記

    このアクションにより、GitHub 上の YAML ファイルにリダイレクトされます。

  3. リモートリポジトリー UI で、YAML ファイルを更新します。

    注記

    変更をマージすると、しばらくするとソフトウェアカタログの更新されたメタデータが表示されます。

5.3. ソフトウェアカタログの検索とフィルタリング
リンクのコピー

ソフトウェアカタログは、Kind または Filter フィールドを使用して検索およびフィルタリングできます。

5.3.1. Kind によるソフトウェアカタログの検索とフィルタリング
リンクのコピー

ソフトウェアカタログを Kind 別にフィルタリングするには、次の手順を実行します。

手順

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog をクリックします。
  2. Catalog ページで、Kind ドロップダウンリストをクリックします。

  3. フィルタリングする Kind のタイプを選択します。

    注記

    利用可能なフィルタードロップダウンは、選択した Kind によって異なり、特定のエンティティータイプに関連するオプションが表示されます。

5.3.2. Filter フィールドを使用したソフトウェアカタログの検索とフィルタリング
リンクのコピー

Filter フィールドを使用してソフトウェアカタログをフィルタリングするには、次の手順を実行します。

手順

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog をクリックします。
  2. Search ボックスに、コンポーネントをフィルタリングするために使用するテキストを入力します。

5.4. Red Hat Developer Hub インスタンスでソフトウェアカタログ YAML ファイルを表示する
リンクのコピー

Red Hat Developer Hub インスタンスでソフトウェアカタログ YAML ファイルを表示できます。YAML ファイルには、ソフトウェアカタログ内のコンポーネントのメタデータが表示されます。

手順

Red Hat Developer Hub インスタンスでソフトウェアカタログ YAML ファイルを表示するには、次の手順を実行します。

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog をクリックします。

  2. 表示するソフトウェアコンポーネントを見つけて、Actions の下の View アイコンをクリックします。

    注記

    これらの手順により、リモートリポジトリー上の YAML ファイルにリダイレクトされます。

5.5. ソフトウェアカタログのコンポーネントのスター付け
リンクのコピー

Add to favorites アイコンを使用すると、定期的にアクセスするソフトウェアカタログを Starred カテゴリーに追加できます。

手順

定期的にアクセスするソフトウェアカタログにすばやくアクセスするには、次の手順を実行します。

  1. Red Hat Developer Hub のナビゲーションメニューで、Catalog をクリックします。
  2. お気に入りとして追加するソフトウェアコンポーネントを見つけて、Actions の下の Add to favorites アイコンをクリックします。

検証

  • スターを付けたコンポーネントは、Home ページの Your Starred Entities の下に表示されます。

第6章 Red Hat Developer Hub の Learning Paths のカスタマイズ
リンクのコピー

Red Hat Developer Hub では、必要なデータを外部でホストし、デフォルトではなく組み込みプロキシーを使用してこのデータを配信することで、Learning Paths を設定できます。

Learning Paths データは、次のソースから提供できます。

  • GitHub や GitLab などの Web サーバー上でホストされる JSON ファイル。
  • API を使用して Learning Paths のデータを JSON 形式で提供する専用サービス

6.1. Learning Paths について
リンクのコピー

Red Hat Developer Hub の Learning Paths プラグインを使用して、カスタマイズされた e- ラーニングコンテンツを開発者のワークフローに統合できます。Learning Paths を使用すると、共同ラーニングカルチャーを構築し、生産性を向上させ、チームが関連するベストプラクティスとテクノロジーを常に最新の状態に保つことができます。全体的な目的は、オンボーディングの迅速化、スキルギャップの解消、規制遵守の確保、ベストプラクティスの推進、製品アップデートの促進です。

6.2. ホストされた JSON ファイルを使用して Learning Paths をカスタマイズする
リンクのコピー

使いやすさとシンプルさを実現するために、ホストされた JSON ファイルを使用して Learning Paths を設定できます。

手順

  1. Learning Paths データを含む JSON ファイルを GitHub や Gitlab などの Web サーバーに公開します。サンプルは、https://raw.githubusercontent.com/redhat-developer/rhdh/release-1.7/packages/app/public/learning-paths/data.json を参照してください。

  2. app-config.yaml ファイルに以下を追加して、ホストされている JSON ファイルから Learning Paths データにアクセスするように Developer Hub プロキシーを設定します。 

    proxy:
  endpoints:
    '/developer-hub':
      target: <target>
      pathRewrite:
        '^/api/proxy/developer-hub/learning-paths': '<learning_path.json>'
      changeOrigin: true
      secure: true
    Copy to Clipboard Toggle word wrap
    <target>
    ホストされている JSON ファイルのベース URL (例: https://raw.githubusercontent.com) を入力します。
    <learning_path.json>

    ベース URL なしでホストされている JSON ファイルのパスを入力します (例: '/redhat-developer/rhdh/main/packages/app/public/learning-paths/data.json')。

    ヒント

    Home ページも設定する場合は、learning-path と homepage クイックアクセスプロキシーの両方で重複する pathRewrites を使用するため、learning-paths 設定 (^api/proxy/developer-hub/learning-paths) を作成してから、homepage 設定 (^/api/proxy/developer-hub) を作成します。以下に例を示します。 

    proxy:
  endpoints:
    '/developer-hub':
      target: https://raw.githubusercontent.com/
      pathRewrite:
        '^/api/proxy/developer-hub/learning-paths': '/redhat-developer/rhdh/main/packages/app/public/learning-paths/data.json'
        '^/api/proxy/developer-hub/tech-radar': '/redhat-developer/rhdh/main/packages/app/public/tech-radar/data-default.json'
        '^/api/proxy/developer-hub': '/redhat-developer/rhdh/main/packages/app/public/homepage/data.json'
      changeOrigin: true
      secure: true
    Copy to Clipboard Toggle word wrap

関連情報

6.3. カスタマイズサービスを使用して Learning Paths をカスタマイズする
リンクのコピー

高度なシナリオでは、Red Hat Developer Hub カスタマイズサービスをホストして、Learning Paths などのすべての設定可能な Developer Hub ページにデータを提供できます。ページごとに異なるサービスを使用することもできます。

手順

  1. Developer Hub インスタンスと同じ OpenShift Container Platform クラスターに、Developer Hub カスタマイズサービスをデプロイします。デフォルトの Developer Hub データと同じデータを提供するサンプルは、red-hat-developer-hub-customization-provider を参照してください。カスタマイズサービスは、http://<rhdh-customization-provider>/learning-paths のような Learning Paths データ URL を提供します。

  2. 専用サービスを使用して Learning Path データを提供するように Developer Hub プロキシーを設定するには、app-config.yaml ファイル に以下を追加します。 

    proxy:
  endpoints:
    '/developer-hub/learning-paths':
      target: <learning_path_data_url>
      changeOrigin: true
      qsecure: true
    1
    Copy to Clipboard Toggle word wrap
    1
    自己署名証明書で自己ホステッドクラスターを使用する場合は "false" に変更します。

6.4. Learning Paths でのレッスンの開始と完了
リンクのコピー

開発者は、自分のペースでコースを開始し、レッスンを完了できます。

前提条件

  1. developers.redhat.com にログインできる。
  2. プラットフォームエンジニアから Learning Paths プラグインへのアクセス権を付与されている。

手順

Learning Paths でコースを開始するには、次の手順を実行します。

  1. Red Hat Developer Hub のナビゲーションメニューで、Learning Paths をクリックします。

  2. 開始したいコースのタイルを選択します。

    注記

    このアクションにより、Red Hat Developer サイト のコースのメインページにリダイレクトされます。

第7章 Red Hat Developer Hub のグローバルヘッダーの設定
リンクのコピー

管理者は、Red Hat Developer Hub のグローバルヘッダーを設定して、Developer Hub インスタンス全体で一貫性のある柔軟なナビゲーションバーを作成できます。デフォルトでは、Developer Hub のグローバルヘッダーには次のコンポーネントが含まれています。

  • Self-service ボタンを使用すると、さまざまなテンプレートにすばやくアクセスでき、ユーザーは Developer Hub 内のサービス、バックエンド、フロントエンドのプラグインを効率的にセットアップできます。
  • Support ボタンで、内部または外部のサポートページへのリンクを設定できます。
  • Notifications ボタンで、プラグインや外部サービスからのアラートや更新を表示します。
  • Search 入力フィールドを使用すると、Developer Hub 内のサービス、コンポーネント、ドキュメント、その他のリソースを検索できます。
  • Plugin extension capabilities には、Developer Hub で利用可能なプラグインのプリインストール済みおよび有効化済みのカタログがあります。
  • User profile ドロップダウンメニューから、プロファイル設定、外観のカスタマイズ、Developer Hub のメタデータ、ログアウトボタンにアクセスできます。

7.1. Red Hat Developer Hub のグローバルヘッダーのカスタマイズ
リンクのコピー

red-hat-developer-hub.backstage-plugin-global-header 動的プラグインを使用すると、追加のボタンでグローバルヘッダーを拡張し、アイコンと機能の順序と位置をカスタマイズできます。さらに、この新しいヘッダー機能によって提供されるマウントポイントを使用して、カスタム動的ヘッダープラグインを作成して統合できます。そのため、ニーズに合わせてさらにカスタマイズできます。動的プラグインの有効化の詳細は、Red Hat Developer Hub でのプラグインのインストールと表示 を参照してください。 

  - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
    disabled: false
    pluginConfig:
      app:
        sidebar:
          search: false
          settings: false
      dynamicPlugins:
        frontend:
          default.main-menu-items:
            menuItems:
              default.create:
                title: ''
          red-hat-developer-hub.backstage-plugin-global-header: # the default enabled dynamic header plugin
            mountPoints:
              - mountPoint: application/header
                importName: GlobalHeader
                config:
                  position: above-main-content
1 

              - mountPoint: global.header/component
                importName: SearchComponent
                config:
                  priority: 100
              - mountPoint: global.header/component
                importName: Spacer
                config:
                  priority: 99
                  props:
                    growFactor: 0
              - mountPoint: global.header/component
                importName: HeaderIconButton
                config:
                  priority: 90
                  props:
                    title: Self-service
                    icon: add
                    to: create
              - mountPoint: global.header/component
                importName: SupportButton
                config:
                  priority: 80
              - mountPoint: global.header/component
                importName: NotificationButton
                config:
                  priority: 70
              - mountPoint: global.header/component
                importName: Divider
                config:
                  priority: 50
              - mountPoint: global.header/component
                importName: ProfileDropdown
                config:
                  priority: 10
              - mountPoint: global.header/profile
                importName: MenuItemLink
                config:
                  priority: 100
                  props:
                    title: Settings
                    link: /settings
                    icon: manageAccounts
              - mountPoint: global.header/profile
                importName: LogoutButton
                config:
                  priority: 10
Copy to Clipboard Toggle word wrap

ここでは、以下のようになります。

search
サイドバーメニューの Search モーダルを非表示にします。これを true に変更すると、サイドバーに Search モーダルが表示されます。
settings
サイドバーメニューの Settings ボタンを非表示にします。これを true に変更すると、サイドバーに Settings ボタンが表示されます。
default.main-menu-items
サイドバーメニューから Self-service ボタンを非表示にします。このフィールドを削除すると、サイドバーに Self-service ボタンが表示されます。
position
ヘッダーの位置を定義します。above-main-content または above-sidebar を指定できます。

デフォルトのグローバルヘッダーの機能を拡張するには、グローバルヘッダーのエントリーに次の属性を含めます。

mountPoint
ヘッダーの位置を指定します。ヘッダーをグローバルヘッダーとして指定するには、application/header を使用します。mountPoints フィールドにエントリーを追加することで、異なる位置に複数のグローバルヘッダーを設定できます。
importName

グローバルヘッダープラグインによってエクスポートされるコンポーネントを指定します。

red-hat-developer-hub.backstage-plugin-global-header パッケージ (デフォルトで有効) は、使用可能なマウントポイントの値として次のヘッダーコンポーネントを提供します。

  • SearchComponent: 検索バーを追加します (デフォルトで有効)。
  • Spacer: ヘッダーにスペースを追加して、ボタンを末尾に配置します。SearchComponent を無効にする場合に便利です。
  • HeaderIconButton: アイコンボタンを追加します。デフォルトでは、Self-service アイコンボタンは有効のままになります。
  • SupportButton: Support アイコンボタンを追加します。このボタンを使用すると、内部ページまたは外部ページへのリンクを設定できます。デフォルトで有効になっていますが、表示するには追加の設定が必要です。
  • NotificationButton: 未読通知をリアルタイムで表示し、Notifications ページに移動するための Notifications アイコンボタンを追加します。デフォルトで有効になっています (通知プラグインが必要です)。
  • Divider: 縦の区切り線を追加します。デフォルトでは、プロファイルドロップダウンとその他のヘッダーコンポーネントの間に区切り線が表示されます。
  • ProfileDropdown: ログインしているユーザーの名前を表示するプロファイルドロップダウンを追加します。デフォルトでは、2 つのメニュー項目が含まれています。
  • MenuItemLink: ドロップダウンメニューにリンク項目を追加します。デフォルトでは、プロファイルドロップダウンには Settings ページへのリンクが含まれています。
  • LogoutButton: プロファイルドロップダウンにログアウトボタンを追加します (デフォルトで有効)。
  • CreateDropdown: Self-service ドロップダウンボタンを追加します (デフォルトでは無効)。メニュー項目を設定可能です。
  • SoftwareTemplatesSection: ソフトウェアテンプレートリンクのリストを Self-service ドロップダウンメニューに追加します (デフォルトで無効)。CreateDropdown を有効にする必要があります。
  • RegisterAComponentSection: Self-service ドロップダウンメニューに Register a Component ページへのリンクを追加します (デフォルトでは無効)。CreateDropdown を有効にする必要があります。
config.position
ヘッダーの位置を指定します。サポートされている値は、above-main-content と above-sidebar です。

前提条件

  • ヘッダーに Support ボタンを表示する場合は、app-config.yaml ファイルでサポートの URL を設定する。
  • ヘッダーに Notifications ボタンを表示する場合は、通知プラグインをインストールする。

手順

  1. デフォルト設定をコピーし、ニーズに合わせてフィールド値を変更します。各ヘッダーコンポーネントの priority 値を調整すると、その位置を制御できます。さらに、設定にコンポーネントを追加または削除することで、コンポーネントを有効または無効にできます。残りのヘッダーボタンを、プロファイルドロップダウンボタンの前のヘッダー末尾に揃えるには、Spacer マウントポイントの config.props.growFactor を 1 に設定して、Spacer コンポーネントを有効にします。以下に例を示します。 

    - mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 100
    props:
      growFactor: 1
    Copy to Clipboard Toggle word wrap

  2. カスタムヘッダーを使用するには、プラグイン設定を app-config-dynamic.yaml ファイルに追加して、カスタムヘッダーを動的プラグインとしてインストールする必要があります。以下に例を示します。 

    - package: <npm_or_oci_package-reference>
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        <package_name>:
          mountPoints:
            - mountPoint: application/header
              importName: <application_header_name>
              config:
                position: above-main-content
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 100
            - mountPoint: global.header/component
              importName: <header_component_name>
              config:
                priority: 90
    Copy to Clipboard Toggle word wrap

    ここでは、以下のようになります。

    <npm_or_oci_package-reference>
    パッケージ名を指定します。
    <application_header_name>
    アプリケーションヘッダーの名前を指定します。例: MyHeader
    <header_component_name>

    ヘッダーコンポーネントの名前を指定します。例: MyHeaderComponent

    注記

    importName は、scaffolder フィールド拡張 API によって返される値を参照する名前です (省略可能)。

  3. オプション: グローバルヘッダーを無効にするには、dynamic-plugins.yaml ファイルで、disabled フィールドの値を true に設定します。以下に例を示します。 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-header
  disabled: true
    Copy to Clipboard Toggle word wrap

7.2. 動的プラグイン統合のためのマウントポイント
リンクのコピー

動的プラグインのマウントポイントを使用すると、Developer Hub でアプリケーションヘッダーをカスタマイズできます。このマウントポイントにより、ヘッダー、そのコンポーネント、およびドロップダウンメニューの位置を柔軟に設定できます。次の機能拡張により、エクスペリエンスをカスタマイズできます。

application/header
ヘッダーの位置を制御します。config.position を使用して、配置を above-main-content または above-sidebar のいずれかに設定します。
global.header/component

ヘッダーコンポーネントを設定します。config.priority を使用してコンポーネントの順序を設定し、config.props を介してプロパティー (CSS スタイルを含む) を渡します。

  • Self-service ボタン 

    - mountPoint: global.header/component
  importName: HeaderIconButton
  config:
    priority: 80
    props:
      title: Self-service
      icon: add
      to: create
    Copy to Clipboard Toggle word wrap

  • Spacer 要素 

    - mountPoint: global.header/component
  importName: Spacer
  config:
    priority: 99
    props:
      growFactor: 0
    Copy to Clipboard Toggle word wrap

  • Divider 要素 

    mountPoints:
  - mountPoint: global.header/component
    importName: Divider
    config:
      priority: 150
    Copy to Clipboard Toggle word wrap
global.header/profile

ProfileDropdown コンポーネントが有効な場合に、プロファイルドロップダウンリストを設定します。

  • プロファイルドロップダウンに設定リンクを追加する 

    - mountPoint: global.header/profile
  importName: MenuItemLink
  config:
    priority: 100
    props:
      title: Settings
      link: /settings
      icon: manageAccounts
    Copy to Clipboard Toggle word wrap
global.header/create

CreateDropdown コンポーネントが有効な場合に、作成ドロップダウンリストを設定します。

  • コンポーネントを登録するためのセクションを追加する 

    - mountPoint: global.header/create
  importName: RegisterAComponentSection
  config:
    props:
      growFactor: 0
    Copy to Clipboard Toggle word wrap

7.3. グローバルヘッダーのロゴの設定
リンクのコピー

自社のブランドを反映するために、Red Hat Developer Hub (RHDH) のグローバルヘッダーに会社のロゴを設定できます。CompanyLogo は、デフォルトでグローバルヘッダーに含まれており、テーマ設定、ナビゲーション動作、サイズ設定、フォールバックオプションを完全に制御できます。

このコンポーネントは、設定を通じて提供される次のプロパティーをサポートしています。

  • logo: base64 でエンコードされたロゴ画像。
  • to: ユーザーがロゴをクリックしたときのリダイレクトパスは '/catalog' です。
  • width: ロゴの幅は任意です。デフォルトは 150 ピクセルです。
  • height: ロゴの高さは任意です。デフォルトは 40 ピクセルです。

手順

  1. グローバルヘッダーにカスタムの会社ロゴを表示するには、CompanyLogo のマウントポイントを使用して設定を更新します。

    + 

# ...rest of the global header configuration
red-hat-developer-hub.backstage-plugin-global-header:
  mountPoints:
    - mountPoint: application/header
      importName: GlobalHeader
      config:
        # Supported values: `above-main-content` | `above-sidebar`
        position: above-main-content

    - mountPoint: global.header/component
      importName: CompanyLogo
      config:
        priority: 200
        props:
          # Path to navigate when users click the logo:
          to: '/catalog'
          width: 300
          height: 200
          logo: <string> or <object> # Logo can be a base64 string or theme-specific object
            # Example 1: Single logo for all themes
            # logo: "<base64_encoded_images>"

            # Example 2: Theme-specific logos
            # logo:
                dark: 'data:image/png;base64,...' # Used in dark theme
                light: 'data:image/png;base64,...' # Used in light theme
Copy to Clipboard Toggle word wrap

  1. (オプション) CompanyLogo コンポーネントに logo プロパティーが指定されていない場合、コンポーネントは代わりに app-config.yaml ファイルの app.branding で定義されている値を使用します。CompanyLogo は次のように設定できます。

    + 

app:
  branding:
    fullLogoWidth: 220  # Fallback width
    fullLogo: <string> or <object> #fullLogo can be a base64 string or theme-specific object

    # Example 1: Single logo for all themes
    #fullLogo: "<base64_encoded_image>
    # Example 2: Theme-specific logos
    #fullLogo:
        dark: 'data:image/png;base64,...' # Used in dark theme
        light: 'data:image/png;base64,...' # Used in light theme
Copy to Clipboard Toggle word wrap

+ CompanyLogo は、フォールバックとサイズ設定の動作を制御するために次の設定要素を使用します。

  • ロゴソースの優先順位

    • コンポーネントは、次の順序でロゴソースを選択します。

      CompanyLogo プロパティー (logo、logo.light、logo.dark)、app.branding.fullLogo の順に選択します。どちらにもロゴが指定されていない場合、コンポーネントはデフォルトの Developer Hub テーマ固有のロゴを表示します。

  • ロゴ幅の優先順位

    • コンポーネントは、まず props.width から利用可能な値を適用し、次に app-config.yaml の app.branding.fullLogoWidth を適用します。どちらにも width が指定されていない場合、コンポーネントはデフォルトの幅 (150 ピクセル) を適用します。
注記

CompanyLogo は画像のアスペクト比を維持し、画像を切り取ったり歪めたりすることはありません。幅を設定したことにより、高さが最大許容値 (デフォルト: 40 ピクセル) を超えた場合、画像は自動的に縮小されます。そのため、高さも設定しない限り、幅だけを調整してもロゴの見た目が変わらない可能性があります。

ロゴの height を大きくすると、グローバルヘッダーの高さも大きくなります。コンポーネントはまず props.height の値を適用します。height が指定されていない場合、コンポーネントはデフォルトの高さ (40 ピクセル) を適用します。

検証

  1. ロゴがグローバルヘッダーに正しく表示されます。
  2. ロゴをクリックして、props.to で定義したパスにリダイレクトされることを確認します。
  3. light テーマと dark テーマを切り替えて、それぞれに正しいロゴが読み込まれることを確認します。
  4. (オプション) CompanyLogo プロパティーを一時的に削除して、app.branding.fullLogo へのフォールバックをテストします。

7.4. サイドバーでのロゴの有効化
リンクのコピー

Red Hat Developer Hub (RHDH) のサイドバーにロゴを設定できます。

手順

  1. サイドバーにロゴを表示するには、次の例に示すように、app.sidebar.logo パラメーターの値を true に設定します。 

    app:
  sidebar:
    logo: true
    Copy to Clipboard Toggle word wrap
    注記

    サイドバーにのみロゴを表示するには、設定から CompanyLogo コンポーネントを削除してください。

  2. すべてのテーマのサイドバーに同じロゴを表示するには、次の設定に示すように設定を更新します。 

    app:
  sidebar:
    logo: true
  branding:
    fullLogoWidth: 220
    fullLogo: 'data:image/svg+xml;base64,...'
    Copy to Clipboard Toggle word wrap

  3. テーマ別のロゴを使用するには、次の設定に示すようにサイドバーのロゴを設定できます。 

    app:
  sidebar:
    logo: true
  branding:
    fullLogoWidth: 220
    fullLogo:
      light: 'data:image/svg+xml;base64,...'
      dark: 'data:image/svg+xml;base64,...'
    Copy to Clipboard Toggle word wrap

検証

  1. ロゴがサイドバーに正しく表示されます。
  2. light テーマと dark テーマを切り替えて、それぞれに正しいロゴが読み込まれることを確認します。

7.5. プロファイルドロップダウンに任意のユーザー名を表示する
リンクのコピー

ユーザーエンティティーで spec.profile.displayName を設定することにより、グローバルヘッダーのプロファイルドロップダウンリストに任意のユーザー名を表示できます。設定されていない場合、アプリケーションは metadata.title にフォールバックします。どちらも設定されていない場合は、useProfileInfo フックによって生成されるユーザーフレンドリーな名前がデフォルトで設定されます。

手順

  • spec.profile.displayName を設定するときは、次のコードを使用します。 

    apiVersion: backstage.io/v1alpha1
kind: User
metadata:
  # Required unique username
  name: <my_display_name>
  # Optional preferred title
  title: <display_name_title>
spec:
  profile:
    # Optional preferred display name (highest priority)
    displayName: <my_display_name>
  memberOf: [janus-authors]
    Copy to Clipboard Toggle word wrap

  • spec.profile.displayname を設定せず、metadata.title を設定する場合は、次のコードを使用します。 

    apiVersion: backstage.io/v1alpha1
kind: User
metadata:
  # Required unique username
  name: <my_display_name>
  # Optional preferred title
  title: <display_name_title>
spec:
  memberOf: [janus-authors]
    Copy to Clipboard Toggle word wrap

  • spec.profile.displayname と metadata.title を設定しない場合は、次のコードを使用します。 

    apiVersion: backstage.io/v1alpha1
kind: User
metadata:
  # Required unique username
  name: <my_display_name>
spec:
  memberOf: [janus-authors]
    Copy to Clipboard Toggle word wrap
注記

ユーザーエンティティーを登録しない場合、アプリケーションは metadata.name にフォールバックします。

第8章 Red Hat Developer Hub のフローティングアクションボタンの設定
リンクのコピー

フローティングアクションボタンプラグインを使用すると、Developer Hub インスタンス内の任意のアクションをフローティングボタンとして設定できます。フローティングアクションボタンプラグインは、デフォルトで有効になっています。また、フローティングアクションボタンを dynamic-plugins.yaml ファイルの同じ slot フィールドに割り当てることで、フローティングアクションボタンを、メインのフローティングアクションボタン内のサブメニューオプションとして表示するように設定することもできます。

8.1. フローティングアクションボタンを動的プラグインとして設定する
リンクのコピー

フローティングアクションボタンを動的プラグインとして設定して、アクションを実行したり、内部リンクまたは外部リンクを開いたりすることができます。

前提条件

プラットフォームエンジニアとして十分な権限を持っている。

手順

フローティングアクションボタンを動的プラグインとして設定するには、次のいずれかのタスクを実行します。

  • app-config-dynamic.yaml ファイルで global.floatingactionbutton/config マウントポイントを指定します。以下に例を示します。 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # Start of the floating action button configuration
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
          # End of the floating action button configuration
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import
    Copy to Clipboard Toggle word wrap
    frontend:mountPoints:importName
    (必須) マウントポイントに関連するコンポーネントを含むインポート名。
    frontend:mountPoints:importName:icon
    svg 値を使用して、黒い BulkImportPage アイコンを表示します。

  • 外部リンクを開くフローティングアクションボタンとしてアクションを設定するには、backstage-plugin-global-floating-action-button プラグイン内の dynamic-plugins.yaml ファイルで global.floatingactionbutton/config マウントポイントを指定します。以下に例を示します。 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-global-floating-action-button:
          mountPoints:
              - mountPoint: application/listener
                importName: DynamicGlobalFloatingActionButton
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent
                config:
                  icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
                  label: 'Quay'
                  showLabel: true
                  toolTip: 'Quay'
                  to: 'https://quay.io'
              - mountPoint: global.floatingactionbutton/config
                importName: NullComponent
                config:
                  icon: github
                  label: 'Git'
                  toolTip: 'Github'
                  to: https://github.com/redhat-developer/rhdh-plugins
    Copy to Clipboard Toggle word wrap
    frontend:mountPoints:importName
    (必須) マウントポイントに関連するコンポーネントを含むインポート名。
    frontend:mountPoints:importName:icon
    svg 値を使用して Quay アイコンを表示します。

  • サブメニューを備えたフローティングアクションボタンを設定するには、複数のアクションの dynamic-plugins.yaml ファイルで、同じ slot フィールドに global.floatingactionbutton/config マウントポイントを定義します。指定されていない場合、デフォルトのスロットは page-end になります。以下に例を示します。 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # Start of fab config
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
          # end of fab config
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import

- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-global-floating-action-button:
          mountPoints:
            - mountPoint: application/listener
              importName: DynamicGlobalFloatingActionButton
            - mountPoint: global.floatingactionbutton/config
              importName: NullComponent
              config:
                icon: github
                label: 'Git'
                toolTip: 'Github'
                to: https://github.com/redhat-developer/rhdh-plugins
            - mountPoint: global.floatingactionbutton/config
              importName: NullComponent
              config:
                icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
                label: 'Quay'
                showLabel: true
                toolTip: 'Quay'
                to: 'https://quay.io'
    Copy to Clipboard Toggle word wrap
    frontend:mountPoints:importName
    (必須) マウントポイントに関連するコンポーネントを含むインポート名。

  • フローティングアクションボタンを特定のページにのみ表示するように設定するには、backstage-plugin-global-floating-action-button プラグインで global.floatingactionbutton/config マウントポイントを設定し、次の例に示すように visibleOnPaths プロパティーを設定します。 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # start of fab config
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
    1 
    
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
                visibleOnPaths: ['/catalog', '/settings']
          # end of fab config
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import
    Copy to Clipboard Toggle word wrap
    frontend:mountPoints:importName
    (必須) マウントポイントに関連するコンポーネントを含むインポート名。

  • 特定のページでフローティングアクションボタンを非表示にするには、backstage-plugin-global-floating-action-button プラグインで global.floatingactionbutton/config マウントポイントを設定し、次の例に示すように excludeOnPaths プロパティーを設定します。 

    - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
  disabled: false
  pluginConfig:
    dynamicPlugins:
      frontend:
        red-hat-developer-hub.backstage-plugin-bulk-import:
          # start of fab config
          mountPoints:
            - mountPoint: global.floatingactionbutton/config
              importName: BulkImportPage
    1 
    
              config:
                slot: 'page-end'
                icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
                label: 'Bulk import'
                toolTip: 'Register multiple repositories in bulk'
                to: /bulk-import/repositories
                excludeOnPaths: ['/bulk-import']
          # end of fab config
          appIcons:
            - name: bulkImportIcon
              importName: BulkImportIcon
          dynamicRoutes:
            - path: /bulk-import/repositories
              importName: BulkImportPage
              menuItem:
                icon: bulkImportIcon
                text: Bulk import
    Copy to Clipboard Toggle word wrap
    frontend:mountPoints:importName
    (必須) マウントポイントに関連するコンポーネントを含むインポート名。
    frontend:mountPoints:importName:icon
    svg 値を使用して、黒い BulkImportPage アイコンを表示します。

8.2. フローティングアクションボタンのパラメーター
リンクのコピー

次の表に示すパラメーターを使用して、フローティングアクションボタンプラグインを設定します。

Expand
表8.1 フローティングアクションボタンのパラメーター
名前説明型デフォルト値必須

slot

フローティングアクションボタンの位置。有効な値: PAGE_END、BOTTOM_LEFT

enum

PAGE_END

なし

label

フローティングアクションボタンの名前

String

該当なし

はい

icon

フローティングアクションボタンのアイコン。Material Design library の塗りつぶされたアイコンを使用することを推奨します。svg アイコンを使用することもできます。例: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>

String、React.ReactElement、SVG image icon、HTML image icon

該当なし

なし

showLabel

アイコンの横にラベルを表示します。

Boolean

該当なし

なし

size

フローティングアクションボタンのサイズ

small、medium、large

medium

なし

color

コンポーネントの色。Palette Getting started guide から追加されたデフォルトのテーマカラーとカスタムテーマカラーの両方をサポートしています。

default、error、info、inherit、primary、secondary、success、warning

default

なし

onClick

フローティングアクションボタンを選択したときに実行されるアクション

React.MouseEventHandler

該当なし

なし

to

フローティングアクションボタンを選択したときに開くリンク

String

該当なし

なし

toolTip

フローティングアクションボタンの上にマウスを移動したときに表示されるテキスト

String

該当なし

なし

priority

サブメニューに表示されるフローティングアクションボタンの順序。値が大きいほど優先度が高くなります。

number

該当なし

なし

visibleOnPaths

指定したパスのフローティングアクションボタンを表示します。

string[]

すべてのパスのフローティングアクションボタンを表示します。

なし

excludeOnPaths

指定したパスのフローティングアクションボタンを非表示にします。

string[]

すべてのパスのフローティングアクションボタンを表示します。

なし

注記

複数のフローティングボタンアクションが同じ slot 値に割り当てられている場合、そのフローティングボタンがメインのフローティングアクションボタン内のサブメニューオプションとして表示されます。

第9章 Quickstart プラグインのカスタマイズ
リンクのコピー

9.1. Quickstart について
リンクのコピー

Quickstart プラグインは、Red Hat Developer Hub の管理者向けのガイド付きオンボーディングを提供します。カスタマイズ可能なドロワーインターフェイスと、ユーザーがプラットフォームに慣れるためのインタラクティブな Quickstart ステップを表示します。

注記

RBAC が有効な場合、Quickstart にアクセスできるのは管理者権限を持つユーザーだけです。

Quickstart プラグインはデフォルトで有効になっており、次のコンポーネントを含んでいます。

認証のセットアップ
不正アクセスからアカウントを保護するために、セキュアなログイン認証情報をセットアップします。
RBAC の設定
セキュアで効率的なコラボレーションを実現するために、ロールと権限を割り当てて、リソースを表示、作成、編集できるユーザーを制御します。
Git の設定
コードの管理、ワークフローの自動化、プラットフォーム機能との統合のために、GitHub などの Git プロバイダーを接続します。
プラグインの管理
機能の追加、外部ツールとの接続、エクスペリエンスのカスタマイズのために、拡張機能を探してインストールします。

9.1.1. Quickstart プラグインの無効化
リンクのコピー

Quickstart プラグインは、基本的な設定プロパティーとともに Developer Hub にプリロードされており、デフォルトで有効になっています。無効にするには、次のように、disabled プロパティーを true に設定します。

Quickstart プラグインを無効にする場合の例

global:
  dynamic:
    includes:
      - dynamic-plugins.default.yaml
    plugins:
      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart
        disabled: true
Copy to Clipboard Toggle word wrap

9.2. Red Hat Developer Hub の Quickstart のカスタマイズ
リンクのコピー

管理者は、Red Hat Developer Hub の Quickstart プラグインを設定して、Developer Hub ユーザー向けにカスタマイズしたオンボーディングを作成できます。

前提条件

管理者権限がある。

手順

  1. 次のコードに示すように、app-config.yaml を更新します。 

    app:
  quickstart:
    - title: 'Welcome to Developer Hub'
      description: 'Learn the basics of navigating the Developer Hub interface'
      icon: 'home'
      cta:
        text: 'Get Started'
        link: '/catalog'
    - title: 'Create Your First Component'
      description: 'Follow our guide to register your first software component'
      icon: 'code'
      cta:
        text: 'Create Component'
        link: '/catalog-import'
    - title: 'Explore Templates'
      description: 'Discover available software templates to bootstrap new projects'
      icon: 'template'
      cta:
        text: 'Browse Templates'
        link: '/create'
    Copy to Clipboard Toggle word wrap
    title
    (必須) Quickstart ステップの表示タイトル。
    description
    (必須) ステップの内容の簡単な説明。
    icon
    アイコンの識別子 (Material UI アイコンをサポートしています)。text: CTA ボタンのテキスト。
    link
    CTA のターゲット URL またはルート。

9.2.1. Quickstart プラグインの無効化
リンクのコピー

Quickstart プラグインは、基本的な設定プロパティーとともに Developer Hub にプリロードされており、デフォルトで有効になっています。

手順

  • クイックスタートプラグインを無効にするには、次のコードに示すように、disabled プロパティーを true に設定します。 

    global:
  dynamic:
    includes:
      - dynamic-plugins.default.yaml
    plugins:
      - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-quickstart
        disabled: true
    Copy to Clipboard Toggle word wrap

9.3. Quickstart のオンボーディングステップの使用
リンクのコピー

Quickstart のオンボーディングステップを使用すると、RHDH の管理者機能を詳しく学習できます。

前提条件

  • (オプション) RBAC が有効な場合は、Quickstart 機能にアクセスするために管理者権限が必要です。

手順

Red Hat Developer Hub で Quickstart ステップを開始するには、次の手順を実行します。

  1. RHDH ナビゲーションメニューで、Help (?) アイコンをクリックします。
  2. ドロップダウンメニューで、Quick start をクリックします。
  3. 開始する Quickstart ステップを選択します。

  4. Quickstart ドロワーを閉じるには、Hide をクリックします。

    Quickstart について
    View larger image
    Quickstart について
    注記

    全体的な進捗状況が追跡され、進捗バーと進捗率の形で Quickstart のフッターに表示されます。

第10章 Red Hat Developer Hub の Tech Radar ページのカスタマイズ
リンクのコピー

Red Hat Developer Hub では、Tech Radar ページは tech-radar 動的プラグインによって提供されます。このプラグインは、デフォルトでは無効になっています。Red Hat Developer Hub で動的プラグインを有効にする方法は、動的プラグインの設定 を参照してください。

Red Hat Developer Hub では、データをプロキシーとして app-config.yaml ファイルに渡すことで、Learning Paths を設定できます。Tech Radar のベース URL に、/developer-hub/tech-radar プロキシーを含める必要があります。

注記

tech-radar と homepage クイックアクセスプロキシーの両方に重複する pathRewrites を使用するため、tech-radar 設定 (^api/proxy/developer-hub/tech-radar) を作成してから、homepage 設定 (^/api/proxy/developer-hub) を作成する必要があります。

Red Hat Developer Hub の Home ページのカスタマイズの詳細は、Red Hat Developer Hub の Home ページのカスタマイズ を参照してください。

以下のソースから Tech Radar ページにデータを提供できます。

  • GitHub または GitLab でホストされている JSON ファイル
  • API を使用して Tech Radar のデータを JSON 形式で提供する専用サービス

10.1. JSON ファイルを使用して Tech Radar ページをカスタマイズする
リンクのコピー

使いやすさとシンプルさを実現するために、ホストされた JSON ファイルを使用して Tech Radar ページを設定できます。

前提条件

  • app-config.yaml ファイルの integrations セクションで、Tech Radar プラグインのデータソースを指定した。たとえば、Developer Hub と GitHub の統合を有効にした。
  • ./dynamic-plugins/dist/backstage-community-plugin-tech-radar および /dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic プラグインを有効にした。

手順

  1. Tech Radar データを含む JSON ファイルを GitHub や Gitlab などの Web サーバーに公開します。例は https://raw.githubusercontent.com/backstage/community-plugins/main/workspaces/tech-radar/plugins/tech-radar-common/src/sampleTechRadarResponse.json にあります。

  2. app-config.yaml ファイルに以下を追加して、ホストされている JSON ファイルから Tech Radar データにアクセスするように Developer Hub を設定します。 

    techRadar:
  url: <tech_radar_data_url>
    Copy to Clipboard Toggle word wrap
    <tech_radar_data_url>
    Tech Radar データがホストする JSON URL を入力します。

10.2. カスタマイズサービスを使用して Tech Radar ページをカスタマイズする
リンクのコピー

高度なシナリオでは、Red Hat Developer Hub カスタマイズサービスをホストして、Tech Radar ページなどの設定可能なすべての Developer Hub ページにデータを提供できます。ページごとに異なるサービスを使用することもできます。

前提条件

  • app-config.yaml ファイルの integrations セクションで、Tech Radar プラグインのデータソースを指定した。たとえば、Developer Hub と GitHub の統合を有効にした。
  • ./dynamic-plugins/dist/backstage-community-plugin-tech-radar および /dynamic-plugins/dist/backstage-community-plugin-tech-radar-backend-dynamic プラグインを有効にした。

手順

  1. Developer Hub インスタンスと同じ OpenShift Container Platform クラスターに、Developer Hub カスタマイズサービスをデプロイします。デフォルトの Developer Hub データと同じデータを提供するサンプルは、red-hat-developer-hub-customization-provider を参照してください。カスタマイズサービスは、http://<rhdh-customization-provider>/tech-radar のような Tech Radar データ URL を提供します。

  2. 次のコードを app-config.yaml ファイルに追加して、専用サービスを許可されたホストとして追加します。 

    backend:
   reading:
        allow:
          - host: '<rhdh_customization_provider_base_url>'
    Copy to Clipboard Toggle word wrap
    <rhdh_customization_provider_base_url>
    Tech Radar データ URL のベース URL (例: <rhdh-customization-provider>) を入力します。

  3. app-config.yaml ファイルに以下を追加します。 

    techRadar:
    url: <tech_radar_data_url>
    Copy to Clipboard Toggle word wrap
    <tech_radar_data_url>
    Tech Radar データ URL (例: http://<rhdh-customization-provider>/tech-radar) を入力します。

第11章 Red Hat Developer Hub の外観のカスタマイズ
リンクのコピー

インターフェイスの外観を変更して、組織は Red Hat Developer Hub を自社のブランドガイドラインに合わせ、全体的なユーザーエクスペリエンスを向上させることができます。

Red Hat Developer Hub では、次のデフォルトのテーマ設定が利用できます。

Red Hat Developer Hub テーマ
開発者ポータルを標準の Red Hat Developer Hub インスタンスのような外観にするデフォルトのテーマ設定。詳細は、「デフォルトの Red Hat Developer Hub テーマ」 を参照してください。
Backstage テーマ
開発者ポータルを標準の Backstage インスタンスのような外観にするデフォルトのテーマ設定。詳細は、「デフォルトの Backstage テーマ」 を参照してください。

デフォルトのテーマで特定のパラメーターを変更または無効化するか、app-config.yaml ファイルを変更して完全にカスタマイズしたテーマを作成できます。app-config.yaml ファイルから、以下のコンポーネントを含む共通のテーマコンポーネントをカスタマイズできます。

  • 会社名とロゴ
  • 段落、見出し、ヘッダー、およびボタン内テキストのフォントの色、サイズ、およびスタイル
  • ヘッダーの色、グラデーション、および形状
  • ボタンの色
  • ナビゲーションインジケーターの色

テーマモード (Light Theme、Dark Theme、Auto) など、一部のコンポーネントは、Developer Hub GUI からカスタマイズすることもできます。

11.1. Developer Hub インスタンスのテーマモードのカスタマイズ
リンクのコピー

Developer Hub インスタンスには、次のいずれかのテーマモードを選択できます。

  • Light
  • Dark
  • Auto
注記

Developer Hub では、テーマ設定を使用してさまざまな UI コンポーネントの外観と操作性を変更します。そのため、RHDH ページで使用される背景色やフォントの変更以外に、ボタン、タブ、サイドバー、カード、テーブルなどのさまざまな UI コンポーネントが変更されていることに気づくはずです。

デフォルトのテーマモードは Auto です。システム設定に基づいてライトテーマかダークテーマが自動的に設定されます。

前提条件

  • Developer Hub Web コンソールにログインしている。

手順

  1. Developer Hub Web コンソールから、Settings をクリックします。

  2. Appearance パネルで、Light、Dark、または Auto をクリックしてテーマモードを変更します。

    カスタムテーマモード 1
    View larger image
    カスタムテーマモード 1

11.2. Developer Hub インスタンスのブランディングロゴのカスタマイズ
リンクのコピー

次の例に示すように、app-config.yaml ファイルの branding セクションを設定することで、Developer Hub インスタンスのブランドロゴをカスタマイズできます。 

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}
1 

    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}
2
Copy to Clipboard Toggle word wrap
fullLogo
展開された (固定された) サイドバー上のロゴであり、base64 でエンコードされた画像を想定しています。
iconLogo

折りたたまれた (固定されていない) サイドバーのロゴであり、base64 でエンコードされた画像を想定しています。

BASE64_EMBEDDED_FULL_LOGO 環境変数の形式は次のように設定できます。 

BASE64_EMBEDDED_FULL_LOGO: "data:_<media_type>_;base64,<base64_data>"
Copy to Clipboard Toggle word wrap

次の例は、data:_<media_type>_;base64,<base64_data> 形式を使用して BASE64_EMBEDDED_FULL_LOGO をカスタマイズする方法を示しています。 

SVGLOGOBASE64=$(base64 -i logo.svg)
BASE64_EMBEDDED_FULL_LOGO="data:image/svg+xml;base64,$SVGLOGOBASE64"
Copy to Clipboard Toggle word wrap

image/svg+xml は、イメージの正しいメディアタイプ (たとえば、image/png や image/jpeg) に置き換えます。また、それに応じてファイル拡張子を調整します。これにより、外部ファイルを参照せずにロゴを直接埋め込むことができます。

次の例に示すように、branding セクションの fullLogoWidth フィールドに値を設定して、ブランディングロゴの幅をカスタマイズすることもできます。 

app:
  branding:
    fullLogoWidth: 110px
# ...
Copy to Clipboard Toggle word wrap
fullLogoWidth
ロゴの幅のデフォルト値は 110px です。サポートされている単位は、integer、px、em、rem、パーセンテージです。

11.3. Developer Hub インスタンスのサイドバーメニュー項目について
リンクのコピー

Red Hat Developer Hub のサイドバーメニューは、設定可能な 2 つの主要な部分で構成されています。

動的プラグインメニュー項目
設定とアクティブなプラグインによって、サイドバーメニューの一部が動的に定義されます。
メインメニュー項目

サイドバーのコアナビゲーション構造は静的です。

  • 動的プラグインメニュー項目: これらの項目はメインメニューの下に表示され、インストールされているプラグインに基づいてカスタマイズできます。メインメニュー項目セクションは動的であり、設定やインストールされているプラグインに基づいて変更できます。

11.3.1. Developer Hub インスタンスのサイドバーメニュー項目のカスタマイズ
リンクのコピー

次の手順に従って、メインメニュー項目をカスタマイズします。

手順

  1. app-config.yaml ファイルを開きます。

    1. メインメニュー項目の順序と親子関係をカスタマイズするには、dynamicPlugins.frontend.default.main-menu-items.menuItems フィールドを使用します。
    2. 動的プラグインのメニュー項目の場合は、dynamicPlugins.frontend.<package_name>.menuItems フィールドを使用します。

app-config.yaml ファイルの例

dynamicPlugins:
  frontend:
    default.main-menu-items:
        menuItems:
          default.home:
            title: Home
            icon: home
            priority: 100
            enabled: true
          default.my-group:
            title: My Group
            icon: group
            priority: 90
            enabled: true
          default.catalog:
            title: Catalog
            icon: category
            to: catalog
            priority: 80
            enabled: true
          default.apis:
            title: APIs
            icon: extension
            to: api-docs
            priority: 70
            enabled: true
          default.learning-path:
            title: Learning Paths
            icon: school,
            to: learning-paths
            priority: 60
            enabled: true
          default.create:
            title: Self-service
            icon: add
            to: create
            priority: 50
            enabled: true
Copy to Clipboard Toggle word wrap

11.3.2. Developer Hub インスタンスの動的プラグインメニュー項目を設定する
リンクのコピー

次の手順で動的プラグインメニュー項目を設定します。

手順

  • app-config.yaml ファイルで、<plugin_name> プラグインの menuItems セクションを更新します。以下に例を示します。 

    dynamicPlugins:
  frontend:
    _<plugin_name>_:
      menuItems:
        <menu_item_name>:
          icon: # home | group | category | extension | school | _<my_icon>_
          title: _<plugin_page_title>_
          priority: 10
          parent: favorites
          enabled: true
    Copy to Clipboard Toggle word wrap
    <plugin_name>
    プラグイン名を入力します。この名前は、package.json ファイルの scalprum.name キーと同じです。
    <menu_item_name>
    メインサイドバーナビゲーションのスタンドアロンメニュー項目または親メニュー項目に使用する一意の名前を入力します。このフィールドでプラグインメニュー項目を指定する場合、メニュー項目の名前が dynamicRoutes 内の対応するパスで使用されている名前と一致する必要があります。たとえば、dynamicRoutes が path: /my-plugin を定義した場合は、menu_item_name を my-plugin として定義する必要があります。
    icon

    (オプション) アイコン名を入力します。次のいずれかのアイコンを使用できます。

    • home、group、category、extension、school などのデフォルトのアイコン。デフォルトのアイコンを使用するには、アイコンを空の文字列 (" ") として設定します。
    • カスタムアイコン。<my_icon> はカスタムアイコンの名前を指定します。
    • SVG アイコン。たとえば、icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">…​</svg> です。
    • HTML イメージ。たとえば、icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png です。
    title
    (オプション) メニュー項目のタイトルを入力します。dynamicRoutes 設定の menuItem.text でタイトルがすでに指定されている場合は省略します。サイドバーからタイトルを非表示にするには、タイトルを空の文字列 (" ") として設定します。
    priority
    (オプション) サイドバーに表示されるメニュー項目の順序を設定します。デフォルトの優先度は 0 で、項目はリストの一番下に配置されます。優先度の値が高いほど、その項目はサイドバー内の上の方に表示されます。このフィールドはセクションごとに定義できます。
    parent
    (オプション) 現在の項目がネストされる親メニュー項目を入力します。このフィールドを使用する場合、有効なプラグインの menuItems 設定内の他の場所で、親メニュー項目を定義する必要があります。このフィールドはセクションごとに定義できます。
    enabled
    (オプション) このフィールドを使用してサイドバーのメニュー項目を非表示にする場合は、値を false に設定します。サイドバーにメニュー項目を表示するには、値を true に設定します。 
    dynamicPlugins:
  frontend:
    _<package_name>_:
      dynamicRoutes:
        - path: /my-plugin
          module: CustomModule
          importName: FooPluginPage
          menuItem:
            icon: fooIcon
            text: Foo Plugin Page
      menuItems:
        my-plugin:
          priority: 10
          parent: favorites
        favorites:
          icon: favorite
          title: Favorites
          priority: 100
    Copy to Clipboard Toggle word wrap
    my-plugin
    dynamicRoutes の path フィールドの値と一致します。
    priority
    親メニュー項目の下にあるプラグインの順序を制御します。
    parent
    このプラグインを、favorites 親メニュー項目の下にネストします。
    favorites
    親メニュー項目の設定。
    icon
    RHDH システムアイコンから favorite アイコンを表示します。
    title
    親メニュー項目のタイトル名を表示します。
    priority
    サイドバーの favourites メニュー項目の順序。

11.3.3. Developer Hub インスタンスのカスタムメニュー項目の変更または追加
リンクのコピー

次の手順でメインメニュー項目を変更するか、カスタムメニュー項目を追加します。

手順

  • app-config.yaml ファイルで、default.main-menu-items > menuItems セクションにセクションを追加します。キーをメインメニュー項目として指定するには、default. 接頭辞を使用します。 

    dynamicPlugins:
  frontend:
    default.main-menu-items:
      menuItems:
        default._<menu_group_parent_item_name>_:
          icon: # home | group | category | extension | school | _<my_icon>_
          title: _<menu_group_parent_title>_
          priority: 10
        default._<menu_item_name>_:
          parent: _<menu_group_parent_item_name>_
          icon:  # home | group | category | extension | school | _<my_icon>_
          title: _<my_menu_title>_
          to: _<path_to_the_menu_target_page>_
          priority: 100
          enabled: true
    Copy to Clipboard Toggle word wrap
    default.<menu_group_parent_item_name>
    (オプション) 静的なメインメニュー項目を設定するには、メニューグループの親項目名を入力します。default.<menu_item_name> に parent 値が設定されていない場合、このフィールドは必要ありません。
    icon
    メニューアイコンを入力します。親メニュー項目に必須です。
    title
    メニューグループのタイトルを入力します。親メニュー項目に必須です。
    priority
    (オプション) メニューレベル内におけるこのメニュー項目の順序を入力します。
    default.<menu_item_name>
    デフォルト値を上書きするメニュー項目名を入力します。メインメニュー項目を指定するための default. 接頭辞を追加します。
    parent
    (オプション) この項目の親メニュー項目を入力します。<menu_item_name> がメニュー項目の子として指定されている場合は必須です。
    icon
    (オプション) メニューアイコンを入力します。デフォルトのアイコンを使用するには、アイコンを空の文字列 (" ") として設定します。
    title
    (オプション) メニューグループのタイトルを入力します。新しいカスタムメインメニュー項目を追加する場合にのみ必要です。サイドバーからデフォルトのメインメニュー項目のタイトルを非表示にするには、タイトルを空の文字列 (" ") として設定します。
    to
    (オプション) メニュー項目の移動先のパスを入力します。設定されていない場合は、デフォルトで Home ページに設定されます。
    priority
    (オプション) メニューレベル内におけるこのメニュー項目の順序を入力します。
    enabled
    (オプション) このフィールドを使用してサイドバーにメニュー項目を表示する場合は、値を true に設定します。サイドバーからメニュー項目を非表示にするには、値を false に設定します。 
    default.main-menu-items:
      menuItems:
        default.catalog:
          icon: category
          title: My Catalog
          priority: 5
        default.learning-path:
          title: ''
        default.parentlist:
          title: Overview
          icon: bookmarks
        default.home:
          parent: default.parentlist
        default.references:
          title: References
          icon: school
          to: /references
          enabled: true
    Copy to Clipboard Toggle word wrap
    icon
    カタログのアイコンのデフォルトメニュー項目を変更するかどうかを指定します。
    title
    デフォルトのサイドバーからラーニングパスを非表示にするには、空の文字列 " " を指定します。
    default.parentlist
    親メニュー項目を導入します。
    parent
    default.parentlist 親メニュー項目の下にホームメニューをネストします。
    title
    default.references の名前を指定します。
    icon
    school アイコンを表示します。
    to
    default.references を /references ページにリダイレクトします。
    enabled
    (オプション) このフィールドを使用してサイドバーにメニュー項目を表示する場合は、値を true に設定します。サイドバーからメニュー項目を非表示にするには、値を false に設定します。

11.4. エンティティータブのタイトルの設定
リンクのコピー

Red Hat Developer Hub では、カタログエンティティービューにデフォルトの独自のタブが設定されています。組織のニーズに合わせて、タブのタイトルの名前を変更、並べ替え、削除、および追加できます。

手順

  • 変更する各タブについて、app-config.yaml ファイルの entityTabs セクションに必要な値を入力します。 

    upstream:
  backstage:
    appConfig:
      dynamicPlugins:
        frontend:
         <plugin_name>:
            entityTabs:
              - mountPoint: <mount_point>
                path: <path>
                title: <title>
                priority: <priority>
    Copy to Clipboard Toggle word wrap
    <plugin_name>
    backstage-community.plugin-topology などのプラグイン名を入力します。
    mountPoint
    entity.page.topology などのタブマウントポイントを入力します。
    path
    /topology などのタブパスを入力します。
    title
    Topology などのタブのタイトルを入力します。
    priority

    オプション:

    タブの順序を変更するには、42 などのタブの優先度を入力します。優先度が高いものが最初に表示されます。

    タブを削除するには、-1 などの負の値を入力します。

11.5. エンティティー詳細タブのレイアウトの設定
リンクのコピー

Red Hat Developer Hub の各エンティティー詳細タブには、デフォルトの独自のレイアウトがあります。タブの内容を提供するプラグインで設定が許可されている場合、組織のニーズに合わせて、エンティティー詳細タブの内容を変更できます。

前提条件

手順

  • app-config.yaml ファイルのプラグインのデフォルト設定をコピーし、layout のプロパティーを変更します。 

    global:
  dynamic:
    plugins:
      - package: <package_location>
        disabled: false
        pluginConfig:
          dynamicPlugins:
            frontend:
              <plugin_name>:
                mountPoints:
                  - mountPoint: <mount_point>
                    importName: <import_name>
                    config:
                      layout:
                        gridColumn:
                          lg: span 6
                          xs: span 12
    Copy to Clipboard Toggle word wrap
    package
    パッケージの場所を入力します (例: ./dynamic-plugins/dist/backstage-community-plugin-tekton)。
    <plugin_name>
    プラグイン名を入力します (例: backstage-community.plugin-tekton)。
    mountPoint
    プラグインのデフォルト設定で定義されているマウントポイント (例: entity.page.ci/cards) をコピーします。
    importName
    プラグインのデフォルト設定で定義されているインポート名 (例: TektonCI) をコピーします。
    layout
    レイアウト設定を入力します。タブの内容を、12 列のグリッドを使用するレスポンシブなグリッドに表示します。このグリッドは、gridColumn などの CSS プロパティーに指定できるさまざまなブレークポイント (xs、sm、md、lg、xl) をサポートしています。この例では、12 列のうち 6 列を使用して、2 枚の Tekton CI カードを大きい画面 (lg) に並べて表示します (span 6 列を使用)。また、カードをそれぞれ表示します (xs 以上で span 12 列を使用)。

11.6. Developer Hub インスタンスのテーマモードカラーパレットのカスタマイズ
リンクのコピー

app-config.yaml ファイルの branding.theme セクションで light.palette および dark.palette パラメーターを設定することで、Developer Hub インスタンスのライトテーマモードとダークテーマモードのカラーパレットをカスタマイズできます。次に例を示します。 

app:
  branding:
    theme:
      light:
        palette:
          primary:
            main: <light_primary_color>
          navigation:
            indicator: <light_indicator_color>
        pageTheme:
          default:
            backgroundColor: [<light_background_color_1>, <light_background_color_2>]
      dark:
        palette:
          primary:
            main: <dark_primary_color>
          navigation:
            indicator: <dark_indicator_color>
        pageTheme:
          default:
            backgroundColor: [<dark_background_color_1>, <dark_background_color_2>]
# ...
Copy to Clipboard Toggle word wrap
light:palette:primary:main
ライトカラーパレットのメインのプライマリーカラー (例: #ffffff または white)。
light:palette:navigation:indicator
ライトカラーパレットのナビゲーションインジケーターの色。これは、ナビゲーションパネルで選択中のタブを示す縦のバーです (例: #FF0000 または red)。
light:pageTheme:default:backgroundColor
ライトカラーパレットのデフォルトページテーマの背景色 (例: #ffffff または white)。
dark:palette:primary:main
ダークカラーパレットのメインのプライマリーカラー (例: #000000 または black)。
dark:palette:navigation:indicator
ダークカラーパレットのナビゲーションインジケーターの色。これは、ナビゲーションパネルで選択中のタブを示す縦のバーです (例: #FF0000 または red)。
dark:pageTheme:default:backgroundColor
ダークカラーパレットのデフォルトのページテーマの背景色 (例: #000000 または black)。

関連情報

11.7. Developer Hub インスタンスのページテーマヘッダーのカスタマイズ
リンクのコピー

app-config.yaml ファイルの branding.theme セクションを変更することで、Developer Hub インスタンスのライトテーマモードとダークテーマモードのヘッダー色をカスタマイズできます。Home、Catalog、API ページなど、追加の Developer Hub ページのページヘッダーをカスタマイズすることもできます。 

app:
  branding:
    theme:
      light:
        palette: {}
        pageTheme:
          default:
            backgroundColor: "<default_light_background_color>"
            fontColor: "<default_light_font_color>"
            shape: none
          apis:
            backgroundColor: "<apis_light_background_color>"
            fontColor: "<apis_light_font_color>"
            shape: none
      dark:
        palette: {}
        pageTheme:
          default:
            backgroundColor: "<default_dark_background_color>"
            fontColor: "<default_dark_font_color>"
            shape: none
# ...
Copy to Clipboard Toggle word wrap
light
テーマモード (例: light、dark)
default
デフォルトのページテーマ設定の yaml ヘッダー
backgroundColor
ページヘッダーの背景色 (例: #ffffff または white)
fontColor
ページヘッダーのテキストの色 (例: #000000 または black)
shape
ページヘッダーのパターン (例: wave、round、none)。apis:: 特定のページテーマ設定の yaml ヘッダー (例: apis、home)

11.8. Developer Hub インスタンスのフォントのカスタマイズ
リンクのコピー

app-config.yaml ファイルの typography セクションを設定することで、ページテキストのデフォルトのフォントファミリーとサイズ、および各見出しレベルのフォントファミリーとサイズを変更できます。次に例を示します。 

app:
  branding:
    theme:
      light:
        typography:
          fontFamily: "Times New Roman"
          htmlFontSize: 11 # smaller is bigger
          h1:
            fontFamily: "Times New Roman"
            fontSize: 40
          h2:
            fontFamily: "Times New Roman"
            fontSize: 30
          h3:
            fontFamily: "Times New Roman"
            fontSize: 30
          h4:
            fontFamily: "Times New Roman"
            fontSize: 30
          h5:
            fontFamily: "Times New Roman"
            fontSize: 30
          h6:
            fontFamily: "Times New Roman"
            fontSize: 30
      dark:
        typography:
          fontFamily: "Times New Roman"
          htmlFontSize: 11 # smaller is bigger
          h1:
            fontFamily: "Times New Roman"
            fontSize: 40
          h2:
            fontFamily: "Times New Roman"
            fontSize: 30
          h3:
            fontFamily: "Times New Roman"
            fontSize: 30
          h4:
            fontFamily: "Times New Roman"
            fontSize: 30
          h5:
            fontFamily: "Times New Roman"
            fontSize: 30
          h6:
            fontFamily: "Times New Roman"
            fontSize: 30
# ...
Copy to Clipboard Toggle word wrap

11.9. デフォルトの Red Hat Developer Hub テーマ
リンクのコピー

デフォルトの Red Hat Developer Hub テーマ設定を使用すると、Developer Hub インスタンスを標準の Red Hat Developer Hub インスタンスのような外観にすることができます。また、app-config.yaml ファイルを変更して、特定のパラメーターをカスタマイズしたり無効にしたりすることもできます。

11.9.1. デフォルトの Red Hat Developer Hub テーマのカラーパレット
リンクのコピー

app-config.yaml ファイルでは、デフォルトの Red Hat Developer Hub カラーパレットに次の設定を使用しています。 

app:
  branding:
    theme:
      light:
        variant: "rhdh"
        mode: "light"
        palette:
          background:
            default: "#F8F8F8"
            paper: "#FFFFFF"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#0A6EBE"
          linkHover: "#2196F3"
          mode: "light"
          navigation:
            background: "#222427"
            indicator: "#0066CC"
            color: "#ffffff"
            selectedColor: "#ffffff"
            navItem:
              hoverBackground: "#3c3f42"
            submenu:
              background: "#222427"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#181818"
          primary:
            main: "#0066CC"
          secondary:
            main: "#8476D1"
          status:
            aborted: "#757575"
            error: "#E22134"
            ok: "#1DB954"
            pending: "#FFED51"
            running: "#1F5493"
            warning: "#FF9800"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#000000"
          textSubtle: "#6E6E6E"
          textVerySubtle: "#DDD"
          warningBackground: "#F59B23"
          warningText: "#000000"
          text:
            primary: "#151515"
            secondary: "#757575"
          rhdh:
            general:
              disabledBackground: "#D2D2D2"
              disabled: "#6A6E73"
              searchBarBorderColor: "#E4E4E4"
              formControlBackgroundColor: "#FFF"
              mainSectionBackgroundColor: "#FFF"
              headerBottomBorderColor: "#C7C7C7"
              cardBackgroundColor: "#FFF"
              sidebarBackgroundColor: "#212427"
              cardBorderColor: "#C7C7C7"
              tableTitleColor: "#181818"
              tableSubtitleColor: "#616161"
              tableColumnTitleColor: "#151515"
              tableRowHover: "#F5F5F5"
              tableBorderColor: "#E0E0E0"
              tableBackgroundColor: "#FFF"
              tabsBottomBorderColor: "#D2D2D2"
              contrastText: "#FFF"
            primary:
              main: "#0066CC"
              focusVisibleBorder: "#0066CC"
            secondary:
              main: "#8476D1"
              focusVisibleBorder: "#8476D1"
            cards:
              headerTextColor: "#151515"
              headerBackgroundColor: "#FFF"
              headerBackgroundImage: "none"

      dark:
        variant: "rhdh"
        mode: "dark"
        palette:
          background:
            default: "#333333"
            paper: "#424242"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#9CC9FF"
          linkHover: "#82BAFD"
          mode: "dark"
          navigation:
            background: "#0f1214"
            indicator: "#0066CC"
            color: "#ffffff"
            selectedColor: "#ffffff"
            navItem:
              hoverBackground: "#3c3f42"
            submenu:
              background: "#0f1214"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#404040"
          primary:
            main: "#1FA7F8"
          secondary:
            main: "#B2A3FF"
          status:
            aborted: "#9E9E9E"
            error: "#F84C55"
            ok: "#71CF88"
            pending: "#FEF071"
            running: "#3488E3"
            warning: "#FFB84D"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#FFFFFF"
          textSubtle: "#CCCCCC"
          textVerySubtle: "#727272"
          warningBackground: "#F59B23"
          warningText: "#000000"

          rhdh:
            general:
              disabledBackground: "#444548"
              disabled: "#AAABAC"
              searchBarBorderColor: "#57585a"
              formControlBackgroundColor: "#36373A"
              mainSectionBackgroundColor: "#0f1214"
              headerBottomBorderColor: "#A3A3A3"
              cardBackgroundColor: "#292929"
              sidebarBackgroundColor: "#1b1d21"
              cardBorderColor: "#A3A3A3"
              tableTitleColor: "#E0E0E0"
              tableSubtitleColor: "#E0E0E0"
              tableColumnTitleColor: "#E0E0E0"
              tableRowHover: "#0f1214"
              tableBorderColor: "#515151"
              tableBackgroundColor: "#1b1d21"
              tabsBottomBorderColor: "#444548"
              contrastText: "#FFF"
            primary:
              main: "#1FA7F8"
              focusVisibleBorder: "#ADD6FF"
            secondary:
              main: "#B2A3FF"
              focusVisibleBorder: "#D0C7FF"
            cards:
              headerTextColor: "#FFF"
              headerBackgroundColor: "#0f1214"
              headerBackgroundImage: "none"
Copy to Clipboard Toggle word wrap

または、app-config.yaml ファイルで次の variant 値と mode 値を使用して、以前のデフォルト設定を適用することもできます。 

app:
  branding:
    theme:
      light:
        variant: "rhdh"
        mode: "light"
      dark:
        variant: "rhdh"
        mode: "dark"
Copy to Clipboard Toggle word wrap

11.9.2. デフォルトの Red Hat Developer Hub ページテーマ
リンクのコピー

次の app-config.yaml ファイル設定に示すように、デフォルトの Developer Hub ヘッダーの色は、ライトモードでは白、ダークモードでは黒です。 

app:
  branding:
    theme:
      light:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: "#ffffff"
      dark:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: "#0f1214"
Copy to Clipboard Toggle word wrap

11.10. デフォルトの Backstage テーマ
リンクのコピー

デフォルトの Backstage テーマ設定を使用すると、Developer Hub インスタンスを標準の Backstage インスタンスのような外観にすることができます。また、app-config.yaml ファイルを変更して、特定のパラメーターをカスタマイズしたり無効にしたりすることもできます。

11.10.1. デフォルトの Backstage テーマのカラーパレット
リンクのコピー

app-config.yaml ファイルでは、デフォルトの Backstage カラーパレットに次の設定を使用しています。 

app:
  branding:
    theme:
      light:
        variant: "backstage"
        mode: "light"
        palette:
          background:
            default: "#F8F8F8"
            paper: "#FFFFFF"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#0A6EBE"
          linkHover: "#2196F3"
          navigation:
            background: "#171717"
            color: "#b5b5b5"
            indicator: "#9BF0E1"
            navItem:
              hoverBackground: "#404040"
            selectedColor: "#FFF"
            submenu:
              background: "#404040"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#181818"
          primary:
            main: "#1F5493"
          status:
            aborted: "#757575"
            error: "#E22134"
            ok: "#1DB954"
            pending: "#FFED51"
            running: "#1F5493"
            warning: "#FF9800"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#000000"
          textSubtle: "#6E6E6E"
          textVerySubtle: "#DDD"
          warningBackground: "#F59B23"
          warningText: "#000000"

      dark:
        variant: "backstage"
        mode: "dark"
        palette:
          background:
            default: "#333333"
            paper: "#424242"
          banner:
            closeButtonColor: "#FFFFFF"
            error: "#E22134"
            info: "#2E77D0"
            link: "#000000"
            text: "#FFFFFF"
            warning: "#FF9800"
          border: "#E6E6E6"
          bursts:
            backgroundColor:
              default: "#7C3699"
            fontColor: "#FEFEFE"
            gradient:
              linear: "linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)"
            slackChannelText: "#ddd"
          errorBackground: "#FFEBEE"
          errorText: "#CA001B"
          gold: "#FFD600"
          highlight: "#FFFBCC"
          infoBackground: "#ebf5ff"
          infoText: "#004e8a"
          link: "#9CC9FF"
          linkHover: "#82BAFD"
          mode: "dark"
          navigation:
            background: "#424242"
            color: "#b5b5b5"
            indicator: "#9BF0E1"
            navItem:
              hoverBackground: "#404040"
            selectedColor: "#FFF"
            submenu:
              background: "#404040"
          pinSidebarButton:
            background: "#BDBDBD"
            icon: "#404040"
          primary:
            dark: "#82BAFD"
            main: "#9CC9FF"
          secondary:
            main: "#FF88B2"
          status:
            aborted: "#9E9E9E"
            error: "#F84C55"
            ok: "#71CF88"
            pending: "#FEF071"
            running: "#3488E3"
            warning: "#FFB84D"
          tabbar:
            indicator: "#9BF0E1"
          textContrast: "#FFFFFF"
          textSubtle: "#CCCCCC"
          textVerySubtle: "#727272"
          warningBackground: "#F59B23"
          warningText: "#000000"
Copy to Clipboard Toggle word wrap

または、app-config.yaml ファイルで次の variant 値と mode 値を使用して、以前のデフォルト設定を適用することもできます。 

app:
  branding:
    theme:
      light:
        variant: "backstage"
        mode: "light"
      dark:
        variant: "backstage"
        mode: "dark"
Copy to Clipboard Toggle word wrap

11.10.2. デフォルトの Backstage ページテーマ
リンクのコピー

次の app-config.yaml ファイル設定に示すように、デフォルトの Backstage ヘッダーの色は、ライトモードでは白、ダークモードでは黒です。 

app:
  branding:
    theme:
      light:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave
          documentation:
            backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
            fontColor: '#ffffff'
            shape: wave2
          tool:
            backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
            fontColor: '#ffffff'
            shape: round
          service:
            backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
            fontColor: '#ffffff'
            shape: wave
          website:
            backgroundColor: ['#0027AF', '#270094'] # veryBlue
            fontColor: '#ffffff'
            shape: wave
          library:
            backgroundColor: ['#98002B', '#8D1134'] # rubyRed
            fontColor: '#ffffff'
            shape: wave
          other:
            backgroundColor: ['#171717', '#383838'] # darkGrey
            fontColor: '#ffffff'
            shape: wave
          app:
            backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
            fontColor: '#ffffff'
            shape: shapes.wave
          apis:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave2
          card:
            backgroundColor: ['#4BB8A5', '#187656'] # greens
            fontColor: '#ffffff'
            shape: wave

      dark:
        palette: {}
        defaultPageTheme: default
        pageTheme:
          default:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave
          documentation:
            backgroundColor: ['#C8077A', '#C2297D'] # pinkSea
            fontColor: '#ffffff'
            shape: wave2
          tool:
            backgroundColor: ['#8912CA', '#3E00EA'] # purpleSky
            fontColor: '#ffffff'
            shape: round
          service:
            backgroundColor: ['#006D8F', '#0049A1'] # marineBlue
            fontColor: '#ffffff'
            shape: wave
          website:
            backgroundColor: ['#0027AF', '#270094'] # veryBlue
            fontColor: '#ffffff'
            shape: wave
          library:
            backgroundColor: ['#98002B', '#8D1134'] # rubyRed
            fontColor: '#ffffff'
            shape: wave
          other:
            backgroundColor: ['#171717', '#383838'] # darkGrey
            fontColor: '#ffffff'
            shape: wave
          app:
            backgroundColor: ['#BE2200', '#A41D00'] # toastyOrange
            fontColor: '#ffffff'
            shape: shapes.wave
          apis:
            backgroundColor: ['#005B4B'] # teal
            fontColor: '#ffffff'
            shape: wave2
          card:
            backgroundColor: ['#4BB8A5', '#187656'] # greens
            fontColor: '#ffffff'
            shape: wave
Copy to Clipboard Toggle word wrap

11.11. 動的プラグインを使用してカスタム Developer Hub テーマを読み込む
リンクのコピー

動的プラグインからカスタム Developer Hub テーマを読み込むことができます。

手順

  1. 動的プラグインでテーマプロバイダー関数をエクスポートします。たとえば以下のようになります。

    サンプル myTheme.ts フラグメント

    import { lightTheme } from './lightTheme'; // some custom theme
import { UnifiedThemeProvider } from '@backstage/theme';
export const lightThemeProvider = ({ children }: { children: ReactNode }) => (
  <UnifiedThemeProvider theme={lightTheme} children={children} />
);
    Copy to Clipboard Toggle word wrap

    カスタムテーマの作成の詳細は、Backstage documentation - Creating a Custom Theme を参照してください。

  2. themes 設定フィールドを使用して、UI にテーマを読み込むように Developer Hub を設定します。

    app-config.yaml フラグメント

    dynamicPlugins:
  frontend:
    example.my-custom-theme-plugin:
      themes:
        - id: light
          title: Light
          variant: light
          icon: someIconReference
          importName: lightThemeProvider
    Copy to Clipboard Toggle word wrap

    id
    希望する値を指定してテーマ ID を設定します。必要に応じて、次の ID 値を使用して、デフォルトの Developer Hub テーマをオーバーライドします。デフォルトのライトテーマを置き換える場合は light、デフォルトのダークテーマを置き換える場合は dark となります。

検証

  • テーマは、Developer Hub の Settings ページで利用できます。

11.12. Developer Hub インスタンスのカスタムコンポーネントのオプション
リンクのコピー

Developer Hub テーマのさまざまなコンポーネントをカスタマイズするために使用できるコンポーネントのバリアントが 2 つあります。

  • Patternfly
  • MUI

ライトテーマモードまたはダークテーマモード設定の各パラメーターにコンポーネントバリアントを割り当てるだけでなく、rippleEffect の on と off を切り替えることもできます。

次のコードは、Developer Hub インスタンスのテーマコンポーネントを設定するために app-config.yaml ファイル で使用できるオプションを示しています。 

app:
  branding:
    theme:
      light:
        options:
          rippleEffect: off / on
          paper: patternfly / mui
          buttons: patternfly / mui
          inputs: patternfly / mui
          accordions: patternfly / mui
          sidebars: patternfly / mui
          pages: patternfly / mui
          headers: patternfly / mui
          toolbars: patternfly / mui
          dialogs: patternfly / mui
          cards: patternfly / mui
          tables: patternfly / mui
          tabs: patternfly / mui
      dark:
        options:
          rippleEffect: off / on
          paper: patternfly / mui
          buttons: patternfly / mui
          inputs: patternfly / mui
          accordions: patternfly / mui
          sidebars: patternfly / mui
          pages: patternfly / mui
          headers: patternfly / mui
          toolbars: patternfly / mui
          dialogs: patternfly / mui
          cards: patternfly / mui
          tables: patternfly / mui
          tabs: patternfly / mui
Copy to Clipboard Toggle word wrap

第12章 Home ページのカスタマイズ
リンクのコピー

app-config を使用する場合は、次のことができます。

  • インストールして有効にしたプラグインに基づいて表示される追加のカードを使用して、デフォルトの Home ページレイアウトをカスタマイズおよび拡張します。
  • クイックアクセスリンクを変更します。

  • 次の利用可能なカードを追加、再編成、および削除します。

    • 検索バー
    • クイックアクセス
    • 見出し
    • マークダウン
    • プレースホルダー
    • スター付きエンティティーのカタログ化
    • 注目のドキュメント

12.1. Home ページカードのカスタマイズ
リンクのコピー

管理者は、ホームページのレイアウトとコンテンツをカスタマイズして、ユーザーに適した使用感を作成できます。これには、さまざまな特殊なカードをメインビューに統合することが含まれます。

ホームページのレイアウトでは、12 列のグリッドシステムが使用されます。複数の画面ブレークポイントにわたって各カードの位置 (x)、幅 (w)、高さ (h) を正確に定義できます。

  • Extra-large (xl)
  • Large (lg)
  • Medium (md)
  • Small (sm)
  • Extra-small (xs)
  • Extra-extra-small (xxs)

デフォルトの Home ページは、次の app-config.yaml ファイル設定のとおりです。 

dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      dynamicRoutes:
        - path: /
          importName: DynamicHomePage
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { w: 7, h: 8 }
              lg: { w: 7, h: 8 }
              md: { w: 7, h: 8 }
              sm: { w: 12, h: 8 }
              xs: { w: 12, h: 8 }
              xxs: { w: 12, h: 8 }
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
          config:
            layouts:
              xl: { w: 5, h: 4, x: 7 }
              lg: { w: 5, h: 4, x: 7 }
              md: { w: 5, h: 4, x: 7 }
              sm: { w: 12, h: 4 }
              xs: { w: 12, h: 4 }
              xxs: { w: 12, h: 4 }
Copy to Clipboard Toggle word wrap

前提条件

  • 管理者アクセス権があり、動的プラグイン設定の app-config.yaml ファイルを変更できる。

手順

  • 次のコードに示すように、Red Hat Developer Hub のホームページにさまざまなカードを設定します。

    検索

    SearchBar カードを使用すると、重要な検索機能をホームページ上で直接提供できます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: SearchBar
          config:
            layouts:
              xl: { w: 10, h: 1, x: 1 }
              lg: { w: 10, h: 1, x: 1 }
              md: { w: 10, h: 1, x: 1 }
              sm: { w: 10, h: 1, x: 1 }
              xs: { w: 12, h: 1 }
              xxs: { w: 12, h: 1 }
            props:
              path: /search
              queryParam: query
    Copy to Clipboard Toggle word wrap
    Expand
    表12.1 利用可能なプロパティー
    プロパティーデフォルト説明

    path

    /search

    必要に応じて、リンクされた検索パスをオーバーライドします。

    queryParam

    query

    必要に応じて、検索クエリーパラメーター名をオーバーライドします。

    クイックアクセス

    QuickAccessCard カードを使用すると、カスタマイズ可能なショートカットパネルとして機能します。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: QuickAccessCard
          config:
            layouts:
              xl: { h: 8 }
              lg: { h: 8 }
              md: { h: 8 }
              sm: { h: 8 }
              xs: { h: 8 }
              xxs: { h: 8 }
            props:
              title: Quick Access
              path: /quickaccess
    Copy to Clipboard Toggle word wrap
    Expand
    表12.2 利用可能なプロパティー
    プロパティーデフォルト説明

    title

    Quick Access

    必要に応じて、リンクされた検索パスをオーバーライドします。

    path

    none

    必要に応じて、検索クエリーパラメーター名をオーバーライドします。

    見出し

    Headline カードを使用して重要な情報を表示できます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Headline
          config:
            layouts:
              xl: { h: 1 }
              lg: { h: 1 }
              md: { h: 1 }
              sm: { h: 1 }
              xs: { h: 1 }
              xxs: { h: 1 }
            props:
              title: Important info
    Copy to Clipboard Toggle word wrap
    Expand
    表12.3 利用可能なプロパティー
    プロパティーデフォルト説明

    title

    none

    タイトル

    マークダウン

    Markdown カードを使用すると、ホームページレイアウト内にリッチフォーマットのコンテンツを直接表示できます。このカードは、Markdown 構文を使用して、リストやリンク (ドキュメントやプラグインのリポジトリー) などの構造化された情報を表示します。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: MarkdownCard
          config:
            layouts:
              xl: { w: 6, h: 4 }
              lg: { w: 6, h: 4 }
              md: { w: 6, h: 4 }
              sm: { w: 6, h: 4 }
              xs: { w: 6, h: 4 }
              xxs: { w: 6, h: 4 }
            props:
              title: Company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Hub](https://github.com/redhat-developer/rhdh)
        - mountPoint: home.page/cards
          importName: Markdown
          config:
            layouts:
              xl: { w: 6, h: 4, x: 6 }
              lg: { w: 6, h: 4, x: 6 }
              md: { w: 6, h: 4, x: 6 }
              sm: { w: 6, h: 4, x: 6 }
              xs: { w: 6, h: 4, x: 6 }
              xxs: { w: 6, h: 4, x: 6 }
            props:
              title: Important company links
              content: |
                ### RHDH
                * [Website](https://developers.redhat.com/rhdh/overview)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Documentation](https://docs.redhat.com/en/documentation/red_hat_developer_hub/)
                * [Backstage Community Plugins](https://github.com/backstage/community-plugins)
                * [RHDH Plugins](https://github.com/redhat-developer/rhdh-plugins)
                * [RHDH Hub](https://github.com/redhat-developer/rhdh)
    Copy to Clipboard Toggle word wrap
    プレースホルダー

    Placeholder カードは、スペースを確保したり、ホームページのレイアウトをテストしたりするためのユーティリティー要素として使用できます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 1, h: 1 }
              lg: { w: 1, h: 1 }
              md: { w: 1, h: 1 }
              sm: { w: 1, h: 1 }
              xs: { w: 1, h: 1 }
              xxs: { w: 1, h: 1 }
            props:
              showBorder: true
              debugContent: '1'
    Copy to Clipboard Toggle word wrap
    スター付きエンティティーのカタログ化

    CatalogStarredEntitiesCard カードを使用すると、ユーザーがスター付きとしてマークしたカタログエンティティーを表示する専用スペースをホームページに用意できます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
    Copy to Clipboard Toggle word wrap
    注目のドキュメント

    Red Hat Developer Hub 内の特定のドキュメントを強調表示する方法として、FeaturedDocsCard カードを使用できます。これは、ホームページのデプロイメントで利用できます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: FeaturedDocsCard
    Copy to Clipboard Toggle word wrap
    EntitySection

    EntitySection カードを使用すると、Component、API、Resource、および System など、さまざまな種類のカタログエンティティーを明らかにする、視覚的に目を引くセクションを作成できます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: EntitySection
          config:
            layouts:
              xl: { w: 12, h: 6 }
              lg: { w: 12, h: 6 }
              md: { w: 12, h: 6 }
              sm: { w: 12, h: 6 }
              xs: { w: 12, h: 6 }
              xxs: { w: 12, h: 14.5 }
    Copy to Clipboard Toggle word wrap
    OnboardingSection

    OnboardingSection カードを使用すると、RHDH 内の学習リソースをすばやく見つけることができます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: OnboardingSection
          config:
            layouts:
              xl: { w: 12, h: 5 }
              lg: { w: 12, h: 5 }
              md: { w: 12, h: 5 }
              sm: { w: 12, h: 5 }
              xs: { w: 12, h: 7 }
              xxs: { w: 12, h: 12 }
    Copy to Clipboard Toggle word wrap
    TemplateSection

    TemplateSection カードを使用すると、RHDH でソフトウェアテンプレートをすばやく探索して開始できます。 

    dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: TemplateSection
          config:
            layouts:
              xl: { w: 12, h: 5 }
              lg: { w: 12, h: 5 }
              md: { w: 12, h: 5 }
              sm: { w: 12, h: 5 }
              xs: { w: 12, h: 5 }
              xxs: { w: 12, h: 14 }
    Copy to Clipboard Toggle word wrap

12.2. Red Hat Developer Hub Home ページのレイアウトの定義
リンクのコピー

Home ページでは、12 列のグリッドを使用してカードを配置します。最適なパラメーターを使用して、Developer Hub の Home ページのレイアウトを定義できます。

前提条件

  • 各ブレークポイントに次の最適なパラメーターを含めます。

    • 幅 (w)
    • 高さ (h)
    • 位置 (x および y)

手順

  • 次のいずれかのオプションを選択して、Developer Hub の app-config.yaml 設定ファイルを設定します。

    • 次のように、小さいウィンドウではスペース全体を、大きいウィンドウではスペースの半分を使用します。 
dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 6, h: 2 }
              lg: { w: 6, h: 2 }
              md: { w: 6, h: 2 }
              sm: { w: 12, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: a placeholder
Copy to Clipboard Toggle word wrap
  • 次の例に示すように、x パラメーターを定義してカードを並べて表示します。 
dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 6, h: 2 }
              lg: { w: 6, h: 2 }
              md: { w: 6, h: 2 }
              sm: { w: 12, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: left
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 6, h: 2, x: 6 }
              lg: { w: 6, h: 2, x: 6 }
              md: { w: 6, h: 2, x: 6 }
              sm: { w: 12, h: 2, x: 0 }
              xs: { w: 12, h: 2, x: 0 }
              xxs: { w: 12, h: 2, x: 0 }
            props:
              showBorder: true
              debugContent: right
Copy to Clipboard Toggle word wrap

ただし、デフォルトではこのカードの下に 2 枚目のカードが表示されます。

  • 次の例に示すように、x パラメーターを定義してカードを 3 列で表示します。 
dynamicPlugins:
  frontend:
    red-hat-developer-hub.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2 }
              lg: { w: 4, h: 2 }
              md: { w: 4, h: 2 }
              sm: { w: 6, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: left
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2, x: 4 }
              lg: { w: 4, h: 2, x: 4 }
              md: { w: 4, h: 2, x: 4 }
              sm: { w: 6, h: 2, x: 6 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: center
        - mountPoint: home.page/cards
          importName: Placeholder
          config:
            layouts:
              xl: { w: 4, h: 2, x: 8 }
              lg: { w: 4, h: 2, x: 8 }
              md: { w: 4, h: 2, x: 8 }
              sm: { w: 6, h: 2 }
              xs: { w: 12, h: 2 }
              xxs: { w: 12, h: 2 }
            props:
              showBorder: true
              debugContent: right
Copy to Clipboard Toggle word wrap

第13章 クイックアクセスカードのカスタマイズ
リンクのコピー

Red Hat Developer Hub の Home ページにアクセスするには、ベース URL に /developer-hub プロキシーが含まれている必要があります。データをプロキシーとして app-config.yaml ファイルに渡すことで、Home ページを設定できます。次のソースから Home ページにデータを提供できます。

  • GitHub または GitLab でホストされている JSON ファイル
  • API を使用して JSON 形式で Home ページのデータを提供する専用サービス

13.1. ホストされた JSON ファイルを使用したクイックアクセスカードへのデータの提供
リンクのコピー

前提条件

手順

  • JSON ファイルからのデータにアクセスするには、Developer Hub の app-config.yaml 設定ファイルに次のコードを追加します。

  • app-config.yaml ファイルに次のコードを追加します。 

    proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: <DOMAIN_URL> # i.e https://raw.githubusercontent.com/
      pathRewrite:
        '^/api/proxy/developer-hub': <path to json file> # i.e /redhat-developer/rhdh/main/packages/app/public/homepage/data.json
      changeOrigin: true
      secure: true
      # Change to "false" in case of using self hosted cluster with a self-signed certificate
      headers:
	<HEADER_KEY>: <HEADER_VALUE> # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo
    Copy to Clipboard Toggle word wrap

13.2. 専用サービスを使用したクイックアクセスカードへのデータの提供
リンクのコピー

専用サービスを使用すると、次のタスクを実行できます。

  • 同じサービスを使用して、設定可能なすべての Developer Hub ページにデータを提供するか、ページごとに異なるサービスを使用できます。
  • Home ページと Tech Radar ページの両方にデータを提供するサンプルサービスとして、red-hat-developer-hub-customization-provider を使用できます。red-hat-developer-hub-customization-provider サービスは、デフォルトの Developer Hub データと同じデータを提供します。必要に応じて、GitHub から red-hat-developer-hub-customization-provider サービスリポジトリーをフォークし、独自のデータで変更できます。
  • red-hat-developer-hub-customization-provider サービスと Developer Hub Helm チャートを同じクラスターにデプロイできます。

前提条件

手順

個別のサービスを使用して Home ページのデータを提供するには、次の手順を実行します。

  1. Red Hat OpenShift Container Platform Web コンソールで、+Add > Import from Git をクリックします。

  2. Git リポジトリーの URL を Git Repo URL フィールドに入力します。

    red-hat-developer-hub-customization-provider サービスを使用するには、red-hat-developer-hub-customization-provider リポジトリーの URL か、カスタマイズした内容が含まれているリポジトリーのフォークの URL を追加します。

  3. General タブで、Name フィールドに red-hat-developer-hub-customization-provider と入力し、Create をクリックします。

  4. Advanced Options タブで、Target Port から値をコピーします。

    注記

    Target Port は、通信する Kubernetes または OpenShift Container Platform サービスを自動的に生成します。

  5. app-config.yaml ファイル に次のコードを追加します。 

    proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: ${HOMEPAGE_DATA_URL}
    1 
    
      changeOrigin: true
      # Change to "false" in case of using self-hosted cluster with a self-signed certificate
      secure: true
    Copy to Clipboard Toggle word wrap
    1 1 1 1
    http://<SERVICE_NAME>:8080。たとえば、http://rhdh-customization-provider:8080 とします。
    注記

    red-hat-developer-hub-customization-provider サービスには、デフォルトで 8080 ポートが含まれています。カスタムポートを使用している場合は、app-config.yaml ファイルの 'PORT' 環境変数で指定できます。

  6. rhdh-secrets に URL を追加するか、カスタム ConfigMap で直接置き換えることで、HOMEPAGE_DATA_URL を置き換えます。
  7. 新しい設定が正しく読み込まれるように、Developer Hub Pod を削除します。

検証

  • サービスを表示するには、OpenShift Container Platform Web コンソールに移動し、Networking > Service をクリックします。

    注記

    Topology ビューで Service Resources を表示することもできます。

  • 次の例に示すように、指定した Home ページの API URL から、JSON 形式でデータが返されることを確認します。 

    [
  {
    "title": "Dropdown 1",
    "isExpanded": false,
    "links": [
      {
        "iconUrl": "https://imagehost.com/image.png",
        "label": "Dropdown 1 Item 1",
        "url": "https://example.com/"
      },
      {
        "iconUrl": "https://imagehost2.org/icon.png",
        "label": "Dropdown 1 Item 2",
        "url": ""
      }
    ]
  },
  {
    "title": "Dropdown 2",
    "isExpanded": true,
    "links": [
      {
        "iconUrl": "http://imagehost3.edu/img.jpg",
        "label": "Dropdown 2 Item 1",
        "url": "http://example.com"
      }
    ]
  }
]
    Copy to Clipboard Toggle word wrap
    注記

    要求の呼び出しが失敗した場合や、設定されていない場合、Developer Hub インスタンスはデフォルトのローカルデータにフォールバックします。

  • イメージまたはアイコンが読み込まれない場合は、次の例に示すように、カスタム ConfigMap のコンテンツセキュリティーポリシー (csp) img-src にイメージまたはアイコンのホスト URL を追加して、その URL を許可リストに登録します。 

    kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config.yaml
data:
  app-config.yaml: |
    app:
      title: Red Hat Developer Hub
    backend:
      csp:
        connect-src:
          - "'self'"
          - 'http:'
          - 'https:'
        img-src:
          - "'self'"
          - 'data:'
          - <image host url 1>
          - <image host url 2>
          - <image host url 3>
    # Other Configurations
    Copy to Clipboard Toggle word wrap

第14章 Settings ページで RHDH メタデータカードをカスタマイズする
リンクのコピー

Red Hat Developer Hub の Settings ページには、RHDH メタデータ カードが含まれています。デフォルトでは、RHDH メタデータ カードには、Red Hat Developer Hub インスタンスの RHDH バージョン と Backstage バージョン が表示されます。Show more アイコンをクリックすると、カードが展開され、Upstream、Midstream、Build Time 情報も表示されます。

デフォルトをオーバーライドして、カード内の Red Hat Developer Hub インスタンスに関するカスタムビルド情報を表示できます。カードの内容だけでなく、カードのタイトルもカスタマイズできます。

手順

RHDH メタデータ カードをカスタマイズするには、次の手順を実行します。

  • app-config.yaml ファイルで、buildinfo フィールドを設定します。以下に例を示します。 

    buildInfo:
  title: _<metadata_card_title>_
  card:
    TechDocs builder: '_<techdocs_builder>_'
    Authentication provider: '_<authentication_provider>_'
    RBAC: disabled
  full: true
    Copy to Clipboard Toggle word wrap

    以下は、

    <metadata_card_title>
    カスタマイズされたカードに表示するタイトルを指定します。
    <techdocs_builder>
    デフォルトのビルドストラテジーを使用するときに、ドキュメントを生成して公開するか、ドキュメントの取得のみを行うかを指定します。可能な値は local または external です。ドキュメントを生成して公開する場合は、app-config.yaml ファイルで techdocs.builder フィールドを local に設定します。ドキュメントを生成および公開せずに取得だけする場合は、techdocs.builder フィールドを external に設定します。
    <authentication_provider>
    使用する認証プロバイダーを指定します。値の例としては、GitHub または GitLab などがあります。
    full
    カスタマイズされたカードに表示される情報を指定します。可能な値は true または false です。true に設定すると、この設定で指定された情報のみがカードに表示されます。false に設定すると、指定された情報がビルドバージョンとともにカードに表示されます。デフォルト値は true です。

結果

Settings ページには、Red Hat Developer Hub インスタンスに関するカスタムタイトルとカスタムビルド情報を含むカードが表示されます。

法律上の通知
リンクのコピー

Copyright © 2025 Red Hat, Inc.
The text of and illustrations in this document are licensed by Red Hat under a Creative Commons Attribution–Share Alike 3.0 Unported license ("CC-BY-SA"). An explanation of CC-BY-SA is available at http://creativecommons.org/licenses/by-sa/3.0/. In accordance with CC-BY-SA, if you distribute this document or an adaptation of it, you must provide the URL for the original version.
Red Hat, as the licensor of this document, waives the right to enforce, and agrees not to assert, Section 4d of CC-BY-SA to the fullest extent permitted by applicable law.
Red Hat, Red Hat Enterprise Linux, the Shadowman logo, the Red Hat logo, JBoss, OpenShift, Fedora, the Infinity logo, and RHCE are trademarks of Red Hat, Inc., registered in the United States and other countries.
Linux® is the registered trademark of Linus Torvalds in the United States and other countries.
Java® is a registered trademark of Oracle and/or its affiliates.
XFS® is a trademark of Silicon Graphics International Corp. or its subsidiaries in the United States and/or other countries.
MySQL® is a registered trademark of MySQL AB in the United States, the European Union and other countries.
Node.js® is an official trademark of Joyent. Red Hat is not formally related to or endorsed by the official Joyent Node.js open source or commercial project.
The OpenStack® Word Mark and OpenStack logo are either registered trademarks/service marks or trademarks/service marks of the OpenStack Foundation, in the United States and other countries and are used with the OpenStack Foundation's permission. We are not affiliated with, endorsed or sponsored by the OpenStack Foundation, or the OpenStack community.
All other trademarks are the property of their respective owners.
トップに戻る
Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

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

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

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

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

会社概要

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

Theme

© 2026 Red Hat