hidao80 · September 21, 2020 06:27
diff --git a/mastogetter_url_shortener.gs b/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);
	}