구글 스프레드시트를 데이터베이스로 이용하기 - 1. ajax POST를 통한 기록 편


    구글 스프레드시트를 데이터베이스로 이용하기 - 1.1 방문로그 기록 편


    구글 스프레드시트를 데이터베이스로 이용하기 - 1.1.1오래된 데이터 자동 삭제 스크립트


    구글 스프레드시트를 데이터베이스로 이용하기 - 2.Query 편


    티스토리에 오류 제보하기 버튼을 만들어보자 - 구글 스프레드 시트를 데이터베이스로 이용하기


    '구글 스프레드 시트를 데이터베이스로 이용하기'가 거의 완성되어가는 것 같습니다.


    이번 포스팅은 드디어 ajax를 이용하여 구글스프레드시트로부터 데이터를 받아오는 방법에 대한 것입니다.


    Cross-domain 제한때문에 골치였는데, jsonp를 이용하면 해결되는 문제였습니다.


    그리고 jsonp를 사용하기위해서는 jquery버전이 1.5이상이어야합니다!

    (fastboot스킨에서 기본은 2.1버전, IE7에서만 1.1버전을 불러오므로 그냥 쓰면 된다.)


    구글 스프레드시트에서 json데이터 받아오기

    https://spreadsheets.google.com/feeds/list/KEY/workSheetID/public/basic?alt=json-in-script

    이 URL은 구글스프레드시트로부터 json형식의 데이터를 받아올 수 있는 URL입니다.


    KEY는 본인의 스프레드시트 url에서 /d/다음부터 /edit전까지의 문자열입니다.(2.Query편에서 구글 스프레드시트에는 각각의 key가 있다고 언급했었습니다.)

    workSheetID는 불러올 스프레트시트내의 시트번호입니다. 첫번째 시트는 1, 두번 째 시트는 2.. 이렇게 1부터 시작하는 숫자로 쓰시면 됩니다.


    list는 한 행이 한 객체에 담긴 리스트형식으로 데이터를 불러오고, cells로 바꾸면 각 셀이 객체에 저장된 데이터를불러옵니다.

    list형식은 제1열을 header로 사용하며, 제 1행이 각 열의 제목이됩니다.


    아래는 예시로, 본 블로그 접속기록 스프레드시트에서 두번째시트의 json데이터를 불러오는 url입니다.

    https://spreadsheets.google.com/feeds/list/1fGzLf3j7h3o4fCHT0Aek7_XCtUACwuF_VWqlP2aF73w/2/public/basic?alt=json-in-script



    이 URL로 직접 접속하게되면

    이런 복잡한 형태의 데이터를 볼 수 있습니다.




    아래는 jQuery의 ajax를 통해 jsonp 데이터를 불러오는 스크립트 예시입니다.

    var GSSurl = "https://spreadsheets.google.com/feeds/list/KEY/SheetID/public/basic?alt=json-in-script&callback=?";

    $.getJSON(GSSurl,function(data){

    var entry=data.feed.entry;//구글 스프레드 시트의 모든 내용은 feed.entry에 담겨있습니다.

    for(var i in entry){ // 각 행에대해 아래 스크립트를 실행합니다.

    $("body").append(entry[i].title.$t);// .title.$t 에는 1행의 내용이 들어있습니다.

    $("body").append(entry[i].content.$t);// .content.$t 에는 나머지행의 데이터가 header정보와 함께 들어있습니다.

    });

    파란색 부분위에서 완성한 URL이고, 뒤에 초록색 표시된 &callback=?를 붙여주셔야 크로스도메인 오류를 회피할 수 있습니다.


    위의 예제를 실행시키면


    이런식으로 각 행에 저장된 데이터를 쓸 수 있습니다.


    .


    정렬된 값, 특정구간의 값만 받아오기

    https://spreadsheets.google.com/feeds/list/KEY/workSheetID/public/basic?alt=json-in-script

    위 URL맨 뒤에 파라메터를 추가해주면됩니다.


    예를들어 views라는 열을 기준으로 오름차순 정렬된 데이터를 받으려면

    https://spreadsheets.google.com/feeds/list/KEY/workSheetID/public/basic?alt=json-in-script&orderby=column:views

    위와 같이 맨 뒤에 &orderby=column:views를 추가하시면됩니다.


    한번더 예를들어 views라는 열을 기준으로 이번엔 내림차순으로 정렬된 데이터를 받으려면

    https://spreadsheets.google.com/feeds/list/KEY/workSheetID/public/basic?alt=json-in-script&orderby=column:views&revert=true

    &orderby=column:views&revert=true와 같이 2가지 파라메터를 동시에 입력하면 됩니다.


    마지막으로 구조화된 쿼리(structured query)도 가능합니다.

    예를들어 ranking이 20이하인 데이터만 받으려면

    https://spreadsheets.google.com/feeds/list/KEY/workSheetID/public/basic?alt=json-in-script&sq=ranking<20

    위와같이 sq파라메터에 쿼리를 입력하시면됩니다.


    구글 스프레드시트 API에서 자세한 설명을 확인할 수 있습니다.



    ※그러나 파라메터로 정렬하기보다는, 스프레드시트에서 새로운 시트를 생성하여 미리 정렬을 해놓는 것이 훨씬 편합니다.



    다음편에서는 방문로그 기록편과 함께 응용하여 포스트 주간조회수와, 랭킹을 표시하는 방법을 알아보겠습니다.

    현재(2014년 11월) 이 블로그에 적용되어있고, 포스트 제목아래 표시되고 있습니다.

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon Mir(whdghks913)
      2015.11.29 16:48 신고

      정말감사합니다 ㅎㅎ

    • rei
      2016.02.16 12:16 신고

      훌륭하십니다. 감사합니다.!!!

    • BlogIcon 로린트
      2016.03.26 17:52 신고

      감사합니다. 덕분에 잘 활용하고 있어요.
      특정범위의 값을 받아올때는
      list 보단 cells 를 써서
      &min-row=시작 행번호&max-row=끝 행번호&min-col=시작 열번호&max-col=끝 열번호
      추가하시면 원하는 범위의 값만 받아낼 수 있더라구요.
      끝행번호나 끝열번호를 빼버리면 시작행/열번호부터 데이터가 있는부분까지 포함되구요
      저처럼 찾는 분 계실까봐 적어둡니다.

티스토리 툴바