Yosuke-Kawakami · December 5, 2016 09:00
diff --git a/sheet-api_js-sample.htm b/sheet-api_js-sample.htm
 /*
    Sample JavaScript file.
    see more 'http://donga-donga.net/tips/javascript-google-sheets-api-v4'
 */
 <html>
 <head>
 <meta charset="UTF-8">
 <link href="zz_sample.css" rel="stylesheet" type="text/css">
 <script src="zz_hoge.js" type="text/javascript"></script>
 <script src="zz_fuga.js" type="text/javascript"></script>
 <script>

 var CLIENT_ID      = 'クライアント ID'; // ~.apps.googleusercontent.com
 var SPREADSHEET_ID = 'シート ID';
 var SHEET_NAME     = 'シートの名前';
 var RANGE          = SHEET_NAME;      // シート全体を取得する

 /*
    範囲指定したい時は Excel 風に指定することが出来る（完全互換ではないと思う）
    var SHEET_NAME     = 'シートの名前';
    var AREA           = 'E:F';
    var RANGE          = SHEET_NAME + '!' + AREA;
 */

 var SCOPES = [
    "https://www.googleapis.com/auth/spreadsheets",
    "https://www.googleapis.com/auth/drive",
 ];
 </script>
 <script src="https://apis.google.com/js/client.js?onload=checkAuth"></script>
 <style>
 </style>
 <body>
 <h1>TITLE</h1>
 <div id="authorize-div" style="display:none;">
    <p>最初に認証が必要です。</p>
    <button id="authorize-button" onclick="handleAuthClick(event)">Google Sign-In</button>
 </div>
 <section id="output" style="display:inline-block;">（レスポンス取得時、ここの値を更新する）</section>
 </body>
 </html>
diff --git a/zz_fuga.js b/zz_fuga.js
 function listMajors()
 {
    gapi
    .client
    .sheets
    .spreadsheets
    .values
    .get({
        spreadsheetId: SPREADSHEET_ID,
        range        : RANGE,
    })
    .then(
        function(response)
        {
            // レスポンスを受け取った後の処理はここで記述する

            var range = response.result;
            all_data  = range.values;

            appendPre(JSON.stringify(all_data));
        },
        function(response)
        {
            appendPre('エラーですだよ - ' + response.result.error.message);
        }
    );
 }




 function appendPre(message)
 {
    document.getElementById('output').innerHTML = message;
 }
diff --git a/zz_hoge.js b/zz_hoge.js
 //　以下の２関数は一寸微妙だ。マジナイ的に書いて下さい。

 function checkAuth()
 {
    gapi.auth.authorize(
    {
        'client_id': CLIENT_ID,
        'scope'    : SCOPES.join(' '),
        'immediate': true
    },
    handleAuthResult);
 }


 function handleAuthClick(event)
 {
    gapi.auth.authorize(
        {
            client_id: CLIENT_ID,
            scope    : SCOPES,
            immediate: false
        },
        handleAuthResult
    );
    return false;
 }



 /**
 * 認証が既に済んでいる場合は 'authorized-div' を非表示化してシートの情報を取りにいく。
 * 認証が済んでいない場合は   'authorized-div' を表示して Google 認証する。
 *
 * 書いてて気付いたけど、isAuthorized の分岐が逆だな（処理は合ってるけど変数名がおかしい → 正：isNotAuthorized）
 */
 function handleAuthResult(authResult)
 {
    var authorizeDiv = document.getElementById('authorize-div');
    var isAuthorized = !(authResult && !authResult.error);
    if (isAuthorized)
    {
        authorizeDiv.style.display = 'block';
    }
    else
    {
        authorizeDiv.style.display = 'none';
        loadSheetsApi();
    }
 }



 /**
 * Load Sheets API client library.
 */
 function loadSheetsApi()
 {
    var discoveryUrl = 'https://sheets.googleapis.com/$discovery/rest?version=v4';
    gapi.client.load(discoveryUrl).then(listMajors);
 }
diff --git a/zz_sample.css b/zz_sample.css
 body    { text-align : center; }
 #output { width : 95%;         }
	/*
	Sample JavaScript file.
	see more 'http://donga-donga.net/tips/javascript-google-sheets-api-v4'
	*/
	<html>
	<head>
	<meta charset="UTF-8">
	<link href="zz_sample.css" rel="stylesheet" type="text/css">
	<script src="zz_hoge.js" type="text/javascript"></script>
	<script src="zz_fuga.js" type="text/javascript"></script>
	<script>

	var CLIENT_ID = 'クライアント ID'; // ~.apps.googleusercontent.com
	var SPREADSHEET_ID = 'シート ID';
	var SHEET_NAME = 'シートの名前';
	var RANGE = SHEET_NAME; // シート全体を取得する

	/*
	範囲指定したい時は Excel 風に指定することが出来る（完全互換ではないと思う）
	var SHEET_NAME = 'シートの名前';
	var AREA = 'E:F';
	var RANGE = SHEET_NAME + '!' + AREA;
	*/

	var SCOPES = [
	"https://www.googleapis.com/auth/spreadsheets",
	"https://www.googleapis.com/auth/drive",
	];
	</script>
	<script src="https://apis.google.com/js/client.js?onload=checkAuth"></script>
	<style>
	</style>
	<body>
	<h1>TITLE</h1>
	<div id="authorize-div" style="display:none;">
	<p>最初に認証が必要です。</p>
	<button id="authorize-button" onclick="handleAuthClick(event)">Google Sign-In</button>
	</div>
	<section id="output" style="display:inline-block;">（レスポンス取得時、ここの値を更新する）</section>
	</body>
	</html>
	function listMajors()
	{
	gapi
	.client
	.sheets
	.spreadsheets
	.values
	.get({
	spreadsheetId: SPREADSHEET_ID,
	range : RANGE,
	})
	.then(
	function(response)
	{
	// レスポンスを受け取った後の処理はここで記述する

	var range = response.result;
	all_data = range.values;

	appendPre(JSON.stringify(all_data));
	},
	function(response)
	{
	appendPre('エラーですだよ - ' + response.result.error.message);
	}
	);
	}




	function appendPre(message)
	{
	document.getElementById('output').innerHTML = message;
	}
	//　以下の２関数は一寸微妙だ。マジナイ的に書いて下さい。

	function checkAuth()
	{
	gapi.auth.authorize(
	{
	'client_id': CLIENT_ID,
	'scope' : SCOPES.join(' '),
	'immediate': true
	},
	handleAuthResult);
	}


	function handleAuthClick(event)
	{
	gapi.auth.authorize(
	{
	client_id: CLIENT_ID,
	scope : SCOPES,
	immediate: false
	},
	handleAuthResult
	);
	return false;
	}



	/**
	* 認証が既に済んでいる場合は 'authorized-div' を非表示化してシートの情報を取りにいく。
	* 認証が済んでいない場合は 'authorized-div' を表示して Google 認証する。
	*
	* 書いてて気付いたけど、isAuthorized の分岐が逆だな（処理は合ってるけど変数名がおかしい → 正：isNotAuthorized）
	*/
	function handleAuthResult(authResult)
	{
	var authorizeDiv = document.getElementById('authorize-div');
	var isAuthorized = !(authResult && !authResult.error);
	if (isAuthorized)
	{
	authorizeDiv.style.display = 'block';
	}
	else
	{
	authorizeDiv.style.display = 'none';
	loadSheetsApi();
	}
	}



	/**
	* Load Sheets API client library.
	*/
	function loadSheetsApi()
	{
	var discoveryUrl = 'https://sheets.googleapis.com/$discovery/rest?version=v4';
	gapi.client.load(discoveryUrl).then(listMajors);
	}