HTML 서비스를 사용하여 사용자 인터페이스를 빌드하는 것은 표준 웹 개발과 유사합니다. 하지만 특정 측면은 Apps Script 환경에만 해당합니다. 이 가이드에서는 반응형의 안전한 HTML 서비스 UI 개발을 위한 권장사항을 강조합니다.
HTML, CSS, JavaScript 분리
모든 HTML, CSS, JavaScript를 하나의 파일로 결합하면 프로젝트를 유지관리하기 어려워질 수 있습니다. Apps Script에서는 클라이언트 측 코드가 .html 파일에 있어야 하지만 CSS와 클라이언트 측 JavaScript는 자체 파일로 분리하고 맞춤 함수를 사용하여 기본 HTML 페이지에 포함해야 합니다.
다음 예시에서는 Code.gs에서 서버 측 include 함수를 사용하여 Stylesheet.html 및 JavaScript.html을 Page.html로 가져옵니다. printing scriptlets와 함께 호출되면 이 함수는 파일 콘텐츠를 직접 삽입합니다. 독립형 .css 또는 .js 파일이 아닌 HTML 스니펫이므로 <style> 및 <script> 태그를 포함해야 합니다.
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>Stylesheet.html
<style>
p {
color: green;
}
</style>JavaScript.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>템플릿이 아닌 비동기식으로 데이터 로드
템플릿 HTML을 사용하면 인터페이스를 빠르게 빌드할 수 있지만 UI가 반응형이 되도록 사용을 제한해야 합니다. 템플릿의 코드는 페이지가 로드될 때 한 번 실행되며, 처리가 완료될 때까지 콘텐츠가 클라이언트로 전송되지 않습니다. 스크립틀릿 코드에 장기 실행 작업이 있으면 UI가 느리게 표시될 수 있습니다.
다른 콘텐츠를 포함하거나 정적 값을 설정하는 등 일회성 작업을 빠르게 처리하려면 스크립틀릿 태그를 사용하세요. 다른 모든 데이터는 google.script.run 호출을 사용하여 로드해야 합니다.
이 비동기 방식으로 코딩하는 것은 더 어렵지만 UI가 더 빠르게 로드되고 사용자에게 스피너나 기타 로드 메시지를 표시할 수 있습니다.
안 됨 - 템플릿에 로드
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>권장 사항: 비동기적으로 로드
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>HTTPS를 사용하여 리소스 로드
IFRAME 샌드박스 모드에서는 모든 JavaScript 및 CSS 파일이 HTTPS를 통해 제공되어야 합니다. 이러한 파일을 안전하지 않게 제공하면 다음과 같은 오류가 발생합니다.
혼합 콘텐츠: 'https://...' 페이지가 HTTPS를 통해 로드되었지만 안전하지 않은 스크립트 'http://...'를 요청했습니다. 이 요청이 차단되었습니다. 콘텐츠는 HTTPS를 통해 제공되어야 합니다.
가장 인기 있는 라이브러리는 HTTP와 HTTPS를 모두 지원하므로 일반적으로 URL에 's'를 추가하기만 하면 전환할 수 있습니다.
HTML5 문서 유형 선언 사용
페이지가 최신 IFRAME
샌드박스 모드를 사용하여 제공되는 경우 HTML 파일 상단에 다음 코드 스니펫을 포함해야 합니다.
<!DOCTYPE html>
이 문서 유형 선언은 최신 브라우저용으로 페이지를 설계했으며 쿼크 모드를 사용하여 페이지를 렌더링해서는 안 된다고 브라우저에 알립니다. 최신 HTML5 요소나 JavaScript API를 활용할 계획이 없더라도 이렇게 하면 페이지가 올바르게 표시됩니다.
JavaScript를 마지막에 로드
많은 웹 개발자는 응답성을 높이기 위해 페이지 하단에 JavaScript 코드를 로드할 것을 권장하며, 이는 HTML 서비스에서 더욱 중요합니다. <script> 태그를 페이지 끝으로 이동하면 JavaScript가 처리되기 전에 HTML 콘텐츠가 렌더링되므로 스피너나 기타 메시지를 사용자에게 표시할 수 있습니다.
jQuery 활용
jQuery는 웹 개발에서 많은 일반적인 작업을 간소화하는 인기 있는 JavaScript 라이브러리입니다.