728x90
Q. 구글스프레드시트 내용을 웹사이트에 json형식으로 가져올 수있나요?
예전에 사용하던 방식으로 구글시트의 셀내용을 웹에 실시간으로 가져오기 위해 시도해보았지만
구글의 접근정책이 바뀐건지 데이터가 불러와지지 않았다...(예전내용들은 생략)
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/035.gif)
거두절미하고 찾아본결과 아래의 2가지 방법으로 가능했다
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/027.gif)
첫번째 방법) 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 |
댓글