← ポートフォリオに戻る
GAS Integration

GAS API Access Client

Google Apps Script (GAS) のウェブアプリにアクセスし、返ってきたデータをリアルタイムに取得・表示できます。

⚡ リクエスト実行

※ 空欄でも送信可能です。GETの時はURLの末尾にクエリパラメータとして自動追加されます。
取得したレスポンス STATUS

📝 GAS (Google Apps Script) 側の設定手順

CORSエラーを回避し、ブラウザ（JavaScript）から正常にデータを取得するためには、GAS側で正しいレスポンス設定をする必要があります。

スプレッドシートやGASプロジェクトを開く

Googleスプレッドシートの「拡張機能」＞「Apps Script」を開くか、Google Apps Scriptで新規プロジェクトを作成します。

以下のスクリプトをコピーして貼り付ける

`Code.gs` の内容をすべて消去し、以下のサンプルコードを貼り付けます（保存ボタン 💾 も押してください）。 

function doGet(e) {
  // CORSを回避するためJSON形式で返却します
  const data = {
    status: "success",
    message: "GASからのGETレスポンスの取得に成功しました！🎉",
    timestamp: new Date().toISOString(),
    receivedParams: e.parameter
  };
  
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  let postData;
  try {
    postData = JSON.parse(e.postData.contents);
  } catch(err) {
    postData = e.parameter;
  }

  const data = {
    status: "success",
    message: "GASへのPOST送信に成功しました！🚀",
    timestamp: new Date().toISOString(),
    receivedData: postData
  };
  
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}
ウェブアプリとしてデプロイする（重要）

1. 画面右上の「デプロイ」ボタン ＞ 「新しいデプロイ」をクリックします。
2. ギアマーク（種類の選択）をクリックし、「ウェブアプリ」を選択します。
3. 以下の設定を必ず指定してください：
    ・「次のユーザーとして実行」: 自分 (Your email)
    ・「アクセスできるユーザー」: 全員 (Anyone) （※全員にしないとアクセスできません）
4. 「デプロイ」をクリックします。
5. 承認ダイアログが出たら、アクセスを承認してください。
6. 発行された「ウェブアプリのURL」をコピーして、上記の「GAS ウェブアプリのURL」欄に貼り付けます。

💡 CORS（クロスオリジン制限）に関するヒント

ブラウザから直接 `fetch()` でGASを呼び出すと、GASが別のURLへ一時的にリダイレクトします。Googleはこのリダイレクト時に適切なCORSヘッダーを設定するため、上記のように `ContentService.createTextOutput().setMimeType(ContentService.MimeType.JSON)` を使用してJSONを返すことで、特別なプロキシを通さずとも安全にブラウザ側でデータを取得することが可能となります。