【GAS_Webアプリ②】java-scriptでボタンをクリック
<スポンサーリンク>
今回は、ボタンをクリックすることで、動作するウェブアプリを作成していきます。
コード
コード.js
まずはいつものおまじないです。
webアプリを立ち上げる動作になります。
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 | <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?> |
でjs1.htmlのjavascriptを読み込む場所を作成し、
・実行ボタン
と
・アウトプットの場所
を記したhtmlを作成します。
01 02 03 04 05 06 07 08 09 10 11 12 13 | <!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をかけるようにするテンプレートです。
1 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
で呼び出すことで、それ以降は簡単にjsを使用することができます。
今回は、ボタンを押すと→アウトプットのところに「クリックされました」と表示される仕組みです。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | <!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をクリック」
で簡単にウェブアプリをテストすることが可能です。
コメント欄