goatdash

goatdashは、[GoatCounter](https://www.goatcounter.com/)分析のための軽量でプライバシーに配慮したダッシュボードです。依存関係なしのバニラJavaScriptとして完全にクライアント側で動作し、ビルドツールや独自のバックエンドサーバーを必要としません。デプロイは、数個の静的ファイルを任意のウェブホストにコピーするだけで完了します。 ## 機能 このダッシュボードは、HTTPS経由の公開v0 APIを通じて1つ以上のGoatCounterインスタンスに接続します。以下の分析データを表示します： - **5つのKPIカード**: ユニークビジター（トレンド付き）、ページビュー、トップページ、追跡パス、総イベント数。 - **リファラー内訳**: チャネル別（ダイレクト、検索エンジン、キャンペーン、その他のサイト）にグループ化されたトラフィック。個別のリファラーおよびそこから流入したページへのドリルダウンが可能です。 - **コロプレス世界地図**: 訪問数に応じて平方根スケールで色分けされた国々。ホバーツールチップ、ズーム、パン、リセット機能を備えています。 - **あらゆる場所でのドリルダウン**: 任意のページをクリックしてリファラーを確認し、任意のリファラーをクリックして流入先ページを確認できます。また、ブラウザ/システム/デバイスからバージョンへ、国から地域へ、キャンペーンからソースURLへと掘り下げることが可能です。 - **柔軟な日付範囲**: 今日、7日間、30日間、90日間、またはカスタムの開始/終了期間を選択できます。 ## マルチサイトサポート goatdashは、各サイトが独自のドメインを持ちながら単一のGoatCounterアカウントを共有するマルチサイト構成向けに設計されています。GoatCounterは`Host`ヘッダーから正しいサイトを判別するため、ダッシュボードは各サイトのドメインに対してクロスオリジンでクエリを送信します。サイドバーには、APIキーの権限に基づいた`/api/v0/sites`からの全サイトがリストされます。非アクティブなサイトをバックグラウンドでプリキャッシュするため、サイト切り替えは高速です。 ## アーキテクチャとスタック - **バニラJSのみ**: React、バンドラー、CDNコールは一切使用していません。合計7つの静的ファイルで構成されています。 - **バックエンドなし**: ブラウザが直接GoatCounter APIと通信します。パッチを当てるサーバー、バックアップするデータベース、維持すべきサービスは存在しません。 - **サービスワーカー**: アプリシェルとバージョン管理されたアセットをキャッシュして即時リロードを実現します。APIレスポンスはstale-while-revalidate方式でキャッシュされます。 - **テーマ**: ダーク、ライト、またはオートモード。トップバーのボタンで切り替え可能で、厳格なCSP (`default-src 'self'`) と互換性のある外部 `theme.js` スクリプトにより、描画前に適用されます。 - **言語**: スペイン語、英語、または自動検出。`localStorage`に保存されます。 - **デモモード**: APIキーなしで探索できるよう、現実的なサンプルデータをロードします。 ## インストール インストールスクリプトやコンパイルは不要です。任意のHTTPサーバーから静的ファイルを配信してください： ```sh python3 -m http.server 8000 ``` 要件：静的ウェブサーバーと、ブラウザからHTTPS経由でv0 APIにアクセス可能なGoatCounterインスタンス。Docker、Node、ビルドツールは不要です。 本番環境のマルチサイト展開では、ウェブサーバーを専用ドメイン（例：`stats.example.com`）で配信するように設定し、index HTMLに `Cache-Control: no-store` を設定してください。アセットファイルはバージョンクエリ文字列（例：`app.js?v=3`）を使用しており、キャッシュの不整合を避けるため、デプロイごとに更新する必要があります。 オプションとして、systemdベースの週次セルフアップデーター (`deploy/goatdash-update.sh`) が提供されており、最新のGitHubリリースをダウンロードし、SHA256チェックサムを検証し、現在のインストールをバックアップして新バージョンに差し替えます。 ## 設定 初回ロード時の接続画面で以下を求められます： - サイトの **GoatCounter URL** (例：`https://stats.cloudless.club`)。 - GoatCounterの「Settings > API」で作成した、少なくともCountおよびRead statistics権限を持つ **APIキー**。 これらの値はブラウザの `localStorage` に保存され、HTTPS経由でのみGoatCounterインスタンスに送信されます。テーマ、言語、選択したサイト、日付範囲もローカルに保存されます。 マルチサイト構成の場合、各サイトは同じGoatCounterインストールを指す独自のドメインを持つ必要があります。GoatCounterは `Access-Control-Allow-Origin: *` を送信するため、プロキシなしでクロスオリジンリクエストが可能です。なお、認証付きリクエストごとに `OPTIONS` プリフライトが発生するため、APIコール1回につき2回の往復通信が発生します。 ## 使い方 ページを開き、GoatCounter URLとAPIキーを入力するか、「Try Demo」をクリックしてサンプルデータで試してください。セグメントコントロールで日付範囲を切り替え、ギアメニューでテーマ/言語の変更や切断を行い、メトリクスカードをクリックして関連データにドリルダウンしてください。リフレッシュメニューを使用すると、キャッシュがクリアされ、すべてが再取得されます。 ## 開発 プロジェクトは `index.html`, `styles.css`, `theme.js`, `app.js`, `fixtures.js`, `sw.js` にわたるプレーンなHTML、CSS、JavaScriptで構成されています。`package.json`、バンドラー、テストハーネスはありません。ローカル開発： ```sh python3 -m http.server 8000 ``` `fixtures.js` のデモ用フィクスチャデータは、実際のAPIレスポンス形式を模倣しています。 ## ライセンス AGPL-3.0。世界地図アセット (`assets/world-map.js`) は、Abhishekh Singh氏のMITライセンスであるgoatcounter-dashboardからそのまま引用されており、MITライセンスのままとなります。