|||
|:discourse2:| 概要 |絵文字にオプションのバリエーションやアニメーションを追加します。|
|:eyeglasses:| プレビュー | theme-creator.discourse.orgでプレビュー|
|:hammer_and_wrench:| リポジトリリンク | GitHub - Arkshine/discourse-emoji-fluff|
|:open_book:| Discourseテーマ初心者の方へ | Discourseテーマ使用の初心者ガイド|
このテーマコンポーネントをインストール
このコンポーネントは、[date=2024-11-27 timezone=“Europe/Paris”]時点の最新のDiscourseが必要です。[1]
説明
Emoji Fluffを使用すると、ユーザーは投稿にミラーリングされた絵文字やアニメーション化された絵文字を配置できます。
これにより、ユーザーは次のような派手な絵文字ワークを投稿できます。
これらの装飾は、絵文字の自動補完ポップアップ、絵文字ピッカー、または絵文字のショートコードの直後にキーワードを付けることで選択できます。
例: :bike:f-slide , :smile:f-bounce
水平および垂直の反転は、他の装飾と組み合わせることができます。
例:
:horse:f-slide,flip::spider:f-float,flip_v:
スクリーンショット
利用可能な絵文字の装飾
絵文字に装飾を追加する方法
絵文字の自動補完ポップアップから
絵文字ピッカーから
装飾サフィックスを手動で入力する
特徴
-
水平または垂直に反転された絵文字
-
アニメーション化された絵文字（バウンス、回転、パルスなど）
-
ユーザーが利用できる絵文字装飾を選択する設定
-
オートコンプリートまたは絵文字ピッカーに装飾セレクターを挿入するかを選択する設定。
-
管理者が新しい装飾を作成できるようにする
設定
| 設定 | 説明 |
|---|---|
| enabled | コンポーネントの機能をオンまたはオフにします。 デフォルト値: true無効にすると、絵文字の装飾が適用されなくなります。 これは、コンポーネントを一時停止したり削除したりする場合に便利ですが、投稿に装飾コード（例: :smile:spin:）が表示されるのを避けたい場合に役立ちます。詳細については、トピックの「絵文字装飾の元に戻す」を参照してください。 |
| allow decorations | 許可される装飾のリスト。 デフォルト値: flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray |
| allow selector in | フラップセレクターが利用可能になる場所。 デフォルト値: bothnone – セレクターを無効にします。both – オートコンプリートと絵文字ピッカーの両方でセレクターを有効にします。autocomplete – オートコンプリートのみでセレクターを有効にします。emoji-picker – 絵文字ピッカーのみでセレクターを有効にします。 |
さらに、テーマコンポーネントの文字列は設定から翻訳可能です。
絵文字装飾の元に戻す
コンポーネントを無効にすると、これらのサフィックスは残り、次のような絵文字になります: 
f-spin:
テーマコンポーネントの制限と設計上の選択により、これらの装飾効果を与えるために絵文字に直接的なサフィックスを追加しています。フラッププレフィックス f- はこれらの装飾を識別するのに役立ち、以下のスクリプトを使用して簡単に削除できます。
以下からダウンロードして実行できるrakeタスクを使用して、投稿からフラップサフィックスを完全に削除できます。
wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all
rakeタスクはデフォルトでは投稿の改訂を作成しません。この動作を変更するには、引数として false を追加できます: rake fluff:delete_all[false]
rakeタスクを実行するためにコンテナに入る方法については、Administrative Bulk Operations を参照してください。
このタスクを実行する前に、必ずバックアップを作成してください。意図しない文字列を削除しないという保証はありません。自己責任で使用し、不明な場合はコードを確認してください。
装飾の作成
フラップの作成にはCSSの知識が必要です。
投稿内の絵文字にフラップが追加されると、絵文字は fluff クラスを持つ <span> タグでラップされます。
<span class="fluff fluff--bounce">
<img src="https://your.discourse.com/images/emoji/twitter/kangaroo.png?v=12" title=":kangaroo:" class="emoji" alt=":kangaroo:" loading="lazy" width="20" height="20" style="aspect-ratio: 20 / 20;">
</span>
カスタムCSSをテーマまたは新しいテーマコンポーネントに追加して、新しいフラップを追加します。
以下に新しいフラップの2つの例を示します。
絵文字を90度傾ける
.fluff--tilt img {
transform: rotate(90deg);
}
3Dスピン効果をかける
.fluff--spin3d img {
animation: f-spin3d 2s infinite linear;
}
@keyframes f-spin3d {
0% {
transform: perspective(50em) rotateY(0deg);
filter: brightness(1);
}
50% {
transform: perspective(50em) rotateY(90deg);
filter: brightness(0.85);
}
51% {
transform: perspective(50em) rotateY(91deg);
filter: brightness(1.15);
}
100% {
transform: perspective(50em) rotateY(180deg);
filter: brightness(1);
}
}
次に、絵文字のフラップの許可される装飾にフラップサフィックスを追加する必要があります。
これで、新しいフラップがユーザーに利用可能になります。お楽しみください！
クレジット
- @Canapin: 元のアイデア、このTCの準備とテストにおける一般的なヘルプ。
正確には、TCはDiscourseバージョン10月30日以降、特に絵文字ピッカーのサポートが必要で、[date=2024-11-27 timezone=“Europe/Paris”]時点の最新バージョンです（数日前にプラグインアウトレットを追加してくれたチームに感謝します！) ↩︎
