Google Apps Script (GAS)로 동적 HTML 페이지를 만드는 방법!
단지 친숙하지만, 4류 이하의 스킬이기 때문에 큰 코드를 걸지 않는 것이 솔직한 곳입니다. 웃음
그래서 소개하고 있는 것은 앞으로 GAS를 기억하든지, 기억한 지 얼마 안된 것입니다! 라든지, GAS란 무엇인가? 라는 사람을 위한 기사뿐입니다!
사이트 소개
아래 다양한 GAS 및 기타 기사를 소개합니다!
htps : // bz 보트 t. rk /
소개 기사
이번 소개하고 있는 기사는 이하입니다!
htps : // bz 보트 t. rk / 2019/04/17 / shml /
작성 완료 이미지
다음과 같이 작성을 해 나갑니다.
아래에서 만든 간단한 웹 애플리케이션
htps : // sc pt. 오, ぇ. 이 m / 마 쿠로 s / s / 아
.html 만들기
index.html 파일을 만듭니다.
CSS 관련 디자인은 괴롭히려고했기 때문에, 불필요한 class라든지 있습니다만 신경쓰지 말아 주세요. 웃음
비지봇
<!-- bootstrapを使う -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="ja">
<head>
<base target="_top">
</head>
<body>
<div class="container">
<h1 class="display-4">ビジボットURL作成画面</h1>
<!-- formはgetメソッド -->
<form method="get" action="https://script.google.com/macros/s/***************************************/exec">
<!-- ラジオボタンフィールド -->
<div class="radio-inline">
<label><input type="radio" name="radio" id="radio1" value="line" checked="checked">LINE</label>
<label><input type="radio" name="radio" id="radio2" value="facebook">Facebook</label>
<label><input type="radio" name="radio" id="radio3" value="instagram">Instagram</label>
<label><input type="radio" name="radio" id="radio3" value="twitter">Twitter</label>
<label><input type="radio" name="radio" id="radio3" value="google">Google</label>
</div>
<!-- URLを入力するフィールド -->
<div class="form-group">
<input type="text" name="url" size="100" value="" placeholder="セットしたいURLを入れてください">
<input class="btn-dark" type="submit" value="生成">
</div>
<div class="output_area">
<div class="form-group"><input type="text" size="100" name="source" value="<?=url?>" placeholder="指定したパラメータURLが生成されます"></div>
</div>
</form>
</div>
</body>
</html>h
GAS 코드
HTML 쪽에서 GET에서 받은 값을 처리하고 다시 HTML 쪽으로 반환합니다.
GAS
//method=getで送信されたら実行する
function doGet(e){
//indexファイルのオブジェクト
var html = HtmlService.createTemplateFromFile('index');
Logger.log(e);
//getで送信された値を指定して取得する(index.htmlファイルのname="url"部分)
var url = e.parameter.url;
//getで送信された値を指定して取得する(index.htmlファイルのname="radio"部分)
var params = e.parameter.radio;
//paramsで取得した値でurlにreturnさせるurlの値を指定する
if(params === 'line'){
var url = url + '?utm_source=line';
}else if(params === 'facebook'){
var url = url + '?utm_source=facebook';
}else if(params === 'twitter'){
var url = url + '?utm_source=twitter';
}else if(params === 'instagram'){
var url = url + '?utm_source=instagram';
}else if(params === 'google'){
var url = url + '?utm_source=google';
}else{
var url = '';
}
//index.htmlにurlを返す
html.url = url;
return html.evaluate();
}
자세한 순서 설명은 비지봇의 사이트에 기재되어 있으므로 그쪽을 봐 주세요.
다시 사이트 소개
아래 다양한 GAS 및 기타 기사를 소개합니다!
htps : // bz 보트 t. rk /
소개 기사
이번 소개하고 있는 기사는 이하입니다!
htps : // bz 보트 t. rk / 2019/04/17 / shml /
Reference
이 문제에 관하여(Google Apps Script (GAS)로 동적 HTML 페이지를 만드는 방법!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Bzbot/items/ee4ac732791f9f8fdb69텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
