【その２設計・構造】ストレス解消のメンタルクリアボタンを作る【Google Apps Script】

前回のメンタルクリアボタンの概要はこちら。

ストレス解消法の１つの「メンタルクリアボタン」をGoogle Apps Scriptで作成します。

完成形は次のとおり。ボタンを押せば、ボタンの表示文字と色が変化していきます。

アプリの基本機能、デザインを考える
アプリを作成するためのファイルを作成する
HTMLを書いていく
Webアプリとして導入する

アプリの基本機能、デザインを考える

まず、アプリの基本機能を考えます。

今回は、メンタルクリアボタンなのでアプリの機能は次のようになります。

ボタンがある
ユーザーがボタンを押す
ボタンの文字が「３」、色が「赤」に変わる
数秒後に、ボタンの文字が「２」、色が「青」に変わる
数秒後に、ボタンの文字が「１」、色が「緑」に変わる
数秒後に、ボタンの文字が「スッキリ」に変わる
初めの状態に戻る

それを踏まえてアプリのデザインを考えます。必要になるのはボタンですね。その他に、タイトルや説明があった方がわかりやすいです。

大まかにアプリのデザインを書いてみましょう。手書きでも大丈夫です。

一番上にタイトルがあり、次にボタン、一番下に内容を書くためのコンテンツという構成です。

アプリを作成するためのファイルを作成する

アプリを作成するために、Google Apps Scriptを記述するスクリプトエディタを開きます。スクリプトエディタの開き方がわからない方は、こちらの記事を参考にしてください。

スクリプトエディタを開いたら、こちらの記事の「まとめ」に書いてある４つのファイルを作成します。スクリプトエディタのファイル追加は「ファイル」→「New」→「HTMLファイル」です。

プロジェクト名と「コード.gs」の４行目の”title”を「メンタルクリアボタン」に変更しておきましょう。

.setTitle("title")　を　.setTitle("メンタルクリアボタン")　に変更

各ファイルは次のようになっています。

４つのファイル

const doGet = () => {
  return HtmlService.createTemplateFromFile("index")
      .evaluate()
      .setTitle("メンタルクリアボタン")
      .addMetaTag("viewport", "width=device-width, initial-scale=1");
};

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?>
  </head>
  <body>

    <!-- ここにHTMLを書いていきます -->

    <?!= HtmlService.createHtmlOutputFromFile("js").getContent(); ?>
  </body>
</html>

<style>

/* ここにCSSを書いていきます */

</style>

<script>

/* ここにJavaScriptを書いていきます */

</script>

HTMLを書いていく

アプリの基本となるHTMLを「index.html」に書いていきましょう。アプリのデザインを参考に書いていきます。一番上にタイトル、次にボタン、一番下にコンテンツでしたね。

書く場所は<body></body>の間です。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>

    <!-- ここから -->

    <div class="title">メンタルクリアボタン</div>
    <button class="button">PUSH</button>
    <div class="content">
      <p>ボタンを押すとネガティブ感情が止まります</p>
      <p>ゆっくりと呼吸をしてください</p>
    </div>

    <!-- ここまで -->

    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>

<!– ここから –><!– ここまで –>の間が今回の記述部分です。

１行ずつ見ていきましょう。

<!-- ここから -->

これはコメントです。<!– この部分は表示されない –>で挟まれた部分はブラウザに表示されません。

どこを追加したのかわかりやすいように書いています。なくても問題ありません。

<div class="title">メンタルクリアボタン</div>

アプリのタイトルである「メンタルクリアボタン」を表示する部分になります。<div>タグで囲っています。

<div>タグは、単体では何の意味も持たないタグですが、要素をグループ化するのに使用します。今回の場合、ここがタイトルであることを表すために使用しています。

タグの中に「class=”title”」と書かれているのは、class属性と呼ばれ、CSSやJavaScriptで参照するときに使用します。class属性としてtitleという名前をつけています。

<button class="button">PUSH</button>

今回のメインであるボタン部分です。

<button>タグはボタンを作成します。<button></button>の間がボタンに表示される文字です。今回は「PUSH」です。class属性としてbuttonという名前をつけています。

<div class="content">
  <p>ボタンを押すとネガティブ感情が止まります</p>
  <p>ゆっくりと呼吸をしてください</p>
</div>

最後にコンテンツ部分です。

<p>タグは段落を意味します。<p>タグでアプリの説明を書いています。

この２つの<p>タグは、<div>タグで囲むことでグループ化しています。そして、class属性としてcontentという名前をつけています。

Webアプリとして導入する

ここまででHTMLの作成は終わりです。

作成したものをWebアプリとして導入して見てみましょう。方法はこちらの記事の「Webアプリとして導入してみる」を参考にしてください。

Webアプリとして導入したURLにアクセスすると、次のような画面が表示されます。

アプリの基本構造はできました。あまりパッとしないし、ボタンを押しても何も起こりません。

これから、CSSで文字の色や配置などを装飾し、JavaScriptで動きを付けていきます。

次回はCSSを使って見やすいように装飾していきます。

次の記事はこちら。