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

Red Hat Developer Hub のスタートガイド

Red Hat Developer Hub 1.3

Red Hat Customer Content Services

概要

Red Hat Developer Hub は、開発者ポータルを構築するためのエンタープライズグレードのプラットフォームです。ニーズと希望に合わせて、Developer Hub インスタンスを設定およびカスタマイズできます。

はじめに
リンクのコピー

開発者は Red Hat Developer Hub を使用して効率的な開発環境を利用できます。Red Hat Developer Hub は一元化されたソフトウェアカタログを採用しており、マイクロサービスとインフラストラクチャーの効率向上を実現します。これにより、製品チームは妥協することなく高品質のコードを提供できるようになります。

第1章 Red Hat Developer Hub でサポートされる設定
リンクのコピー

このセクションでは、Red Hat Developer Hub にアクセスするために必要な以下の設定を説明します。

  • カスタムアプリケーション設定
  • Developer Hub カタログのソース管理設定

1.1. Red Hat OpenShift Container Platform へのカスタムアプリケーション設定ファイルの追加
リンクのコピー

Red Hat Developer Hub にアクセスするには、Red Hat OpenShift Container Platform にカスタムアプリケーション設定ファイルを追加する必要があります。OpenShift Container Platform では、次のコンテンツをベーステンプレートとして使用して、app-config-rhdh という名前の ConfigMap を作成できます。 

kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config-rhdh
data:
  app-config-rhdh.yaml: |
    app:
      title: Red Hat Developer Hub
Copy to Clipboard Toggle word wrap

次のいずれかの方法で、カスタムアプリケーション設定ファイルを OpenShift Container Platform に追加できます。

  • Red Hat Developer Hub Operator
  • Red Hat Developer Hub Helm チャート

Red Hat Developer Hub Helm チャートを使用して、カスタムアプリケーション設定ファイルを OpenShift Container Platform インスタンスに追加できます。

前提条件

  • Red Hat OpenShift Container Platform アカウントを作成している。

手順

  1. OpenShift Container Platform Web コンソールから、ConfigMaps タブを選択します。
  2. Create ConfigMap をクリックします。
  3. Create ConfigMap ページで、Configure via の YAML view オプションを選択し、必要に応じてファイルに変更を加えます。
  4. Create をクリックします。
  5. Helm リリースのリストを表示するには、Helm タブに移動します。
  6. 使用する Helm リリースのオーバーフローメニューをクリックし、Upgrade を選択します。

  7. Helm 設定を編集するには、Form view または YAML view のいずれかを使用します。

    • Form view を使用する場合

      1. Root Schema → Backstage chart schema → Backstage parameters → Extra app configuration files to inline into command arguments を展開します。
      2. Add Extra app configuration files to inline into command arguments リンクをクリックします。

      3. 以下のフィールドに値を入力します。

        • configMapRef: app-config-rhdh
        • filename: app-config-rhdh.yaml
      4. Upgrade をクリックします。

    • YAML view を使用する場合

      1. 以下のように upstream.backstage.extraAppConfig.configMapRef パラメーターおよび upstream.backstage.extraAppConfig.filename パラメーターの値を設定します。 

        # ... other Red Hat Developer Hub Helm Chart configurations
upstream:
  backstage:
    extraAppConfig:
      - configMapRef: app-config-rhdh
        filename: app-config-rhdh.yaml
# ... other Red Hat Developer Hub Helm Chart configurations
        Copy to Clipboard Toggle word wrap
      2. Upgrade をクリックします。

カスタムアプリケーション設定ファイルは、Red Hat Developer Hub インスタンスの設定を変更するために使用できる ConfigMap オブジェクトです。Developer Hub インスタンスを Red Hat OpenShift Container Platform にデプロイする場合は、ConfigMap オブジェクトを作成して Developer Hub カスタムリソース (CR) で参照することで、Red Hat Developer Hub Operator を使用して OpenShift Container Platform インスタンスにカスタムアプリケーション設定ファイルを追加できます。

カスタムアプリケーション設定ファイルには、BACKEND_SECRET という名前の機密性の高い環境変数が含まれています。この変数には、OpenShift Container Platform シークレットで定義された環境変数を参照するために Developer Hub が使用する必須のバックエンド認証キーが含まれます。'secrets-rhdh' という名前のシークレットを作成し、それを Developer Hub CR で参照する必要があります。

注記

Red Hat Developer Hub インストールは、ユーザー自身で外部および不正アクセスから保護する必要があります。バックエンド認証キーを他のシークレットと同様に管理します。強力なパスワード要件を満たし、パスワードを設定ファイルで公開せず、環境変数としてのみ設定ファイルに挿入します。

前提条件

  • アクティブな Red Hat OpenShift Container Platform アカウントがある。
  • 管理者により OpenShift Container Platform に Red Hat Developer Hub Operator がインストールされている。詳細は、Red Hat Developer Hub Operator のインストール を参照してください。
  • OpenShift Container Platform で Red Hat Developer Hub CR を作成している。

手順

  1. OpenShift Container Platform Web コンソールの Developer パースペクティブから Topology ビューを選択し、Developer Hub Pod の Open URL アイコンをクリックして、Developer Hub の外部 URL <RHDH_URL> を特定します。
  2. OpenShift Container Platform Web コンソールの Developer パースペクティブから、ConfigMaps ビューを選択します。
  3. Create ConfigMap をクリックします。

  4. Configure via で YAML view オプションを選択し、次の例をベーステンプレートとして使用して、app-config-rhdh.yaml などの ConfigMap オブジェクトを作成します。 

    kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config-rhdh
data:
  "app-config-rhdh.yaml": |
    app:
      title: Red Hat Developer Hub
      baseUrl: <RHDH_URL>
    1 
    
    backend:
      auth:
        externalAccess:
            - type: legacy
              options:
                subject: legacy-default-config
                secret: "${BACKEND_SECRET}"
    2 
    
      baseUrl: <RHDH_URL>
    3 
    
      cors:
        origin: <RHDH_URL>
    4
    Copy to Clipboard Toggle word wrap
    1
    Red Hat Developer Hub インスタンスの外部 URL を設定します。
    2
    OpenShift Container Platform シークレットを公開する環境変数を使用して、必須の Developer Hub バックエンド認証キーを定義します。
    3
    Red Hat Developer Hub インスタンスの外部 URL を設定します。
    4
    Red Hat Developer Hub インスタンスの外部 URL を設定します。
  5. Create をクリックします。
  6. Secrets ビューを選択します。
  7. Create Key/value Secret をクリックします。
  8. secrets-rhdh という名前のシークレットを作成します。

  9. BACKEND_SECRET という名前のキーと、base64 でエンコードされた文字列を値として追加します。Red Hat Developer Hub インスタンスごとに一意の値を使用します。たとえば、次のコマンドを使用してターミナルからキーを生成できます。 

    node -p 'require("crypto").randomBytes(24).toString("base64")'
    Copy to Clipboard Toggle word wrap
  10. Create をクリックします。
  11. Topology ビューを選択します。

  12. 使用する Red Hat Developer Hub インスタンスのオーバーフローメニューをクリックし、Edit Backstage を選択して、Red Hat Developer Hub インスタンスの YAML ビューを読み込みます。

    Operator インストール 2

  13. CR で、spec.application.appConfig.configMaps フィールドの値としてカスタムアプリケーション設定の config map の名前を入力し、spec.application.extraEnvs.secrets フィールドの値としてシークレットの名前を入力します。以下に例を示します。 

    apiVersion: rhdh.redhat.com/v1alpha1
kind: Backstage
metadata:
  name: developer-hub
spec:
  application:
    appConfig:
      mountPath: /opt/app-root/src
      configMaps:
         - name: app-config-rhdh
    extraEnvs:
      secrets:
         - name: secrets-rhdh
    extraFiles:
      mountPath: /opt/app-root/src
    replicas: 1
    route:
      enabled: true
  database:
    enableLocalDb: true
    Copy to Clipboard Toggle word wrap
  14. Save をクリックします。
  15. Topology ビューに戻り、Red Hat Developer Hub Pod が起動するまで待ちます。
  16. Open URL アイコンをクリックして、Red Hat Developer Hub プラットフォームを使用し、設定変更を行います。

関連情報

第2章 GitHub リポジトリーの一括インポート
リンクのコピー

重要

この章の機能はテクノロジープレビュー機能です。テクノロジープレビュー機能は、実稼働環境での Red Hat サービスレベルアグリーメント (SLA) ではサポートされておらず、機能的に完全ではない可能性があるため、Red Hat では実稼働環境での使用を推奨していません。テクノロジープレビュー機能は、最新の製品機能をいち早く提供して、開発段階で機能のテストを行い、フィードバックを提供していただくことを目的としています。

Red Hat のテクノロジープレビュー機能のサポートの詳細は、テクノロジープレビュー機能のサポート範囲 を参照してください。

Red Hat Developer Hub は、GitHub リポジトリーのオンボーディングを自動化し、インポートステータスを追跡できます。

2.1. 一括インポート機能の有効化とアクセス権の付与
リンクのコピー

ユーザーに対して一括インポート機能を有効にし、アクセスするために必要な権限を付与できます。

前提条件

手順

  1. Bulk Import プラグインはインストールされていますが、デフォルトでは無効になっています。./dynamic-plugins/dist/janus-idp-backstage-plugin-bulk-import-backend-dynamic および ./dynamic-plugins/dist/janus-idp-backstage-plugin-bulk-import プラグインを有効にするには、dynamic-plugins.yaml を次の内容で編集します。

    dynamic-plugins.yaml フラグメント

    plugins:
  - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-bulk-import-backend-dynamic
    disabled: false
  - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-bulk-import
    disabled: false
    Copy to Clipboard Toggle word wrap

    動的プラグインのインストールと表示 を参照してください。

  2. 管理者ではないユーザーに対して必要な bulk.import RBAC 権限を次のように設定します。

    rbac-policy.csv フラグメント

    p, role:default/bulk-import, bulk.import, use, allow
g, user:default/<your_user>, role:default/bulk-import
    Copy to Clipboard Toggle word wrap

    一括インポート機能を使用できるのは、Developer Hub 管理者または bulk.import 権限を持つユーザーのみであることに注意してください。Red Hat Developer Hub のパーミッションポリシー を参照してください。

検証

  • サイドバーに Bulk Import オプションが表示されます。
  • Bulk Import ページには、Added Repositories のリストが表示されます。

2.2. 複数の GitHub リポジトリーのインポート
リンクのコピー

Red Hat Developer Hub では、GitHub リポジトリーを選択し、Developer Hub カタログへのオンボーディングを自動化できます。

前提条件

手順

  1. 左側のサイドバーで Bulk Import をクリックします。

  2. 右上隅の Add ボタンをクリックすると、設定された GitHub インテグレーションからアクセスできるすべてのリポジトリーのリストが表示されます。

    1. Repositories ビューから、任意のリポジトリーを選択したり、アクセス可能なリポジトリーを検索したりできます。選択されたリポジトリーごとに、catalog-info.yaml が生成されます。
    2. Organizations ビューでは、3 番目の列の Select をクリックして任意の組織を選択できます。このオプションを使用すると、選択した組織から 1 つ以上のリポジトリーを選択できます。

  3. 各リポジトリーのプルリクエストの詳細を表示または編集するには、Preview file をクリックします。

    1. プルリクエストの説明と catalog-info.yaml ファイルの内容を確認します。
    2. オプション: リポジトリーに .github/CODEOWNERS ファイルがある場合は、content-info.yaml に特定のエンティティー所有者を含めるのではなく、Use CODEOWNERS file as Entity Owner チェックボックスを選択してそのファイルを使用できます。
    3. Save をクリックします。

  4. Create pull requests をクリックします。この時点で、選択したリポジトリーに対して一連のドライランチェックが実行され、次のようなインポートの要件を満たしているかどうかが確認されます。

    1. リポジトリー catalog-info.yaml で指定された名前のエンティティーが Developer Hub カタログに存在しないことを確認します。
    2. リポジトリーが空でないことを確認します。

    3. リポジトリーのUse CODEOWNERS file as Entity Owner チェックボックスが選択されている場合、リポジトリーに .github/CODEOWNERS ファイルが含まれていることを確認します。

      • エラーが発生した場合、プルリクエストは作成されず、問題の詳細を示す Failed to create PR のエラーメッセージが表示されます。理由の詳細を表示するには、Edit をクリックします。
      • エラーがなければ、プルリクエストが作成され、追加されたリポジトリーのリストにリダイレクトされます。
  5. catalog-info.yml ファイルを作成する各プルリクエストを確認し、マージします。

検証

  • Added repositories リストには、インポートしたリポジトリーが、それぞれ適切なステータス Waiting for approval または Added とともに表示されます。
  • リストされているWaiting for approval のインポートジョブごとに、対応するリポジトリーに catalog-info.yaml ファイルを追加するための、対応するプルリクエストがあります。

2.3. 追加されたリポジトリーの管理
リンクのコピー

Developer Hub にインポートされたリポジトリーを監視および管理できます。

前提条件

手順

  1. 左側のサイドバーで Bulk Import をクリックして、Import ジョブとして追跡されている現在のすべてのリポジトリーとそのステータスを表示します。

    Added
    インポートプルリクエストがマージされた後、または一括インポート中にリポジトリーに catalog-info.yaml ファイルがすでに含まれていた場合、リポジトリーは Developer Hub カタログに追加されます。カタログでエンティティーが利用可能になるまで数分かかる場合があります。
    Waiting for approval

    catalog-info.yaml ファイルをリポジトリーに追加するオープンプルリクエストがあります。これにより、以下が可能になります。

    • 右側の 鉛筆アイコン をクリックして、プルリクエストの詳細を表示するか、Developer Hub からプルリクエストのコンテンツを編集します。
    • インポートジョブを削除します。この操作により、インポート PR も閉じられます。
    • インポートジョブを Added 状態に移行するには、Git リポジトリーからのインポートプルリクエストをマージします。
    Empty
    リポジトリーは他のソースからインポートされていますが、catalog-info.yaml ファイルがなく、それを追加するインポートプルリクエストもないため、Developer Hub はインポートジョブのステータスを判別できません。
注記
  • インポートプルリクエストがマージされると、インポートステータスは Added Repositories のリストで Added としてマークされますが、対応するエンティティーが Developer Hub カタログに表示されるまでに数秒かかる場合があります。

  • 他のソースから追加された場所 (app-config.yaml ファイルで静的に追加された場所、GitHub 検出を有効にする ときに動的に追加された場所、または「既存のコンポーネントの登録」ページを使用して手動で登録された場所など) は、次の条件が満たされている場合、追加されたリポジトリーの一括インポートリストに表示されることがあります。

    • ターゲットリポジトリーには、設定された GitHub インテグレーションからアクセスできます。
    • 場所 URL は、リポジトリーのデフォルトブランチのルートにある catalog-info.yaml ファイルを指します。

2.4. 一括インポート監査ログについて
リンクのコピー

Bulk Import backend プラグインは、Developer Hub 監査ログに次のイベントを追加します。監査ログの設定方法と表示方法の詳細は、Red Hat Developer Hub の監査ログ を参照してください。

一括インポートイベント:

BulkImportUnknownEndpoint
不明なエンドポイントへの要求を追跡します。
BulkImportPing
/ping エンドポイントへの GET リクエストを追跡し、一括インポートバックエンドが稼働していることを確認できます。
BulkImportFindAllOrganizations
/organizations エンドポイントへの GET リクエストを追跡します。これにより、設定されたすべての GitHub インテグレーションからアクセス可能な組織のリストが返されます。
BulkImportFindRepositoriesByOrganization
/organizations/:orgName/repositories エンドポイントへの GET リクエストを追跡します。このエンドポイントは、指定された組織のリポジトリーのリストを返します (設定された GitHub インテグレーションのいずれかからアクセス可能)。
BulkImportFindAllRepositories
/repositories エンドポイントへの GET リクエストを追跡し、設定されたすべての GitHub インテグレーションからアクセス可能なリポジトリーのリストを返します。
BulkImportFindAllImports
/imports エンドポイントへの GET リクエストを追跡し、既存のインポートジョブのリストとそのステータスを返します。
BulkImportCreateImportJobs
/imports エンドポイントへの POST リクエストを追跡します。これにより、ターゲットリポジトリーにインポートプルリクエストを作成して、1 つまたは複数のリポジトリーを Developer Hub カタログに一括インポートするリクエストを送信できます。
BulkImportFindImportStatusByRepo
指定されたリポジトリーのインポートジョブの詳細を取得する /import/by-repo エンドポイントへの GET リクエストを追跡します。
BulkImportDeleteImportByRepo
/import/by-repo エンドポイントへの DELETE リクエストを追跡します。これにより、作成された可能性があり、未対応のインポートプルリクエストをすべて終了し、指定されたリポジトリーの既存のインポートジョブがすべて削除されます。

監査ログの一括インポートの例

{
  "actor": {
    "actorId": "user:default/myuser",
    "hostname": "localhost",
    "ip": "::1",
    "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36"
  },
  "eventName": "BulkImportFindAllOrganizations",
  "isAuditLog": true,
  "level": "info",
  "message": "'get /organizations' endpoint hit by user:default/myuser",
  "meta": {},
  "plugin": "bulk-import",
  "request": {
    "body": {},
    "method": "GET",
    "params": {},
    "query": {
      "pagePerIntegration": "1",
      "sizePerIntegration": "5"
    },
    "url": "/api/bulk-import/organizations?pagePerIntegration=1&sizePerIntegration=5"
  },
  "response": {
    "status": 200
  },
  "service": "backstage",
  "stage": "completion",
  "status": "succeeded",
  "timestamp": "2024-08-26 16:41:02"
}
Copy to Clipboard Toggle word wrap

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

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

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

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

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

3.1. ホームページカードのカスタマイズ
リンクのコピー

管理者は、12 列のグリッドにあるカードの固定の高さを変更できます。

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

dynamicPlugins:
  frontend:
    janus-idp.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 のホームページにさまざまなカードを設定します。

    検索
    dynamicPlugins:
  frontend:
    janus-idp.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 }
    Copy to Clipboard Toggle word wrap
    Expand
    表3.1 利用可能なプロパティー
    プロパティーデフォルト説明

    path

    /search

    必要に応じてリンクされた検索パスを上書きする

    queryParam

    query

    必要に応じて検索クエリーパラメーター名を上書きする

    クイックアクセス
    dynamicPlugins:
  frontend:
    janus-idp.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 }
    Copy to Clipboard Toggle word wrap
    Expand
    表3.2 利用可能なプロパティー
    プロパティーデフォルト説明

    title

    Quick Access

    必要に応じてリンクされた検索パスを上書きする

    path

    none

    必要に応じて検索クエリーパラメーター名を上書きする

    見出し
    dynamicPlugins:
  frontend:
    janus-idp.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
    表3.3 利用可能なプロパティー
    プロパティーデフォルト説明

    title

    none

    タイトル

    マークダウン
    dynamicPlugins:
  frontend:
    janus-idp.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/)
                * [GitHub Showcase](https://github.com/redhat-developer/rhdh)
                * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
        - 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/)
                * [GitHub Showcase](https://github.com/redhat-developer/rhdh)
                * [GitHub Plugins](https://github.com/janus-idp/backstage-plugins)
    Copy to Clipboard Toggle word wrap
    プレースホルダー
    dynamicPlugins:
  frontend:
    janus-idp.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
    スター付きエンティティーのカタログ化
    dynamicPlugins:
  frontend:
    janus-idp.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: CatalogStarredEntitiesCard
    Copy to Clipboard Toggle word wrap
    注目のドキュメント
    dynamicPlugins:
  frontend:
    janus-idp.backstage-plugin-dynamic-home-page:
      mountPoints:
        - mountPoint: home.page/cards
          importName: FeaturedDocsCard
    Copy to Clipboard Toggle word wrap

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

前提条件

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

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

手順

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

    • 次のように、小さいウィンドウではスペース全体を、大きいウィンドウではスペースの半分を使用します。 
dynamicPlugins:
  frontend:
    janus-idp.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:
    janus-idp.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:
    janus-idp.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

第4章 Red Hat Developer Hub のクイックアクセスカードのカスタマイズ
リンクのコピー

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

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

4.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

4.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 チャートを同じクラスターにデプロイできます。

前提条件

  • Helm チャートを使用して Red Hat Developer Hub をインストールしている。

詳細は、Helm チャートを使用した OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

手順

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

  1. Red Hat OpenShift Container Platform Web コンソールの Developer パースペクティブで、+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-rhdh.yaml ファイルに追加します。 

    proxy:
  endpoints:
    # Other Proxies
    # customize developer hub instance
    '/developer-hub':
      target: ${HOMEPAGE_DATA_URL}
      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

    HOMEPAGE_DATA_URL は、http://<SERVICE_NAME>:8080 (例: http://rhdh-customization-provider:8080) という形式で定義します。

    注記

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

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

検証

  • サービスを表示するには、OpenShift Container Platform Web コンソールの Administrator パースペクティブに移動し、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 を追加して、イメージまたはアイコンを許可リストに登録します。 
kind: ConfigMap
apiVersion: v1
metadata:
  name: app-config-rhdh
data:
  app-config-rhdh.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

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

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

Red Hat Developer Hub では、データをプロキシーとして app-config.yaml ファイルに渡すことで、ラーニングパスを設定できます。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 形式で提供する専用サービス

5.1. ホストされた JSON ファイルを使用した Tech Radar ページへのデータの提供
リンクのコピー

前提条件

Operator または Helm チャートのいずれかを使用して Red Hat Developer Hub をインストールしている。

詳細は、OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

手順

JSON ファイルからデータにアクセスするには、次の手順を実行します。

  • 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/tech-radar': <path to json file> # i.e /redhat-developer/rhdh/main/packages/app/public/tech-radar/data-default.json
	 '^/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

5.2. 専用サービスを使用して Tech Radar ページにデータを提供する
リンクのコピー

専用サービスを利用すると、次のことができます。

  • 同じサービスを使用して、設定可能なすべての 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 チャートを同じクラスターにデプロイできます。

前提条件

  • Helm チャートを使用して Red Hat Developer Hub をインストールしている。

詳細は、Helm チャートを使用した OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

手順

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

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

    proxy:
  endpoints:
    # Other Proxies
    '/developer-hub/tech-radar':
      target: ${TECHRADAR_DATA_URL}
      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

    TECHRADAR_DATA_URL は、http://<SERVICE_NAME>/tech-radar (例: http://rhdh-customization-provider/tech-radar) という形式で定義します。

    注記

    TECHRADAR_DATA_URL は、URL を rhdh-secrets に追加するか、カスタム ConfigMap 内の URL 値で直接置き換えることで定義できます。

  2. 新しい設定が正しく読み込まれるように、Developer Hub Pod を削除します。

第6章 Red Hat Developer Hub のラーニングパスのカスタマイズ
リンクのコピー

Red Hat Developer Hub では、データをプロキシーとして app-config.yaml ファイルに渡すことで、ラーニングパスを設定できます。ベース URL には /developer-hub/learning-paths プロキシーを含める必要があります。

注記

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

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

次のソースからラーニングパスにデータを提供できます。

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

6.1. ホストされた JSON ファイルを使用したラーニングパスへのデータの提供
リンクのコピー

前提条件

Operator または Helm チャートのいずれかを使用して Red Hat Developer Hub をインストールしている。

詳細は、OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

手順

JSON ファイルからデータにアクセスするには、次の手順を実行します。

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

    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.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 チャートを同じクラスターにデプロイできます。

前提条件

  • Helm チャートを使用して Red Hat Developer Hub をインストールしている。

詳細は、OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

手順

専用サービスを使用してラーニングパスのデータを提供するには、次の手順を実行します。

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

       proxy:
      endpoints:
        # Other Proxies
        '/developer-hub/learning-paths':
          target: ${LEARNING_PATH_DATA_URL}
          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

    LEARNING_PATH_DATA_URL は、http://<SERVICE_NAME>/learning-paths (例: http://rhdh-customization-provider/learning-paths) という形式で定義します。

    注記

    LEARNING_PATH_DATA_URL は、URL を rhdh-secrets に追加するか、カスタム ConfigMap 内の URL 値で直接置き換えることで定義できます。

  2. 新しい設定が正しく読み込まれるように、Developer Hub Pod を削除します。

第7章 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-rhdh.yaml ファイルを変更して、デフォルトテーマの特定のパラメーターを変更または無効にしたり、完全にカスタマイズしたテーマを作成したりできます。app-config-rhdh.yaml ファイルから、次のような共通テーマコンポーネントをカスタマイズできます。

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

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

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

注記

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

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

  • Light theme
  • Dark theme
  • Auto

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

前提条件

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

手順

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

  2. Appearance パネルで、LIGHT THEME、DARK THEME、または AUTO をクリックしてテーマモードを変更します。

    カスタムテーマモード 1

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

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

app:
  branding:
    fullLogo: ${BASE64_EMBEDDED_FULL_LOGO}
1 

    iconLogo: ${BASE64_EMBEDDED_ICON_LOGO}
2
Copy to Clipboard Toggle word wrap

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

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

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

app:
  branding:
    fullLogoWidth: 110px
1 

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

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

Red Hat Developer Hub のサイドバーメニューは、主に次の 2 つの部分で構成されています。

  • メインメニュー項目: これらの項目は、サイドバーのコアナビゲーション構造を形成する静的メニュー項目です。これらのメニュー項目は一貫しており、事前定義されています。
  • 動的プラグインメニュー項目: これらの項目はメインメニューの下に表示され、インストールされているプラグインに基づいてカスタマイズできます。メインメニュー項目セクションは動的であり、設定やインストールされているプラグインに基づいて変更できます。

手順

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

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

    app-config-rhdh.yaml ファイルの例

    dynamicPlugins:
  frontend:
    <package_name>: # same as `scalprum.name` key in plugin's `package.json`
      menuItems: # optional, allows you to configure plugin menu items in the main sidebar navigation
        <menu_item_name>: # unique name in the plugin menu items list
    1 
    
          icon: home | group | category | extension | school | _<your_icon>_
    2 
    
          title: My Plugin Page # optional, same as `menuItem.text` in `dynamicRoutes`
    3 
    
          priority: 10 # optional, defines the order of menu items in the sidebar
    4 
    
          parent: favorites # optional, defines parent-child relationships for nested menu items
    5
    Copy to Clipboard Toggle word wrap

    前の例のフィールドを変更して、サイドバーメニュー項目の希望する順序と親子関係を設定できます。

    1
    この属性は、メインサイドバーナビゲーション内の一意の名前を表します。スタンドアロンメニュー項目または親メニュー項目のいずれかを表すことができます。この属性がプラグインメニュー項目を表す場合、属性の名前は dynamicRoutes 内の対応するパスと一致する必要があります。たとえば、dynamicRoutes が path: /my-plugin を定義した場合は、menu_item_name を my-plugin として定義する必要があります。

    path: /metrics/users/info などのより複雑な複数セグメントのパスの場合、menu_item_name は metrics.users.info などの完全なパスを表すために、ドット表記を使用する必要があります。パス内の末尾と先頭のスラッシュは無視されます。たとえば、path: /docs は menu_item_name: docs になり、path: /metrics/users は menu_item_name: metrics.users になります。

    2
    このオプション属性は、メニュー項目のアイコンを指定します。デフォルトのアイコンを使用することも、動的プラグインを使用してアイコンセットを拡張することもできます。Developer Hub は、次のような追加のアイコンも内部ライブラリーに提供します。

    内部ライブラリーのホームアイコン

    dynamicPlugins:
  frontend:
    <package_name>:
      menuItems:
        <menu_item_name>:
          icon: home
    Copy to Clipboard Toggle word wrap

    同様に、内部ライブラリーには、group、category、extension、school のアイコンが含まれています。アイコンが menuItem.icon の下の dynamicRoutes 設定で定義されている場合は、menuItems 設定から削除できます。また、SVG と HTML の両方のイメージアイコンがサポートされています。以下に例を示します。

    SVG アイコンの例

    icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>
    Copy to Clipboard Toggle word wrap

    イメージアイコンの例

    icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png
    Copy to Clipboard Toggle word wrap

    3
    このオプション属性は、メニュー項目のタイトルを指定します。dynamicRoutes 設定の menuItem.text でタイトルが指定されている場合は削除できます。
    4
    このオプション属性は、サイドバーに表示されるメニュー項目の順序を設定します。デフォルトの優先度は 0 で、項目はリストの一番下に配置されます。優先度の値が高いほど、その項目はサイドバー内の上の方に表示されます。この属性はセクションごとに定義できます。
    5
    このオプション属性は、現在の項目がネストされる親メニュー項目を指定します。この属性を使用する場合、親メニュー項目は、有効なプラグインの menuItems 設定内の別の場所で定義する必要があります。この属性はセクションごとに定義できます。

    menuItems の設定例

    dynamicPlugins:
  frontend:
    <package_name>:
      dynamicRoutes:
        - path: /my-plugin
          module: CustomModule
          importName: FooPluginPage
          menuItem:
            icon: fooIcon
            text: Foo Plugin Page
      menuItems:
        my-plugin: # matches `path` in `dynamicRoutes`
          priority: 10 # controls order of plugins under the parent menu item
          parent: favorites # nests this plugin under the `favorites` parent menu item
        favorites: # configuration for the parent menu item
          icon: favorite # icon from RHDH system icons
          title: Favorites # title for the parent menu item
          priority: 100 # controls the order of this top-level menu item
    Copy to Clipboard Toggle word wrap

  2. メニュー項目がメインメニュー項目として識別されるようにするには、そのキーに default. 接頭辞を追加する必要があります。以下に例を示します。

    サイドバーナビゲーションのメインメニュー項目の設定例

    dynamicPlugins:
  frontend:
    default.main-menu-items: # key for configuring static main menu items
      menuItems:
        default.<menu_item_name>: # key of the menu item configuration. `default.` prefix is required for a main menu item key
    1 
    
          parent: my_menu_group # optional, specifies the parent menu item for this item
          priority: 10 # optional, specifies the order of this menu item within its menu level
        default.<menu_group_parent_item_name>: # must be configured if it is specified as the parent of any menu items. `default.` prefix is required for a main group parent item key
    2 
    
          icon: my_menu_group_icon # required for parent menu items, defines the icon for the menu group
          title: my_menu_group_title # required for parent menu items, defines the icon for the menu group
          priority: 100 # optional, specifies the order of the parent menu item in the sidebar
    Copy to Clipboard Toggle word wrap

    1 2
    default. 接頭辞は、項目をメインメニュー項目として識別します。前の例では、default.<menu_group_parent_item_name> のように、個々のメニュー項目または親メニューグループ設定の両方に default. 接頭辞を追加できます。
    注記

    メインメニュー項目のデフォルトの優先順位によって、サイドバーでの順序が決まります。優先度の値を調整することで、静的メインメニュー項目の順序をカスタマイズできます。簡単に並べ換えできるように、各項目の優先順位とタイトルが明確であることを確認します。

7.4. Developer Hub インスタンスのアプリケーションタイトルのカスタマイズ
リンクのコピー

title フィールドに値を設定することで、アプリケーションタイトルテキストをカスタマイズできます。次に例を示します。 

app:
  title: My custom developer hub
# ...
Copy to Clipboard Toggle word wrap

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

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

app:
  branding:
    theme:
      light:
        palette:
          primary:
            main: <light_primary_color>
1 

          navigation:
            indicator: <light_indicator_color>
2 

        pageTheme:
          default:
            backgroundColor: [<light_background_color_1>, <light_background_color_2>]
3 

      dark:
        palette:
          primary:
            main: <dark_primary_color>
4 

          navigation:
            indicator: <dark_indicator_color>
5 

        pageTheme:
          default:
            backgroundColor: [<dark_background_color_1>, <dark_background_color_2>]
6 

# ...
Copy to Clipboard Toggle word wrap
1
ライトカラーパレットのメインのプライマリーカラー (例: #ffffff または white)。
2
ライトカラーパレットのナビゲーションインジケーターの色。これは、ナビゲーションパネルで選択中のタブを示す縦のバーです (例: #FF0000 または red)。
3
ライトカラーパレットのデフォルトページテーマの背景色 (例: #ffffff または white)。
4
ダークカラーパレットのメインのプライマリーカラー (例: #000000 または black)。
5
ダークカラーパレットのナビゲーションインジケーターの色。これは、ナビゲーションパネルで選択中のタブを示す縦のバーです (例: #FF0000 または red)。
6
ダークカラーパレットのデフォルトのページテーマの背景色 (例: #000000 または 黒)。

関連情報

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

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

app:
  branding:
    theme:
      light:
1 

        palette: {}
        pageTheme:
          default:
2 

            backgroundColor: "<default_light_background_color>"
3 

            fontColor: "<default_light_font_color>"
4 

            shape: none
5 

          apis:
6 

            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
1
テーマモード (例: light、dark)
2
デフォルトのページテーマ設定の yaml ヘッダー
3
ページヘッダーの背景色 (例: #ffffff または white)
4
ページヘッダーのテキストの色 (例: #000000 または black)
5
ページヘッダーのパターン (例: wave、round、none)
6
特定のページテーマ設定の yaml ヘッダー (例: apis、home)

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

app-config-rhdh.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

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

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

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

app-config-rhdh.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-rhdh.yaml ファイルで次の variant 値と mode 値を使用して、以前のデフォルト設定を適用することもできます。 

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

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

次の app-config-rhdh.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

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

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

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

app-config-rhdh.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-rhdh.yaml ファイルで次の variant 値と mode 値を使用して、以前のデフォルト設定を適用することもできます。 

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

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

次の app-config-rhdh.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

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

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

  • Patternfly
  • MUI

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

次のコードに、Developer Hub インスタンスのテーマコンポーネントを設定するために app-config-rhdh.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

第8章 Red Hat Developer Hub の ServiceNow カスタムアクション
リンクのコピー

重要

この章の機能はテクノロジープレビュー機能です。テクノロジープレビュー機能は、実稼働環境での Red Hat サービスレベルアグリーメント (SLA) ではサポートされておらず、機能的に完全ではない可能性があるため、Red Hat では実稼働環境での使用を推奨していません。テクノロジープレビュー機能は、最新の製品機能をいち早く提供して、開発段階で機能のテストを行い、フィードバックを提供していただくことを目的としています。

Red Hat のテクノロジープレビュー機能のサポートの詳細は、テクノロジープレビュー機能のサポート範囲 を参照してください。

Red Hat Developer Hub では、カタログ内のリソースを取得して登録する ServiceNow カスタムアクション (カスタムアクション) にアクセスできます。

Developer Hub のカスタムアクションを使用すると、レコードの管理を容易化、自動化できます。カスタムアクションを使用すると、次の操作を実行できます。

  • レコードの作成、更新、または削除
  • 1 つまたは複数のレコードに関する情報の取得

8.1. Red Hat Developer Hub の ServiceNow カスタムアクションプラグインの有効化
リンクのコピー

Red Hat Developer Hub では、ServiceNow カスタムアクションはプリロードされたプラグインとして提供されますが、デフォルトでは無効になっています。次の手順でカスタムアクションプラグインを有効にできます。

前提条件

  • Red Hat Developer Hub がインストールされ、実行されている。

Developer Hub のインストールの詳細は、Helm チャートを使用した OpenShift Container Platform への Red Hat Developer Hub のインストール を参照してください。

  • Developer Hub でプロジェクトを作成している。

手順

  1. カスタムアクションプラグインを有効にするには、プラグイン名を持つ package を追加し、Helm チャートの disabled フィールドを次のように更新します。 

    global:
  dynamic:
    includes:
      - dynamic-plugins.default.yaml
    plugins:
      - package: ./dynamic-plugins/dist/janus-idp-backstage-scaffolder-backend-module-servicenow-dynamic
        disabled: false
    Copy to Clipboard Toggle word wrap
    注記

    プラグインのデフォルト設定は、dynamic-plugins.default.yaml ファイルから抽出されます。ただし、pluginConfig エントリーを使用すると、デフォルト設定をオーバーライドできます。

  2. カスタムアクションにアクセスするには、Helm チャートで次の変数を設定します。 

    servicenow:
  # The base url of the ServiceNow instance.
  baseUrl: ${SERVICENOW_BASE_URL}
  # The username to use for authentication.
  username: ${SERVICENOW_USERNAME}
  # The password to use for authentication.
  password: ${SERVICENOW_PASSWORD}
    Copy to Clipboard Toggle word wrap

8.2. Red Hat Developer Hub でサポートされている ServiceNow カスタムアクション
リンクのコピー

ServiceNow カスタムアクションを使用すると、Red Hat Developer Hub でレコードを管理できます。カスタムアクションは、API 要求で次の HTTP メソッドをサポートします。

  • GET: 指定したリソースのエンドポイントから指定した情報を取得する
  • POST: リソースを作成または更新する
  • PUT : リソースを変更する
  • PATCH : リソースを更新する
  • DELETE: リソースを削除する

8.2.1. ServiceNow カスタムアクション
リンクのコピー

[GET] servicenow:now:table:retrieveRecord

Developer Hub のテーブルから指定のレコードの情報を取得します。

Expand
表8.1 入力パラメーター
名前型要件説明

tableName

string

必須

レコードの取得元のテーブル名

sysId

string

必須

取得するレコードの一意の識別子

sysparmDisplayValue

enum("true", "false", "all")

任意

true に設定してフィールド表示値を返すか、false に設定して実際の値を返すか、またはその両方を返します。デフォルト値は false です。

sysparmExcludeReferenceLink

boolean

任意

参照フィールドのテーブル API リンクを除外するには、true に設定します。デフォルト値は false です。

sysparmFields

string[]

任意

レスポンスで返されるフィールドの配列

sysparmView

string

任意

指定された UI ビューに従ってレスポンスを表示します。sysparm_fields を使用してこのパラメーターをオーバーライドできます。

sysparmQueryNoDomain

boolean

任意

ドメイン間でデータにアクセスするには (許可されている場合)、true に設定します。デフォルト値は false です。

Expand
表8.2 出力パラメーター
名前型説明

result

Record<PropertyKey, unknown>

要求のレスポンスボディー

[GET] servicenow:now:table:retrieveRecords

Developer Hub のテーブルから複数のレコードに関する情報を取得します。

Expand
表8.3 入力パラメーター
名前型要件説明

tableName

string

必須

レコードの取得元のテーブル名

sysparamQuery

string

任意

結果をフィルタリングするために使用するエンコードされたクエリー文字列

sysparmDisplayValue

enum("true", "false", "all")

任意

true に設定してフィールド表示値を返すか、false に設定して実際の値を返すか、またはその両方を返します。デフォルト値は false です。

sysparmExcludeReferenceLink

boolean

任意

参照フィールドのテーブル API リンクを除外するには、true に設定します。デフォルト値は false です。

sysparmSuppressPaginationHeader

boolean

任意

ページネーションヘッダーを抑制するには、true に設定します。デフォルト値は false です。

sysparmFields

string[]

任意

レスポンスで返されるフィールドの配列

sysparmLimit

int

任意

ページごとに返される結果の最大数。デフォルト値は 10,000 です。

sysparmView

string

任意

指定された UI ビューに従ってレスポンスを表示します。sysparm_fields を使用してこのパラメーターをオーバーライドできます。

sysparmQueryCategory

string

任意

クエリーに使用するクエリーカテゴリーの名前

sysparmQueryNoDomain

boolean

任意

ドメイン間でデータにアクセスするには (許可されている場合)、true に設定します。デフォルト値は false です。

sysparmNoCount

boolean

任意

テーブルに対して select count (*) を実行しません。デフォルト値は false です。

Expand
表8.4 出力パラメーター
名前型説明

result

Record<PropertyKey, unknown>

要求のレスポンスボディー

[POST] servicenow:now:table:createRecord

Developer Hub のテーブルにレコードを作成します。

Expand
表8.5 入力パラメーター
名前型要件説明

tableName

string

必須

レコードの保存先のテーブル名

requestBody

Record<PropertyKey, unknown>

任意

指定のレコードで定義する各パラメーターのフィールド名と関連する値

sysparmDisplayValue

enum("true", "false", "all")

任意

true に設定してフィールド表示値を返すか、false に設定して実際の値を返すか、またはその両方を返します。デフォルト値は false です。

sysparmExcludeReferenceLink

boolean

任意

参照フィールドのテーブル API リンクを除外するには、true に設定します。デフォルト値は false です。

sysparmFields

string[]

任意

レスポンスで返されるフィールドの配列

sysparmInputDisplayValue

boolean

任意

true に設定して表示値を使用するか、false に設定して実際の値を使用してフィールド値を設定します。デフォルト値は false です。

sysparmSuppressAutoSysField

boolean

任意

システムフィールドの自動生成を抑制するには、true に設定します。デフォルト値は false です。

sysparmView

string

任意

指定された UI ビューに従ってレスポンスを表示します。sysparm_fields を使用してこのパラメーターをオーバーライドできます。

Expand
表8.6 出力パラメーター
名前型説明

result

Record<PropertyKey, unknown>

要求のレスポンスボディー

[PUT] servicenow:now:table:modifyRecord

Developer Hub のテーブルのレコードを変更します。

Expand
表8.7 入力パラメーター
名前型要件説明

tableName

string

必須

レコードを変更するテーブルの名前

sysId

string

必須

変更するレコードの一意の識別子

requestBody

Record<PropertyKey, unknown>

任意

指定のレコードで定義する各パラメーターのフィールド名と関連する値

sysparmDisplayValue

enum("true", "false", "all")

任意

true に設定してフィールド表示値を返すか、false に設定して実際の値を返すか、またはその両方を返します。デフォルト値は false です。

sysparmExcludeReferenceLink

boolean

任意

参照フィールドのテーブル API リンクを除外するには、true に設定します。デフォルト値は false です。

sysparmFields

string[]

任意

レスポンスで返されるフィールドの配列

sysparmInputDisplayValue

boolean

任意

true に設定して表示値を使用するか、false に設定して実際の値を使用してフィールド値を設定します。デフォルト値は false です。

sysparmSuppressAutoSysField

boolean

任意

システムフィールドの自動生成を抑制するには、true に設定します。デフォルト値は false です。

sysparmView

string

任意

指定された UI ビューに従ってレスポンスを表示します。sysparm_fields を使用してこのパラメーターをオーバーライドできます。

sysparmQueryNoDomain

boolean

任意

ドメイン間でデータにアクセスするには (許可されている場合)、true に設定します。デフォルト値は false です。

Expand
表8.8 出力パラメーター
名前型説明

result

Record<PropertyKey, unknown>

要求のレスポンスボディー

[PATCH] servicenow:now:table:updateRecord

Developer Hub のテーブルのレコードを更新します。

Expand
表8.9 入力パラメーター
名前型要件説明

tableName

string

必須

レコードを更新するテーブルの名前

sysId

string

必須

更新するレコードの一意の識別子

requestBody

Record<PropertyKey, unknown>

任意

指定のレコードで定義する各パラメーターのフィールド名と関連する値

sysparmDisplayValue

enum("true", "false", "all")

任意

true に設定してフィールド表示値を返すか、false に設定して実際の値を返すか、またはその両方を返します。デフォルト値は false です。

sysparmExcludeReferenceLink

boolean

任意

参照フィールドのテーブル API リンクを除外するには、true に設定します。デフォルト値は false です。

sysparmFields

string[]

任意

レスポンスで返されるフィールドの配列

sysparmInputDisplayValue

boolean

任意

true に設定して表示値を使用するか、false に設定して実際の値を使用してフィールド値を設定します。デフォルト値は false です。

sysparmSuppressAutoSysField

boolean

任意

システムフィールドの自動生成を抑制するには、true に設定します。デフォルト値は false です。

sysparmView

string

任意

指定された UI ビューに従ってレスポンスを表示します。sysparm_fields を使用してこのパラメーターをオーバーライドできます。

sysparmQueryNoDomain

boolean

任意

ドメイン間でデータにアクセスするには (許可されている場合)、true に設定します。デフォルト値は false です。

Expand
表8.10 出力パラメーター
名前型説明

result

Record<PropertyKey, unknown>

要求のレスポンスボディー

[DELETE] servicenow:now:table:deleteRecord

Developer Hub のテーブルからレコードを削除します。

Expand
表8.11 入力パラメーター
名前型要件説明

tableName

string

必須

レコードを削除するテーブルの名前

sysId

string

必須

削除するレコードの一意の識別子

sysparmQueryNoDomain

boolean

任意

ドメイン間でデータにアクセスするには (許可されている場合)、true に設定します。デフォルト値は false です。

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

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トップに戻る