実現したいこと
スプレッドシートの情報を抽出しサイト上に表示させることを実現させたく取り組んでいます。
まず始めに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>
試したこと・調べたこと
上記の詳細・結果
- 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の表示までは実現できました。
0 コメント