1. はじめに
Googleスプレッドシートの値をGoogleサイトに表示する方法を紹介します。
方法は、Google Apps Script（GAS）を使用し、スプシの値をJOSN APIで取得できるようにし、そのAPIをGoogleサイトで使用し、スプシの値をGoogleサイトから参照できるようにします。
目次
1.はじめに
2.Google Apps Scriptを編集する
3.GoogleサイトにHTMLを埋め込む
4.参考記事
2. Google Apps Scriptを編集する
スプシのタブから「拡張機能」を開き、Google Apps Scriptを選択します。
開かれたGASのプロジェクトに以下を追記してください。またそこで使用するシートIDはスプレッドシートのリンク「https://docs.google.com/spreadsheets/d/（シートID）」で確認できます。
//デプロイする時は「全員」に設定する
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);
}
追記ができたら、右側のデプロイから「新しいデプロイ」を選択します。プロジェクトを始めてデプロイする時は承認が必要になります。
承認完了後、開かれたウィンドウの右上の設定（歯車）から「ウェブアプリ」を選択し、生成されたURLからJSONでデータを取得できるかを確認します。問題なければ、アクセスできるユーザーを「全員」に設定し、右下のデプロイを押下します。
これで、そのURLからスプシの値を参照することができます。
JSONデータの例
[ {
"sum" : 3
} ]
3. GoogleサイトにHTMLを埋め込む
Googleサイトの挿入タブから「埋め込む」を選択し、開かれたウィンドウで「埋め込みコード」タブを開き、以下を追記してください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="data">取得中</div>
<script>
window.onload = function(){ getJsonp_GAS() }
function getJsonp_GAS() {
$.ajax({
type: 'GET',
url: 'デプロイ時生成されたURL',
success: function(json){
var dataJS = JSON.parse(json)
//JSONデータの0番目のsumキー（スプシのカラム名）を参照する場合
var html = json[0].sum ; //3
document.getElementById('data').innerHTML = html;
}
});
}
</script>
</body>
以上で、Googleサイトにスプシの値を表示することができました！
不明な点は、参考記事を読むと解決するかもしれません。