GAS에서 다른 HTML 파일 포함
7886 단어 자바스크립트GoogleAppsScriptgas
소개
「화면의 공통 부분을 부품화해, 복수의 화면으로부터 사용하고 싶다」라고 하는 것은 자주 있다고 생각합니다.
지금까지 경험한 프로젝트에서도 include 라는 함수를 만들어 그런 것을 실현해 왔습니다만, 포함처에서는 스크립틀릿을 사용할 수 없는 등 제한이 있는 것이었습니다.
좀 더 사용하기 쉬워지지 않을까 하고 여러가지 시험한 결과를 써 둡니다.
대상자
갑자기 결론
시행착오의 결과, 이것으로 하고 싶었던 이하의 일이 생겼습니다.
Code.gs
/**
* HTMLをインクルードする.
*
* @param {string} filename HTMLファイル名
* @param {Object} params インクルード先に渡すパラメーター
*/
function include(filename, params) {
const template = HtmlService.createTemplateFromFile(filename);
if (params) {
for (const key in params) {
template[key] = params[key];
}
}
return template.evaluate().getContent();
}
동작 확인
의 include 함수가 작동하는지 확인합니다.
다음과 같이 여러 HTML을 만들었습니다.
index.html<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
</head>
<body class="index">
<h2>this is index.</h2>
<?!= include('sub1'); ?>
<?!= include('sub2', { a:1, b:2 }); ?>
</body>
</html>
css.html<style>
div {
margin: 5px;
padding: 5px;
}
.index { background-color: #ffffff; } /* 白 */
.calc { background-color: #99ffff; } /* 水色 */
.sub1 { background-color: #99ff99; } /* 緑 */
.sub2 { background-color: #ffff99; } /* 黄色 */
.sub2_1 { background-color: #9999ff; } /* 紫 */
</style>
calc.html<div class="calc">
<h4>this is calc.</h4>
<?= a ?> + <?= b ?> = <?= a + b ?>
</div>
sub1.html<div class="sub1">
<h3>this is sub1.</h3>
<?
const a = 'A';
const b = 'B';
?>
<?= a + b ?>
</div>
sub2.html<div class="sub2">
<h3>this is sub2.</h3>
<?!= include('calc', { a:a, b:b }); ?>
<?!= include('sub2_1', { a:a*2, b:b*2 }); ?>
</div>
sub2_1.html<div class="sub2_1">
<h3>this is sub2_1.</h3>
<?!= include('calc', { a:a, b:b }); ?>
</div>
HTML의 관계는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('css'); ?>
</head>
<body class="index">
<h2>this is index.</h2>
<?!= include('sub1'); ?>
<?!= include('sub2', { a:1, b:2 }); ?>
</body>
</html>
<style>
div {
margin: 5px;
padding: 5px;
}
.index { background-color: #ffffff; } /* 白 */
.calc { background-color: #99ffff; } /* 水色 */
.sub1 { background-color: #99ff99; } /* 緑 */
.sub2 { background-color: #ffff99; } /* 黄色 */
.sub2_1 { background-color: #9999ff; } /* 紫 */
</style>
<div class="calc">
<h4>this is calc.</h4>
<?= a ?> + <?= b ?> = <?= a + b ?>
</div>
<div class="sub1">
<h3>this is sub1.</h3>
<?
const a = 'A';
const b = 'B';
?>
<?= a + b ?>
</div>
<div class="sub2">
<h3>this is sub2.</h3>
<?!= include('calc', { a:a, b:b }); ?>
<?!= include('sub2_1', { a:a*2, b:b*2 }); ?>
</div>
<div class="sub2_1">
<h3>this is sub2_1.</h3>
<?!= include('calc', { a:a, b:b }); ?>
</div>
계속해서
Code.gs 에 doGet 를 추가합니다.Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate();
}
마지막으로 만든 웹 앱에 액세스하면 다음과 같이 표시되어 예상대로 동작을 확인할 수 있었습니다.
소감
HtmlOutput 또는 HtmlTemplate가 있으며 다양한 기능을 가지고있는 것처럼 더 심해 보면 재미있을 것 같습니다 doGet 함수는 HtmlOutput를 반환해야하기 때문에 처음에는 return HtmlService.createHtmlOutputFromFile('index');라고 쓰고 있었지만 이제는 포함이 예상대로 움직이지 않았습니다.HtmlTemplate 통해 HtmlOutput 생성에 의미있는 패턴 Reference
이 문제에 관하여(GAS에서 다른 HTML 파일 포함), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kyamadahoge/items/5c916d57f2dce3693c26텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
