728x90
Q. 구글스프레드시트 내용을 웹사이트에 json형식으로 가져올 수있나요?
예전에 사용하던 방식으로 구글시트의 셀내용을 웹에 실시간으로 가져오기 위해 시도해보았지만
구글의 접근정책이 바뀐건지 데이터가 불러와지지 않았다...(예전내용들은 생략)
거두절미하고 찾아본결과 아래의 2가지 방법으로 가능했다
첫번째 방법) iframe으로 삽입하기
'파일 > 공유 > 웹에 게시' 를 누른다
1. '삽입' 탭을 누른다.
2. 전체 문서를 누르면 원하는 시트를 선택가능
3. '문서가 수정되면 자동으로 다시 게시' 를 체크하면 수정한 내용이 동기화된다. (약 5분간격)
4. 생성된 iframe태그를 복사해서 원하는 웹사이트에 적용한다.
- 테스트해본결과 수정한 내용이 바로 실시간으로 반영되지는 않았고,
대략 5분간격으로 수정된 내용이 반영되었다. (이또한 정책이 수정된 듯하다)
두번째 방법) json형식으로 크롤링하여 가져오기
1. 구글시트내 주소창을 보면 https://docs.google.com/spreadsheets/d/ 와 /edit#gid=0 사이의 키값을 복사한다.
2. 아래 주소의 key= 와 &pub=1 사이에 붙혀넣는다.
http://spreadsheets.google.com/tq?key=이곳에 키값을 넣는다&pub=1
링크를 치고 들어가면 해당문서의 내용이 json형식의 txt파일로 다운받아지는지 확인한다.
3. 아래 스크립트에 2번 주소값을 활용해 json으로 파싱하여 데이터를 뿌려준다
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { packages: ['corechart'] }).then(function () {
var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=19istbTIcHGW19uunqbYXMb1EKGXyWSLTSuw3ApvPvZY&pub=1');
query.send(function (response) {
var dataTable = response.getDataTable();
var jsonData = dataTable.toJSON();
jsonData = JSON.parse(jsonData);
for(var i=0; i < jsonData.rows.length; i++) {
var htmlData = "";
htmlData += "<li>" + jsonData.rows[i].c[0].v + "</li>";
$(".list ul").append(htmlData); // 데이터를 뿌려준다
console.log(jsonData.rows[i].c[0].v);
}
});
});
</script>
<div class="list">
<ul>
<!-- 데이터 리스트 -->
</ul>
</div>
이방식도 구글시트의 수정된 내용이 실시간으로 크롤링이 되진 않고 약 5분뒤에 반영이 되는걸 확인했습니다.
감사합니다 :)
728x90
반응형
'코딩저장소' 카테고리의 다른 글
스크롤 다운 모션 라이브러리 AOS.js 사용법 (0) | 2022.01.06 |
---|---|
스크롤을 내리고 올리는지 체크하는법 (0) | 2021.12.30 |
정말 간단한 부드럽게 마우스 따라다니기 (0) | 2021.12.21 |
웹사이트에서 앱실행 및 딥링크 (0) | 2021.12.08 |
localStorage를 이용한 다크모드 예제 (0) | 2021.12.08 |
댓글