이 글은 구글 스프레드 시트를 데이터베이스로 이용하기 시리즈의 응용편 - "내 블로그에 오류 제보하기 버튼을 만들어보자" 편 입니다.


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


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


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


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



    블로그에 글을 쓰다보면 가끔 잘못된 정보가 전달되는 경우가 있습니다.
    혹은 시간이 지나서 정보가 바뀐 경우도 있죠.
    또한 스킨을 바꿀 경우에, 이미 작성한 글의 레이아웃이 깨지는 경우도 있습니다.


    작성한 포스트 갯수가 적은경우에는 블로그 운영자가 직접 하나하나 확인해볼 수 있지만,
    포스트 갯수가 많아질수록 일일히 확인하기는 거의 불가능해지게됩니다.


    이 작업을 검색을 통한 방문자들에게 맡길 수는 없을까요?

    방문자들이 글을 읽다가 잘못된 정보나, 레이아웃이 깨진 글을 발견하게되면 이를 제보할 수 있게 하는겁니다.
    물론 댓글로 제보해주시는 분들도 있지만, 자신의 닉네임이 남아서, 로그인하기 귀찮아서 그냥 지나쳐가는 경우도 많기 때문에
    로그인없이, 클릭두번만 부탁드리는겁니다!



    댓글창 위의 오류제보하기 버튼을 클릭하면

    체크박스와 기타의견을 남길 수 있는 글상자가 나타나고, 보내기버튼을 누르면

    메시지와 함께

    이 것이 미리 지정한 구글 스프레드시트에 기록됩니다.


    어떤 체크박스를 클릭했는지, 어떤 내용을 남겼는지 기록되게됩니다.


    ※이 글에서 테스트 해보셔도 좋으나 글상자에 테스트라고 써주세요~ 안그러면 자꾸 검토해봐야하니까요 ^^

    https://docs.google.com/spreadsheets/d/1vB3M4Qpujc6VT7-WT4AFYz9R74d6jwsstm4IaYFzFpI/pubhtml

    여기서 테스트 내용을 확인할 수 있습니다

    를 참조하여, 오류 제보를 받을 스프레드시트를 미리 준비하고, 웹 앱 게시 URL을 준비합니다.


    스프레드시트 1행은 A열부터 Timestamp, path, memo를 순서대로 입력해놓습니다. (header)



    오류 제보하기 버튼 만들기

    1.skin.html에서 '오류제보 버튼'을 삽입할 위치를 찾아 다음을 붙여넣습니다.

    <div id="sendComment">

      <p>오류 제보하기</p>

      <div>

        <input type="checkbox" value="내용상 오류가 있음"/>내용상 오류가 있음<br/>

        <input type="checkbox" value="표시에 문제가 있음"/>표시에 문제가 있음<br/>

        <input type="checkbox" value="기타 수정이 필요함"/>기타 수정이 필요함<br/>

        <textarea placeholder="구체적 내용이나 기타 의견을 남겨주세요."></textarea><br/>

        <input type="button" value="보내기" onclick="sendComment();">

        <a href="http://nubiz.tistory.com/551">(?)</a>

      </div>

    </div>

    <div style="clear:both"></div>

    체크박스는 원하는대로 추가/삭제하셔도 작동합니다.



    2.style.css에 다음을 추가합니다. 버튼의 스타일을 지정하는 코드이니, 원하는대로 수정하셔도 좋습니다.

    #sendComment {

      width:140px;

      background:#eee;

      padding:10px;

      border:#999 solid 1px;

      font-size:0.8em;

      float:right;

    }

    #sendComment p {

      line-height:2em;

      padding:0; margin:0;

    }

    #sendComment div {

      display:none;

    }

    #sendComment a {

      text-decoration:none;

      color:#aaa;

      margin-left:65px;

    }



    3. skin.html의 </body> 윗줄에 다음 스크립트를 붙여넣습니다.

    파란색 표시한 곳에 준비한 웹 앱 게시URL을 넣으시면 됩니다.

    <script>

    //오류제보하기 - http://nubiz.tistory.com/551

    $("#sendComment>p").click(function(){

      $("#sendComment>div").toggle(300);

    });

    function sendComment (){

      $("#sendComment *").attr("disabled","");

      var errors = []

      $("#sendComment :checkbox:checked").each(function(i){

        errors[i] = $(this).val();

      });

      var comment = $("#sendComment textarea").val();

      $.ajax({

        url: "https://script.google.com/macros/s/###############################/exec",

        data: {

          path: decodeURIComponent(location.pathname),

          memo: errors+" / "+comment

        },

        type: "POST",

        success:function(){

          alert("빠른 시일 내에 검토해보겠습니다.\n감사합니다.");

          $("#sendComment :disabled").removeAttr("disabled");

          $("#sendComment textarea").val('');

          $("#sendComment :checkbox").prop("checked",false);

        }

      });

    }

    </script>



    ※본 스크립트는 jQuery를 사용합니다. 스크립트가 작동하지 않는다면 스크립트 윗줄에 다음을 추가해주세요.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->



    업데이트 - 

    티스토리 오류제보 시트 개선


    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 블로마리
      2014.11.19 17:19 신고

      언젠가 쓸 일이 있을 것 같습니다.
      유용한 정보에 하트 남기고 갑니다.

      • BlogIcon 뭐하라
        2014.11.19 17:57 신고

        관리할게 늘어나긴하지만 재밌을겁니다 ^^

    • BlogIcon 미르(whdghks913)
      2014.12.17 22:28 신고

      안녕하세요~

      이것을 응용해서 어플에서 리포트 받을때 사용하고 싶습니다
      html에서 사용하던것을 안드로이드에서 사용가능한지 궁금한데요.. 혹시 아시는지 해서 덧글 남기고 갑니다..

      • BlogIcon 뭐하라
        2014.12.17 22:47 신고

        안드로이드개발은 잘모릅니다 ㅠㅠ
        안드로이드앱도 html5로 만들기도 하니 물론 가능할겁니다

    • BlogIcon 젤리투
      2015.01.03 18:37 신고

      이상하게 기록이 안되네요 ㅜㅜ

      • BlogIcon 뭐하라
        2015.01.03 20:52 신고

        스크립트상 문제는 없고 성공메시지까지 잘 나오네요~
        "스프레드시트 1행은 A열부터 Timestamp, path, memo를 순서대로 입력해놓습니다."
        이부분 따라하셨는지 확인해보세요~


    • 2015.11.05 17:28

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.11.05 17:45 신고

        스프레드시트가 응답을받지 않는데요.
        준비물 링크에서 웹앱으로 배포과정에서 설정을 잘 확인해보세요

    • BlogIcon 클라우드 (Claude)
      2015.11.05 17:46 신고

      해결했습니다 감사합니다^^

    • BlogIcon 클라우드 (Claude)
      2015.11.05 18:18 신고

      제 블로그같은경우엔 픽셀이 휴대폰픽셀로 줄어들면, 오류제보하기가 나오지 않습니다. 그냥 사각틀로만 나오고 그외엔 아무것도없는데..
      뭐하라님 블로그같은경우엔 댓글창에 있는 오류제보하기 버튼은 잘 작동하더라구요 ㅠㅠ
      어떻게 안될까요..?

      • BlogIcon 뭐하라
        2015.11.05 18:22 신고


        @media (max-width:1000px){
        .wrap{width:auto}
        iframe,embed{max-width:100%}
        .tx{margin:0 10px}
        .tab_line{display:none}
        .res_div{display:block}
        .res_tab{display:block;width:100%;height:36px;padding:6px 12px;font-size: 14px;line-height: 1.42857;color:#555;vertical-align:middle;border:1px solid #ccc;margin:10px 0 0}
        #entry0Comment,.entry{width:auto;padding:0 10px}
        .tistorytoolbar {display:none}

        이부분 중괄호가 안닫혀서 아래추가한것까지 영향을 줘서 그렇네요

    • BlogIcon 클라우드 (Claude)
      2015.11.05 18:24 신고

      저게 css죠 아마...?
      저기에 중괄호만 닫아주면 되는건가요?

    • BlogIcon 클라우드 (Claude)
      2015.11.05 19:05 신고

      @media (max-width:1000px){
      .wrap{width:auto}
      iframe,embed{max-width:100%}
      .tx{margin:0 10px}
      .tab_line{display:none}
      .res_div{display:block}
      .res_tab{display:block;width:100%;height:36px;padding:6px 12px;font-size: 14px;line-height: 1.42857;color:#555;vertical-align:middle;border:1px solid #ccc;margin:10px 0 0}
      #entry0Comment,.entry{width:auto;padding:0 10px}
      .tistorytoolbar {display:none}
      }
      이렇게 닫기는했는데... 안되네요.. 혹시나해서
      @media (max-width:1000px){
      .wrap{width:auto}
      iframe,embed{max-width:100%}
      .tx{margin:0 10px}
      .tab_line{display:none}
      .res_div{display:block}
      .res_tab{display:block;width:100%;height:36px;padding:6px 12px;font-size: 14px;line-height: 1.42857;color:#555;vertical-align:middle;border:1px solid #ccc;margin:10px 0 0}
      #entry0Comment,.entry{width:auto;padding:0 10px}
      .tistorytoolbar {display:none}}
      }
      이렇게도 해봤고
      @media (max-width:1000px){
      .wrap{width:auto}
      iframe,embed{max-width:100%}
      .tx{margin:0 10px}
      .tab_line{display:none}
      .res_div{display:block}
      .res_tab{display:block;width:100%;height:36px;padding:6px 12px;font-size: 14px;line-height: 1.42857;color:#555;vertical-align:middle;border:1px solid #ccc;margin:10px 0 0}
      #entry0Comment,.entry{width:auto;padding:0 10px}
      .tistorytoolbar {display:none}}
      이렇게도 해봤는데 안되더라구요...

    • BlogIcon 클라우드 (Claude)
      2015.11.05 19:24 신고

      아시나요....?

    • BlogIcon 클라우드 (Claude)
      2015.11.05 19:40 신고

      아 잘 되네요..
      많은 질문 죄송하고 앞으로도 많이 올려주세요~


    • 2015.11.28 16:51

      비밀댓글입니다

      • BlogIcon 클라우드 (Claude)
        2015.11.28 16:52 신고

        이렇게 했는데, http://mcpenews.tistory.com/ 게시글 댓글쓰기 옆에 위치한 버튼을 누르면 되게하고싶은데, 어떻게 하면 좋을까요

      • BlogIcon 뭐하라
        2015.11.28 19:56 신고

        무슨말인지 모르겠네요~

티스토리 툴바