Googleサイトに表示される「アクセス権が必要です」が解決できない件について

実現したいこと

スプレッドシートの情報を抽出しサイト上に表示させることを実現させたく取り組んでいます。
まず始めにGoogle Apps Script(GAS)とGoogleサイトの連携が出来るかを検証する為、
下記のgsとhtmlをGAS上に作成しデプロイしました。

code.gs
1function doGet() {
2  return HtmlService.createHtmlOutput('Hello World');
3}

index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <h1>Test</h1>
8    <div id="messageContainer"></div>
9    <script>
10      window.addEventListener('load', () => {
11        google.script.run.withSuccessHandler((output) => {
12          document.getElementById('messageContainer').innerHTML = output;
13        }).doGet();
14      });
15    </script>
16  </body>
17</html>

デプロイ条件

次のユーサーとして実行：ウェブアプリケーションにアクセスしているユーザー
アクセスできるユーザー：Googleアカウントを持つ全員

デプロイ時に生成されたライブラリのURLをサイト上へ埋め込んだところ「Hello World」が表示されました。

つづいてGoogleサイトとGoogleスプレッドシートを連携するを参考に下記のgsとhtmlをGAS上に作成しデプロイしました。

code.gs
1const id = 'スプレッドシートのID'
2const name = '該当のシート名'
3
4function getData() {
5  var sheet = SpreadsheetApp.openById(id).getSheetByName(name);
6  var rows = sheet.getDataRange().getValues();
7  var keys = rows.splice(0, 1)[0];
8  return rows.map(function(row) {
9    var obj = {}
10    row.map(function(item, index) {
11      obj[keys[index]] = item;
12    });
13    return obj;
14  });
15}
16
17function doGet(request) {
18  var data = getData();
19  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
20  .setMimeType(ContentService.MimeType.JAVASCRIPT);
21}

index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <?!=HtmlService.createHtmlOutputFromFile('styles.html').getContent();?>
6  </head>
7  <body>
8    <h1>SpreadsheetData</h1>
9    <pre id="data-container"></pre>
10    <script>
11      google.script.run.withSuccessHandler(displayData).doGet();
12
13      function displayData(data) {
14        const dataContainer = document.getElementById('data-container');
15        const jsonString = JSON.stringify(data, null, 2);
16        dataContainer.textContent = jsonString;
17      }
18    </script>
19  </body>
20</html>

デプロイ条件

次のユーサーとして実行：ウェブアプリケーションにアクセスしているユーザー
アクセスできるユーザー：Googleアカウントを持つ全員

スプレッドシートの公開条件

アクセスできるユーザー：自分
一般的なアクセス：リンクを知っている全員(閲覧者)

スプレッドシートの内容

発生している問題・分からないこと

デプロイ時に生成されたライブラリのURLをサイト上へ埋め込んだところ「Googleドライブ　アクセス権が必要です」が表示されました。

上記画像の左上にある「新しいタブで開く」をクリックするとGASが実行されJSON形式でスプレッドシートの値が表示されます。

エラーメッセージ

error
1Googleドライブ　アクセス権が必要です
2ドキュメントを直接開いてアクセス権のリクエストが可能かどうかを確認するか、アクセス権のあるアカウントに切り替えてください。詳細
3ログイン名

該当のソースコード

```code.gs
const id = 'スプレッドシートのID'
const name = '該当のシート名'


function getData() {
  var sheet = SpreadsheetApp.openById(id).getSheetByName(name);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {}
    row.map(function(item, index) {
      obj[keys[index]] = item;
    });
    return obj;
  });
}

function doGet(request) {
  var data = getData();
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <?!=HtmlService.createHtmlOutputFromFile('styles.html').getContent();?>
6  </head>
7  <body>
8    <h1>SpreadsheetData</h1>
9    <pre id="data-container"></pre>
10    <script>
11      google.script.run.withSuccessHandler(displayData).doGet();
12
13      function displayData(data) {
14        const dataContainer = document.getElementById('data-container');
15        const jsonString = JSON.stringify(data, null, 2);
16        dataContainer.textContent = jsonString;
17      }
18    </script>
19  </body>
20</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

GASの設定にてサービスを追加からDrive APIを追加しましたが結果は変わりませんでした。
「ドキュメントを直接開いて」をクリックすると

That’s an error.

The server cannot process the request because it is malformed. It should not be retried. That’s all we know.
のエラーとなりました。

ログイン名:のところにあるアイコンをクリックすると

drive.google.com で接続が拒否されました。
のエラーとなりました。

なぜこのように非ログイン状態になってしまうのかと、こちらの解決方法を教えていただきたいです。
よろしくお願いいたします。

補足

GoogleサイトとGoogleスプレッドシートを連携するの通りにコーディングしChrome上で確認したところCORSのエラーにより表示させることが出来ず、Claude等に確認したところGAS上でgsとhtmlを作成することを勧められ、Hello Worldの表示までは実現できました。

winterboum

2024/04/06 23:42

Google Apps Script(GAS) のことはわかりませんが、この表示はシートにアクセスしたユーザがシートへのアクセス権がない、ということです。 Google Apps Script(GAS) の実行者がシートのアクセス権を持っているかまず確認してください。

Gaston23

2024/04/07 00:53

ご回答いただきありがとうございます。 GASのアクセス権は以下の通りです。次のユーサーとして実行：ウェブアプリケーションにアクセスしているユーザーアクセスできるユーザー：Googleアカウントを持つ全員スプレッドシートの公開条件は以下の通りです。アクセスできるユーザー：自分一般的なアクセス：リンクを知っている全員(閲覧者) 実際にデプロイしたURLをクリックしGASが実行されると値が表示されるのですが、その値がSite上では表示されず困っております。

行動規範の内容に同意します

回答1件

自己解決

下記コードで解決しました。
サイトからhtmlを経由してGASにリクエストしてJSON形式で返してもらうとCORSポリシー違反となるそうで、GAS上でhtml形式にしてもらって返すことでポリシー違反を回避できます。

gs
1function doGet() {
2  // シートのIDとシート名を指定
3  const sheetId = 'シートID';
4  const sheetName = 'シート名';
5
6  // シートを取得
7  const sheet = SpreadsheetApp.openById(sheetId).getSheetByName(sheetName);
8  
9  // データを取得
10  const data = sheet.getDataRange().getValues();
11  
12  // データをJSON形式に変換
13  const headers = data[0];
14  const jsonData = data.slice(1).map(row => {
15    let obj = {};
16    row.forEach((cell, i) => {
17      obj[headers[i]] = cell;
18    });
19    return obj;
20  });
21
22  // HTMLテンプレートを取得
23  const template = HtmlService.createTemplateFromFile('Index');
24  template.data = JSON.stringify(jsonData);
25  
26  // HTMLを出力
27  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
28}

Index.html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>Google Sheets Data</title>
5  <script>
6    document.addEventListener('DOMContentLoaded', (event) => {
7      const data = JSON.parse(<?= data ?>);
8      const container = document.getElementById('data-container');
9      
10      data.forEach(row => {
11        const rowDiv = document.createElement('div');
12        rowDiv.textContent = JSON.stringify(row, null, 2);
13        container.appendChild(rowDiv);
14      });
15    });
16  </script>
17</head>
18<body>
19  <h1>Google Sheets Data</h1>
20  <div id="data-container"></div>
21</body>
22</html>