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

3.9. ブランド化

3.9.1. Che-Theia のブランディング
リンクのコピー

本章では、Che-Theia インターフェースおよびブランディングをカスタマイズする方法について説明します。以下の要素のカスタマイズが可能です。

  • Welcome ページと About ダイアログ:

    • プロダクト名
    • 製品ロゴ
    • 説明
    • 役立つリソースのリスト (ウェルカム ページの ヘルプ セクション)

カスタマイズされた Che-Theia の使用を開始するには、以下を実行します。

  1. カスタマイズされた Che-Theia でコンテナーイメージをビルドします。
  2. カスタムイメージを使用するエディターの meta.yaml を定義します。
  3. カスタムエディターを使用して devfile からワークスペースを作成します。

3.9.1.1. Che-Theia のカスタムブランディング値の定義
リンクのコピー

本セクションでは、Che-Theia の基本的なブランディング要素の定義をカスタマイズする方法を説明します。

手順

ウェルカム ページで、製品の新しい名前、ロゴ、説明、およびハイパーリンクのリストを使用して product.json ファイルを作成します (product.json の例: 

{
    "name": "Red Hat OpenShift Dev Spaces",
1 

    "icon": "icon.png",
2 

    "logo": {
3 

        "dark": "logo-light.png",
        "light": "logo-dark.png"
    },
    "welcome": {
4 

        "title": "Welcome to Your Workspace",
        "links": ["website", "documentation"]
    },
    "links": {
5 

        "website": {
            "name": "Discover Red Hat OpenShift Dev Spaces",
            "url": "https://developers.redhat.com/products/openshift_dev_spaces/overview"
        },
        "documentation": {
            "name": "Browse Documentation",
            "url": "https://www.redhat.com/docs"
        }
    }
}
Copy to Clipboard Toggle word wrap
1
Welcome ページと About ダイアログの name: タブタイトル。
2
icon : Welcome ページタブタイトルのアイコン。
3
logo: ウェルカム ページ (最大高さ 80 ピクセル) および バージョン 情報ダイアログ (最大高さ 100 ピクセル) の暗いテーマと明るいテーマの製品ロゴ。透過的な背景でイメージを使用します。相対パス、絶対パス、またはイメージへの URL を定義します。
4
Welcome: Welcome ページの動作。招待タイトルと Help セクションのリンクをカスタマイズします。welcome/links プロパティーが定義されていない場合は、Welcome ページに link セクションへのリンクが表示されます。
5
link: プロダクトの便利なリソースの一覧。タグを使用してリンクをグループ化し、検索を簡素化します。
注記

ダブルアンドライトの両方には、1 つのロゴイメージのみを使用するには、以下を実行します。 

{
    ...
    "logo": "product-logo.png"
    ...
}
Copy to Clipboard Toggle word wrap

3.9.1.2. カスタムブランディングを使用した Che-Theia コンテナーイメージのビルド
リンクのコピー

本セクションでは、カスタムブランディングを適用して Che-Theia コンテナーイメージをビルドする方法を説明します。

前提条件

  • カスタムブランディング定義が含まれる product.json ファイル。

手順

  1. サンプル Dockerfile をダウンロードします。
  2. Dockerfile ディレクトリーで、branding/ サブディレクトリーを作成します。カスタム product.json ファイルとロゴイメージを branding/ ディレクトリーに置きます。

  3. Che-Theia でコンテナーイメージをビルドし、イメージをコンテナーレジストリーにプッシュします。 

    $ podman build -t username/che-theia-devspaces:next .
$ podman push username/che-theia-devspaces:next
    Copy to Clipboard Toggle word wrap

3.9.1.3. カスタムブランディングを使用した Che-Theia のテスト
リンクのコピー

本セクションでは、カスタムブランディングで新規ワークスペースを開き、カスタマイズされた Che-Theia をテストする方法を説明します。

前提条件

  • カスタムブランディング定義でビルドされた Che-Theia コンテナーイメージ。

手順

カスタムの Che-Theia イメージをテストするには、カスタム cheEditor を記述する新規の meta.yaml ファイルを作成し、テストワークスペースに devfile で使用します。

  1. che-plugin-registry リポジトリーのクローンを作成し、デプロイするバージョンをチェックアウトします。以下を参照してください。

    administration-guide:examples/snip_devspaces-clone-the-plug-in-registry-repository.adoc

  2. che-editors.yaml ファイルを開きます。
  3. id が eclipse/che-theia/next であるエントリーを編集し、containers セクションの image の値をカスタム Che-Theia コンテナーイメージを参照するように置き換えます。

  4. レジストリーをビルドします。

    administration-guide:examples/snip_devspaces-build-a-custom-plug-in-registry.adoc

  5. ./dependencies/che-plugin-registry/v3/plugins/eclipse/che-theia/next ディレクトリーに移動します。
  6. このディレクトリーの meta.yaml ファイルを、HTTP リソースとして使用できる一般にアクセス可能な場所に公開します。

  7. サンプル che-theia-branding-example devfile を使用してワークスペースを作成し、変更を適用します。

    reference フィールドが公開された meta.yaml ファイルを参照することを確認します。 

    metadata:
  name: che-theia-all
projects:
  - name: che-cheia-branding-example
    source:
      location: 'https://github.com/che-samples/che-theia-branding-example.git'
      type: git
      branch: master
components:
  - type: cheEditor
    reference: >-
      https://raw.githubusercontent.com/che-samples/che-theia-branding-example/master/che-editor.meta.yaml
apiVersion: 1.0.0
    Copy to Clipboard Toggle word wrap

  8. ワークスペースを実行して変更を表示します。

トップに戻る
Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

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

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

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

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

会社概要

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

Theme

© 2025 Red Hat