구글 스프레드 시트의 웹 앱에서 모바일 기기에 맞게 화면을 맞춰주는 기능입니다.
보통 모바일 화면에 맞게 페이지를 보여 주려면
<!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을 클릭이나 복사를 하여 나오는 웹페이지를 확인하는 것입니다.
정상적으로 동작 한다면 새 배포를 이용하여 새로 컴파일을 해 줘야 합니다. 배포를 새로 해주면 됩니다.
구글 시트에서 입력 폼을 구현 하는 방법에 웹 앱도 추가 시켜서 예제를 만들었습니다.
예제 스프레드 시트 입니다
내부에 배포 본의 경우 구글 계정이 있으면 신청필요 없이 아무나 실행 가능합니다.
자세한 레퍼런스는
Class HtmlOutput 클래스에 addMetaTag 메소드입니다
https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)