Moetwemoji: 軽量アニメーション絵文字 (AVIF) - フォーラムを活性化させよう

PixPin_2026-01-04_22-04-17

皆さん、こんにちは!:waving_hand:

Discourseコミュニティにもっと活気とダイナミックな表現をもたらすために、新しいプラグインを作成しました。Moetwemojiは、インタラクションをより生き生きと楽しいものにするアニメーション絵文字のセットを導入します。

:rocket: 主な機能

  • 超軽量: すべての絵文字はAVIF形式でエンコードされています。

  • 高性能: 平均ファイルサイズは約10KBで、見栄えを保ちながらフォーラムの読み込みを高速化します。

  • 柔軟なデプロイ: ニーズに応じて2つの異なるバージョンを提供します(上書きまたは補足)。


:package: バージョンの選択

フォーラムへの絵文字の統合方法に応じて、2つの別々のリポジトリを用意しました。

オプション1:上書きバージョン(完全置換)

デフォルトの静的なTwemojiセットをこれらのアニメーション付きのものと完全に置き換えたい場合は、このバージョンを使用します。システムデフォルトを上書きし、アニメーションを標準の体験にします。

オプション2:パックバージョン(補足)

標準の絵文字を維持し、これらを絵文字ピッカーの追加の「パック」として追加したい場合は、このバージョンを使用します。デフォルトには触れずに、絵文字セレクターに新しいタブを追加します。


「いいね!」 16

共有ありがとうございます :+1:

試してみましたが、app.yaml ファイルにリポジトリを追加しても機能しません。

何か設定すべきパラメーターはありますか?

ありがとうございます。

OK、手動インストールをお試しください

手動インストールガイド(上書きバージョン)

このガイドでは、実行中のDiscourseコンテナ内に discourse-moetwemoji-twemoji-fakepng-override プラグインを手動でインストールおよび適用する方法を説明し、完全な再構築が厳密には必要ない理由を明確にします。


1. Discourseコンテナに入る

サーバーで、Discourse Dockerディレクトリ(通常は /var/discourse)に移動し、実行中のコンテナに入ります。

cd /var/discourse
./launcher enter app

これでコンテナシェル内にいるはずです。


2. オーバーライドプラグインを手動でクローンする

プラグインディレクトリに移動し、リポジトリをクローンします。

cd /var/www/discourse/plugins
git clone https://github.com/constansino/discourse-moetwemoji-twemoji-fakepng-override.git

ディレクトリが存在することを確認します。

ls discourse-moetwemoji-twemoji-fakepng-override


3. 絵文字の上書きを適用する

Discourseのルートディレクトリに戻ります。

su - discourse
cd /var/www/discourse

現在のステータスを確認します(オプションですが推奨されます)。

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status

上書きを適用します。

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

コマンドがエラーなしで終了した場合、Twemoji PNGファイルはMoetwemojiに置き換えられました。


4. 再構築に関する重要な注意点(永続性)

:red_exclamation_mark: オーバーライドを機能させるために再構築は不要

この上書きバージョンは、実行中のコンテナ内のファイルを直接置き換えることで機能します。
したがって:

  • :white_check_mark: ./launcher rebuild app を実行する必要はありません

  • :white_check_mark: rakeタスクの実行後、変更は即座に反映されます

:warning: ただし、変更は永続的ではありません

これはコンテナファイルシステム内で行われるため:

  • 今後の ./launcher rebuild app

  • またはコンテナの再作成/アップグレード

変更を消去し、絵文字の上書きは失われます。

:backhand_index_pointing_right: 再構築をまたいで永続性が必要な場合は、app.yml のフックを介してプラグインをインストールし、適切に再構築する必要があります。


5. CDNとブラウザキャッシュのクリア(非常に重要)

上書きを適用した後も、キャッシュのために絵文字が変更されていないように見えることがあります。

5.1 CDNキャッシュのクリア(例:Cloudflare)

CloudflareなどのCDNを使用している場合:

  • 次のキャッシュをパージします。

    • /images/emoji/*

    • または必要に応じて完全なキャッシュパージを実行します

そうしないと、古いTwemoji PNGファイルが引き続き提供される可能性があります。

5.2 ブラウザキャッシュのクリア

クライアント側では:

  • ページのハードリフレッシュ(Ctrl + F5 / Cmd + Shift + R

  • またはブラウザキャッシュのクリア

  • またはシークレット/プライベートウィンドウでのテスト

CDNキャッシュとブラウザキャッシュの両方がクリアされるまで、絵文字の変更が表示されない場合があります。


6. 要約

  • このオーバーライドプラグインは再構築なしでインストールおよび適用できます

  • 手動インストールは次の場合に役立ちます。

    • テスト

    • 一時的な使用

    • デバッグ

  • 欠点は永続性の欠如です

  • 絵文字の上書きを適用した後には、必ずCDNキャッシュ + ブラウザキャッシュをクリアしてください


READMEに記載されているようにタスクを実行しましたか?

このREADMEには2つのインストール方法が記載されています。

  1. 1つ目の方法は再構築が必要です。
  2. 2つ目の方法はコンテナに手動で入り、GitHubからダウンロードする方法です。

どちらの方法も違いはありません。前者は単により永続的であるだけです。1つ目の方法で再構築する際にダウンロードが失敗した場合は、コンテナ内で直接インストールする2つ目の方法を試すことを検討してください。これは、既存の絵文字画像をダウンロードして置き換えることを意味するためです。

Readmeには2つのインストール方法が説明されていることに気づきましたが、次のような記述もあります。

cd /var/discourse
./launcher enter app

su - discourse
cd /var/www/discourse

RAILS_ENV=production bundle exec rake moetwemoji_twemoji:status
RAILS_ENV=production bundle exec rake moetwemoji_twemoji:apply

これは、Metaの最初の投稿では言及されていません。そのため、誰かがこれを実行し忘れる可能性があると思いました。


ところで、最初の投稿にある両方のリンクはGoogle検索になっていますが、GitHubに直接リンクしなかった理由はあるのでしょうか?

「いいね!」 1

アニメーション絵文字が公式アニメーションGoogle Noto絵文字であるのに、なぜ「moetwemoji」と呼ばれ、絵文字フォルダが「twemoji」と呼ばれるのですか?

ただし、これはこのファイルで言及されており、帰属表示が不完全です。このファイルは作業中であると記載されていますが、テーマコンポーネントを配布する前に帰属表示が完了していることを期待します :face_with_tongue:

「いいね!」 4

申し訳ありません、私の投稿は十分に網羅的でなかったかもしれません。後で修正します。ご指摘ありがとうございます。

「いいね!」 2

ご指摘ありがとうございます。おっしゃる通りです。

この名称は歴史的なもので、Discourseのデフォルトの絵文字構造に由来していますが、実際のアニメーションアセットはTwemojiではなくGoogle Noto Emojiのものです。これは混乱を招くため、明確にする必要があることに同意します。

現在、以下の作業を行っています。

  • Noto Emojiライセンスに完全準拠するように帰属表示を更新する
  • READMEでアセットのソースを明確にする
  • 混乱を減らすために名称/フォルダ構造を見直す

レビューと指摘してくださり、ありがとうございます。

「いいね!」 2

操作を試みましたが機能しないため、待機します。ただし、私のDiscourseはUbuntuサーバー上の独立したサーバーで稼働しています。キャッシュに関して追加で何か操作を行う必要があるかどうかわかりません。

試すだけです
https://"yourdomain"/images/emoji/twemoji/hugs.png?v=15

そして

https://"yourdomain"/images/emoji/twemoji/hugs.png?v=15&cache=0

どちらのURLも非常に安定していて動きのない絵文字を返します。そのため、これをインストールする理由が見当たりません。デバイスに関する質問でしょうか?

プラグインをインストールした後にテストするためのリンクだと思います。プラグインを使用しない限り、プラグインが置き換える絵文字が表示されます。

実際にインストールしてみましたが、何も表示されません。Discourseの設定で別の絵文字を使うべきでしょうか、それとも何か他のことでしょうか、わかりません[1]


  1. それに、個人的には動く要素は90年代のエコーだと思います😝 なので、これ以上深く掘り下げる意欲があまりありません。 ↩︎

申し訳ありません、インストールする理由がないとおっしゃっていたので、インストールされていないと仮定しました。

プラグインのリポジトリのreadmeに記載されているrakeタスクを実行しましたか?それが、リンクでアクセスしようとした場所にアニメーション絵文字を配置するものだと思います。

「いいね!」 1

申し訳ありません。携帯電話で操作中で、書くのが面倒でした。

いいえ、やっていません。

編集。

OPが(役に立たない)Google検索へのリンクしか提供していないため、readmeを読んだことがありませんでした。今、OPに記載されるべき、または記載されていてもよい情報を見つけるために、元のリポジトリで追加のステップを踏みました。

「いいね!」 1

「https://“votre_domaine”/images/emoji/twemoji/hugs.png?v=15」ではアニメーション絵文字は表示されますが、例えばチャットで絵文字を選択しようとすると機能しません:thinking:

複雑さを軽減するために、再構築しないことやコンテナに入ってクローンを作成することに関するすべてのものを削除することをお勧めします。これは不要であり、プラグインを管理する標準的な方法ではありません。

ほとんどすべての管理者は定期的に再構築を行うため、永続性が最も重要な側面となります。したがって、app.yml の方法が最適です。

標準的な手順へのリンクを提供し、固有の手順のみを詳しく説明することもできます。

「いいね!」 3