# コンポーネントの新しいJSタブにスクリプトを正しく移動する方法

**URL:** https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603
**Category:** Development
**Tags:** composer, tags
**Created:** [2025 年 8 月 6 日午後 7:23 UTC](https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603 "2025-08-06T19:23:46Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025 年 8 月 6 日午後 7:23 UTC](https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603/1 "2025-08-06T19:23:46Z")

</div>

> **[管理者通知]** テーマ「\_Base」には、更新が必要なコードが含まれています。(ID:discourse.script-tag-discourse-plugin) (_[詳細はこちら](https://meta.discourse.org/366482)_)

私のフォーラムの1つでは、JSスクリプトを新しいJSカスタマイズタブに移動するだけで、このメッセージを削除しました。

もう一方のフォーラムでは、それほど簡単にはいきません。

これは、タグを受け入れるカテゴリでのみコンポーザーのタグフィールドを表示する、古いオーバーライドです。

```html
<script type="text/discourse-plugin" version="1.4.0">    
    // show tag chooser in the composer only when necessary
    const discourseComputed = require("discourse-common/utils/decorators").default;
    const EmberObject = require("@ember/object").default;
    function toggleTagChooser(display = "hide") {
        if (display == "show") {
            document.getElementsByClassName("mini-tag-chooser")[0].style.display = "block";
            document.getElementsByClassName("reply-area")[0].classList.add("with-tags");
            return;
        }
        // Verify the existence of the tag choser
        let tagChoser = document.getElementsByClassName("mini-tag-chooser");
        if(tagChoser.length > 0) {
            tagChoser[0].style.display = "none";
            document.getElementsByClassName("reply-area")[0].classList.remove("with-tags");
        }
        return;
    }
    api.modifyClass('controller:composer', {
        pluginId: "toggleTagChoser",
        @discourseComputed("model.category", "model.tags", "lastValidatedAt")
        tagValidation(category, tags, lastValidatedAt) {
            // custom code to toggle the tag choser
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // end of the custom code
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags incorporates both minimum_required_tags, and required_tag_groups
                if (category.minimumRequiredTags > tagsArray.length) {
                    return EmberObject.create({
                        failed: true,
                        reason: I18n.t("composer.error.tags_missing", {
                            count: category.minimumRequiredTags,
                        }),
                        lastShownAt: lastValidatedAt,
                    });
                }
            }
        }
    });
</script>

```

このスクリプトは、metaで投稿された類似の（そして古い、2019年以前の）変更に基づいていましたが、元の投稿は見つけられません。

とにかく、質問は2つあります。

1. これをJSタブに正しく移動するにはどうすればよいですか？可能ですか、それともテーマコンポーネントを作成する必要がありますか？

2. 特定のカテゴリでのみコンポーザーのタグセレクターを非表示/表示する、よりエレガントな方法はありますか？私のフォーラムでは、タグは1つのカテゴリ（`#search`と`#offer`タグ付きの広告カテゴリ）にのみ使用しています。

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2025 年 8 月 6 日午後 7:51 UTC](https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603/2 "2025-08-06T19:51:11Z")

</div>

ボディのカテゴリクラスに基づいてタグフィールドを表示/非表示するためにCSSを使用できますが、それがよりエレガントかどうかは議論の余地があります:slight\_smile:

---

<div class="post-metadata">

### Author: ![renato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato/32/383632_2.png) [@renato](https://meta.discourse.org/u/renato)
#### Post date: [2025 年 8 月 6 日午後 8:05 UTC](https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603/3 "2025-08-06T20:05:25Z")

</div>

> [@Canapin](#):
>
> フォーラムでは、1つのカテゴリ（`#search`と`#offer`タグを持つ広告カテゴリ）にのみタグを使用しています。

スタッフにとっては解決しませんが（[https://meta.discourse.org/t/make-category-tag-rules-restrictions-apply-to-moderators-too/240496）、タグをそのカテゴリに制限すると、他のカテゴリでは（スタッフ以外は）使用できなくなります。カテゴリの`/edit/tags`から：](https://meta.discourse.org/t/make-category-tag-rules-restrictions-apply-to-moderators-too/240496%EF%BC%89%E3%80%81%E3%82%BF%E3%82%B0%E3%82%92%E3%81%9D%E3%81%AE%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%81%AB%E5%88%B6%E9%99%90%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81%E4%BB%96%E3%81%AE%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%81%A7%E3%81%AF%EF%BC%88%E3%82%B9%E3%82%BF%E3%83%83%E3%83%95%E4%BB%A5%E5%A4%96%E3%81%AF%EF%BC%89%E4%BD%BF%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%81%AE%60/edit/tags%60%E3%81%8B%E3%82%89%EF%BC%9A)

> 上記で指定されたタグとタググループは、このカテゴリおよびそれらを指定する他のカテゴリでのみ利用可能になります。他のカテゴリでの使用はできません。

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025 年 8 月 6 日午後 9:46 UTC](https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603/5 "2025-08-06T21:46:13Z")

</div>

久しぶりなので、仕組みを確認してみました。

- カテゴリが選択されていなくても（他のユーザーには管理者用以外のタグが利用できないカテゴリであっても）、新規トピック作成時のコンポーザーにはタグ入力欄が表示されてしまいます。これを防ぎたいと考えています。
- CSS のみでは対応できません。コンポーザーは任意のページで開かれるため、目的のカテゴリを親としてコンポーザーのタグ入力欄を非表示にするような CSS ターゲットが存在しないからです。そのため、私は JavaScript を使用していました。

何か見落としている可能性はありますが、私の目的を達成するにはまだスクリプトが必要です。

これに関する元の #Contribute > Feature トピックは以下にあります。

> [@Enable tagging only in some categories](https://meta.discourse.org/t/enable-tagging-only-in-some-categories/45335?u=canapin):
>
> This is looking good @neil. One thing that would be good relating to this would be the simple option to ‘enable tags in category’ option in the category modal. In my use case I only want tags (and specific tags at that) to be able to be used in specific categories. E.g. in those categories where I don’t want tags enabled I wouldn’t want the tag input field to be shown to users. Is this doable?

この機能の改善に向けた動きが十分でなかったため、sam 氏によると、ここでは #pr-welcome は望まれていなかったようです。

というわけで、カスタム JS による解決策に頼るしかありません（そして、それを修正する必要があります 🥲）。

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2025 年 8 月 7 日午前 8:34 UTC](https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603/6 "2025-08-07T08:34:23Z")

</div>

> [@Canapin](#):
>
> これをJSタブに正しく移動するにはどうすればよいですか？可能ですか、それともテーマコンポーネントを作成する必要がありますか？

コピー＆ペーストするだけで可能です。JSタブ内のものは、` `` と全く同じように実行されます。動作しない場合は、コードを共有していただけますか？

> [@Canapin](#):
>
> 目的のカテゴリを対象とする親CSSがありません

クレイジーなモダンCSSを使えば可能です：

```css
.d-editor-container:has(.category-input .select-kit-header[data-name="Support"]) .tags-input {
    display: none !important;
}

```

^^これはMetaの「Support」カテゴリのタグ入力を非表示にします。

`[data-name="Support"]` を `:not(data-name="Support")` に置き換えることで、ロジックを反転させることができます。

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025 年 8 月 7 日午前 9:33 UTC](https://meta.discourse.org/t/how-to-properly-move-my-script-to-the-new-js-tab-in-my-component/377603/7 "2025-08-07T09:33:46Z")

</div>

Holy moly! どうやら私の2012年のCSSスキルはもう通用しないようです。なんだか変な感じですが、2012年は文字通り昨日だったと確信していたのに！

* * *

以下のようにしました。

```scss
.d-editor-container:not(:has(.category-input .select-kit-header\[data-name=“Trading Post”\])) .tags-input {
    display: none;
}

```

これにより、Trading Post以外のすべてのカテゴリで非表示になります。

皆さん、ありがとうございます！