ボタン | nujonoa_blog https://nujonoa.com 人生に役立つデータ集 Fri, 11 Feb 2022 13:46:35 +0000 ja hourly 1 https://wordpress.org/?v=6.8.3 https://nujonoa.com/wp-content/uploads/2019/04/cropped-DSC00976-e1554456145409-32x32.jpg ボタン | nujonoa_blog https://nujonoa.com 32 32 【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