3.9. ブランド化

「Che-Theia のブランディング」

3.9.1. Che-Theia のブランディング

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

Welcome ページと About ダイアログ:
- プロダクト名
- 製品ロゴ
- 説明
- 役立つリソースのリスト (ウェルカム ページの ヘルプ セクション)

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

カスタマイズされた Che-Theia でコンテナーイメージをビルドします。
カスタムイメージを使用するエディターの meta.yaml を定義します。
カスタムエディターを使用して 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"
        }
    }
}

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"
    ...
}

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

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

前提条件

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

手順

サンプル Dockerfile をダウンロードします。
Dockerfile ディレクトリーで、branding/ サブディレクトリーを作成します。カスタム product.json ファイルとロゴイメージを branding/ ディレクトリーに置きます。
Che-Theia でコンテナーイメージをビルドし、イメージをコンテナーレジストリーにプッシュします。
```
$ podman build -t username/che-theia-devspaces:next .
$ podman push username/che-theia-devspaces:next
```

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

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

前提条件

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

手順

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

che-plugin-registry リポジトリーのクローンを作成し、デプロイするバージョンをチェックアウトします。以下を参照してください。
administration-guide:examples/snip_devspaces-clone-the-plug-in-registry-repository.adoc
che-editors.yaml ファイルを開きます。
id が eclipse/che-theia/next であるエントリーを編集し、containers セクションの image の値をカスタム Che-Theia コンテナーイメージを参照するように置き換えます。
レジストリーをビルドします。
administration-guide:examples/snip_devspaces-build-a-custom-plug-in-registry.adoc
./dependencies/che-plugin-registry/v3/plugins/eclipse/che-theia/next ディレクトリーに移動します。
このディレクトリーの meta.yaml ファイルを、HTTP リソースとして使用できる一般にアクセス可能な場所に公開します。

サンプル 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