본문 바로가기

개발 & 프로그래밍/구글앱스크립트(GAS)

구글 앱스 스크립트 웹 앱에서 모바일화면 지원하기

구글 스프레드 시트의 웹 앱에서 모바일 기기에 맞게 화면을 맞춰주는 기능입니다.

보통 모바일 화면에 맞게 페이지를 보여 주려면

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">   

이렇게 해주면 동작을 하는데 구글 스프레드 시트내의 스크립트 편집기에 있는 HTML 페이지의 meta 태그를 추가해도 되지 않더군요.

웹 앱을 만드는 방법은 2가지 방법이 있는데 1) HTML 파일을 읽어서 웹으로 표시 , 2) HTML 코드를 그대로 전달 하는 방식입니다.

1) HTML 파일을 읽어서 웹으로 표시 
function doGet(e)
{
  // 폼을 불러 들인다. 
  var template = HtmlService.createTemplateFromFile("htmlpage.html");
  template.secNames = secName; // 스크립틀릿 매개변수 전달
  // 템플릿 파일을 HtmlOutput으로 변환
  var htmlOutput = template.evaluate().setTitle("제목");

  // 추가 할 부분 
  // htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  return htmlOutput;
}

// 파일로 불러드린 템플릿에 매개변수를 전달하고 
// htmlOutput을 그대로 리턴 하거나 HtmlService.createHtmlOutput(htmlOutput) 
// 한 번 감싸서 리턴 해도 결과는 동일 하더군요

2) HTML 코드를 그대로 전달 
function doGet(e)
{
  // 폼을 불러 들인다. 
  var html = "<ul type='square'><li>목록1</li></ul>";
      html +=" 이하 HTML코드";

  var htmlOutput = HtmlService.createHtmlOutput(html);

  // 추가 할 부분 
  // htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  return htmlOutput;
}

html 변수에는 html 코드 뿐 아니라 문자열 데이터도 입력이 가능합니다.

방법은 다음과 같이 htmlOutput 변수에 addMetaTag 를 추가하면 됩니다

 var htmlOutput = HtmlService.createHtmlOutput(html);
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  return htmlOutput;

 

소스만 수정한 후 하면 바로는 안 되고 테스트배포로 실행하거나 다시 배포를 해 주어야 합니다.

일단 테스트 배포를 실행 하여 나오는 URL을 클릭이나 복사를 하여 나오는 웹페이지를 확인하는 것입니다.

정상적으로 동작 한다면 새 배포를 이용하여 새로 컴파일을 해 줘야 합니다. 배포를 새로 해주면 됩니다.

구글 시트에서 입력 폼을 구현 하는 방법에 웹 앱도 추가 시켜서 예제를 만들었습니다.

 

구글 시트에서 데이터 입력을 위한 폼 구현 Google Apps Script

구글 스프레드시트에서 입력 폼을 구현하는 방법을 제가 만든 주식관리 시트에서 추출하여 정리해 보았습니다. 다른 용도로 활용할 수 있게 최대한 간단히 요약했습니다. 이 예제를 이용하여

richardshin.tistory.com

 

예제 스프레드 시트 입니다

https://docs.google.com/spreadsheets/d/1jsBl-VWRs7N2KIQZru-tQZk_HY8jMXTnzfnaegT67G4/edit#gid=1255800420

내부에 배포 본의 경우 구글 계정이 있으면 신청필요 없이 아무나 실행 가능합니다.


자세한 레퍼런스는

Class HtmlOutput 클래스에 addMetaTag 메소드입니다

https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)

 

Class HtmlOutput  |  Apps Script  |  Google Developers

HtmlOutput An HtmlOutput object that can be served from a script. Due to security considerations, scripts cannot directly return HTML to a browser. Instead, they must sanitize it so that it cannot perform malicious actions. You can return sanitized HTML li

developers.google.com