Discourse ステッカー

Don · 2023 年 10 月 3 日午前 11:19


	概要	ステッカーの追加
	プレビュー	Theme Creator
	リポジトリ	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	役に立ちましたか？	> ./support --coffee
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourseテーマ初心者ですか？	Discourseテーマの使用に関する入門ガイド

このテーマコンポーネントをインストール

Discourse Stickers v1.0

こんにちは

このテーマコンポーネントを使用すると、投稿やチャットメッセージにステッカーを追加できます…

動作について

コンポーザー内にボタンを配置し、クリックするとステッカーモーダルが開きます。

ステッカーモーダル

ステッカーをクリックすると、コンポーザーに追加されます。
画像のMarkdownコードは [wrap=sticker] img [/wrap] の中に配置されるため、ステッカーの画像は他の画像とは別にスタイルを適用できます。

ステッカーは常に新しい行に配置され、タイトルとサイズを含みます。サイズは現在 180x180px に固定されています。各ステッカーには影が付いており、画像をよりステッカーらしく見せています…
コンポーザーと投稿内では、ホバー時のメタ情報はCSSで非表示にされています。

セットアップ方法

まず、ステッカーとして使用したい画像をアップロードする必要があります。これらの画像をトピックの投稿にアップロードしてください。
これらの画像を使用し、画像URLとMarkdown URLが必要です。

例:
投稿に画像をアップロードしました。画像URLの optimized バージョンを使用しています。これはの場所で確認できますが、画像のURLは任意のものを使用できます。

括弧内にあるMarkdownアップロードURL

設定

ステッカー画像
ステッカー画像の設定で、ステッカーを設定できます…

title: これは画像のタイトルとaltです。Markdownコードのタイトルにも反映されます。

emoji: ステッカーモーダル内の各ステッカーの右上隅に表示されます。

previewUrl: ステッカーモーダルに表示される画像です。

markdownUrl: これまでアップロードした画像のMarkdown URLです。

Discourse Stickers v2.0

こんにちは

このテーマコンポーネントを使用すると、投稿、返信、チャットメッセージにステッカーを追加できます。

バージョン 2.0 では、ネイティブな画像アップロード、ステッカーグループ、カテゴリベースの表示制御、チャット専用コントロールを備えた再設計されたステッカーマネージャーを導入しました。

動作について

このコンポーネントはコンポーザーにステッカーボタンを追加します。クリックするとステッカーピッカーが開きます。

ステッカーを選択すると、コンポーザーに直接挿入されます。

通常の投稿と返信では、ステッカーは以下のようにラップされます：

[wrap=sticker]![Sticker title|180x180](image)[/wrap]

これにより、ステッカー画像は通常の画像とは別にスタイルを適用できます。

公開されたステッカーはクリックできず、Discourseのライトボックスは開きません。

ステッカーピッカー

多くのステッカーのコレクションがある場合、ステッカーピッカーはグループをサポートします。

複数のグループが設定されている場合、ピッカーの上部にフィルターバーが表示されます。

グループに属さないステッカーは自動的にその他に配置されます。

現在のコンテキストで利用可能なステッカーがない場合、ピッカーは空の状態を表示します。

セットアップ方法

ステッカーの設定はv2.0で完全に再設計されました。

もはやトピックに画像を最初にアップロードしたり、画像URLを手動でコピーする必要はありません。

コンポーネントの設定に移動して、ステッカーを追加するだけです。画像フィールドを使用して、ステッカーを直接アップロードできます。

ステッカー設定

各ステッカーには、現在以下のプロパティを設定できます：

タイトル

ステッカーの名前です。これはステッカーのツールチップとaltテキストとして使用されます。

グループ

任意です。グループを使用してステッカーを整理し、ピッカーでフィルターできます。

空欄にすると、ステッカーはその他に配置されます。

絵文字バッジ

任意です。ステッカーの隅に小さな絵文字を表示します。

実際の絵文字や :heart: や :smile: のようなDiscourseショートコードを使用できます。

画像

ステッカー画像です。

設定を使用して画像を直接アップロードします。ピッカーと投稿されたステッカーの両方で同じ画像が使用されます。

カテゴリ

任意です。ステッカーを特定のカテゴリに制限します。

カテゴリが選択されている場合、そのカテゴリのいずれかが選択されている場合のみ、通常の投稿/返信コンポーザーにステッカーが表示されます。

空欄にすると、すべてのカテゴリでステッカーが利用可能になります。

この設定はチャットには影響しません。

ダイレクトメッセージから非表示

有効にすると、ステッカーはプライベート/ダイレクトメッセージのチャットでは利用できません。

チャットチャンネル

任意です。ステッカーを特定の公開チャットチャンネルに制限します。

カンマ区切りでチャンネルIDを入力してください。

例えば、チャンネルURLが：

/chat/c/channel-name/123

の場合、使用するのは：

123

です。

空欄にすると、すべての公開/カテゴリチャットチャンネルでステッカーが利用可能になります。

v1.xからのアップグレード

コンポーネントの古いバージョンをすでに使用している場合、ステッカーコレクションを再作成する必要はありません。

v2.0には、旧 sticker_images 設定を新しい形式に自動的に変換する設定マイグレーションが含まれています。

マイグレーションは以下を保持します：

ステッカーのタイトル
絵文字バッジ
既存のアップロードされたステッカー画像

既存のアップロード画像は元のDiscourseアップロードに解決され、新しい画像フィールドに設定されます。

旧 previewUrl と markdownUrl 設定はもはや必要ありません。

コンポーネントを更新するだけで、既存のステッカーは自動的にマイグレーションされるはずです。

Discourse ステッカー Theme component

Discourse Stickers v2.0 このリリースでは、このコンポーネントの大幅なモダナイズが行われています。内部の改善が多数加えられたほか、ステッカーの構成が再設計され、大規模なステッカーコレクションの管理がはるかに容易になりました。 [Screenshot 2026-08-14 at 16.28.56] [Screenshot 2026-08-14 at 16.29.18] [Screenshot 2026-08-14 at 16.29.25] [Screenshot 2026-08-14 at 16.29.07] ステッカー設定の完全な再設計 v2.0 で最大の変更点は、ステッカーの構成自体です。旧バージョンでは、ステッカーは以下の値を含む JSON 設定として保存されていました。 title emoji previewUrl markdownUrl v2.0 では、これらが Discourse 標準の objects 設定タイプに置き換えられました。各ステッカーは、独自のフィールド…

Canapin · 2023 年 10 月 3 日午前 11:52

こんにちは、ドン

素晴らしい仕事です！ちょっと見てみました :)\n\nステッカーの管理は少し面倒です – 特にプレビューの部分 – アバターやカスタム絵文字のような、これ専用のレイアウトや機能がないためですが、もっと大変な作業になることは理解しています。\n\nドロップシャドウフィルターはGIFが停止しているときは無効になり、ここにある中央の画像（ライトボックスをトリガーする長方形のJPG）には四角い背景として表示されません。\n\n chrome_k71dGHbeLH \n\nフィルター効果は本当に素晴らしいですが、オプション設定にするのが良いと思います \n\nステッカーピッカーは次のような均等配置を使用しています。\n\n\nXXX\n X \n\nしかし、右揃えの方が好みかもしれません。\n\nXXX\nX \n\n\nもちろん、これは非常に個人的な意見です

Don · 2023 年 10 月 3 日午後 2:10

フィードバックありがとうございます @Canapin

これのために新しい設定を追加しました…
Screenshot 2023-10-03 at 16.04.17

これも完了しました…ずっと良くなりました

Don · 2023 年 10 月 3 日午後 4:54

更新: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · 2023 年 10 月 28 日午後 3:53

特定のカテゴリに限定することは可能でしょうか？（また、カテゴリごとに異なるステッカーを設定することは可能でしょうか？）

hoangphuctran93 · 2023 年 10 月 28 日午後 4:37

管理者がスタンプグループを作成できるようにし、ユーザーが好きなトピックの各グループに合わせてスタンプの選択をカスタマイズできるようにします。
さらに、ユーザーが記事でアイコンを使用する際に、インストールされているアイコンに基づいて推奨しますが、これは難しい機能だと思います。

deltaR · 2023 年 11 月 9 日午後 2:12

テキスト行にステッカーを配置するにはどうすればよいですか？新しい行ではなく。(このリポジトリをフォークしました)

Don · 2023 年 11 月 9 日午後 4:31

こんにちは

はい、この行の先頭と末尾から \n を削除する必要があります。

github.com/deltaR-3k/discourse-stickers

javascripts/discourse/components/modal/sticker.js

main


      
          @tracked stickerImages = JSON.parse(settings.sticker_images);
          @service site;
          @service capabilities;
          
          @action
          pick() {
            let stickerImage = document.querySelectorAll(".sticker-pack span.sticker-holder img.sticker:hover");
            stickerImage.forEach((sticker) => {
              sticker.classList.add("picked");
              sticker.addEventListener("animationend", () => {
                let markupComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                let markupChatComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                if (this.args.model?.customPickHandler) {
                  this.args.model.customPickHandler(markupChatComposer);
                } else {
                  getOwner(this).lookup("service:app-events").trigger("composer:insert-text", markupComposer);
                }
                this.args.closeModal();
              });
            });
          }

@mattdm 返信が遅れてすみません。はい、カテゴリごとにコンポーザーにボタンを表示することは可能だと思います。確認が必要です。

このコンポーネントはすでにセットアップが少し複雑です。これについてはよくわかりません。

こんにちははい、これは別のレベルですね。現在のビルドで可能かどうかはわかりません。

deltaR · 2023 年 11 月 9 日午後 5:03

返信ありがとうございます！
しかし、変更後、ステッカーが表示されなくなりました。以下のようになります。

Don · 2023 年 11 月 9 日午後 5:13

すみません、[wrap=sticker] と [/wrap] も削除した方が良いと思います。そうすれば画像がインラインで表示され、欠落することはないでしょう。

[wrap=sticker] はステッカー画像にスタイルを追加するためだけのものです。

github.com/deltaR-3k/discourse-stickers

common/common.scss

f28fb4b9c


      
          .d-wrap[data-wrap="sticker"] {
            @include user-select(none);
            img {
              width: 75px !important;
              height: 65px !important;
              aspect-ratio: 75 / 65 !important;
              @if $stickers_shadow == "true" {
                filter: drop-shadow(2px 2px 2px rgba(var(--always-black-rgb), 0.8));
              }
            }
            .button-wrapper {
              display: none;
            }
            a.lightbox {
              .discourse-touch & {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                transition: filter 200ms;
                &:active {
                  filter: brightness(0.8);
                }

This file has been truncated. show original

deltaR · 2023 年 11 月 9 日午後 5:23

インライン表示では [wrap=sticker] は使えないということですか？
うまくいきました、ありがとうございます！

ps: Composer で markdownUrl を非表示にすることは可能でしょうか？長い URL でスペースを取りすぎるためです。

Don · 2026 年 8 月 14 日午後 2:31

Discourse Stickers v2.0

このリリースでは、このコンポーネントの大幅なモダナイズが行われています。内部の改善が多数加えられたほか、ステッカーの構成が再設計され、大規模なステッカーコレクションの管理がはるかに容易になりました。

ステッカー設定の完全な再設計

v2.0 で最大の変更点は、ステッカーの構成自体です。

旧バージョンでは、ステッカーは以下の値を含む JSON 設定として保存されていました。

title
emoji
previewUrl
markdownUrl

v2.0 では、これらが Discourse 標準の objects 設定タイプに置き換えられました。

各ステッカーは、独自のフィールドを持つ、正式な構成可能なオブジェクトとして扱われます。

タイトル - ステッカー名 / ツールチップテキスト
グループ - ステッカーをグループに分類（オプション）
絵文字バッジ - コーナーに小さな絵文字を表示（オプション）
画像 - 設定画面からステッカーを直接アップロード
カテゴリ - 特定の Discourse カテゴリにステッカーを制限（オプション）
ダイレクトメッセージから非表示 - ステッカーをダイレクトメッセージ（DM）で使用可能にするか制御
チャットチャンネル - 特定の公開チャットチャンネルにステッカーを制限（オプション）

これにより、特に大規模なコレクションの場合でも、ステッカーの構成を理解・維持しやすくなりました。

ステッカーのグループとフィルタリング

今では、ステッカーに グループ を割り当てることができます。

複数のグループが利用可能な場合、ステッカーピッカーは自動的に上部にフィルタバーを表示します。

以下で切り替えることができます。

すべて
各グループ
グループ未設定のステッカーを示す その他

フィルタは、現在ユーザーが利用可能なステッカーから動的に生成されます。

カテゴリ固有のステッカー

ステッカーは、特定の Discourse カテゴリにオプションで割り当てられるようになりました。

ステッカーにカテゴリが設定されている場合、そのカテゴリのいずれかが選択された時のみ、通常の投稿/返信エディタに表示されます。

カテゴリが設定されていない場合、ステッカーはどこでも利用可能です。

チャット用ステッカーの制御強化

v2.0 では、Discourse Chat におけるステッカーの利用可能性に対する制御が強化されました。

今では以下を行うことができます。

個別のステッカーをダイレクトメッセージから非表示にする
ステッカーを特定の公開チャットチャンネルに制限する
チャンネル設定を空のままにすることで、すべての公開/カテゴリチャットチャンネルでステッカーを利用可能にする

これにより、管理者はコミュニティの異なる部分に対して異なるステッカーセットを維持することができます。

公開済みステッカーはクリック不可に

公開済みのステッカーは、今では非インタラクティブな画像として扱われます。

クリックしても、Discourse のライトボックスが開かなくなりました。

これは以下に適用されます。

通常の投稿内のステッカー
チャットに投稿されたステッカー

この変更の目的は、ステッカーが通常のアップロード画像ではなく、実際のステッカー/リアクションコンテンツのように振る舞うようにすることです。

より良い空の状態表示

現在のコンテキストで利用可能なステッカーがない場合、ピッカーは単に空のピッカーを表示するのではなく、適切な空の状態を表示するようになりました。

例えば、カテゴリやチャットの制限により、利用可能なステッカーが一つもない場合に発生します。

既存のステッカー構成の移行

v2.0 の最も重要な部分の一つは、既存のインストールが ステッカーコレクションを再作成する必要がない ことです。

コンポーネントの更新時に、旧 sticker_images JSON 設定は自動的に新しい objects 形式に移行されます。

既存のステッカータイトルと絵文字の値は保持されます。

最も重要なのは、既存のアップロード済みステッカー画像も自動的に移行される点です。

したがって、すでに数十個のステッカーが構成されている場合でも、v2.0 へのアップデートで それらすべてを再アップロードする必要はありません。

旧 markdownUrl プロパティはもはや必要なく、新しい Image フィールドが実際の Discourse アップロードを表すため、移行されません。

github.com/VaperinaDEV/discourse-stickers

FEATURE: Modernize Discourse Stickers (#5)

main ← v2.0

merged 02:27PM - 14 Aug 26 UTC

VaperinaDEV

+424 -126

Modernizes the component and significantly expands sticker management. ### Wh…at's included - Migrate `sticker_images` from the legacy JSON setting to Discourse's native `objects` setting. - Add native image uploads for stickers. - Add optional sticker groups with filtering in the picker. - Add category-based sticker visibility. - Add Chat-specific visibility controls for direct messages and channels. - Modernize the sticker modal to Glimmer. - Improve sticker selection by passing the selected sticker directly to the action. - Prevent published stickers from opening the lightbox. - Add a proper empty state when no stickers are available. - Add localization for the new UI and settings. - Add a settings migration that preserves existing sticker titles, emojis, and uploaded images when upgrading from the previous version. ### Migration Existing `sticker_images` configurations are automatically migrated when the component is updated. Legacy sticker image URLs are resolved back to their existing Discourse uploads, so existing stickers do not need to be uploaded again. The legacy `markdownUrl` property is no longer used because the new `image` property directly represents the sticker upload.

トピック		返信	表示
Telegram-like stickers? Feature	8	1986	2024 年 1 月 25 日
Discourse Chat Plugin official , chat , included-in-core	43	34206	2026 年 7 月 29 日
Image comparison slider Theme component	31	3876	2026 年 6 月 6 日
Emoji Fluff Theme component	39	1708	2025 年 11 月 28 日
MD Composer extras Theme component	70	9875	2025 年 7 月 8 日

Discourse ステッカー

Discourse Stickers v2.0

動作について

ステッカーピッカー

セットアップ方法

ステッカー設定

v1.xからのアップグレード

Discourse Stickers v2.0

ステッカー設定の完全な再設計

ステッカーのグループとフィルタリング

カテゴリ固有のステッカー

チャット用ステッカーの制御強化

公開済みステッカーはクリック不可に

より良い空の状態表示

既存のステッカー構成の移行

関連トピック