Google Search APIを活用した大学情報スクレイピングシステムの構築方法

Google Search APIを活用した大学情報スクレイピングシステムの構築方法

こんにちは、チャリセです！
今回は、Google Search APIを使って福岡県の大学情報を簡単にスクレイピングし、美しいBootstrapテーブルで表示するシステムの作り方をご紹介します。このシステムを使えば、大学の名前、住所、電話番号などの基本情報を効率的に収集できます。

システムの特徴

今回構築するシステムには、以下のような特徴があります：

  1. モダンで美しいUI – Bootstrap 5とカスタムCSSによる洗練されたデザイン
  2. シンプルな検索機能 – 都道府県名とキーワードを入力するだけで検索可能
  3. レスポンシブデザイン – スマートフォンやタブレットでも快適に利用可能
  4. データエクスポート機能 – 検索結果をCSVやJSONで保存可能
  5. 詳細表示機能 – 各大学の詳細情報をモーダルウィンドウで確認可能
  6. 統計情報の視覚化 – 検索結果の統計を見やすくカード表示

技術スタック

このシステムでは以下の技術を使用しています：

  • HTML5/CSS3 – ベースとなるマークアップと様式
  • JavaScript (Pure JS) – クライアントサイドの機能実装
  • Bootstrap 5 – レスポンシブなUIフレームワーク
  • jQuery – DOM操作の簡略化
  • DataTables – 高機能テーブル表示ライブラリ
  • Font Awesome – アイコンセット
  • Google Custom Search API – 検索機能の提供

実装手順

1. Google Custom Search APIの準備

まず、Google Custom Search APIを使用するための準備をします：

  1. Google Cloud Consoleにアクセスし、新規プロジェクトを作成
  2. APIライブラリから「Custom Search API」を有効化
  3. 認証情報からAPIキーを発行
  4. Programmable Search Engineで検索エンジンを作成
  5. 検索エンジンIDを取得

2. HTMLとCSSの実装

システムのフロントエンドは、モダンでユーザーフレンドリーなデザインを心がけました。以下がHTMLの基本構造です：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大学情報検索システム</title>
    <!-- CSS libraries -->
</head>
<body>
    <!-- Header Section -->
    <header class="app-header">
        <div class="container">
            <h1 class="app-title"><i class="fas fa-university me-3"></i>大学情報検索システム</h1>
            <p class="app-subtitle">キーワードから大学の詳細情報を簡単に検索できます</p>
        </div>
    </header>

    <div class="container">
        <!-- Search Form -->
        <div class="app-card">
            <!-- 検索フォーム -->
        </div>

        <!-- Results Section -->
        <div id="resultContainer" class="d-none">
            <!-- 統計情報 -->
            <div class="stats-container">
                <!-- 統計カード -->
            </div>

            <!-- 検索結果テーブル -->
            <div class="table-container">
                <!-- データテーブル -->
            </div>
        </div>
    </div>

    <!-- 詳細モーダル -->
    <div class="modal fade" id="universityDetailModal">
        <!-- モーダル内容 -->
    </div>

    <!-- JavaScript libraries -->
</body>
</html>

CSSでは、次のような工夫をしています：

  1. カラーパレット – 青系統のグラデーションを基調としたモダンな配色
  2. カード型UI – 情報を視覚的に区切るカードデザイン
  3. アニメーション効果 – ホバー時の微妙な変化による操作感の向上
  4. アイコンの活用 – Font Awesomeを使った直感的なアイコン配置
  5. レスポンシブグリッド – 画面サイズに応じて最適化されるレイアウト

3. JavaScript実装のポイント

検索機能の実装では、以下のような流れで処理を行います：

  1. 検索クエリの作成 – 入力された都道府県名とキーワードを組み合わせる
  2. API呼び出し – Google Custom Search APIに検索リクエストを送信
  3. 結果の解析 – 返却されたデータから大学情報を抽出
  4. データの表示 – 抽出した情報をテーブルに表示

以下は、検索実行の核となる部分のコードです：

// Google Custom Search APIを使用して検索を実行する関数
async function performGoogleSearch(query, limit) {
    const apiUrl = 'https://www.googleapis.com/customsearch/v1';
    const params = new URLSearchParams({
        key: API_KEY,
        cx: SEARCH_ENGINE_ID,
        q: query,
        num: Math.min(10, limit) // APIは一度に最大10件まで
    });

    try {
        const response = await fetch(`${apiUrl}?${params.toString()}`);
        
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(`API request failed: ${errorData.error?.message || response.statusText}`);
        }
        
        return await response.json();
    } catch (error) {
        console.error('Google Search API error:', error);
        throw error;
    }
}

4. 検索結果からの情報抽出

検索結果から大学情報を抽出するロジックは、次のような実装になっています：

// 検索結果から大学情報を抽出する関数
function processSearchResults(items) {
    return items.map(item => {
        // タイトルから大学名を抽出
        const title = item.title || '';
        const universityName = title.includes('-') ? title.split('-')[0].trim() : title.trim();
        
        // スニペットから住所を抽出（正規表現を使用）
        const snippet = item.snippet || '';
        const addressMatch = snippet.match(/〒\d{3}-\d{4}[^\n]+/) || 
                           snippet.match(/福岡県[^,;。\n]+/);
        const address = addressMatch ? addressMatch[0].trim() : '情報なし';
        
        // 電話番号の抽出
        const phoneMatch = snippet.match(/0\d{1,4}[-\s]?\d{1,4}[-\s]?\d{4}/);
        const phone = phoneMatch ? phoneMatch[0].trim() : '情報なし';
        
        // 大学の種別を推定
        const type = determineUniversityType(universityName, snippet);
        
        return {
            name: universityName,
            address: address,
            phone: phone,
            type: type,
            link: item.link || '',
            snippet: snippet,
            logoInitial: universityName.charAt(0)
        };
    });
}

5. 検索結果の表示

抽出した情報は、DataTablesを使って見やすいテーブルで表示します：

// 検索結果を表示する関数
function displayResults(data) {
    // DataTablesが既に初期化されている場合は破棄
    if (dataTable) {
        dataTable.destroy();
    }
    
    // テーブルにデータを追加
    const tableBody = document.getElementById('resultTableBody');
    tableBody.innerHTML = '';
    
    data.forEach((university, index) => {
        const row = tableBody.insertRow();
        
        // 各セルにデータを表示
        // 大学名、種別、住所、電話番号、詳細ボタンを表示
    });
    
    // DataTablesを初期化
    dataTable = new DataTable('#universityTable', {
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/ja.json'
        },
        responsive: true,
        pageLength: 10,
        order: [[0, 'asc']] // 大学名で昇順ソート
    });
}

6. データのエクスポート機能

検索結果をCSVやJSONでエクスポートする機能も実装しています：

// CSVファイルにエクスポートする関数
function exportToCSV() {
    // CSVヘッダー行
    let csvContent = '大学名,種別,住所,電話番号,ウェブサイト\n';
    
    // CSVデータ行
    universitiesData.forEach(uni => {
        // カンマやダブルクォートをエスケープ
        const escapedValues = [
            `"${uni.name.replace(/"/g, '""')}"`,
            `"${uni.type.replace(/"/g, '""')}"`,
            `"${uni.address.replace(/"/g, '""')}"`,
            `"${uni.phone.replace(/"/g, '""')}"`,
            `"${uni.link.replace(/"/g, '""')}"`
        ];
        csvContent += escapedValues.join(',') + '\n';
    });
    
    // CSVファイルをダウンロード
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', `大学情報_${new Date().toISOString().split('T')[0]}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

システムのデザインと実装のポイント

今回のシステム設計で特に注力した点は以下の通りです：

  1. ユーザビリティ
    • シンプルな操作フローと直感的なUI
    • 統計情報のビジュアル化によるデータ把握の容易さ
    • レスポンシブデザインによるあらゆるデバイスでの快適な操作感
  2. 視覚的デザイン
    • グラデーションと適度な影を使った立体感の演出
    • 余白と配色による情報の階層化
    • アニメーションによる操作フィードバックの強化
  3. パフォーマンス
    • 必要なデータのみをAPIから取得する効率的な設計
    • DataTablesを使った高速なデータ処理と表示
    • 非同期処理によるUI操作のブロッキング防止

使い方

  1. HTMLファイルをブラウザで開きます
  2. 検索フォームに「福岡県」などの都道府県名と「大学」などのキーワードを入力
  3. 「検索開始」ボタンをクリック
  4. 検索結果が表示されたら、テーブルで情報を閲覧
  5. 必要に応じて詳細表示、エクスポート、印刷機能を利用

注意点と今後の展望

現在のシステムには、いくつかの制限があります：

  1. API制限 – Google Custom Search APIの無料枠は1日100クエリまで
  2. 検索結果の制限 – 現在、Googleの制限により1ページ10件までしかスクレイピングできていません
  3. データの正確性 – スクレイピングしたデータは必ずしも100%正確ではないため、重要な用途では確認が必要

今後複数ページをスクレイピングする方法として、以下のような改良を予定しています：

  1. ページネーション対応 – Google Search APIのstartパラメータを使用して複数ページの結果を取得
  2. バッチ処理 – 複数回のAPI呼び出しを自動的に行い、より多くのデータを収集
  3. 結果のキャッシュ – 同じ検索条件での結果をローカルストレージに保存し、API呼び出しを節約

    例えば、以下のようなコードで複数ページのスクレイピングが可能になります：
// 複数ページの結果を取得する関数
async function fetchMultiplePages(query, totalResults) {
    const pageSize = 10; // APIの制限による1ページあたりの最大結果数
    const totalPages = Math.ceil(totalResults / pageSize);
    let allResults = [];
    
    for (let page = 0; page < totalPages; page++) {
        const startIndex = page * pageSize + 1;
        const results = await performGoogleSearch(query, pageSize, startIndex);
        
        if (!results || !results.items) break;
        
        allResults = allResults.concat(results.items);
        
        // API制限に引っかからないよう少し待機
        await new Promise(resolve => setTimeout(resolve, 1000));
    }
    
    return allResults;
}

まとめ

Google Search APIを活用した大学情報スクレイピングシステムの構築について解説しました。このシステムは、シンプルかつモダンなUIで、効率的に大学情報を収集・整理することができます。特に、教育機関の調査や研究、マーケティングなどの目的に役立つでしょう。

今回は福岡県の大学を例にしましたが、この仕組みは他の地域や、大学以外の施設（例：病院、企業など）の情報収集にも応用できます。ぜひ、自分のニーズに合わせてカスタマイズしてみてください。

現在はGoogleの制限により1ページ10件までしかスクレイピングできていませんが、今後複数ページをスクレイピングする方法を紹介します。

■ すべてのコードは以下のURLからダウンロードの上ご自由にお使いください。
　https://filetalk.jp/download.php?cd=LXwCwPgrb3

Happy Coding!!

現在
株式会社チョモランマ
株式会社シェルパ
3Dmodeljapan株式会社
ではスタッフを大募集しております！！
Unreal Engine4、AI、プログラミングや建築パースに興味がある方！
ぜひご応募下さい！！
初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です！！

sherpa.staff