最近、googleサイトを使い始めたので備忘録
Googleサイト × スプレッドシートで作る！レトロな訪問者カウンター
はじめに
昔のウェブサイトにあった、レトロな感じのアクセスのメモ。
Googleサイト（Google Sites）とGoogleスプレッドシート、そしてGoogle Apps Scriptを組み合わせることで、完全無料で動作する訪問者カウンターが作れます。
🎯 完成品はこんな感じ
🌐 サイト訪問者カウンター
今日のアクセス数: 11
累計アクセス数: 11
シンプルでレトロ、でもデザインはモダン！グラデーション背景で見た目もバッチリです。
✨ できること
- リアルタイムアクセス数表示：ページにアクセスするたびにカウントアップ
- 日別統計：今日のアクセス数を自動集計
- 累計統計：これまでの総アクセス数も表示
- データ蓄積：スプレッドシートに全アクセスログを保存
- レスポンシブ対応：PC・スマホどちらでも見やすい表示
🛠️ 必要なもの
- Googleアカウント（無料）
- Googleサイト（無料）
- Googleスプレッドシート（無料）
- Google Apps Script（無料）
すべて無料のGoogleサービスだけで完結します！
📋 実装手順
1. スプレッドシートを準備
まず、アクセスログを保存するスプレッドシートを作成します。
- Google スプレッドシートで新しいファイルを作成
-
1行目（ヘッダー） に以下を入力：
-
A1:
タイムスタンプ -
B1:
日付 -
C1:
ページ名 -
D1:
セッションID
-
A1:
-
スプレッドシートのIDをメモ（URLの
/d/と/editの間の文字列）
2. Google Apps Scriptでバックエンドを作成
Google Apps Scriptエディタで以下のコードを作成します：
メインファイル（コード.gs）
// スプレッドシートのIDをここに貼り付け
const SPREADSHEET_ID = "あなたのスプレッドシートID";
function doGet(e) {
try {
// スプレッドシートを開く
const sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName('シート1');
// ページ名を取得（デフォルトは「トップページ」）
let pageName = 'トップページ';
if (e && e.parameter && e.parameter.page) {
pageName = e.parameter.page;
}
// アクセスログを記録
const today = new Date();
const todayDateString = Utilities.formatDate(today, "JST", "yyyy-MM-dd");
const timestamp = Utilities.formatDate(today, "JST", "yyyy-MM-dd HH:mm:ss");
const sessionId = Utilities.getUuid().substring(0, 8);
sheet.appendRow([timestamp, todayDateString, pageName, sessionId]);
// 統計データを計算
const allData = sheet.getDataRange().getValues();
let todayVisitors = 0;
let totalVisitors = 0;
// ヘッダー行をスキップして集計
for (let i = 1; i < allData.length; i++) {
const dateCell = allData[i][1];
if (allData[i][0]) totalVisitors++; // 有効なデータをカウント
// 今日の日付と一致するかチェック
if (dateCell instanceof Date) {
const visitDateString = Utilities.formatDate(dateCell, "JST", "yyyy-MM-dd");
if (visitDateString === todayDateString) {
todayVisitors++;
}
}
}
// HTMLテンプレートに結果を渡す
const template = HtmlService.createTemplateFromFile('index');
template.todayVisitors = todayVisitors;
template.totalVisitors = totalVisitors;
template.pageName = pageName;
return template.evaluate()
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.setTitle('訪問者カウンター');
} catch (error) {
console.error('エラー:', error);
return HtmlService.createHtmlOutput('<p>エラーが発生しました。</p>');
}
}
3. HTMLテンプレートを作成
Google Apps Scriptエディタで「ファイル」→「新規作成」→「HTML」で index.html を作成：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>訪問者カウンター</title>
<style>
body {
font-family: 'Courier New', monospace;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.counter-box {
background-color: rgba(255, 255, 255, 0.95);
font-size: 18px;
padding: 20px 30px;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 320px;
text-align: center;
border: 3px solid #667eea;
}
.title {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
color: #667eea;
}
.count-display {
font-size: 24px;
font-weight: bold;
color: #764ba2;
margin: 10px 0;
}
.additional-info {
font-size: 14px;
color: #666;
margin-top: 10px;
}
@media (max-width: 480px) {
.counter-box {
width: 90%;
padding: 15px 20px;
}
}
</style>
</head>
<body>
<div class="counter-box">
<div class="title">🌐 訪問者カウンター</div>
<div>今日のアクセス数: <span class="count-display"><?= todayVisitors ?></span></div>
<div class="additional-info">累計アクセス数: <?= totalVisitors ?></div>
</div>
</body>
</html>
4. Webアプリとしてデプロイ
- Google Apps Scriptエディタで**「デプロイ」→「新しいデプロイ」**
- 歯車アイコンをクリック→「ウェブアプリ」を選択
- 設定：
- 次のユーザーとして実行: 自分
- アクセス権: 全員（匿名ユーザーを含む）
- 「デプロイ」 をクリック
- URLをコピー
5. Googleサイトに埋め込み
- Googleサイトのエディタを開く
- カウンターを表示したい場所で 「挿入」→「埋め込み」
- 「URL」 タブでデプロイしたURLを貼り付け
- サイズを調整（推奨: 幅400px、高さ300px）
- 「挿入」 をクリック
🎨 カスタマイズアイデア
デザインの変更
-
配色: CSSの
backgroundやcolorを変更 -
フォント:
font-familyを変更 - アニメーション: CSS animationを追加
機能の追加
-
ページ別統計: URLパラメータで
?page=aboutなどを指定 - 時間別統計: アクセス時間の分析機能
- 週間・月間統計: より詳細な期間別統計
表示項目の変更
- 昨日のアクセス数を追加
- 平均アクセス数を表示
- アクセス元情報を記録（可能な範囲で）
⚠️ 注意点・制限事項
- Googleの利用制限：Apps Scriptには実行時間とAPIコール数の制限があります
- プライバシー: 個人を特定する情報は記録していません
- 精度: 同一ユーザーの重複検出は簡易的なものです
- データ保持: スプレッドシートの行数制限に注意
📊 データの活用方法
蓄積されたスプレッドシートデータは以下の用途に活用できます：
- グラフ作成: スプレッドシートの機能でアクセス推移グラフを作成
- データ分析: ピーク時間帯や曜日別の傾向を分析
- レポート作成: 定期的なアクセス状況レポート
- 外部連携: データをエクスポートして他のツールで分析
🎉 まとめ
Googleの無料サービスだけで、本格的な訪問者カウンターが作れました！
良い点：
- 完全無料で運用可能
- リアルタイムでアクセス数を表示
- データが蓄積されるので分析も可能
- レトロで懐かしい見た目
こんな人におすすめ：
- 個人ブログやポートフォリオサイトを運営している人
- プログラミング学習中でプロジェクトを探している人
- Google Analyticsは大げさ、でも簡単な統計は欲しい人
- 昔のウェブサイトに憧れがある人
ぜひ試してみて、あなたなりのカスタマイズを加えてくださいね！