HTML 서비스를 사용하여 사용자 인터페이스를 빌드하는 것은 표준 웹 개발과 유사합니다. 그러나 특정 측면은 Apps Script 환경에만 해당됩니다. 이 가이드에서는 반응형의 안전한 HTML 서비스 UI를 개발하기 위한 권장사항을 중점적으로 설명합니다.
HTML, CSS, JavaScript 분리
모든 HTML, CSS, JavaScript를 단일 파일로 결합하면 프로젝트를 유지관리하기 어려워질 수 있습니다. Apps Script에서는 클라이언트 측 코드가 .html 파일에 있어야 하지만 CSS와 클라이언트 측 JavaScript는 별도의 파일로 분리하고 맞춤 함수를 사용하여 기본 HTML 페이지에 포함해야 합니다.
다음 예에서는 서버 측 include 함수를 Code.gs에서 사용하여 Stylesheet.html 및 JavaScript.html을 Page.html로 가져옵니다. 인쇄 스크립틀릿으로 호출되면 이 함수는 파일 콘텐츠를 직접 삽입합니다. 독립형 .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 라이브러리입니다.