hidao80/mastogetter_url_shortener.gs

## mastogetter_url_shortener.gs
//HTTP GETをハンドリングする
function doGet(e) {
    //リクエストパラメータ名"q"の値を取得する
    //あらかじめURLエンコードしたものを受け取ること！
    const text = e.parameter.q;
    console.log(text);
    console.log(encodeURIComponent(text));
    const payload = "url=" + encodeURIComponent(text);
    const options = {
      "method"  : "post",
      "payload" : payload
    };
    const response = UrlFetchApp.fetch("https://git.io",options);
    console.log(response.getHeaders()['Location']);
    const result = `<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>mastogetter URL shortenr - ますとげったー URL短縮</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" media="print" onload="this.media='all'" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css" integrity="sha256-/oZ7h/Jkj6AfibN/zTWrCoba0L+QhP9Tf/ZSgyZJCnY=" crossorigin="anonymous" />
  <style>
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

/* change colours to suit your needs */
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

/* change colours to suit your needs */
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

/* change border colour to suit your needs */
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}

/* baloo-bhai-regular - latin-ext_latin */
@font-face {
  font-family: 'Baloo Bhai';
  font-style: normal;
  font-weight: 400;
  src: local('Baloo Bhai Regular'), local('BalooBhai-Regular'),
  url('https://hidao80.github.io/mastogetter/fonts/baloo-bhai-v5-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
  url('https://hidao80.github.io/mastogetter//fonts/baloo-bhai-v5-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

input, button, textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* html { */
/*font-size: calc(100vw / 32);*/
/* } */

body {
	background-color: #f6f6f4;
}

p {
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0em;
  margin-right: 0em;
}

header {
	width:100%;
	height: 57px;
	background-color: #55c500;
	align-items: center;
}

header h1 a {
	font-size: 2.3rem;
	color: white;
	font-family: 'Baloo Bhai', cursive;
	text-decoration: none;
}

header h1 span {
	font-size: 1rem;
	color: white;
	text-decoration: none;
	margin-left: 1rem;
}

header h1 a:link,
header h1 a:visited,
header h1 a:hover,
header h1 a:active {
	color: white;
}

header>div, header+div {
	width: 80%;
	margin: auto;
}

header+div {
	padding-top: 1rem;
}

.container {
	display: flex;
}

.area {
	width: 44.5%;
	padding: 2vh 2vw;
	background-color: white;
}

div.area>div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 10px;
}

div.area>div p, div.area>div p input[type="text"] {
	width: 100%
}

.area:nth-child(2)>div:first-child{
	border-bottom: solid 1px lightgray;
}

.area label:after {
	content: " ";
	white-space: pre;
}

#copylink {
	margin-left: 10px;
	word-break: keep-all;
}

button {
	font-size: 15px;
	padding: .5em;
	border-style: none;
	border-radius: .5em;
	background-color: #52b03b;
	color: #fff;
	box-shadow: none;
	cursor: pointer;
}

button:last-child{
	margin-left: auto;
}

button:focus {
	outline:0;
}

div.area>div>p {
	display: flex;
	flex-direction: column;
	position: relative;
}

input[type="text"] {
	font-size: 15px;
	flex-grow: 1;
	padding: .5em .5em .5em .5em;
	border: 1px solid #aaa;
	background-color: #fff;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #333;
}
label {
	font-size: 15px;
	padding-top: 10px;
	padding-bottom: 15px;
	color: #000;
	line-height: 1;
	position: relative;
}

@keyframes appear {
	from {
		background-color: transparent;
		border: 1px solid transparent;
		color: transparent;
	}
	to {
		background-color: #f6faf2;
		border: 1px solid #34830499;
		color: #348304;
	}
}
@media screen and (max-width: 899px) {
  /* width for mobile view */
  .area{width: 90vw; height: auto;}
  #matomain {
    width: 100%;
  }
  .hint {
    font-size: .6rem;
  }
}

@media screen and (max-width: 669px) {
  /* width for mobile view */
  .hint {
    right: -8vw ;
    font-size: 2vw;
  }
  label, .area input[type="text"], button, #card-preview, .area a{
    font-size: 10px;
  }
}
</style>
</head>
<body>
  <header class="container">
    <div>
      <h1><a href="./">mastogetter</a><span>URL shortener</span></h1>
    </div>
  </header>
  <div class="container flex-center">
    <div class="area">
      <div>
        <p>
          <label for="permalink">短縮URL</label>
          <span class="container">
            <input id="permalink" type="text" readonly="readonly" value="${response.getHeaders()['Location']}">
            <button id="copylink">コピー</button>
          </span>
        </p>
      </div>
    </div>
  </div>
<script>
function copyPermalink() {
	document.getElementById("permalink").select();
	document.execCommand("copy");
}

(function() {
    document.getElementById("copylink").addEventListener("click", () => {
		copyPermalink();
	});
})();
</script>
</body>
</html>`;

  return HtmlService.createHtmlOutput(result);
}
	//HTTP GETをハンドリングする
	function doGet(e) {
	//リクエストパラメータ名"q"の値を取得する
	//あらかじめURLエンコードしたものを受け取ること！
	const text = e.parameter.q;
	console.log(text);
	console.log(encodeURIComponent(text));
	const payload = "url=" + encodeURIComponent(text);
	const options = {
	"method" : "post",
	"payload" : payload
	};
	const response = UrlFetchApp.fetch("https://git.io",options);
	console.log(response.getHeaders()['Location']);
	const result = `<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>mastogetter URL shortenr - ますとげったー URL短縮</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" media="print" onload="this.media='all'" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css" integrity="sha256-/oZ7h/Jkj6AfibN/zTWrCoba0L+QhP9Tf/ZSgyZJCnY=" crossorigin="anonymous" />
	<style>
	/*
	html5doctor.com Reset Stylesheet
	v1.6.1
	Last Updated: 2010-09-17
	Author: Richard Clark - http://richclarkdesign.com
	Twitter: @rich_clark
	*/

	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	}

	body {
	line-height:1;
	}

	article,aside,details,figcaption,figure,
	footer,header,hgroup,menu,nav,section {
	display:block;
	}

	nav ul {
	list-style:none;
	}

	blockquote, q {
	quotes:none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
	content:'';
	content:none;
	}

	a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	}

	/* change colours to suit your needs */
	ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
	}

	/* change colours to suit your needs */
	mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
	}

	del {
	text-decoration: line-through;
	}

	abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
	}

	table {
	border-collapse:collapse;
	border-spacing:0;
	}

	/* change border colour to suit your needs */
	hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
	}

	input, select {
	vertical-align:middle;
	}

	/* baloo-bhai-regular - latin-ext_latin */
	@font-face {
	font-family: 'Baloo Bhai';
	font-style: normal;
	font-weight: 400;
	src: local('Baloo Bhai Regular'), local('BalooBhai-Regular'),
	url('https://hidao80.github.io/mastogetter/fonts/baloo-bhai-v5-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('https://hidao80.github.io/mastogetter//fonts/baloo-bhai-v5-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}

	input, button, textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	}

	/* html { */
	/font-size: calc(100vw / 32);/
	/* } */

	body {
	background-color: #f6f6f4;
	}

	p {
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0em;
	margin-right: 0em;
	}

	header {
	width:100%;
	height: 57px;
	background-color: #55c500;
	align-items: center;
	}

	header h1 a {
	font-size: 2.3rem;
	color: white;
	font-family: 'Baloo Bhai', cursive;
	text-decoration: none;
	}

	header h1 span {
	font-size: 1rem;
	color: white;
	text-decoration: none;
	margin-left: 1rem;
	}

	header h1 a:link,
	header h1 a:visited,
	header h1 a:hover,
	header h1 a:active {
	color: white;
	}

	header>div, header+div {
	width: 80%;
	margin: auto;
	}

	header+div {
	padding-top: 1rem;
	}

	.container {
	display: flex;
	}

	.area {
	width: 44.5%;
	padding: 2vh 2vw;
	background-color: white;
	}

	div.area>div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 10px;
	}

	div.area>div p, div.area>div p input[type="text"] {
	width: 100%
	}

	.area:nth-child(2)>div:first-child{
	border-bottom: solid 1px lightgray;
	}

	.area label:after {
	content: " ";
	white-space: pre;
	}

	#copylink {
	margin-left: 10px;
	word-break: keep-all;
	}

	button {
	font-size: 15px;
	padding: .5em;
	border-style: none;
	border-radius: .5em;
	background-color: #52b03b;
	color: #fff;
	box-shadow: none;
	cursor: pointer;
	}

	button:last-child{
	margin-left: auto;
	}

	button:focus {
	outline:0;
	}

	div.area>div>p {
	display: flex;
	flex-direction: column;
	position: relative;
	}

	input[type="text"] {
	font-size: 15px;
	flex-grow: 1;
	padding: .5em .5em .5em .5em;
	border: 1px solid #aaa;
	background-color: #fff;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #333;
	}
	label {
	font-size: 15px;
	padding-top: 10px;
	padding-bottom: 15px;
	color: #000;
	line-height: 1;
	position: relative;
	}

	@keyframes appear {
	from {
	background-color: transparent;
	border: 1px solid transparent;
	color: transparent;
	}
	to {
	background-color: #f6faf2;
	border: 1px solid #34830499;
	color: #348304;
	}
	}
	@media screen and (max-width: 899px) {
	/* width for mobile view */
	.area{width: 90vw; height: auto;}
	#matomain {
	width: 100%;
	}
	.hint {
	font-size: .6rem;
	}
	}

	@media screen and (max-width: 669px) {
	/* width for mobile view */
	.hint {
	right: -8vw ;
	font-size: 2vw;
	}
	label, .area input[type="text"], button, #card-preview, .area a{
	font-size: 10px;
	}
	}
	</style>
	</head>
	<body>
	<header class="container">
	<div>
	<h1><a href="./">mastogetter</a><span>URL shortener</span></h1>
	</div>
	</header>
	<div class="container flex-center">
	<div class="area">
	<div>
	<p>
	<label for="permalink">短縮URL</label>
	<span class="container">
	<input id="permalink" type="text" readonly="readonly" value="${response.getHeaders()['Location']}">
	<button id="copylink">コピー</button>
	</span>
	</p>
	</div>
	</div>
	</div>
	<script>
	function copyPermalink() {
	document.getElementById("permalink").select();
	document.execCommand("copy");
	}

	(function() {
	document.getElementById("copylink").addEventListener("click", () => {
	copyPermalink();
	});
	})();
	</script>
	</body>
	</html>`;

	return HtmlService.createHtmlOutput(result);
	}