3.9. ブランド化
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ワークスペースを実行して変更を表示します。
Che-Theia のテーマ:
Che-Theia の軽量テーマ:
