취미로 개발을 하다 보니 서버도 없고 해서 랭킹같은 순위를 어디에 저장해야 될까 고민 하다가 생각해낸것이 구글 스프레드시트에 저장을 한뒤 스프레드시트의 함수로 랭킹을 구현해 보았습니다
자바스크립트로 구글 스프레드 시트에 자료 입력하는 방법
1. 먼저 스프레드 시트를 만들고 제목이나 메뉴등 기본적으로 준비를 한다
2. 메뉴 - 확장 프로그램 - Apps Script
//var SHEET_NAME = "시트1";
var SCRIPT_PROP = PropertiesService.getScriptProperties();
function doGet(e){
return handleResponse(e);
}
function doPost(e){
return handleResponse(e);
}
function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000);
try {
var doc = SpreadsheetApp.getActiveSpreadsheet();
//시트이름으로 선택하고자 할 때
//var sheet = doc.getSheetByName(SHEET_NAME);
var sheet = doc.getSheets()[0];
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1;
var row = [];
for (i in headers){
if (headers[i] == "Timestamp"){
row.push(new Date());
} else {
row.push(e.parameter[headers[i]]);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e){
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally {
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}3. 위 코드 복사 후
4. Code.gs에 붙혀넣기(기존 function은 지워도 됨)
| 시트를 여러개 갖고 계시다면, 데이터를 넣을 시트가 몇 번째인지 기억하시고 doc.getSheets()[0] 부분의 숫자를 변경하세요. 인덱스는 0부터 시작합니다. 혹은 시트의 이름으로 선택하려면 주석처리된 부분을 제거하시고 var sheet = doc.getSheets()[0]; 부분을 주석처리하세요. |
라고합니다 출처는 밑에
5. CTRL + S 저장
6. 오른쪽 상단에 배포 - 새배포
7. 유형 - 웹 앱
8. 인증정보는 나(소유자만 배포가능) 액세스 권한은 모든 사용자 - 배포
9. 기다린뒤 액세스 승인을 눌러줍니다
10. 자신의 아이디로 승인해 줍니다
11. 경고창이 뜹니다 고급 - 제목 (으)로 이동(안전하지 않음)을 클릭합니다
12. 허용해줍니다
13. URL이 뜹니다 밑의 url 부분에 넣으면 됩니다
$.ajax({
type: "GET",
url: "복사해둔 URL",
data: {
"컬럼명1": "넣을 데이터",
"컬럼명2": "넣을 데이터",
"컬럼명3": "넣을 데이터"
},
success: function(response){
alert('입력 완료.');
}
});14. 위 코드를 자바스크립트에 넣습니다
컬럼명에 처음에 작성해둔 메뉴를 넣어주면 됩니다
위 사진의 경우에는 레벨, 이름, 점수, 연습목록이 컬럼명입니다
여기까지의 참고 자료
구글 스프레드시트 API 활용하기 : INSERT
지난 포스트에 이어 구글 스프레드시트에 동적으로 데이터를 삽입해 보겠습니다. 먼저 스프레드시트 하나를 준비해 주세요. 저는 지난 포스팅에 썼던 시트를 쓰겠습니다. 스크립트 작성, 배포
kutar37.tistory.com
여기까지 테스트 해보실 분들은 위 링크 제일 하단에
Edit in JSFiddle로 들어가 url을 자신의 url로 바꿔서 테스트 해보시면 됩니다
구글 스프레드 시트 내용 게시하기(보여주기)
다시 본론으로 돌아와서 랭킹 시스템을 사용하려면 이렇게 해서 자료만 받는게 끝이 아니라 이 자료를 사용자에게 보여줘야 됩니다
그럼 시트1은 이용자의 자료를 받는 시트로 남겨두고
15. 시트1의 자료를 가지고 순위를 정렬하는 시트를 새로 만들어 주고 이 시트명은 사용자에게 보이기 때문에 시트명도 바꿔줍니다
16. 엑셀 꾸미기(이 부분은 엑셀 함수 부분이기 때문에 자신에게 맞게 엑셀함수를 사용하면 됩니다)
새로운 Ranking시트에 위와 같은 양식을 만들어 둔뒤
=IFERROR(INDEX('시트1'!A:D,MATCH(LARGE('시트1'!A:A,A2),'시트1'!A:A,0),1),"")위 함수(랭킹을 구하는 엑셀 함수)를 붙혀넣기 해주면 됩니다
vlooup을 사용해도 되지만 vlooup은 기준열의 왼쪽 열의 값을 받아올 수 없다는 단점이 있습니다
위 함수설명 시트 1의 A:A(점수 열)에 있는 값들 중 A2에 값인 1이라는 값, 즉 1등을 찾아서 A:D 안의 자료를 받아오는 함수입니다
17. 모든게 준비가 됐다면 메뉴-공유-웹에 게시
18. 삽입 탭 - 보여줄 시트 선택 후 게시 - 확인
