GASでクライアントJavaScriptを使用する超簡単なプログラム

hello

photo credit: holmes.josh Tokyo-Jan-2017-554.jpg via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASでクライアント側にもJavaScriptを使用してWebアプリケーションを作成する方法をシリーズでお伝えしています。

前回の記事はコチラです。

GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識
Google Apps ScriptではWebページを作成して公開をすることができます。今回は、GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識についてお伝えします。

クライアント側のJavaScriptを使うとどのようなことが実現できるのか、またそのためのプロジェクトのテンプレートについてお伝えしました。

今回は、手始めとしてGASでクライアントJavaScriptを使用する超簡単なプログラムについて紹介したいと思います。

では、行ってみましょう!

スポンサーリンク

前回のおさらい

前回は、GASでクライアント側JavaScriptも使用した場合のプロジェクト構成のテンプレートとして、以下のようなものを紹介しました。

まず、GASでWebアプリケーションを公開した際に生成されるURLにアクセスした場合に呼び出されるのが、以下のmain.gsのdoGet関数です。

function doGet() {
  var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput
    .setTitle('GAS+Vue.js')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  return htmlOutput;
}

その際にブラウザに呼び出されるHTMLドキュメントの元になるのが、以下のindex.htmlになります。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <!-- ここにbodyを記述していく -->
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>

CSSとクライアント側JavaScriptを記述する、「css.html」と「js.html」を埋め込めるように作成しています。

現時点では、それぞれ空のファイルで良いので用意しておいてください。

Webページに要素とイベントハンドラを設置する

では、このプロジェクトのうち、まずindex.htmlを変更してみましょう。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    <p id="hello">Hello GAS!</p>
    <button onclick="changeMessage()">テキスト変更!</button>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>

2つの要素を追加しています。

pタグによる段落要素とid属性

まず、段落を表すpタグ内に「Hello GAS!」という文字列です。

<p>段落</p>

このpタグには「hello」というid属性を付与しています。

<タグ id=”id名”>タグの内容</タグ>

id属性はそのページの要素のうち一つにだけ付与することが許されている「ラベル」のようなものですね。

pタグやid属性などについては、以下の記事たちが参考になると思います。

【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
GASユーザーのためのHTML・CSSによるWebページ制作入門をお伝えしています。今回は、Google Apps ScriptによるWebページをする際に、よく使う基本のHTMLタグについて解説をします。
【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
GASユーザーのためのHTML講座ということで、簡単なWebページの作り方を解説しています。今回はGASのWebページにid属性、class属性を使ってCSSのスタイルを好きな要素にだけ適用する方法です。

buttonタグによるボタン要素とonclick属性

もう一つの要素は、「テキスト変更!」というボタンです。

ボタン要素を追加するにはbuttonタグを使用します。

<button>表示テキスト</button>

また、buttonタグにonclick属性を付与しています。

onclick属性はマウスでクリックした際に、指定した処理を呼び出す機能を持ちます。

<タグ onclick=”JavaScriptのコード”>タグの内容</タグ>

今回の場合は、「テキスト変更!」ボタンを押した際に「changeMessage()」が指定されていますから、この関数を呼び出すということになります。

イベント、イベントハンドラとは?

このように、「ボタンがクリックされた」など、Webページで発生した出来事イベントといいます。

  • ボタンがクリックされたとき
  • マウスが要素に乗っかったとき
  • セレクトボックスなどの選択肢が変更されたとき
  • ページが表示されたとき

など様々なイベントが用意されています。

これらのイベントの発生を待ち構えていて、実際に発生したときにキャッチする機能イベントハンドラと言います。

今回の例では、先程のonclick属性がイベントハンドラということになります。

クライアント側のJavaScriptでは、イベントハンドラを仕込んで、イベントにより処理を発生させることができるというのが、一つの重要な役割となり、そのおかげで動きのあるページ作成が可能となっています。

クライアント側JavaScript

続いて、空だったjs.htmlファイルに以下のように記述してみましょう。

ボタンが押下されたときに呼び出される関数changeMessageを定義しています。

<script>
function changeMessage() {
  document.getElementById('hello').textContent = 'Hello JavaScript!';
}
</script>

scriptタグにJavaScriptを記述する

「js.html」はHTMLファイルで、その中にJavaScriptを記述します。

ご覧の通り、HTMLファイル内のJavaScriptはscriptタグ内に記述します。

<script>
 // スクリプト
</script>

JavaScriptでテキストを変更する

そして、3行目ですが、以下のような処理になります。

  • documentオブジェクト(つまりWebページ上の全ての要素を含むオブジェクト)から
  • getElementByIdメソッドで「hello」というid属性を持つ要素を取得し
  • そのテキスト(textContentプロパティ)を「Hello JavaScript!」に変更する

このシリーズでは、あとでVue.jsを使う予定なので、これらのJavaScriptのメソッドやプロパティについては、詳しくは説明しません。

処理の内容がだいたいわかればOKです。

GASによるWebアプリの動作

以上のようにプロジェクトの各ファイルを変更して、「ウェブアプリケーションとして導入」から最新のコードをテストしてみましょう。

まず、以下のようなページの表示を確認できます。

GASによる簡単なWebアプリ

では、「テキスト変更!」ボタンを押してみましょう。

GASのWebアプリをボタンで動作させる
テキストが「Hello JavaScript!」に変更しましたね。

まとめ

以上、GASでクライアントJavaScriptを使用する超簡単なプログラムを紹介しました。

クライアント側JavaScriptを使用することで

  • イベントハンドラでイベントをキャッチする
  • id属性などを使用して要素を取得して操作をする

ということができるということが、確認できたと思います。

ただ、このような処理をもっと簡単にしてくれる素晴らしいモノがあります。

フレームワークVue.js。次回はこれを紹介していきます。

GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩
Google Apps ScriptでWebアプリを作成するシリーズ。今回はGASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩を進めて行きます。

どうぞお楽しみに!

連載目次:GASユーザーのためのVue.js&Webアプリ作成入門

Google Apps ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。
  1. GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識
  2. GASでクライアントJavaScriptを使用する超簡単なプログラム
  3. GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩
  4. GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説
  5. 【GAS&Vue.js】v-bindディレクティブを使って属性のデータバインディングをしてみよう
  6. GASとVue.jsによるWebアプリでv-forディレクティブを使って繰り返し要素を描画する方法
  7. GASのWebアプリでクライアント側JavaScriptからサーバー側の関数を呼び出す方法
  8. GAS&Vue.jsでスプレッドシートのデータを使ってWebページを作成する方法
タイトルとURLをコピーしました