絵文字リアクション Emoji Reactions

コンテンツに対して絵文字でリアクションを付けるUI。テキスト入力なしで感情を表現できる。

使用場面: メッセージやコメントに対するクイックリアクション（Slack風） 採用例: Slack, GitHub

ライブデモ

明日のミーティング、15時に変更になりました。よろしくお願いします。

ソースコード

<div class="demo-reactions-wrapper">
  <div class="demo-reactions-message">
    <p>明日のミーティング、15時に変更になりました。よろしくお願いします。</p>
  </div>
  <div class="demo-reactions-bar">
    <button class="demo-reaction active" data-emoji="thumbsup">&#128077;<span class="demo-reaction-count">3</span></button>
    <button class="demo-reaction" data-emoji="heart">&#10084;&#65039;<span class="demo-reaction-count">1</span></button>
    <button class="demo-reaction" data-emoji="fire">&#128293;<span class="demo-reaction-count">0</span></button>
    <button class="demo-reaction-add" aria-label="リアクションを追加">+</button>
  </div>
  <div class="demo-reactions-picker">
    <button class="demo-reaction-pick" data-emoji="thumbsup">&#128077;</button>
    <button class="demo-reaction-pick" data-emoji="heart">&#10084;&#65039;</button>
    <button class="demo-reaction-pick" data-emoji="fire">&#128293;</button>
    <button class="demo-reaction-pick" data-emoji="eyes">&#128064;</button>
    <button class="demo-reaction-pick" data-emoji="tada">&#127881;</button>
    <button class="demo-reaction-pick" data-emoji="thinking">&#129300;</button>
  </div>
</div>
.demo-reactions-wrapper { padding: 12px; }
.demo-reactions-message {
  padding: 12px 16px; background: #f9fafb; border-radius: 10px;
  border: 1px solid #e5e7eb; margin-bottom: 8px;
}
.demo-reactions-message p { margin: 0; font-size: 14px; color: #333; line-height: 1.6; }
.demo-reactions-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.demo-reaction {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 16px; border: 1px solid #e5e7eb;
  background: #fff; cursor: pointer; font-size: 14px;
  transition: all 0.2s;
}
.demo-reaction:hover { border-color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 5%, #fff); }
.demo-reaction.active {
  border-color: var(--ui-primary);
  background: color-mix(in srgb, var(--ui-primary) 10%, #fff);
}
.demo-reaction-count { font-size: 12px; color: #666; }
.demo-reaction.active .demo-reaction-count { color: var(--ui-primary); font-weight: 600; }
.demo-reaction[data-count="0"] { display: none; }
.demo-reaction-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px dashed #d1d5db; background: none; cursor: pointer;
  font-size: 16px; color: #999; transition: all 0.2s;
}
.demo-reaction-add:hover { border-color: var(--ui-primary); color: var(--ui-primary); }
.demo-reactions-picker {
  display: none; margin-top: 8px; padding: 8px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  gap: 4px;
}
.demo-reactions-picker.open { display: flex; }
.demo-reaction-pick {
  width: 36px; height: 36px; border: none; background: none;
  font-size: 20px; cursor: pointer; border-radius: 8px;
  transition: background 0.15s;
}
.demo-reaction-pick:hover { background: #f3f4f6; }
(function(){
  var addBtn = document.querySelector('.demo-reaction-add');
  var picker = document.querySelector('.demo-reactions-picker');
  addBtn.addEventListener('click', function(){ picker.classList.toggle('open'); });
  document.querySelectorAll('.demo-reaction').forEach(function(btn){
    btn.addEventListener('click', function(){
      var countEl = this.querySelector('.demo-reaction-count');
      var count = parseInt(countEl.textContent);
      if(this.classList.contains('active')){
        this.classList.remove('active');
        countEl.textContent = Math.max(0, count - 1);
      } else {
        this.classList.add('active');
        countEl.textContent = count + 1;
      }
    });
  });
  document.querySelectorAll('.demo-reaction-pick').forEach(function(pick){
    pick.addEventListener('click', function(){
      var emoji = this.dataset.emoji;
      var existing = document.querySelector('.demo-reaction[data-emoji="'+emoji+'"]');
      if(existing){
        if(!existing.classList.contains('active')){
          existing.classList.add('active');
          var c = existing.querySelector('.demo-reaction-count');
          c.textContent = parseInt(c.textContent) + 1;
        }
      }
      picker.classList.remove('open');
    });
  });
})();

AIプロンプト

Basic 
絵文字リアクションUIをHTML/CSS/JSで作ってください。メッセージの下にリアクションボタンが表示され、クリックでリアクション数が増減します。
Custom 
以下の仕様で絵文字リアクションUIを実装してください。
- リアクションボタン（サムズアップ、ハート、ファイヤー）
- クリックでリアクション数の増減
- アクティブ状態のスタイル変更
- リアクション追加ピッカー（+ボタンで展開）
- プライマリカラー: #2563eb
- 0件のリアクションは非表示
Advanced 
高機能な絵文字リアクションシステムを実装してください。
- カテゴリ分けされたフル絵文字ピッカー
- 最近使った絵文字の記憶（localStorage）
- リアクション者の一覧表示（ホバーでツールチップ）
- カスタムリアクション追加機能
- リアルタイム更新（WebSocket）
- アニメーション付きリアクション（追加時にポップ）
- キーボードでの絵文字検索
← カタログに戻る