# テンプレートとJS APIのためのインラインscriptタグの近代化

**URL:** <https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482>\
**Category:** Development\
**Tags:** dev-news\
**Created:** [2025 年 5 月 19 日午前 9:55 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482 "2025-05-19T09:55:17Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![manton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manton/32/389960_2.png) [@manton](https://meta.discourse.org/u/manton)\
**Post date:** [2025 年 7 月 23 日午後 12:53 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/21 "2025-07-23T12:53:31Z")

</div>

「何か見落としているかもしれませんが、「ダーク」テーマを編集しておらず、HTMLタブにJSタブに移行するコードもありません。

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/7/9/b790abbd3927c96351d9ee123d51aca2571e3363.png)

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025 年 7 月 23 日午後 1:05 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/22 "2025-07-23T13:05:25Z")

</div>

その部分を削除するとエラーはなくなりますか？

---

<div class="post-metadata">

**Author:** ![manton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manton/32/389960_2.png) [@manton](https://meta.discourse.org/u/manton)\
**Post date:** [2025 年 7 月 23 日午後 7:58 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/23 "2025-07-23T19:58:41Z")

</div>

はい、どういたしまして

---

<div class="post-metadata">

**Author:** ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)\
**Post date:** [2025 年 8 月 4 日午後 5:33 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/24 "2025-08-04T17:33:45Z")

</div>

テーマにこれがあるのですが、エラーを消すにはどうすればよいですか？

```plaintext

<script type="text/discourse-plugin" version="0.5">
api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id"> #${topic.get('id')}</div>`);
  }
});

</script>

```

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025 年 8 月 4 日午後 11:05 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/25 "2025-08-04T23:05:42Z")

</div>

`api.decorateWidget();` の部分は、テーマの「CSS/HTMLの編集」の下にある「JS」タブに移動する必要があります。ただし、[ウィジェットは廃止された](https://meta.discourse.org/t/upcoming-eol-for-the-widget-rendering-system/375332)ため、[プラグアウトレット](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215)を使用することをお勧めします。

---

<div class="post-metadata">

**Author:** ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)\
**Post date:** [2025 年 8 月 5 日午後 3:19 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/26 "2025-08-05T15:19:46Z")

</div>

このようにJSに移動しました。

```plaintext
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Your code here
  api.decorateWidget('post-meta-data:after', dec => {
  if (dec.attrs.post_number === 1) {
    const topic = dec.getModel().get('topic');
    return dec.rawHtml(`<div class="post-info topic-id">&nbsp#${topic.get('id')}</div>`);
  }
});

```

そして、私のピンクの警告が赤い警告に変わりました。  
 ![PNG image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/4X/7/3/3/7333b4e8fb12077afe47b2d0ebfd7a8e741fab92.png)

私はコーダーではなく、このコードを書いたわけではないので、誰かが手伝ってくれることしかできません。  
プラグインのアウトレットについてあなたが言ったことに関しては、それは私の手に負えません。

---

<div class="post-metadata">

**Author:** ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)\
**Post date:** [2025 年 8 月 5 日午後 3:24 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/27 "2025-08-05T15:24:01Z")

</div>

もし誰かがここで十分に速く投稿しない場合は、手伝ってくれる人を見つけるために#marketplaceを検討してください。

---

<div class="post-metadata">

**Author:** ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)\
**Post date:** [2025 年 8 月 5 日午後 3:47 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/28 "2025-08-05T15:47:15Z")

</div>

とりあえず `<head>` に戻しました。  
解決されるまでは警告は気にしません。  
もしダメになったとしても、世界が終わるわけではなく、私が本当に探していたものに対する良い回避策にすぎません。

> [@Topic ID as a variable?](https://meta.discourse.org/t/topic-id-as-a-variable/374168):
>
> Is there a way to get the topic ID as a variable within a topic? Use case, we have categories for support and bug tracking tickets. I’d like to set them up with templates like so. This: \> Do \*\*not\*\* remove this line: Support request #$(topicid) Looks like this: Do not remove this line: Support request #246 Open to other ways to get the info. Just not sure how to do this.

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025 年 8 月 5 日午後 10:50 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/29 "2025-08-05T22:50:26Z")

</div>

ブラウザのコンソールにエラーはありますか？

---

<div class="post-metadata">

**Author:** ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)\
**Post date:** [2025 年 8 月 6 日午後 1:01 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/30 "2025-08-06T13:01:03Z")

</div>

> 「非推奨通知: `<script type='text/discourse-plugin'>` を使用したJSコードの追加は非推奨です。このコードを専用のJavaScriptファイルに移動してください。[deprecation id: discourse.script-tag-discourse-plugin] [info: [Modernizing inline script tags for templates & JS API](https://meta.discourse.org/t/366482)]」
> 
> 「非推奨通知: `post-meta-data` ウィジェットは非推奨となり、`api.decorateWidget` はもはやサポートされるオーバーライドではありません。[deprecated since Discourse v3.5.0.beta1-dev] [deprecation id: discourse.post-stream-widget-overrides] [info: [Upcoming post stream changes - How to prepare themes and plugins](https://meta.discourse.org/t/372063/1)]」

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025 年 8 月 6 日午後 10:59 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/31 "2025-08-06T22:59:47Z")

</div>

これをアウトレットに置き換えることができると思います。トピックのどこに追加していますか？

---

<div class="post-metadata">

**Author:** ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)\
**Post date:** [2025 年 8 月 7 日午後 4:57 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/32 "2025-08-07T16:57:56Z")

</div>

プロダクションでの出力場所について質問している場合、それはここにあります。

 ![post-number](https://global.discourse-cdn.com/meta/original/4X/9/9/d/99d31880fd90619906c18600014c1680135acb50.jpeg)  
しかし、検索可能な場所にある方がずっと良いです。

---

<div class="post-metadata">

**Author:** ![opcourdis](https://avatars.discourse-cdn.com/v4/letter/o/45deac/32.png) [@opcourdis](https://meta.discourse.org/u/opcourdis)\
**Post date:** [2025 年 8 月 12 日午後 9:56 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/33 "2025-08-12T21:56:01Z")

</div>

ウェブサイトのヘッダーに簡単にJavaScriptを追加する人向けに、以下を追加します。

1. 私にとっては、通常のJavaScriptではなく、ほとんどの場合「バニラ」JavaScriptが機能します。
2. コードを追加する際の読み込み問題を解決するには、`<script>` document.addEventListener(‘DOMContentLoaded’, function() { ここにコードを挿入 }); `</script>` の中に配置してください。これにより、ページ読み込み後にコードが読み込まれるため、エラーを防ぐことができます。

---

<div class="post-metadata">

**Author:** ![SailReal](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@SailReal](https://meta.discourse.org/u/SailReal)\
**Post date:** [2025 年 8 月 19 日午前 9:34 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/34 "2025-08-19T09:34:18Z")

</div>

フッターを全ページに表示するために、以下を使用しています。

```js
<script type="text/discourse-plugin" version="0.8.40">
    const LoginRoute = require("discourse/routes/login").default;
    
    LoginRoute.reopen({
        activate() {
            this.controllerFor('application').setProperties({
                showFooter: true
            });
        }
    });
</script>

```

これはGDPR（プライバシーポリシーとインプリント）のためです。それ以外に変更はありません。これを最も効果的に変換するにはどうすればよいでしょうか？

よろしくお願いいたします！

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2025 年 8 月 23 日午後 3:23 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/35 "2025-08-23T15:23:00Z")

</div>

指示をありがとうございます。スクリプト内のどのメソッド（もしあれば）が非推奨であり、どのメソッドに移行すべきか少し混乱しています。ページ上部にランダムなバナー画像を表示するためのものです。画像の位置を頻繁に変更する必要があるため、ローカルアップロードやGITリポジトリではなく、テーマコンポーネント内の新しい **JS** タブを使用したいです。以下は、\*\*`\u003chead\u003e`\*\*タブの現在のコードの簡単な概要です。

```plaintext
<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("my-widget", {
    html() {

        ...

        <<<javascript>>>

        ...

        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/top-notices/inject-widget">
  {{mount-widget widget="my-widget"}}
</script>
```

---

<div class="post-metadata">

**Author:** ![cogdog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cogdog/32/116536_2.png) [@cogdog](https://meta.discourse.org/u/cogdog)\
**Post date:** [2025 年 9 月 10 日午後 7:13 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/36 "2025-09-10T19:13:31Z")

</div>

Poke and guess の管理者として、これを読んで少し心配になりましたが、カスタムテーマを確認したところ、非常にシンプルなスクリプトしかありませんでした。

```plaintext
<script type="text/discourse-plugin" version="0.8.11">

// アイコンを共有ボタンに置き換えます
api.replaceIcon('d-post-share', 'up-right-from-square');
api.replaceIcon('d-topic-share', 'up-right-from-square');

</script>

```

スクリプトタグの間の内容をコピーして、JSタブに貼り付けるだけでした。簡単でした！

```javascript
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
	// アイコンを共有ボタンに置き換えます
	api.replaceIcon('d-post-share', 'up-right-from-square');
	api.replaceIcon('d-topic-share', 'up-right-from-square');
});

```

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2025 年 11 月 10 日午後 8:03 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/37 "2025-11-10T20:03:23Z")

</div>

> [@rahim123](#):
>
> 指示ありがとうございます。スクリプト内のどのメソッドが非推奨であり、どのメソッドに移行すべきか、少し混乱しています。ページ上部にランダムなバナー画像を表示するためのものです。画像の位置を頻繁に変更する必要があるため、ローカルアップロードやGITリポジトリではなく、テーマコンポーネント内の新しい **JS** タブを使用したいと考えています。以下は、\*\*`\u003chead\u003e`\*\*タブの現在のコードの簡略化された概要です。
> 
> ```plaintext
> <script type="text/discourse-plugin" version="0.8">
> const h = require("virtual-dom").h;
> api.createWidget("my-widget", {
> html() {
> 
> ...
> 
> <<<javascript>>>
> 
> ...
> 
> api.onPageChange(() => {
> this.scheduleRerender();
> });
>   
> }
> });
> </script>
> 
> <script type="text/x-handlebars" data-template-name="/connectors/top-notices/inject-widget">
> {{mount-widget widget="my-widget"}}
> </script>
> 
> ```

この件で再度質問させてください。どの新しいメソッドを使用すればよいか、まだ混乱しています。

> [@david](#):
>
> ### `<script type='text/x-handlebars'>` の変換
> 
> この方法で導入されたテンプレートは、専用の `.hbs` ファイルに移動するか、gjs ファイルにリファクタリングする必要があります。
> 
> HBS のままにするには、コネクタテンプレートを以下に配置できます。
> 
> ```plaintext
> {theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.hbs
> 
> ```
> 
> コンポーネントテンプレートは以下に配置できます。
> 
> `{theme}/javascripts/discourse/components/{component-name}.hbs`

上記と同じことを、管理パネルインターフェース（ **`\u003chead\u003e`** または **JS** タブ）を使用して実現する方法はありますか？

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025 年 11 月 11 日午前 12:49 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/38 "2025-11-11T00:49:12Z")

</div>

ウィジェットやスクリプトタグは非推奨になりました。コードをJSタブに移動し、以下のようなものを使用して、コンポーネントクラスを `top-notices` アウトレットに配置できます。

```js
import Component from "@glimmer/component";
// …

api.renderInOutlet(
  "top-notices",
  class MyBanner extends Component {
    get someGetter() {
      // ここにコードを記述
    }

    <template>
      <!-- ここにHTMLを記述 -->
      {{this.someGetter()}}
    </template>
  }
);

```

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [2025 年 11 月 19 日午後 6:24 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/40 "2025-11-19T18:24:37Z")

</div>

`api.decorateWidget` を使用する別の非推奨のテーマコンポーネントがあり、これは次のようなコードを使用しています。

```plaintext
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;

```

そして、最初の投稿の後にHTML（`href`）を挿入するために `return h("div.myimage", [`… を使用しています。

私の理解が正しければ、`api.decorateWidget` も非推奨ですが、Glimmer でこれを実現する方法がわかりません。このメソッドは、最初の投稿であるかどうかを判断するのに近そうです…  
[https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727#p-139082-conditional-rendering-6](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727#p-139082-conditional-rendering-6)  
…しかし、現在必要なHTMLを挿入するための推奨される方法が何であるかを把握できません。

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025 年 11 月 20 日午前 2:24 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/41 "2025-11-20T02:24:30Z")

</div>

完全なコードまたはリポジトリへのリンク（もしあれば）を送っていただけますか？ありがとうございます！

[前のページ](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482.md?page=1)

[次のページ](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482.md?page=3)