概要

Google Driveのファイルを直接開くことができる機能を追加します。

要件

1. Google Cloud Platform (GCP) の設定

• Google Cloud Consoleでプロジェクトを作成
• Google Drive APIとGoogle Picker APIを有効化
• OAuth 2.0クライアントIDを作成（Webアプリケーション用）
• 認証情報の設定

2. Google OAuth 2.0 認証

• ユーザーがGoogle アカウントでログインできるようにする
• 必要なスコープ:
  • https://www.googleapis.com/auth/drive.readonly または
  • https://www.googleapis.com/auth/drive.file

3. Google Picker API の統合

• Google Driveのファイル一覧を表示
• ユーザーがファイルを選択できるUI
• 選択したファイルのダウンロードと読み込み

4. UIの変更

• ファイルメニューに「Google ドライブから読み込む」メニュー項目を追加
• 対象ファイル: src/components/menu-bar/menu-bar.jsx
• 既存の「コンピューターから読み込む」「URLから読み込む」と同じセクションに配置

実装上の注意点

Dynamic Script Loading（動的ロード）の採用

GoogleのAPIを呼び出すためのJavaScriptファイルの読み込みには、index.htmlにscriptタグを埋め込むのではなく、Dynamic Script Loading（動的ロード）を採用します。

理由:

• 全ユーザーがGoogle Drive機能を使うわけではない
• 初期ページロードのパフォーマンス向上
• 必要なタイミングでのみAPIを読み込む

実装方法:

• 「Google ドライブから読み込む」メニューが最初に選択されたタイミングで動的にスクリプトをロード
• Google API Client Library (https://apis.google.com/js/api.js) を動的に読み込む
• Google Identity Services (https://accounts.google.com/gsi/client) を動的に読み込む

実装例:

const loadGoogleAPI = () => {
    return new Promise((resolve, reject) => {
        if (window.gapi) {
            resolve();
            return;
        }
        const script = document.createElement('script');
        script.src = 'https://apis.google.com/js/api.js';
        script.onload = () => resolve();
        script.onerror = () => reject(new Error('Failed to load Google API'));
        document.head.appendChild(script);
    });
};

技術仕様

対応ファイル形式

• .sb3 ファイル（Scratch 3.0プロジェクト）

セキュリティ考慮事項

• OAuth 2.0トークンの安全な管理
• クライアントIDの環境変数化
• CORSの適切な設定

エラーハンドリング

• 認証失敗時のエラーメッセージ
• ファイル選択キャンセル時の処理
• ネットワークエラーへの対応
• APIロード失敗時の処理

参考リンク

• Google Picker API Documentation
• Google Identity Services
• Google Drive API v3

実装の流れ

1. GCPプロジェクトのセットアップとAPI有効化
2. 環境変数の設定（クライアントID等）
3. 動的スクリプトローダーの実装
4. Google認証フローの実装
5. Picker APIの統合
6. menu-bar.jsxへのメニュー項目追加
7. ファイル読み込みロジックの実装
8. エラーハンドリングとユーザーフィードバック
9. 統合テストの作成