はじめに
前回、マイページに「オークション一覧タブ」を増設する記事を書きました。
【非公式】メルカリに「オークション一覧タブ」を実装してみた。
https://qiita.com/merpro-dev/items/7e21c71c98d3aa1f53a5
タブができて一覧性は上がりましたが、何か物足りない……。そう、オークション特有の**「刻一刻と迫るタイムリミットの緊張感」**です。
今回は、JavaScriptとCSSを使って、商品カードに「残り時間」をリアルタイムで表示し、終了間際になると赤く脈動するエフェクトを実装した話を軽く紹介します。
実装のポイント
ブラウザ拡張機能（Content Scripts）から、各商品要素に対して以下の2点を注入します。
JavaScript: 1秒ごとにカウントダウン計算を行うタイマー。
CSS: 終了間際（残り10分など）で発動するアニメーション。
- JavaScript：1秒ごとのカウントダウン
まずは、終了時刻から逆算して「あと何分何秒か」を計算するロジックです。
/**
* 終了時刻までのカウントダウンを計算する
* @param {string} endTimeStr - 終了時刻のISO文字列
*/
const updateTimer = (element, endTimeStr) => {
const targetTime = new Date(endTimeStr).getTime();
const interval = setInterval(() => {
const now = new Date().getTime();
const distance = targetTime - now;
if (distance < 0) {
clearInterval(interval);
element.textContent = "終了しました";
return;
}
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
element.textContent = `残り ${hours}h ${minutes}m ${seconds}s`;
// 残り10分未満なら警告クラスを付与
if (distance < 10 * 60 * 1000) {
element.classList.add('is-urgent');
}
}, 1000);
};
- CSS：終了間際の「脈動」エフェクト
単に文字を表示するだけでは面白くないので、残り時間が少なくなった時にユーザーへ「急げ！」と訴えかけるアニメーションを追加します。
/* カウントダウンバッジの基本スタイル */
.countdown-badge {
background: #333;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-weight: bold;
font-family: monospace; /* 数字がブレないように */
}
/* 残り10分未満の警告アニメーション */
.countdown-badge.is-urgent {
background: #ff0021; /* メルカリレッド */
animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 33, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 0, 33, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 33, 0); }
}
工夫した点：パフォーマンスへの配慮
一覧画面に何十個も商品がある場合、それぞれに setInterval を回すとブラウザが重くなる可能性があります。
今回は検証用として個別に回していますが、実運用（メルプロ）では 「1つのメインループですべてのバッジを一括更新する」 ように設計し、DOM操作の回数を最小限に抑えています。
開発してみて思ったこと
UIに「動き」が加わるだけで、オークションの体験は劇的に変わります。
CSSの @keyframes ひとつで、「ただの数字」が「価値ある情報」に昇華する感覚は、フロントエンド開発の楽しいところですね。
これで、自分が入札したあのお宝商品を二度と見逃すことはなくなるはず……！
おわりに
この「残り時間カウントダウン機能」は、現在開発中のメルカリ分析ツール「メルプロ」の目玉機能の一つとして調整中です。
物販のDXを「技術の遊び心」で加速させたいエンジニアの皆さん、ぜひベータ版を触ってフィードバックをいただけると嬉しいです！
👉 メルプロ ベータ版応募フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdJgPjVqALnbF0-9tLFu_tevYIC6vF6pUNB3Y59SDGVVLebIg/viewform