# カスタムブランディング

<figure><img src="/files/BKx35OYdmFfS0VzdBvkw" alt=""><figcaption></figcaption></figure>

Keeperコネクションマネージャーでは、フロントエンドユーザーインターフェースCSSのカスタマイズとカスタムJavascriptの注入がサポートされています。本ページでは、カスタマイズしたブランディングを表示してカスタムJavascriptコードを実行するようにウェブアプリケーションを変更する方法について解説します。

### 概要

Keeperコネクションマネージャーを使用して、プラットフォーム全体にカスタム拡張機能を追加できる「拡張機能」を開発できます。簡単な修正でブランディングやUIを変更できる例をご紹介します。

Keeperコネクションマネージャーの拡張機能では以下が可能となります。

1. 代替の認証方法および接続ソース/ユーザーのデータソース
2. Guacamoleが認証やトンネル接続などのタスクを実行するときに通知されるイベントリスナー
3. 追加のCSSファイルと静的リソースを使用して、ユーザーインターフェースをテーマにそって構成またはブランディング
4. 自動的にロードされるJavaScriptを使用して、KeeperコネクションマネージャーのJavaScriptコードを拡張
5. 表示言語の追加や既存の言語の翻訳文字列の変更

### 拡張形式

Keeperコネクションマネージャーの拡張機能は標準のJavaの`.jar`ファイル (基本的には`.zip`ファイル) で、拡張機能に必要なすべてのクラスとリソースおよびKCM拡張機能のマニフェストが含まれます。マニフェストがアーカイブのルートになければならないことを除いて、拡張機能に決まった構造はありません。Javaクラスとパッケージ (存在する場合) は、ルートを基準とした`.jar`からも読み取られます。

### ブランディング拡張機能の例

以下は、カスタムブランディングで既存のKeeperコネクションマネージャーインストールを変更する手順となります。

**(1)** Keeperコネクションマネージャーまたはワークステーションを実行しているインスタンスで、以下のように[サンプルリポジトリ](https://github.com/Keeper-Security/kcm-branding)を取得するか、zipファイルとしてダウンロードします。

{% code overflow="wrap" %}

```
git clone https://github.com/Keeper-Security/kcm-branding.git
cd kcm-branding
```

{% endcode %}

**(2)** ブランディングフォルダの内容を`kcm-branding.jar`というファイルに圧縮します。ファイルの名前は、ユニークな名前である限り自由です。Keeperコネクションマネージャーが目的のフォルダに配置された拡張機能をすべてロードします。

```
zip -r kcm-branding.jar guac-manifest.json css/ html/ js/ resources/ translations/
```

**(3)** ファイルを/etc/kcm-setupフォルダまたはサーバー上の任意のパスにコピーします。

```
sudo cp kcm-branding.jar /etc/kcm-setup/
```

**(4)** `docker-compose.yml`ファイル (`/etc/kcm-setup/docker-compose.yml`など) には、以下の2つの変更が必要となります。

* 「guacamole」セクションで、Jarファイルへの参照を追加して、ホストからguacamoleインスタンスに直接ボリュームマウントします。Keeperコネクションマネージャーはjarファイルをすべて取得して処理するため、ファイルの名前は重要ではありません。
* 値が「N」の環境変数**USE\_DEFAULT\_BRANDING**を追加します。

以下はその例です。

{% code overflow="wrap" lineNumbers="true" %}

```
    guacamole:
        image: keeper/guacamole:2
        restart: unless-stopped
        environment:
            ...
            USE_DEFAULT_BRANDING:"N"
        volumes:
            ...
            - "/etc/kcm-setup/kcm-branding.jar:/etc/guacamole/extensions/kcm-branding.jar:ro"
```

{% endcode %}

**(5)** コンテナを再起動します。

```
sudo ./kcm-setup.run stop
sudo ./kcm-setup.run upgrade
```

以上です。サービスが起動すると、Keeperコネクションマネージャーページのブランディングが刷新され、ページを読み込む際にポップアップアラートが表示されます。

<figure><img src="/files/NWIZh7QKWLvudpcRHRY9" alt=""><figcaption><p>Javascriptの例</p></figcaption></figure>

<figure><img src="/files/Cs1BpsvHSL7F29FlzdRk" alt=""><figcaption><p>HTML/CSSの修正例</p></figcaption></figure>

さらに変更を繰り返すには、リソースを編集してファイルを圧縮し、zipファイルを目的のフォルダにコピーして、Keeperコネクションマネージャーコンテナを再起動します。

### 技術的詳細

#### CSS

guac-manifest.jsonで参照されるCSSファイルは、ロード時にアプリケーションCSSに追加されるため、CSSプロパティが上書きされます。

#### Javascript

guac-manifest.jsonで参照されるJavascriptファイルは、ロード時にアプリケーションJavascriptに追加されます。

#### HTMLの修正

Keeperコネクションマネージャーのインターフェースの既存のHTML構造は、`guac-manifest.json`のhtmlプロパティによって宣言された特別な「patch」HTMLファイルを使用して変更できます。これらのファイルはHTMLフラグメントであり、他のHTMLファイルと同じですが、Keeperコネクションマネージャー独自のHTMLを特別な方法で変更するようにKeeperコネクションマネージャーに指示するKeeperコネクションマネージャー固有のメタタグが含まれている点が異なります。各メタタグの形式は以下のとおりです。

```
<meta name="NAME" content="SELECTOR">
```

ここで、`SELECTOR`は、変更のベースとして機能するKeeperコネクションマネージャーインターフェース内の要素と一致するCSSセレクタで、`NAME`は以下の定義済み変更のいずれかになります。

`before`

CSSセレクタに一致する要素の直前に、指定したHTMLを挿入します。

`after`

CSSセレクタに一致する要素の直後に、指定したHTMLを挿入します。

`replace`

CSSセレクタに一致する要素を、指定したHTMLに置き換えます。

`before-children`

CSSセレクタに一致する要素の最初の子 (存在する場合) の直前に、指定したHTMLを挿入します。一致する要素に子がない場合は、HTMLがそのまま一致する要素の内容となります。

`after-children`

CSSセレクタに一致する要素の最後の子 (存在する場合) の直後に、指定したHTMLを挿入します。一致する要素に子がない場合は、HTMLがそのまま一致する要素の内容となります。

`replace-children`

CSSセレクタに一致する要素の内容をすべて指定したHTMLで置き換えます。

たとえば、ごく一般的なニーズとしてあいさつ文と企業のプライバシーポリシーへのリンクを追加するには、以下のようなHTMLファイルを追加します。

```
<meta name="after" content=".login-ui .login-dialog">

<div class="welcome">
    <h2>Welcome to our Keeper Connection Manager Demo</h2>
    <p>
        Please be sure to read our <a href="#">privacy
        policy</a> before continuing.
    </p>
</div>
```

拡張機能をインストールしてKeeperコネクションマネージャーを再起動すると、最初からKeeperコネクションマネージャーのHTMLの一部であるかのように、「welcome」divブロックとその内容がログインダイアログ (`.login-ui .login-dialog`に一致する唯一の要素) のすぐ下に自動的に挿入されます。

### トラブルシューティング

拡張機能の適用後にページに空白が読み込まれた場合は、以下のようにログを確認します。

```
sudo ./kcm-setup.run logs -f guacamole
```

nullポインター例外が発生する場合は、`guac-manifest.json`で参照されているリソースの1つが`.jar` アーカイブで見つからないことが原因である可能性があります。すべてのファイルとフォルダが正しく圧縮されていることを確認します。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.keeper.io/keeper-connection-manager/jp/using-keeper-connection-manager/custom-branding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.