【GAS_Webアプリ③】java-scriptで文字を入力
<スポンサーリンク>
今回は、文字入力を紹介していきます。
↓文字を入力して実行を押すと、入力内容が反映されることが分かります。
コード
【テスト②】jQueryを使ってみる
シート1
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をクリック」
で簡単にウェブアプリをテストすることが可能です。
コメント欄