<スポンサーリンク>

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

この記事は約4分で読めます。
コピーボタン
記事のタイトルとURLをコピー
スポンサーリンク

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

<スポンサーリンク>

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

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

コード

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

コード.js

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

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

index.html

次は、htmlです。

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

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

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

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

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!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は下記のとおりです。

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
 
<script>
 
//ここに記述↓↓↓
 
// DOMの準備後に実行する内容
$(function() {
    // ［実行］ボタンを押した時の処理を設定
    $("#execButton").click(function() {
        // 入力欄の値を取得
        var text = $("#userText").val();
 
        // 取得した値をdiv領域に表示
        $("#output").text(text);
    });
});
 
</script>

CSS

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<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をクリック」
で簡単にウェブアプリをテストすることが可能です。

コピーボタン
記事のタイトルとURLをコピー
webアプリ
スポンサーリンク
スポンサーリンク
シェアする
nujonoaをフォローする
nujonoa

コメント欄

<スポンサーリンク>
タイトルとURLをコピーしました