[2026/4/9]

[Astro #11] 自作ダッシュボードへの道：Search Console APIの鍵取得とデータ取得テスト

はじめに

サイトを運営していると「アナリティクスを見て、サーチコンソールを開いて…」と、複数のタブを行き来するのが面倒になってきませんか？

「自分のサイト内に、自分だけが見れる専用のダッシュボードを作ってしまおう！」

ということで、AstroのSSR（サーバーサイドレンダリング）機能を活用した自作ダッシュボード開発に挑戦します。

今回は第1回として、一番の難関である「Google APIの認証設定」と、「AstroでAPIを叩いて画面に表示する」までのMVP（最小構成）実装を備忘録としてまとめます。

前回の記事：

[Astro #10] 5分でBingにインデックス - Webmaster Tools連携とサイトマップ自動生成 // PROTOCOL.LAIN

Google Search Console連携によるBing Webmaster Toolsへの一括登録と、Astroでの自動サイトマップ生成（sitemap-index.xml）の手順を解説します。

lain-lab.com

1. Google Cloudで「ボット用のアカウント」を作る

外部からSearch Consoleのデータを引っ張ってくるには、あなたの代わりにデータを見に行く「サービスアカウント（ボット）」を作成し、その合鍵を手に入れる必要があります。

プロジェクトの作成とAPIの有効化

まずは Google Cloud Console にアクセスします。

Google Cloud Platform

Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure as Google.

console.cloud.google.com

新しいプロジェクトを作成します（例: astro-my-dashboard）。

上部の検索バーで「Google Search Console API」を検索し、「有効にする」をクリックします。

サービスアカウントの作成と鍵のダウンロード

ここが一番重要です。

左メニューの「認証情報」から、「＋認証情報を作成」＞「サービスアカウント」を選択します。

わかりやすい名前（例: gsc-reader）をつけて作成します。

作成したアカウントの詳細画面に入り、「キー」タブを開きます。

「鍵を追加」＞「新しい鍵を作成」で JSON形式を選んでダウンロードします。

注意：このJSONファイルは「合鍵」そのものです。絶対にGitHubなどに公開（コミット）しないでください！

2. Search Console側に「ボットを招待」する

鍵を作っただけでは、あなたのサイトのデータを見る権限がありません。Search Console側で入館許可を出します。

ダウンロードしたJSONファイルを開き、client_email の値（gsc-reader@... というメールアドレス）をコピーします。
普段使っている Google Search Console を開きます。

Google Search Console

どのようなクエリでユーザーがサイトにアクセスしているかを確認できます。Google 検索でのサイトのインプレッション数、クリック数、掲載順位を分析できます。

search.google.com

左下の「設定」＞「ユーザーと権限」＞「ユーザーを追加」をクリック。

コピーしたメールアドレスを貼り付け、権限を「制限付き」または「フル」にして追加します。

これでGoogle側の準備はすべて完了です！

3. Astro側での実装（テストページの作成）

準備が整ったので、Astroプロジェクトに戻ってAPIを叩いてみます。

ライブラリのインストール

Google公式のNode.js向けライブラリをインストールします。

npm install googleapis

環境変数（.env）の設定

ダウンロードしたJSONの中身を、安全なサーバー側（.env）で読み込めるようにします。

# .env
GOOGLE_SERVICE_ACCOUNT_EMAIL=（JSONのclient_emailの値）
GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n（長い文字列）\n-----END PRIVATE KEY-----\n"
GSC_SITE_URL=https://lain-lab.com/

💡 Tips: PRIVATE_KEY は改行コード（\n）を含んでいるため、必ず全体をダブルクォーテーション " で囲んでください。

テストページの実装

動作確認用に、昨日のクリック数だけを取得する src/pages/admin-test.astro を作成します。

---
// src/pages/admin-test.astro
import { google } from 'googleapis';

// 1. 認証設定（サーバーサイドでのみ実行）
const auth = new google.auth.JWT(
  process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
  null,
  process.env.GOOGLE_PRIVATE_KEY?.replace(/\\n/g, '\n'), // 改行コードを実際の改行に変換
  ['[https://www.googleapis.com/auth/webmasters.readonly](https://www.googleapis.com/auth/webmasters.readonly)']
);

const searchconsole = google.searchconsole('v1');

// 2. 日付の設定（昨日のデータを取得）
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 2); // 反映のラグを考慮して2日前に設定
const dateString = yesterday.toISOString().split('T')[0];

let clicks = 0;

try {
  // 3. APIリクエスト
  const res = await searchconsole.searchanalytics.query({
    auth,
    siteUrl: process.env.GSC_SITE_URL,
    requestBody: {
      startDate: dateString,
      endDate: dateString,
    },
  });
  clicks = res.data.rows?.[0]?.clicks || 0;
} catch (e) {
  console.error('API Error:', e);
}
---

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Admin Dashboard MVP</title>
  </head>
  <body>
    <h1>Lain-Lab Dashboard</h1>
    <div style="padding: 20px; border: 1px solid #ccc; border-radius: 8px; width: 200px;">
      <h2>昨日のクリック数</h2>
      <p style="font-size: 3rem; font-weight: bold; margin: 0;">{clicks}</p>
      <p>日付: {dateString}</p>
    </div>
  </body>
</html>

ローカルサーバー（npm run dev）を立ち上げ、ブラウザで /admin-test にアクセスして数字が表示されれば成功です！

(※サイトを登録した直後のため「0」になっていますが、API通信は正常に成功しています)

まとめと次回予告

最初は「Google APIの設定って難しそう…」と敬遠しがちですが、手順通りに進めればポチポチ作業だけで簡単に「自サイトの裏口の鍵」を手に入れることができます。
AstroのSSRを使えば、APIキーをフロントエンドに漏らすことなく安全にデータを取得できます。

ただし、今のままだとURLを知っていれば誰でもこのダッシュボードを見れてしまうという大問題があります。

次回は、Netlifyの環境変数を活用して「特定のパスワードを知っている自分だけがログインできる認証機能」をこのダッシュボードに実装していきます。

COMM_LOG: astro-11-search-console-api-dashboard

NO DATA FOUND IN THIS SECTOR.