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

プラグイン
1

PixPin_2026-01-04_22-04-17

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

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

:rocket: 主な機能

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

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

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

:package: バージョンの選択

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

オプション1：上書きバージョン（完全置換）

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

オプション2：パックバージョン（補足）

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

「いいね！」 13
2

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

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

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

ありがとうございます。

3

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キャッシュ + ブラウザキャッシュをクリアしてください

4

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

5

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

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

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

6

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に直接リンクしなかった理由はあるのでしょうか？

7

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

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

「いいね！」 3
8

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

「いいね！」 2
9

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

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

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

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

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

「いいね！」 2