アクセスカウンターを強化！PVに対応したテキストグラフを簡単に表示する方法

こんにちは、鈴木俊吾（すずしん）です。

先日、私は自分のブログに自作のアクセスカウンター『CounterWave』を設置しました。
アクセス数（PV）が少しずつ増えていくのを見るのが楽しくて、毎日のようにチェックしています。
「今日は何PVになるんだろう？」という楽しみが生まれたので、アクセスカウンターを設置してみて本当に良かったと思っていますね。

• CounterWave: PHPとJavaScriptで自作アクセスカウンターを作成する方法

ただ、アクセス数を数字で表示するだけでは、ちょっと物足りないと感じるように。
どうせなら、もっと可視化してみたくなりますよね？
そこで、テキストグラフを表示することにしました。
アクセスカウンターの強化を目指してみますよ。

今回は、アクセスカウンターを強化するために、PVに対応したテキストグラフを簡単に表示するための実装方法を紹介します。
具体的にはJavaScriptを使って、アクセス数をグラフで可視化する方法を解説していきます。
基本的なプログラミングの知識があれば、誰でも簡単に実装できるので、ぜひ試してみてくださいね。

それでは、さっそく実装方法を見ていきましょう。

現状のアクセスカウンターの仕様

まずは、現在のアクセスカウンター『CounterWave』の仕様を確認しておきます。
実際のソースコード一式はGitHubにて公開しています。
以下のリンクからアクセスして、ソースコードを確認してみてください。

• CounterWave

CounterWaveは、主な処理をPHPとJavaScriptで行っています。
PHPでアクセス数（PV）を更新および取得し、JavaScriptでそのアクセス数を表示する流れ。
あらかじめ設定されたIPアドレスからのアクセスは除外するように。
そこで、自分のアクセス数はカウントされないようにしています。

現状のアクセスカウンターは、以下のようにHTMLで表示されています。

<div class="counter-wave">
  <p>CounterWave</p>
  <p id="totalViews">Total:</p>
  <ul id="dailyViews"></ul>
  <p id="startDate">Start Date:</p>
</div>

このように、アクセス数を表示するための要素が用意されています。
<p id="totalViews">Total:</p>が累計アクセス数（PV）を表示する要素。
<ul id="dailyViews"></ul>が日別アクセス数（PV）を表示する要素。
<p id="startDate">Start Date:</p>がアクセスカウンターの開始日を表示する要素。

この状態から、アクセス数をテキストグラフで可視化していきます。
日別アクセス数（PV）に応じて、テキストグラフを表示するようにします。
JavaScriptを使って、アクセス数を取得し、テキストグラフを表示する処理を追加していきますよ。

PVに応じたテキストグラフを表示する方法

まずは、表示するテキストグラフの仕様を決めておきます。
今回は、以下のような仕様でテキストグラフを表示することにします。

• 日別アクセス数（PV）に応じて、テキストグラフを表示する。
• 過去30日の最高PVを100%として、その比率に応じてテキストグラフを表示する。
• 日別のPVが最高PVに対して5%ごとに*を1個表示する。（最高20個）
• テキストグラフは、*で表現する。

例えば、過去30日の最高PVが100PVだった場合、以下のようにテキストグラフを表示します。
最高PVを基準とした相対的な比率に応じて、*を表示していきます。

• 100PV：********************
• 50PV：**********
• 20PV：****
• 10PV：**

この機能を実現するためには、JavaScriptで日別アクセス数（PV）を取得し、テキストグラフを表示する処理を追加します。
具体的な実装方法は以下の通りです。

fetch('php/counter-wave.php')
  .then(response => response.json())
  .then(data => {
    const totalViews = data.total;
    const startDate = data.start_date;

    // 合計PVと開始日を表示
    document.getElementById('totalViews').textContent = 'Total: ' + totalViews + ' PV';
    document.getElementById('startDate').textContent = 'Start Date: ' + startDate;

    const dailyData = data.daily;
    const dailyViewsList = document.getElementById('dailyViews');

    // 過去30日間のデータをリストに表示
    dailyViewsList.innerHTML = '';

    // 過去30日間のPVを配列に格納
    const pvArray = [];
    for (let i = 0; i <= 29; i++) {
      const date = new Date();
      date.setDate(date.getDate() - i);
      const dateString = date.toLocaleDateString('ja-JP',
        { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'Asia/Tokyo' })
        .replace(/\//g, '-');

      const views = dailyData[dateString] || 0;
      pvArray.push(views); // PVを配列に追加
    }

    // 最大PVを取得
    const maxPV = Math.max(...pvArray);

    // グラフを生成
    pvArray.forEach((views, index) => {
      const listItem = document.createElement('li');

      // 日付表示
      const date = new Date();
      date.setDate(date.getDate() - index);
      const dateString = date.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');

      const dateSpan = document.createElement('span');
      dateSpan.className = 'date';
      dateSpan.textContent = dateString;

      // グラフを表示するためのspan
      const graphSpan = document.createElement('span');
      graphSpan.className = 'graph';

      // 最大PVを基準に5%ごとに「*」を1つ追加
      const scaledPV = Math.round((views / maxPV) * 20); // 5%単位で20段階
      graphSpan.textContent = '*'.repeat(scaledPV); // 「*」を繰り返して表示

      // PV表示
      const pvSpan = document.createElement('span');
      pvSpan.className = 'pv';
      pvSpan.textContent = views + ' PV';

      // liに各要素を追加
      listItem.appendChild(dateSpan);
      listItem.appendChild(graphSpan);
      listItem.appendChild(pvSpan);

      dailyViewsList.appendChild(listItem);
    });
  })
  .catch(error => console.error('Error:', error));

ここでは、PHPから取得したアクセス数（PV）をJavaScriptで取得し、テキストグラフを表示する処理を追加しています。
PHPでの処理内容の説明は省略しますが、アクセス数（PV）をJSON形式で返すようにしています。

ポイントとしては、過去30日間のPVを配列に格納し、最大PVを取得してから、その比率に応じて*を表示している部分。
Math.round((views / maxPV) * 20)で、最大PVを基準に5%ごとに20段階に分けて*を表示しています。
表示する*の数が分かれば、あとは簡単ですよね？
テキストグラフを表示するための要素を生成してテキストを追加するだけ。

このように、JavaScriptを使って、アクセス数（PV）をテキストグラフで可視化できました。
基本的な仕組みが分かってしまえば、実装するのは意外と簡単。
ぜひ、自分のアクセスカウンターにもテキストグラフを追加してみてください。

アクセスカウンターを強化することで、アクセス数をより楽しく可視化できるようになります。
アクセス数が増えるたびに、テキストグラフが変化していく様子をぜひ楽しんでみてくださいね。

ちなみに、私のブログでの実際の表示例は以下の通りです。
どうでしょうか？
日別アクセス数（PV）をテキストグラフで表示することで、視覚的にも楽しいアクセスカウンターになってますよね。

まとめ

今回は、アクセスカウンターを強化するために、PVに応じたテキストグラフを簡単に表示する方法を紹介しました。
JavaScriptを使って、アクセス数（PV）をテキストグラフで可視化することで、アクセスカウンターをより楽しく使えるようになります。

アクセス数（PV）を数字だけでなく、グラフで表示することで、アクセス数の変化をより直感的に把握できるようになりますよね。
アクセスカウンターを設置している方は、ぜひこの方法を試してみることをおすすめします。
実装自体も比較的簡単なので、ぜひチャレンジしてみてください。

データの可視化というのは、情報を理解しやすくするためにとても有効な手段。
アクセス数をグラフで表示することで、より多くの情報を得られるようになります。
この例で言えば、過去30日間のアクセス数の推移が一目で分かるように。
単純に数字で見ているだけでは気づかない傾向や変化が見えてくるかもしれませんよね。

いかがでしょうか？
アクセスカウンターを強化するためのテキストグラフ表示方法、参考になりましたでしょうか？
ぜひ、自分のアクセスカウンターにも取り入れてみてください。

今回はここまでです。
最後までお読みいただき、ありがとうございました。

それでは、また次回の記事でお会いしましょう。

関連リンク

• CounterWave
• CounterWave: PHPとJavaScriptで自作アクセスカウンターを作成する方法

関連タグ

この記事に付けられているタグの一覧です。
タグをクリックすると、そのタグが付けられた記事の一覧を表示します。

#プログラミング #アクセスカウンター #PV #テキストグラフ #可視化 #JavaScript #ブログ記事 #2024年9月

SNSシェアのお願い

もし、この記事を気に入ってもらえたら…。
SNSへシェアしていただけると嬉しいです。

あなたのシェアは、非常に励みになります。
今後の更新に対するモチベーションにもつながります。

ぜひともよろしくお願いします。