カスタム絵文字を設定する

[Discourse]

このガイドでは、Discourseサイトでカスタム絵文字を設定する方法について説明します。

必要なユーザーレベル: 管理者

カスタム絵文字の設定

Discourseサイトの絵文字を変更したいですか？絵文字セットの選択、新しい絵文字のアップロード、絵文字サイズの調整など、Discourseサイトでカスタム絵文字を設定する方法を見てみましょう。

絵文字セットの選択

Discourseには7種類の異なる絵文字セットが付属しています。

• Apple/国際スタイル
• Googleスタイル
• Twitterスタイル
• Emoji Oneスタイル
• Win10スタイル
• Googleクラシック
• Facebook Messenger

絵文字セットは、その他の絵文字関連の設定とともに、/admin/config/emoji/settings?filter=emoji%20set で選択できます。

カスタム絵文字の追加

カスタム絵文字を追加するには:

1. 次の場所に移動します: Discourse Admin - Config - Emoji (/admin/config/emoji)
2. 次のいずれかを行うことができます。
   • 名前を入力し、「Add emoji」をクリックして写真を絵文字としてアップロードします。
   • ファイル名を絵文字名として使用して、最大10個のファイルを「Name」フィールドにドラッグアンドドロップして一括アップロードします。

絵文字の設定

絵文字の設定は/admin/config/emoji/settingsでアクセスでき、サイトでの絵文字の動作をカスタマイズできます。

• enable_emoji - Discourseインスタンスでの絵文字の表示と使用を有効にします。無効にすると、絵文字はレンダリングされず、ユーザーはテキストフィールドで絵文字にアクセスしたり使用したりできなくなります。
• emoji_set - 好みの絵文字スタイルを選択します。異なる絵文字セットは、サイトに表示される絵文字に独自の外観を提供できます。
• max_emojis_in_title - トピックタイトルで許可される絵文字の最大数（デフォルト: 1）。この値をゼロに設定すると、トピックタイトルでの絵文字の使用が防止されます。
• enable_emoji_shortcuts - :) :p :( などの一般的なスマイリーテキストが絵文字に変換されます。
• emoji_autocomplete_min_chars - 絵文字のオートコンプリートポップアップをトリガーするために必要な最小文字数（デフォルト: 0）。
• enable_inline_emoji_translation - インライン絵文字（前後にスペースや句読点がないもの）の翻訳を有効にします。
• emoji_deny_list - これらの絵文字は、メニューやショートコードで使用できなくなります。
• external_emoji_url - 絵文字画像の外部サービスのURL（デフォルト: https://emoji.discourse-cdn.com）。空白のままにすると無効になります。
• discourse_reactions_enabled_reactions - 有効なリアクションのリストを定義します。ここでは任意の絵文字が許可されます。デフォルトのリアクションには、ハート、笑い、泣き、爆発頭、拍手、紙吹雪ボール、ハグ、シェフのキス、100、+1、ロケット、スターに目がくらむ、discourse、目 が含まれます。
• discourse_reactions_excluded_from_like - 「いいね」としてカウントされないリアクション。このリストにないリアクションは、バッジ、報告、その他の目的で「いいね」としてカウントされます。
• discourse_reactions_allow_any_emoji - これが有効な場合、リアクションピッカーでユーザーがいずれかの絵文字を選択できるようにするボタンが追加されます。メンバーはカスタム絵文字を含む任意の絵文字を選択してリアクションできるようになります。利用可能なリアクションを制限するには、emoji_deny_listサイト設定を使用します。

カスタム絵文字のサイズ変更

デフォルトでは、すべての絵文字はCSSによって20x20にサイズ変更されますが、カスタムCSSでこれを上書きできます。投稿で正しいアスペクト比とネイティブサイズを維持するには、次のCSSを追加します。

/* 絵文字を通常のサイズにする（正方形に強制しない） */
div.topic-post img.emoji[src*="uploads"], 
div.d-editor-preview img.emoji[src*="uploads"], 
div.emoji-modal img.emoji[src*="uploads"], 
div.d-editor-textarea-wrapper img.emoji[src*="uploads"], 
div.title-wrapper img.emoji[src*="uploads"], 
td.main-link img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

特定の絵文字のサイズを変更するには、次を使用します。

img.emoji[title=":youremoji:"] { 
    height: XXpx; 
    width: YYpx; 
}

チャットメッセージやチャットでのユーザー状態の絵文字をサイズ変更するには:

div.chat-message-text img.emoji[src*="uploads"], 
span.user-status-message img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

[Roi]

カスタム絵文字/スマイリーがチャットメッセージやチャットのユーザーのステータスで20x20で表示されることに気づきました。私はこのように解決しました。

div.chat-message-text img.emoji[src*="uploads"] { /* チャットメッセージ */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* チャットのユーザーのステータス */
    width: auto;
    height: auto;
}

あなたもこのようにしますか？もしそうなら、この上記のwiki投稿に追加すると役立つかもしれません。もしそうでなければ、私のCSSコードを最適化させていただきます。

[Vladislav_Jandric]

新しい絵文字をカスタマイズしましたが、他の絵文字の中に見つけることができません。

[ondrej]

絵文字ピッカーの一番下までスクロールしましたか？カスタム絵文字グループはそこにあります。

[Moin]

@Discourse

Discourse には 7 つの異なる絵文字セットが付属しています。

• Apple/International スタイル
• Google スタイル
• Twitter スタイル
• Emoji One スタイル
• Win10 スタイル
• Google クラシック
• Facebook Messenger

これらが変更されました。

Emojis update

For licensing reasons, we had to change the emoji sets. The following existing sets have been migrated automatically to a new set: apple → twemoji facebook_messenger → unicode google → noto google_classic → noto win10 → fluentui emoji_one → twemoji twitter → twemoji On top of fluent ui, noto, twemoji, and unicode, we also added the openmoji set. Admins can change the set at /admin/config/emoji/settings?filter=emoji_set If there’s an existing open-source set you would like to see available i…

[pacharanero (Marcus Baw)]

カスタム絵文字の一括アップロードについて、いくつか試してみましたが、うまくいかなかったので、今後の最適な方法について質問させていただきます。

私は、自分のDiscourseすべてにアップロードしたいカスタム絵文字の小さなコレクションを持っています。その中にはFontAwesomeのアイコンもあり、DiscourseのUIアイコンをユーザーに説明できるように、コンポーザーの投稿で:icon-name:として利用できるようにしたいと思っています。また、ヨークシャーの旗のように、単に楽しみのためだけのものもあります。それらはフォルダーに入っています（そして、GitHubリポジトリにオンラインで置くことも簡単にできると思います）。

これらのフォルダー全体を、一度にカスタム絵文字のUIにアップロードできるようにしたいと考えています。現在のところ、アップロード制限は、simultaneous_uploads（「コンポーザーにドラッグ＆ドロップできるファイルの最大数」）のサイト設定を尊重していますが、上限値は20に制限されています（一時的に増やそうとしても、「simultaneous_uploads：値は0〜20の間でなければなりません」というエラーが表示されます）。

他の絵文字設定であるexternal-emoji-urlにも興味を持って調べました。これは、外部絵文字セットのURLを設定できるものですが、残念ながら、これはすべての「標準」絵文字を置き換えてしまうため、失いたくありません。

私が本当に必要なのは、カスタム絵文字のフォルダーアップロードが、現在個々のカスタム絵文字に対して行われているように機能することだけです。あるいは、許可されるアップロードの数に制限がない場合（おそらく、アップロードジョブをSideKiqに送信して非同期的に実行し、完了したらPM管理者に通知するなど）

Discourse REST APIの使用も検討しましたが、カスタム絵文字はREST APIを通じて公開されていません。アップロードはAPIで公開されており、これは動作させることができましたが、アップロードにcustom_emojiタイプを使用しても、リストに表示されません。

コミュニティが最良の方法は何だと思うか疑問に思っています。

• カスタム絵文字の一括作成を自動化するRakeタスク？
• Railsコンソールで実行？
• 管理UIのアップロード制限を変更して、一度に数百のアップロードを許可する？
• 管理UIに「フォルダーアップロード」を追加する？
• カスタム絵文字を、GitHub URLから追加できるテーマコンポーネントとしてデプロイできるようにする？（これが一番簡単で気に入っています）
• 複数の外部絵文字URLを許可して、絵文字セットとカスタム絵文字の両方を持つことができるようにする（GitHub Pagesリポジトリから提供されるなど）
• URLで指定できる単一の「絵文字とカスタム絵文字」リポジトリをハックする？

または、DiscourseがUIで使用しているFontAwesomeアイコンすべてを、:icon-name:構文を使用してコンポーザーで利用できるようにする別の方法はありますか？本当にやりたいことの大部分はこれに関連しています。UIアイコンをコンポーザーで利用できるようにするサイト設定があれば、90％達成できます。

[JammyDodger]

@pacharanero

実際、私がやりたいことのほとんどはこれに関連しています。コンポーザーでUIアイコンが利用可能になるサイト設定があれば、そこまで90％達成できます。

同様のユースケースに Discourse Icon のテーマコンポーネントを使用しましたが、お役に立ちますか？

トピックからの例：

これは[wrap=icon id=far-square][/wrap]アイコンで、[wrap=icon id=pencil][/wrap]アイコンです。

これはアイコンで、アイコンです。

[pacharanero (Marcus Baw)]

@JammyDodger さん、ありがとうございます。それは参考になりますし、検討したい選択肢の一つです。[wrap=icon id=icon-name][/wrap]という構文のUXは:icon-name:ほど良くはありませんが。

Discourse Iconのアプローチの欠点は、使用したいアイコンのリストをすべて手動でsvg icon subsetサイト設定に追加しなければならないことです。しかし、少なくともテキストファイルからリストをコピー＆ペーストすることで、一度に完了できます。

[Moin]

@pacharanero

Discourse UI アイコンをユーザーに説明する

あなたの説明からすると、それほど多くを追加する必要はないはずです。この設定は、より多くのアイコンを追加するためのものです。フォーラムで使用されているすべてのアイコンはすでに利用可能です。

[pacharanero (Marcus Baw)]

@Moin

フォーラムで使用されているすべてのアイコンはすでに利用可能です。

どこで利用可能ですか？もし利用可能なら歓迎しますが、:icon-name: のような構文でアクセスできないようです。

例えば、タイムゾーンを認識する日時を投稿に追加するには、コンポーザーのツールバーにある :calendar-days: ボタンを使用することを簡単に伝えたいだけです。しかし、含まれている絵文字/アイコンを検索しても、最も近いものは :spiral_calendar: しか見つかりません。

[Moin]

ラップ構文と Discourse アイコンを svg icon subset に追加せずに機能させます。

回答は、すべてのアイコンを追加しなければならないというあなたのコメントに言及していました。

@pacharanero

Discourse アイコンアプローチの欠点は、svg icon subset サイト設定で使用したいすべてのアイコンのリストを、手動で追加しなければならないことです。

---

:calendar-days: を [wrap=icon id=calendar-days][/wrap] に置き換えるために #watched-words を使用すると機能するかもしれません

[pacharanero (Marcus Baw)]

@Moin

これらは、svg icon subset に追加しなくても、ラップ構文と Discourse アイコンで機能します。

回答は、すべてのアイコンを追加しなければならないというあなたのコメントに言及していました。

ああ、わかりました、ありがとうございます。誤解して申し訳ありません。これは素晴らしいです。つまり、ラップ構文を使用して、どこでも を使用できるということですね！毎日が Discourse の学校の日です！

唯一足りないのは、必要なアイコンの Discourse 名を簡単に検索できる機能ですが、ブラウザインスペクターを使用して d-icon- 名を見つけて調整することはいつでもできると思います。または FontAwesome のウェブサイトを使用することもできます。

@Moin さん、ありがとうございます。

[Roi]

以前Discourseを更新してから（数日前）何かが変わりました。

代わりに

今はこう見えます

CSSを確認すると、この絵文字のHTML内にaspect-ratio: 20 / 20;というstyleがあります。これを無効にすると、絵文字は本来の見た目になります。

どうすればよいでしょうか？

（ちなみに、「Choker」は特に意味はありません。スキューバダイビングに関するもので、他のことではありません ただ、投稿内のテキストのサイズを見るためだけです。）

[Steven]

テーマにこれらのCSS行を追加できます

.emoji-custom {
    aspect-ratio: unset !important;
}

[Roi]

ありがとうございます。うまくいきました！

いくつか質問させてください。

最新リリースでアスペクト比を設定する目的は何ですか？

また、上記のコードはなぜコアのDiscourseに含まれていないのですか？他の何かを壊してしまうからですか、それともカスタム絵文字/スマイリーを使用している人が少なすぎるからですか？

[Steven]

正直わかりませんが、この議論に関連していると思います。

Add lazy loading for emojis

Profile pictures and image elements in posts get lazyloaded by having the attribute loading="lazy" set. Emojis are missing out on this. <img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title="" class="emoji" alt=""> I could not find the location in the sources where the emoji tags are generated. Are emojis “baked” into the posts?