GAS로 동적 HTML ① HTML 안의 Javascript를 실행하여 동적 HTML을 작성한다. (Dog API 사용)
6328 단어 HTML자바스크립트GoogleAppsScriptgas
GAS에서 동적 HTML 페이지를 만들고 싶었습니다.
GAS의 HTML이 신경이 쓰였으므로 시험에 만들어 보았습니다. 콘텐츠로서 Dog API를 이용하였습니다.
Dog API를 사용해 보았습니다.
Dog API는 토큰 (인증) 없음 · 헤더 옵션없이 사용할 수 있으므로 매우 간단합니다!
Dog API(개 이미지를 무작위로 1장 돌려주는 API)
htps : // 두g. 세오 / 도 g - 아피 /
우선, Dog API의 사양을 확인해 봅시다.
Dog API의 끝점에 fetch하면 json 형식의 response가 반환됩니다.
매우 간단한 json으로, json 안에 message라는 속성이 있고 그 매개 변수로 이미지 url이 저장되어있는 것 같습니다. 그것을 사용하여 웹 페이지에 표시하고 싶습니다.
GAS HTML 개요
GAS의 HTML은 조금 독특합니다.
기본적으로 하나의 .gs GAS 파일과 하나의 .html 파일이 최소 구성입니다.
자세한 설명은 후술하는 참고 사이트 등을 참조하십시오.
Javascript(GAS가 아님)나 CSS도 사용할 수 있습니다.
구현
Google 드라이브에 독립 실행형 프로젝트를 만들고 같은 프로젝트에 다음 두 개의 파일을 만듭니다.
코드
마인. gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
GAS로 HTML 할 때 기본 중의 기본 구문입니다.
인수로 전달하는 것은 HTML 파일 이름입니다. 여기에서는 index로 하고 있습니다만, 그 이외의 이름을 붙였을 경우는 인수의 이름도 통일할 필요가 있습니다.
index.html
아래는 우선 표시할 수 있으면 좋다는 코드입니다.
아래만을 보면 기본적으로는 일반 HTML과 같습니다. (일부 GAS만의 쓰는 방법도 있는 것 같습니다.)
이번에는 이미지를 표시하기 위해 img 태그를 동적으로 만들고 싶습니다.
createElement에서 img 태그를 생성하고 src에 DogAPI에서 가져온 이미지 주소를 전달하여 body 태그에 추가합니다.
<!DOCTYPE html>
<html>
<body>
<script>
const url = "https://dog.ceo/api/breeds/image/random";
function fetchDogImagePath(url){
return fetch(url).then( (res) => res.json());
}
async function fetchDogImage (url){
const response = await fetchDogImagePath(url);
const imageElement = document.createElement('img');
imageElement.src = response.message;
document.body.appendChild(imageElement);
}
fetchDogImage(url);
</script>
</body>
</html>
배포
코드를 작성할 수 있으면 실제로 게시하려면 배포가 필요합니다.
웹 애플리케이션으로 배포를 설정합니다.
표시된 URL을 복사합니다.
이 URL은 웹페이지의 주소가 됩니다. Execute(실행자)는 자신, 액세스자는 어노니머스로 합니다.
방문자의 값을 변경하면 Google 계정으로 로그인한 사용자가 아니면 액세스할 수 없습니다.
접근하다
↑에서 발행된 URL을 브라우저의 주소 표시줄에 복사하여 액세스합니다.
강아지의 이미지가 표시되었습니다.
여러 번 브라우저를 다시 로드하면 매번 이미지가 변경됩니다.
브라우저 개발자 도구를 사용하여 HTML 소스를 살펴보면 img 태그가 body에 추가되는 것으로 나타났습니다.
GAS만이 가능한 GoogleDrive 파일과 연계한 페이지 작성도 할 수 있어 재미있을 것 같네요!
여러가지 시도해 보겠습니다.
참고
(항상 옆에 IT 작업) Google Apps Script로 웹 애플리케이션을 만드는 첫 단계
htps : //가 되어-t. 이 m /가 s-u-b-p-kachion-begine r /
여담
HTML 파일 내에서 GAS의 새로운 V8 런타임에서 사용 가능한 화살 함수를 사용하고 있지만 V8 런타임을 비활성화 한 상태에서도 작동합니다.
이것은 HTML이 클라이언트 측에서 움직이기 때문입니다.
계속
GAS로 동적 HTML② HTML내에서 Google 드라이브의 이미지 파일을 표시시킨다.
htps : // 코 m / 조오지 / ms / b89 세 338 아 f359742 에 813
Reference
이 문제에 관하여(GAS로 동적 HTML ① HTML 안의 Javascript를 실행하여 동적 HTML을 작성한다. (Dog API 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jooji/items/6227821eb5f9b48e2e87
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Dog API는 토큰 (인증) 없음 · 헤더 옵션없이 사용할 수 있으므로 매우 간단합니다!
Dog API(개 이미지를 무작위로 1장 돌려주는 API)
htps : // 두g. 세오 / 도 g - 아피 /
우선, Dog API의 사양을 확인해 봅시다.
Dog API의 끝점에 fetch하면 json 형식의 response가 반환됩니다.
매우 간단한 json으로, json 안에 message라는 속성이 있고 그 매개 변수로 이미지 url이 저장되어있는 것 같습니다. 그것을 사용하여 웹 페이지에 표시하고 싶습니다.
GAS HTML 개요
GAS의 HTML은 조금 독특합니다.
기본적으로 하나의 .gs GAS 파일과 하나의 .html 파일이 최소 구성입니다.
자세한 설명은 후술하는 참고 사이트 등을 참조하십시오.
Javascript(GAS가 아님)나 CSS도 사용할 수 있습니다.
구현
Google 드라이브에 독립 실행형 프로젝트를 만들고 같은 프로젝트에 다음 두 개의 파일을 만듭니다.
코드
마인. gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
GAS로 HTML 할 때 기본 중의 기본 구문입니다.
인수로 전달하는 것은 HTML 파일 이름입니다. 여기에서는 index로 하고 있습니다만, 그 이외의 이름을 붙였을 경우는 인수의 이름도 통일할 필요가 있습니다.
index.html
아래는 우선 표시할 수 있으면 좋다는 코드입니다.
아래만을 보면 기본적으로는 일반 HTML과 같습니다. (일부 GAS만의 쓰는 방법도 있는 것 같습니다.)
이번에는 이미지를 표시하기 위해 img 태그를 동적으로 만들고 싶습니다.
createElement에서 img 태그를 생성하고 src에 DogAPI에서 가져온 이미지 주소를 전달하여 body 태그에 추가합니다.
<!DOCTYPE html>
<html>
<body>
<script>
const url = "https://dog.ceo/api/breeds/image/random";
function fetchDogImagePath(url){
return fetch(url).then( (res) => res.json());
}
async function fetchDogImage (url){
const response = await fetchDogImagePath(url);
const imageElement = document.createElement('img');
imageElement.src = response.message;
document.body.appendChild(imageElement);
}
fetchDogImage(url);
</script>
</body>
</html>
배포
코드를 작성할 수 있으면 실제로 게시하려면 배포가 필요합니다.
웹 애플리케이션으로 배포를 설정합니다.
표시된 URL을 복사합니다.
이 URL은 웹페이지의 주소가 됩니다. Execute(실행자)는 자신, 액세스자는 어노니머스로 합니다.
방문자의 값을 변경하면 Google 계정으로 로그인한 사용자가 아니면 액세스할 수 없습니다.
접근하다
↑에서 발행된 URL을 브라우저의 주소 표시줄에 복사하여 액세스합니다.
강아지의 이미지가 표시되었습니다.
여러 번 브라우저를 다시 로드하면 매번 이미지가 변경됩니다.
브라우저 개발자 도구를 사용하여 HTML 소스를 살펴보면 img 태그가 body에 추가되는 것으로 나타났습니다.
GAS만이 가능한 GoogleDrive 파일과 연계한 페이지 작성도 할 수 있어 재미있을 것 같네요!
여러가지 시도해 보겠습니다.
참고
(항상 옆에 IT 작업) Google Apps Script로 웹 애플리케이션을 만드는 첫 단계
htps : //가 되어-t. 이 m /가 s-u-b-p-kachion-begine r /
여담
HTML 파일 내에서 GAS의 새로운 V8 런타임에서 사용 가능한 화살 함수를 사용하고 있지만 V8 런타임을 비활성화 한 상태에서도 작동합니다.
이것은 HTML이 클라이언트 측에서 움직이기 때문입니다.
계속
GAS로 동적 HTML② HTML내에서 Google 드라이브의 이미지 파일을 표시시킨다.
htps : // 코 m / 조오지 / ms / b89 세 338 아 f359742 에 813
Reference
이 문제에 관하여(GAS로 동적 HTML ① HTML 안의 Javascript를 실행하여 동적 HTML을 작성한다. (Dog API 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jooji/items/6227821eb5f9b48e2e87
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Google 드라이브에 독립 실행형 프로젝트를 만들고 같은 프로젝트에 다음 두 개의 파일을 만듭니다.
코드
마인. gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
GAS로 HTML 할 때 기본 중의 기본 구문입니다.
인수로 전달하는 것은 HTML 파일 이름입니다. 여기에서는 index로 하고 있습니다만, 그 이외의 이름을 붙였을 경우는 인수의 이름도 통일할 필요가 있습니다.
index.html
아래는 우선 표시할 수 있으면 좋다는 코드입니다.
아래만을 보면 기본적으로는 일반 HTML과 같습니다. (일부 GAS만의 쓰는 방법도 있는 것 같습니다.)
이번에는 이미지를 표시하기 위해 img 태그를 동적으로 만들고 싶습니다.
createElement에서 img 태그를 생성하고 src에 DogAPI에서 가져온 이미지 주소를 전달하여 body 태그에 추가합니다.
<!DOCTYPE html>
<html>
<body>
<script>
const url = "https://dog.ceo/api/breeds/image/random";
function fetchDogImagePath(url){
return fetch(url).then( (res) => res.json());
}
async function fetchDogImage (url){
const response = await fetchDogImagePath(url);
const imageElement = document.createElement('img');
imageElement.src = response.message;
document.body.appendChild(imageElement);
}
fetchDogImage(url);
</script>
</body>
</html>
배포
코드를 작성할 수 있으면 실제로 게시하려면 배포가 필요합니다.
웹 애플리케이션으로 배포를 설정합니다.
표시된 URL을 복사합니다.
이 URL은 웹페이지의 주소가 됩니다. Execute(실행자)는 자신, 액세스자는 어노니머스로 합니다.
방문자의 값을 변경하면 Google 계정으로 로그인한 사용자가 아니면 액세스할 수 없습니다.
접근하다
↑에서 발행된 URL을 브라우저의 주소 표시줄에 복사하여 액세스합니다.
강아지의 이미지가 표시되었습니다.
여러 번 브라우저를 다시 로드하면 매번 이미지가 변경됩니다.
브라우저 개발자 도구를 사용하여 HTML 소스를 살펴보면 img 태그가 body에 추가되는 것으로 나타났습니다.
GAS만이 가능한 GoogleDrive 파일과 연계한 페이지 작성도 할 수 있어 재미있을 것 같네요!
여러가지 시도해 보겠습니다.
참고
(항상 옆에 IT 작업) Google Apps Script로 웹 애플리케이션을 만드는 첫 단계
htps : //가 되어-t. 이 m /가 s-u-b-p-kachion-begine r /
여담
HTML 파일 내에서 GAS의 새로운 V8 런타임에서 사용 가능한 화살 함수를 사용하고 있지만 V8 런타임을 비활성화 한 상태에서도 작동합니다.
이것은 HTML이 클라이언트 측에서 움직이기 때문입니다.
계속
GAS로 동적 HTML② HTML내에서 Google 드라이브의 이미지 파일을 표시시킨다.
htps : // 코 m / 조오지 / ms / b89 세 338 아 f359742 에 813
Reference
이 문제에 관하여(GAS로 동적 HTML ① HTML 안의 Javascript를 실행하여 동적 HTML을 작성한다. (Dog API 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jooji/items/6227821eb5f9b48e2e87
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
↑에서 발행된 URL을 브라우저의 주소 표시줄에 복사하여 액세스합니다.
강아지의 이미지가 표시되었습니다.
여러 번 브라우저를 다시 로드하면 매번 이미지가 변경됩니다.
브라우저 개발자 도구를 사용하여 HTML 소스를 살펴보면 img 태그가 body에 추가되는 것으로 나타났습니다.
GAS만이 가능한 GoogleDrive 파일과 연계한 페이지 작성도 할 수 있어 재미있을 것 같네요!
여러가지 시도해 보겠습니다.
참고
(항상 옆에 IT 작업) Google Apps Script로 웹 애플리케이션을 만드는 첫 단계
htps : //가 되어-t. 이 m /가 s-u-b-p-kachion-begine r /
여담
HTML 파일 내에서 GAS의 새로운 V8 런타임에서 사용 가능한 화살 함수를 사용하고 있지만 V8 런타임을 비활성화 한 상태에서도 작동합니다.
이것은 HTML이 클라이언트 측에서 움직이기 때문입니다.
계속
GAS로 동적 HTML② HTML내에서 Google 드라이브의 이미지 파일을 표시시킨다.
htps : // 코 m / 조오지 / ms / b89 세 338 아 f359742 에 813
Reference
이 문제에 관하여(GAS로 동적 HTML ① HTML 안의 Javascript를 실행하여 동적 HTML을 작성한다. (Dog API 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jooji/items/6227821eb5f9b48e2e87
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
HTML 파일 내에서 GAS의 새로운 V8 런타임에서 사용 가능한 화살 함수를 사용하고 있지만 V8 런타임을 비활성화 한 상태에서도 작동합니다.
이것은 HTML이 클라이언트 측에서 움직이기 때문입니다.
계속
GAS로 동적 HTML② HTML내에서 Google 드라이브의 이미지 파일을 표시시킨다.
htps : // 코 m / 조오지 / ms / b89 세 338 아 f359742 에 813
Reference
이 문제에 관하여(GAS로 동적 HTML ① HTML 안의 Javascript를 실행하여 동적 HTML을 작성한다. (Dog API 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/jooji/items/6227821eb5f9b48e2e87
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(GAS로 동적 HTML ① HTML 안의 Javascript를 실행하여 동적 HTML을 작성한다. (Dog API 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/jooji/items/6227821eb5f9b48e2e87텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
