クリック可能な訪問者カウンターを Web サイトに追加する方法

私のポートフォリオに追加する楽しくてインタラクティブなものを考えていました。訪問者が「ここにいたよ」というちょっとしたメッセージを残すために使用できるクリック可能なカウンターは素晴らしいアイデアだと感じました。これはシンプルで魅力的で、Web サイトをもう少しパーソナルなものにする素晴らしい方法です。これを作成してみたいと思われる場合は、このガイドで段階的に説明します。

完全に機能するビューカウンターを段階的に構築していきます。経験豊富な開発者である必要はありません。飛び込んでみましょう!

1. HTML: 構造の構築

まず、ビューカウンターの構造を設定します。好きなアイコンやボタンのスタイルを使用できますが、このチュートリアルでは目のアイコンを使用します。 HTML コードは次のとおりです:

<div>



<h2>
  
  
  2. The CSS: Styling the Counter
</h2>

<p>Let’s add some simple styling to make the counter look clean and centered. Here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.eye-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eye-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #333;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.eye-button:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.2);
}

.eye-icon {
  fill: currentColor;
}

.view-count {
  font-size: 1rem;
  font-weight: bold;
}

この CSS はカウンターをページの中央に配置し、ボタンにホバー効果を追加します。

3. JavaScript で命を吹き込む

次はメインイベントで、カウンターを機能させます。
以下は、シンプルにするために関数に分割された JavaScript です:

// Run code after the page has loaded
document.addEventListener('DOMContentLoaded', async () => {
  const eyeButton = document.querySelector('.eye-button');
  const viewCount = document.querySelector('.view-count');

  const BIN_URL = 'https://api.jsonbin.io/v3/b/YOUR_BIN_ID'; // Replace with your bin URL
  const API_KEY = 'YOUR_API_KEY'; // Replace with your API key

  // Function to get the visitor's IP address
  async function getVisitorIP() {
    try {
      const response = await fetch('https://api.ipify.org?format=json');
      const data = await response.json();
      return data.ip;
    } catch (error) {
      console.error('Error fetching IP:', error);
      return null;
    }
  }

  // Function to fetch data from JSONBin
  async function fetchBinData() {
    const response = await fetch(BIN_URL, {
      headers: {
        'X-Master-Key': API_KEY
      }
    });
    const result = await response.json();
    return result.record;
  }

  // Function to update data in JSONBin
  async function updateBinData(data) {
    await fetch(BIN_URL, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-Master-Key': API_KEY
      },
      body: JSON.stringify(data)
    });
  }

  // Main logic
  const visitorIP = await getVisitorIP();
  if (!visitorIP) {
    eyeButton.classList.add('disabled');
    return;
  }

  const binData = await fetchBinData();
  viewCount.textContent = binData.totalClicks;

  if (binData.clickedIPs.includes(visitorIP)) {
    eyeButton.classList.add('disabled');
  }

  eyeButton.addEventListener('click', async () => {
    if (!eyeButton.classList.contains('disabled')) {
      binData.totalClicks += 1;
      binData.clickedIPs.push(visitorIP);

      await updateBinData(binData);

      viewCount.textContent = binData.totalClicks;
      eyeButton.classList.add('disabled');
    }
  });
});

内訳:

1. 訪問者 IP の取得: ipify を使用して訪問者の IP アドレスを取得します。
2. Fetch Bin Data: JSONBin から現在の合計クリック数と IP リストを取得します。
3. Update Bin Data: JSONBin のクリック数と IP リストを更新します。
4. 複数のクリックを防止: 訪問者がすでにクリックしたかどうかを確認し、クリックしている場合はボタンを無効にします。

4. JSONBinの設定

これまでに JSONBin を使用したことがなくても、心配する必要はありません。次の手順に従ってください:

1. JSONBin.io にアクセスし、無料アカウントにサインアップします。
2. 次の初期データを使用して新しいビンを作成します。

   {
     "totalClicks": 0,
     "clickedIPs": []
   }

1. ビンを保存した後、ビンの詳細ページから ビン ID をコピーします。
2. アカウント設定に移動して、API キーを生成します。
3. JavaScript コード内の YOUR_BIN_ID と YOUR_API_KEY を実際の Bin ID と API キーに置き換えます。

それだけです！楽しくてインタラクティブなビューカウンターが完成しました。これは、訪問者を惹きつけ、サイトに個性を加える簡単な方法です。

お気軽に私のポートフォリオにアクセスして実際の動作をご覧ください。