---
title: "管理画面にタブ UI を実装する"
description: "管理画面の編集画面にタブを追加するコントローラーとテンプレートの書き方、保存後のタブ状態の保持。"
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.cs-cart.jp/llms.txt
> Use this file to discover all available pages before exploring further.

# 管理画面にタブ UI を実装する

アドオンで管理画面にタブ UI を追加する実装パターンです。自作の編集画面のほか、既存の画面へタブを追加する場合にも使えます。

タブは、コントローラー（PHP）でタブを定義し、テンプレート（.tpl）で中身を定義します。

> **タブ ID を一致させる**
>
> `<div id="content_XXX">` の `XXX` は、`Registry::set('navigation.tabs.XXX', ...)` の `XXX` と完全に一致させる必要があります。

## 1. コントローラーでタブを定義する

```php
Registry::set('navigation.tabs.general', [
    'title' => __('general'),
    'js'    => true,
]);

Registry::set('navigation.tabs.custom_tab', [
    'title' => __('my_addon.custom_tab_title'),
    'js'    => true,
]);

// 条件付きでタブを追加する
if ($some_condition) {
    Registry::set('navigation.tabs.optional_tab', [
        'title' => __('my_addon.optional_tab'),
        'js'    => true,
    ]);
}
// テンプレートでも同じ条件を使えるように、ビューに渡す
Tygh::$app['view']->assign('some_condition', $some_condition);

// 選択中のタブを管理する
$selected_section = isset($_REQUEST['selected_section']) ? $_REQUEST['selected_section'] : 'general';
Tygh::$app['view']->assign('selected_section', $selected_section);
```

## 2. テンプレートでタブの中身を定義する

```smarty
{capture name="tabsbox"}
    {* 基本情報のタブ *}
    <div id="content_general">
        <fieldset>
            {* タブの内容 *}
        </fieldset>
    </div>

    {* カスタムタブ *}
    <div id="content_custom_tab">
        {include file="addons/my_addon/views/components/custom_content.tpl"}
    </div>

    {* 条件付きのタブ（コントローラーと同じ条件にする） *}
    {if $some_condition}
    <div id="content_optional_tab">
        {* タブの内容 *}
    </div>
    {/if}
{/capture}

{include file="common/tabsbox.tpl"
    content=$smarty.capture.tabsbox
    active_tab=$selected_section
    track=true
}
```

## 3. 保存後も同じタブを開く

コントローラーで、リダイレクトの URL に選択中のタブを付けます。

```php
$selected_section = isset($_REQUEST['selected_section']) ? $_REQUEST['selected_section'] : 'general';
return [CONTROLLER_STATUS_OK, 'controller.update?id=' . $id . '&selected_section=' . $selected_section];
```

テンプレートでは、hidden フィールドで選択中のタブを送信します。

```smarty
<input type="hidden" class="cm-no-hide-input" name="selected_section" id="selected_section" value="{$selected_section}" />
```

## 4. 既存の画面にタブを追加する

既存の画面へは、Post コントローラーとテンプレートフックで追加します。

コントローラー（`profiles.post.php` など）：

```php
Registry::set('navigation.tabs.my_addon_tab', [
    'title' => __('my_addon.tab_title'),
    'js'    => true,
]);
```

テンプレート（`hooks/profiles/tabs_extra.post.tpl`）：

```smarty
<div id="content_my_addon_tab" class="cm-hide-save-button">
    {* タブの内容 *}
</div>
```

## タブで使うクラス

| クラス | 用途 |
| --- | --- |
| `cm-hide-save-button` | そのタブを開いている間、保存ボタンを非表示にします。読み取り専用のタブに向いています。 |
| `cm-no-hide-input` | フォームの送信時に、hidden フィールドの値を維持します。 |

## チェックリスト

* [ ] タブ ID が、PHP とテンプレートで一致している
* [ ] 条件付きのタブは、PHP とテンプレートの両方に同じ条件を書いている
* [ ] `track=true` を指定し、タブの状態を URL に保持している
* [ ] 保存後のリダイレクトで、タブの状態を維持している

## 関連ページ

* [Pre&Post コントローラー](/core/controllers/pre-and-post-controllers/)
* [テンプレートフック](/addon-development/hooks/template-hooks/)

Source: https://docs.cs-cart.jp/addon-development/tips/admin-tabs/index.mdx