webアプリ | nujonoa_blog https://nujonoa.com 人生に役立つデータ集 Thu, 21 Apr 2022 04:26:13 +0000 ja hourly 1 https://wordpress.org/?v=6.8.3 https://nujonoa.com/wp-content/uploads/2019/04/cropped-DSC00976-e1554456145409-32x32.jpg webアプリ | nujonoa_blog https://nujonoa.com 32 32 【GASのWEBアプリ】で登録フォームを作る。 https://nujonoa.com/make-a-registration-form-with-gas/ https://nujonoa.com/make-a-registration-form-with-gas/#respond Thu, 21 Apr 2022 11:00:00 +0000 http://nujonoa.com/?p=13838 今回作ったもの↓

下記の登録フォームです。

登録フォーム作成(css)
docs.google.com

GASで登録フォームを作る。

doPost(e)でformから、下記内容を取り出すことができ、

{contentLength=116.0, parameter={usex=F, uaddress=愛知県蒲郡市, uname=山下太郎, umail=DAFAFA@KOA, uzip=123-4567}, parameters={uzip=[Ljava.lang.Object;@e0b929d, uaddress=[Ljava.lang.Object;@4defa65b, uname=[Ljava.lang.Object;@31f04075, umail=[Ljava.lang.Object;@7faa2595, usex=[Ljava.lang.Object;@2de7cf87}, contextPath=, queryString=, postData=FileUpload}

そこから情報を抜き出すためには、e.parameter.○○で

e.parameter.unam　⇒　山下太郎

が取り出せる形になります。

function doGet() {
  let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
  return HtmlService.createHtmlOutput(html)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function doPost(e) {
  var sheet = SpreadsheetApp.openById("○○○○○○○○○○〇").getSheetByName("シート1");
  var array = [e.parameter.uname, e.parameter.umail, e.parameter.usex, e.parameter.uaddress];
  sheet.appendRow(array);

  //  var html = HtmlService.createHtmlOutputFromFile("thankyou");
  let html = HtmlService.createTemplateFromFile('thankyou').evaluate().getContent();
  sheet.getRange(7,1).setvalue(html);
  return HtmlService.createHtmlOutput(html)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

}

//https://officeforest.org/wp/2018/11/28/google-apps-script%E3%81%A7get%E3%83%BBpost/
//https://nixeneko.hatenablog.com/entry/2021/03/12/070000

index.html

<!--/*%_skip_start_%*/-->
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta http-equiv="content-Type" content="text/html" 　charset="utf-8">
  <title>登録フォーム</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

</head>

<body>
  <div class="user">
    <header class="user__header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
      <h1 class="user__title">A lightweight and simple sign-up form</h1>
    </header>

    <form class="form" method="post"
      action="https://script.google.com/macros/s/○○○○○○○○○○○○○○/exec">
      <div class="form__group">
        <!--      お名前を入力してください。（必須）<br> -->
        <input type="text" name="uname" id="uname"  class="form__input"  placeholder="Username">
        <span class="alert"></span>
      </div>
      <!-- 性別を入力してください。（必須）<br> -->
      <input type="radio" name="usex" value="M">男性
      <input type="radio" name="usex" value="F">女性
      <span class="alert"></span>
      <div class="form__group">
        <!-- メールアドレスを入力してください。（必須）<br>-->
        <input type="text" name="umail" size="50" id="umail" placeholder="Email" class="form__input">
        <span class="alert"></span>
      </div>
      <!-- 郵便番号を入力してください。（例：012-3456）<br> -->
      <div class="form__group">
        <input type="text" name="uzip" id="uzip" placeholder="郵便番号(例:012-3456)" class="form__input">
        <span class="alert"></span>
      </div>
      <!-- 住所を入力してください。（100文字まで）<br> -->
      <div class="form__group">
        <textarea name="uaddress" cols="50" rows="3" placeholder="住所" class="form__input"></textarea>
        <span class="alert"></span>
      </div>
      <button  type="submit" class="btn">Register</button>

    </form>
  </div>
</body>

</html>

<!-- https://copypet.jp/692/-->


おしゃれシンプルデザインの新規登録フォーム！ コピペで差が付くデザインをCSSで - デシノン
ユーザーインターフェイスがよすぎる、おしゃれな新規登録フォームをまとめました！ プロ並のデザインなのに、ぜんぶコピペでできちゃう、、
deshinon.com

js1.html

<script type="text/javascript">


  $(function(){
	// フォームがサブミットされたときの処理
	$("form").submit(function(){
		// サブミットチェック用の変数を宣言
		var checkSubmit = true;

		// 名前の入力チェック
		if ($("#uname").val() == "") {
			// 未入力時はerrorクラスを追加
			$("#uname").addClass("error");
			// メッセージを追加
			$("#uname+span").text("名前を入力してください。");
			// 未入力なのでサブミットさせない
			checkSubmit = false;
		} else {
			// 入力時はerrorクラスを削除
			$("#uname").removeClass("error");
			// メッセージを削除
			$("#uname+span").text("");
		}

		// 性別の入力チェック
		if ($(":radio:checked").length == 0) {
			// チェックされた要素がない（＝未入力）
			// errorクラスを追加
			$(":radio").addClass("error");
			// メッセージを追加
			$(":radio+span").text("性別を入力してください。");
			// 未入力なのでサブミットさせない
			checkSubmit = false;
		} else {
			// 入力時はerrorクラスを削除
			$(":radio").removeClass("error");
			// メッセージを削除
			$(":radio+span").text("");
		}

		// メールアドレスの入力チェック
		if ($("#umail").val() == "") {
			// 未入力時はerrorクラスを追加
			$("#umail").addClass("error");
			// メッセージを追加
			$("#umail+span").text("メールアドレスを入力してください。");
			// 未入力なのでサブミットさせない
			checkSubmit = false;
		} else {
			// 入力時はerrorクラスを削除
			$("#umail").removeClass("error");
			// メッセージを削除
			$("#umail+span").text("");
		}

		// サブミットチェック用の変数を返す
		return checkSubmit;
	});

	// 名前が変更されたときの処理
	$("#uname").change(function(){
		// 名前の入力チェック
		if ($("#uname").val() == "") {
			// 未入力時はerrorクラスを追加
			$("#uname").addClass("error");
			// メッセージを追加
			$("#uname+span").text("名前を入力してください。");
		} else {
			// 入力時はerrorクラスを削除
			$("#uname").removeClass("error");
			// メッセージを削除
			$("#uname+span").text("");
		}
	});

	// ラジオボタンがクリックされたときの処理
	$(":radio").click(function(){
		// 性別の入力チェック
		if ($(":radio:checked").length == 0) {
			// チェックされた要素がない（＝未入力）
			// errorクラスを追加
			$(":radio").addClass("error");
			// メッセージを追加
			$(":radio+span").text("性別を入力してください。");
		} else {
			// 入力時はerrorクラスを削除
			$(":radio").removeClass("error");
			// メッセージを削除
			$(":radio+span").text("");
		}
	});

	// メールアドレスが変更されたときの処理
	$("#umail").change(function(){
		// メールアドレスの書式チェック
		if ($("#umail").val().match(/^[\w\.-]+\@[\w\.-]+$/)) {
			// 書式が正しい
			$("#umail").removeClass("error");
			$("#umail+span").text("");
		} else {
			// 書式に誤りがある
			$("#umail").addClass("error");
			$("#umail+span").text("書式に誤りがあります。");
		}
	});

	// 郵便番号が変更されたときの処理
	$("#uzip").change(function(){
		// 郵便番号の書式チェック
		if ($("#uzip").val().match(/^\d{3}\-\d{4}$/)) {
			// 書式が正しい
			$("#uzip").removeClass("error");
			$("#uzip+span").text("");
		} else {
			// 書式に誤りがある
			$("#uzip").addClass("error");
			$("#uzip+span").text("書式に誤りがあります。");
		}
	});

	// 住所の入力中の処理
	$("textarea").keyup(function(){
		// 文字数を取得
		var inputLength = $("textarea").val().length;

		// 住所の文字数チェック
		if (inputLength <= 100) {
			// 100文字以内
			$("textarea").removeClass("error");
			$("textarea+span").text(inputLength+"/100");
		} else {
			// 100文字を超えた
			$("textarea").addClass("error");
			$("textarea+span").text("入力文字数が長すぎます。");
		}
	});
});

//cssの何か
const button = document.querySelector('.btn')
const form   = document.querySelector('.form')

button.addEventListener('click', function() {
   form.classList.add('form--no') 
});


</script>

css.html

基本↓のサイトの内容からこのサイトに適応させております。
その他さまざまなCSSありますので、ぜひ参考に下さい。

おしゃれシンプルデザインの新規登録フォーム！ コピペで差が付くデザインをCSSで - デシノン
ユーザーインターフェイスがよすぎる、おしゃれな新規登録フォームをまとめました！ プロ並のデザインなのに、ぜんぶコピペでできちゃう、、
deshinon.com
 
<style>
  //エラー用
  .error {
    background-color: #FFCCCC;
  }

  .alert {
    color: #FF0000;
    font-size: small;
  }

  //cssのもの

  $font-family: "Roboto";
  $font-size: 14px;

  $color-primary: #ABA194;

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: $font-family;
    font-size: $font-size;
    background-size: 200% 100% !important;
    animation: move 10s ease infinite;
    transform: translate3d(0, 0, 0);
    background: linear-gradient(45deg, #49D49D 10%, #A2C7E5 90%);
    height: 100vh
  }

  .user {
    width: 90%;
    max-width: 340px;
    margin: 10vh auto;
  }

  .user__header {
    text-align: center;
    opacity: 0;
    transform: translate3d(0, 500px, 0);
    animation: arrive 500ms ease-in-out 0.7s forwards;
  }

  .user__title {
    font-size: $font-size;
    margin-bottom: -10px;
    font-weight: 500;
    color: white;
  }

  .form {
    margin-top: 40px;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 500px, 0);
    animation: arrive 500ms ease-in-out 0.9s forwards;
  }

  .form--no {
    animation: NO 1s ease-in-out;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .form__input {
    display: block;
    width: 100%;
    padding: 20px;
    font-family: $font-family;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    transition: 0.3s;

    &:focus {
      background: darken(#fff, 3%);
    }
  }

  .btn {
    display: block;
    width: 100%;
    padding: 20px;
    font-family: $font-family;
    -webkit-appearance: none;
    outline: 0;
    border: 0;
    color: white;
    background: $color-primary;
    transition: 0.3s;

    &:hover {
      background: darken($color-primary, 5%);
    }
  }

  @keyframes NO {

    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes arrive {
    0% {
      opacity: 0;
      transform: translate3d(0, 50px, 0);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes move {
    0% {
      background-position: 0 0
    }

    50% {
      background-position: 100% 0
    }

    100% {
      background-position: 0 0
    }
  }
</style>

thankyou.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta http-equiv="content-Type" content="text/html" 　charset="utf-8">
  <title>登録フォーム</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>

<body>
  <div class="user">
    <header class="user__header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
      <h1 class="user__title">ありがとう</h1>
    </header>
  </div>
</body>

</html>
]]> https://nujonoa.com/make-a-registration-form-with-gas/feed/ 0 【GAS_Webアプリ集】java-scriptを使う https://nujonoa.com/gas_web-application-collection/ https://nujonoa.com/gas_web-application-collection/#respond Mon, 04 Apr 2022 14:04:27 +0000 http://nujonoa.com/?p=10486
  1. 【GAS_Webアプリ集】java-scriptを動かす
  2. ①javascriptでhtmlに文字を挿入
  3. ②ボタンのクリック
  4. ③文字の入力の反映
  5. ④htmlの中身を確認、フィードバック
  6. ⑤掛け算を行う
  7. ⑥チェックボタン、ラジオボタンの使い方
  8. ⑦チェックボタンでの分岐
  9. ⑧送料無料などの分岐
  10. ⑨時間での分岐
  11. ⑩工事中・・・
  12. ⑪マウスオーバーでコメント
  13. ⑫テキストファイルの読み込み
  14. ⑬写真の添付
  15. ⑭文字列のソート

【GAS_Webアプリ集】java-scriptを動かす

①javascriptでhtmlに文字を挿入

javascriptでページに文字を挿入します。
↓の「がんばれ」はjavascriptにて挿入された文字になります。

②ボタンのクリック

ボタンをクリックすると、htmlを操作する動作をjavascriptにて作成します。

③文字の入力の反映

文字を入力、ボタンを押すことで、入力を行います。

④htmlの中身を確認、フィードバック

⑤掛け算を行う

⑥チェックボタン、ラジオボタンの使い方

⑦チェックボタンでの分岐

⑧送料無料などの分岐

⑨時間での分岐

⑩工事中・・・

⑪マウスオーバーでコメント

⑫テキストファイルの読み込み

⑬写真の添付

⑭文字列のソート

]]> https://nujonoa.com/gas_web-application-collection/feed/ 0 【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う https://nujonoa.com/gas_webapplication_6_checkbutton/ https://nujonoa.com/gas_webapplication_6_checkbutton/#respond Fri, 11 Feb 2022 14:18:46 +0000 http://nujonoa.com/?p=10450
  1. 【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う
  2. コード
    1. コード.js
    2. index.html
    3. js1.html
    4. CSS
    5. 出力結果
  3. サンプル

【GAS_Webアプリ⑥】java-scriptでチェックボタンを使う

今回は、GASのwebアプリでcheckボタン、radioボタンを使っていきたいと思います。

コード

コード.js

まずは、ウェブアプリを立ち上げるためのおまじないです。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次は、htmlです。

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
></script>
<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

　で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。

今回は、チェックボタンと、ラジオボタンを設置し、連動するようにします。

<!--/*%_skip_start_%*/-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Check radio</title>
	<script
	  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
	></script>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
　  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<!--/*%_skip_end_%*/-->
<div>
	チェックボックスを連動させる
	<input type="checkbox" id="check1">
	→
	<input type="checkbox" id="check2">
</div>
<div>
	ラジオボタンを連動させる
	<input type="radio" name="radio1" value="1">
	<input type="radio" name="radio1" value="2">
	→
	<input type="radio" name="radio2" value="1">
	<input type="radio" name="radio2" value="2">
</div>
<!--/*%_skip_start_%*/-->
</body>
</html>
<!--/*%_skip_end_%*/-->

js1.html

javascriptは下記のとおりです。

チェックボタン、ラジオボタンの値を取得して、
結果を反映させます。

<!DOCTYPE html>

<script>

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// 1つ目のチェックボックスを押した時の処理を設定
	$("#check1").click(function() {
		// チェックボックスの値を取得
		var check1 = $("#check1").prop("checked");
		console.log(check1);	// コンソールに出力

		// 取得した値をチェックボックスに設定
		$("#check2").prop("checked", check1);
	});

	// 1つ目のラジオボタンを押した時の処理を設定
	$("input[name=radio1]").click(function() {
		// ラジオボタンの値を取得
		var radio1 = $("input[name=radio1]:checked").val();
		console.log(radio1);	// コンソールに出力

		// 取得した値をラジオボタンに設定
		$("input[name=radio2]").val([radio1]);
	});
});

//ここに記述↑↑↑

</script>

CSS

<style>

div.viewarea {
	background: #ffa;
	border: solid 1px #aa6;
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}

textarea {
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}




</style>

出力結果

サンプル

サンプルを置いておきますので、コピーしてお使いください。

サンプルをコピー

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。

]]> https://nujonoa.com/gas_webapplication_6_checkbutton/feed/ 0 【GAS_Webアプリ③】java-scriptで文字を入力 https://nujonoa.com/gas_webapplication_%ef%bc%93_inputtext/ https://nujonoa.com/gas_webapplication_%ef%bc%93_inputtext/#respond Fri, 11 Feb 2022 13:55:32 +0000 http://nujonoa.com/?p=10439
  1. 【GAS_Webアプリ③】java-scriptで文字を入力
  2. コード
    1. コード.js
    2. index.html
    3. js1.html
    4. CSS
  3. 出力結果
  4. サンプル

【GAS_Webアプリ③】java-scriptで文字を入力

今回は、文字入力を紹介していきます。

↓文字を入力して実行を押すと、入力内容が反映されることが分かります。

コード

【テスト②】jQueryを使ってみる
docs.google.com

コード.js

まずは、実行コードです。
ここはもうおまじないみたいなものなので、この通り入力してください。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次は、htmlです。

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
></script>
<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

　で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。

    <input type="text" id="userText" value="入力してね！！">
    <input type="button" id="execButton" value="実行">

ここで、テキストのインプットと、ボタンを作成。

<div class="viewarea" id="output"></div>

ここに結果を書き出すようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Input to page</title>
	<script
	  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
	></script>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
　  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
	<div>
		<input type="text" id="userText" value="入力してね！！">
		<input type="button" id="execButton" value="実行">
	</div>
	<div class="viewarea" id="output"></div>
</body>
</html>

js1.html

jsは下記のとおりです。

クリックしたら、入力欄の値を取得して、結果を表示させています。

<!DOCTYPE html>

<script>

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// ［実行］ボタンを押した時の処理を設定
	$("#execButton").click(function() {
		// 入力欄の値を取得
		var text = $("#userText").val();

		// 取得した値をdiv領域に表示
		$("#output").text(text);
	});
});

</script>

CSS

CSSは下記の通りで、好きな色、好きな枠線、大きさに調整ください。

<style>

div.viewarea {
	background: #f5f5f5;
	border: solid 1px #aa6;
	width: 50em;
	font-size: 12pt;
	padding: 0.5em;
}

textarea {
	width: 50em;
	font-size: 12pt;
	padding: 0.5em;
}

</style>

出力結果

冒頭でも示した通り、下記のような動きになります。

サンプル

サンプルを置いておきますので、コピーしてお使いください。

サンプルをコピー

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。

]]> https://nujonoa.com/gas_webapplication_%ef%bc%93_inputtext/feed/ 0 【GAS_Webアプリ②】java-scriptでボタンをクリック https://nujonoa.com/gas_webapplication_2_button/ https://nujonoa.com/gas_webapplication_2_button/#respond Fri, 11 Feb 2022 13:46:35 +0000 http://nujonoa.com/?p=10436
  1. 【GAS_Webアプリ②】java-scriptでボタンをクリック
  2. コード
    1. コード.js
    2. index.html
    3. js1.html
  3. 出力結果
  4. サンプル

【GAS_Webアプリ②】java-scriptでボタンをクリック

今回は、ボタンをクリックすることで、動作するウェブアプリを作成していきます。

コード

コード.js

まずはいつものおまじないです。
webアプリを立ち上げる動作になります。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次は、htmlになります。

<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

でjs1.htmlのjavascriptを読み込む場所を作成し、
・実行ボタン
と
・アウトプットの場所
を記したhtmlを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>clicks</title>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
</head>
<body>
	<input type="button" id="execButton" value="実行">
	<div id="output">
	</div>
</body>
</html>

js1.html

今回のjavascriptからは「jQuery」を使用していきます。
jQueryは簡単にいうと、より簡単にjavascriptをかけるようにするテンプレートです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

で呼び出すことで、それ以降は簡単にjsを使用することができます。

今回は、ボタンを押すと→アウトプットのところに「クリックされました」と表示される仕組みです。

<!DOCTYPE html>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// ［実行］ボタンを押した時の処理を設定
	$("#execButton").click(function() {
		$("#output").append("クリックされました<br>");
	});

});

//ここに記述↑↑↑

</script>

出力結果

出力結果は下記のとおりです。

実行ボタンをクリックすると、「クリックされました」と表示されることが分かります。

サンプル

サンプルを置いておきますので、コピーしてお使いください。

サンプルをコピー

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。

]]> https://nujonoa.com/gas_webapplication_2_button/feed/ 0 【GAS_Webアプリ①】java-scriptを動かす https://nujonoa.com/gas_webapplication_1_howto/ https://nujonoa.com/gas_webapplication_1_howto/#respond Fri, 11 Feb 2022 13:34:30 +0000 http://nujonoa.com/?p=10434 GASでウェブアプリを作成するために、やはりjavascriptを覚えていかないと、、、

ということで、今回から、java-scriptを勉強していきたいと思います！

【GAS_Webアプリ①】java-scriptを動かす！

今回は、まずは、javascriptを動かすことができるコードの書き方を確認していこうと思います。

コード

コード.js

まずは、jsからです。

jsはウェブサイトを動かすときと同様に、
doGet()を使用して動かします。

埋め込んだ際に「このサイトは…」という表示が出ないように、
少し変わった表示のさせ方をしていますが、
この通り打ち込んでください。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次はhtmlのコードです。

ここで重要なのは、

<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

この部分です。
これは、「js1.html」のコードをここに持ってきなさい！！

という指令を出しているコードになっており、
実際、ここにそのままjsを打ち込むのと同様の処理となっています。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JavaScript out HTML</title>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
</head>
<body>
</body>
</html>

js1.html

jvascriptの文章です。
htmlで保存してください。

<!DOCTYPE html>
<script>
	document.writeln("がんばれ");
</script>

今回は単純に。「がんばれ」という文章を打ち込むだけのコードになっています。

これが、先ほどの

<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

の部分に挿入され、「index.html」で、指示した項目が表示されることになります。

出力結果

出力結果は下記のとおりです。

がんばれと打ち込まれたことが分かります。

サンプル

サンプルを置いておきますので、コピーしてお使いください。

ボタン

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。

]]> https://nujonoa.com/gas_webapplication_1_howto/feed/ 0 【GAS_Webアプリ⑤】java-scriptでかけ算をする https://nujonoa.com/gas_webapplication_5_calculation/ https://nujonoa.com/gas_webapplication_5_calculation/#respond Thu, 27 Jan 2022 05:47:16 +0000 http://nujonoa.com/?p=10447
  1. 【GAS_Webアプリ①】java-scriptを動かす
  2. コード
    1. コード.js
    2. index.html
    3. js1.html
    4. CSS
    5. 出力結果
  3. サンプル

【GAS_Webアプリ①】java-scriptを動かす

今回は、GASのウェブアプリ上で、javascriptを用いて、かけ算をしていきたいと思います。

サンプルは下記のとおりです。

商品と、個数を選択し、計算ボタンを押すことで計算がかけられます。

コード

コード.js

まずは、webアプリを起動するためのおまじないです。

function doGet() {
let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
return HtmlService.createHtmlOutput(html)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

index.html

次は、htmlです。

<script
  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
></script>
<?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>

で、jQueryを呼び出し、js1の読み込み、cssの読み込みを行っています。

ボディは、
・商品の選択項目、個数の選択と
・結果の表示欄
を作成しています。

<!--/*%_skip_start_%*/-->
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Get list val</title>
	<script
	  src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
	></script>
    <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
　  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<!--/*%_skip_end_%*/-->
<div>
	商品
	<select id="item">
		<option value="100" selected>鉛筆 (100円)</option>
		<option value="200">シャーペン (200円)</option>
		<option value="500">ノートセット (500円)</option>
	</select>
	個数
	<select id="num">
		<option value="1" selected>1個</option>
		<option value="2">2個</option>
		<option value="3">3個</option>
	</select>
	<input type="button" id="calcButton" value="計算">
</div>
<div class="viewarea">
	単価「<span id="itemSel"></span>」円、
	個数「<span id="numSel"></span>」個で、
	合計「<span id="result"></span>」円。
</div>
<!--/*%_skip_start_%*/-->
</body>
</html>
<!--/*%_skip_end_%*/-->

js1.html

javascriptは下記の通り、

・リストの値を取得
・値を入れ込む
・かけ算をする
・切り捨て
・結果を表示

としております。

<!DOCTYPE html>

<script>

//ここに記述↓↓↓

// DOMの準備後に実行する内容
$(function() {
	// ［計算］ボタンを押した時の処理を設定
	$("#calcButton").click(function() {
		// リストの値を取得
		var itemValue = $("#item option:selected").val();
		var numValue = $("#num option:selected").val();

		// リストの値を表示
		$("#itemSel").text(itemValue);
		$("#numSel").text(numValue);

		// 計算（掛け算）を行う
		var result = itemValue * numValue;

		// 切り捨て
		result = Math.floor(result);

		// 計算結果を表示
		$("#result").text(result);
	});

	// 初回表示用にプログラムからクリック
	$("#calcButton").click();
});

//ここに記述↑↑↑

</script>

CSS

cssは下記のとおりです。色などは自由に変更ください。

<style>

div.viewarea {
	background: #ffa;
	border: solid 1px #aa6;
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}

textarea {
	width: 40em;
	font-size: 11pt;
	padding: 0.5em;
}
</style>

出力結果

出力結果は下記のとおりです。

サンプル

サンプルを置いておきますので、コピーしてお使いください。

サンプルをコピー

「デプロイ」→「デプロイをテスト」→「URLをクリック」
で簡単にウェブアプリをテストすることが可能です。

]]> https://nujonoa.com/gas_webapplication_5_calculation/feed/ 0