애들센스


구글앱스크립트로 실시간 데이터 업데이트하기 오피스/VBA/Office.JS

이번에는 구글 앱스크립트로 실시간 페이지를 업데이트하는 예를 소개하고자 하는 데, 직접 만든 건 아니고(아직 그럴 짠밥이 못된다) 깃헙(Github)에 좋은 프로젝트가 하나 있어 소개한다.
이 프로젝트는 일정간격으로 TheSimpsons Quote API(심슨이 들려주는 격언, https://thesimpsonsquoteapi.glitch.me/)에서 격언과 이미지를 가져오는 것이다. 그 결과물은 다음과 같다.

깃허브에 가면 소스코드를 볼 수 있는 데, 프로젝트는 매우 단촐하다. 서버사이드 코드 Code.gs와 클라이언트 사이드 Index.html(자바스크립트 포함)가 전부이다(이런 간단명료한 거 좋아한다) 클라이언트 사이드 소스코드에서
  • google.script.run.withSuccessHandler는 비동기 클라이언트 사이드 API인데, 서버 사이드 함수를 사용가능하게 해준다.
  • setInterval()함수는 업데이트 주기를 설정하는 클라이언트 사이드 API이다.

  • 그런데 직접 코드를 가져와 몇 번 돌려보고, 저자의 데모를 돌려보니 심슨격언을 가져오지 못한다. 이는 구글웹앱에 많은 HTTP 리퀘스트를 날리기 때문이다. 무료의 한계이다. (참고: Quotas for Google Services, https://developers.google.com/apps-script/guides/services/quotas)

    [Code.gs 서버사이드]
    function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('Index').setTitle('Realtime Data');
    }

    function randomQuotes() {
    var baseURL = 'https://thesimpsonsquoteapi.glitch.me/quotes';
    var quotesData = UrlFetchApp.fetch(baseURL, { muteHttpExceptions: true });
    var quote;
    var imageURL;
    if (quotesData.getResponseCode() == 200 || quotesData.getResponseCode() == 201) {
    var response = quotesData.getContentText();
    var data = JSON.parse(response)[0];
    quote = data["quote"];
    imageURL = data["image"];
    } else {
    quote = 'Random Quote Generator is broken!';
    imageURL = 'https://cdn.shopify.com/s/files/1/1061/1924/products/Sad_Face_Emoji_large.png?v=1480481055';
    }
    var randomQuote = {
    "quote": quote,
    "imageTag": '<img class="responsive-img" src="' + imageURL + '">'
    }
    return randomQuote;
    }

    function getTime() {
    var now = new Date();
    return now;
    }

    [Index.html내 자바스크립트 클라이언트 사이드]
    <script>
    // 격언 업데이트
    function onSuccess1(quotedata) {
    var quoteactual = document.getElementById('quote');
    quoteactual.innerhtml = quotedata.quote;
    var quoteimg = document.getElementById('quoteImage');
    quoteimg.innerhtml = quotedata.imagetag;
    }

    setInterval(function() {
    console.log("getting quote...")
    google.script.run.withSuccessHandler(onsuccess1).randomQuotes();
    }, 10000);
    </script>

    <script>
    // 시간 업데이트
    function onSuccess2(now) {
    var div = document.getElementById('time');
    var today = new Date();
    var time = today.getHours() + " : " + today.getMinutes() + " : " + today.getSeconds();
    div.innerhtml = time;
    }

    setInterval(function() {
    console.log("getting time...")
    google.script.run.withSuccessHandler(onsuccess2).getTime();
    }, 1000);
    </script>

    덧글

    • 우왕 2020/01/18 21:07 # 삭제 답글

      순수한 스크립트 말고 spreadsheetApp을 이용해서 importxml함수를 통해서 데이터를 긁은 후 webapp을 통해 뽑아내는 방법은 어떨까요?
    • 타임버드 2020/01/19 00:32 #

      아직 시트의 네이티브함수는 앱스크립트와 통합되어 있지 않아, 앱스크립트에서 native function에 접근할 수 없습니다. 즉 WorksheetFunction에 해당하는 개체가 없습니다. 대신 시트의 셀에 importxml 등 함수를 입력하고 계산된 결과를 가져오는 것은 가능하죠. 하지만 이런 방법보다는 자바스크립트를 이용한 스크랩핑이 성능이나 코드관리면에서 나을 듯합니다. 단지 앱스크립트가 자바스크립트 서브셋으로 1.6버전을 기반으로 1.7, 1.8의 일부기능을 가져와 만든 것인데, 자바스크립트용 최신 스크랩핑 라이브러리를 앱스크립트에서 사용가능할 것 같진 않아요.
    • 우왕 2020/03/10 13:53 # 삭제 답글

      GAS 가 자바스크립트 지원 버전이 올랐다고 합니다
      https://developers.google.com/apps-script/guides/v8-runtime
    댓글 입력 영역