LoginSignup
6
6

More than 1 year has passed since last update.

@pump33(小林 貞春)in株式会社永和システムマネジメント

GASでWebアプリを作る

Last updated at Posted at 2022-04-28

はじめに

　GASを使用してウェブアプリを作成する方法を説明します。
　ここでは、ウェブアプリをデプロイして使用できる状態にする事と、その為の手順について説明する事を目的にしていますので、プログラムの細かい説明は省きます。

今回作成するアプリ

　スプレッドシートのデータを基にして、Web画面に一覧表示するプログラムです。
　Web画面からデータの追加や削除も行え、その結果がスプレッドシートにも反映されます。
Webアプリの作成_01.png

最初に用意する事

　次の２つのファイルをGoogleのドライブ上に用意します。
　　①「Webアプリの作成」スプレッドシート　※ファイル名は任意です。
　　②「Webアプリの作成」GASファイル　※ファイル名は任意です。
Webアプリの作成_02.png

①「Webアプリの作成」スプレッドシート

　データは、［シート1］のB列に入力します。2行目は見出しで、3行目以降が実際のデータとなります。
Webアプリの作成_03.png

②「Webアプリの作成」GASファイル

　GASファイルには、「Code.gs」と「index.html」を用意します。
Webアプリの作成_04.png

・Code.gas

　下記のコードをそのままコピーしてください。
　fileIdには、「Webアプリの作成」スプレッドシートのファイルIDを設定します。※下図を参照

Code.gs
// スプレッドシートの設定
const fileId = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';  // ←ココにスプレッドシートのファイルIDを指定します。
const spreadSheet = SpreadsheetApp.openById(fileId);  
const sheet       = spreadSheet.getSheetByName('シート1'); 

function doGet() {  
  const html = HtmlService.createTemplateFromFile('index');  
  return html.evaluate();  
}

/**
 * スプレッドシートのデータを取得する（返す）。
 * データが無い場合は、null を返す。
 */
function getData() {
  const lastRow = sheet.getLastRow();
  if(lastRow >= 3) {
    const data = sheet.getRange(3, 2, lastRow - 2, 1).getValues();
    return data;
  }
  return null;
}

/**
 * スプレッドシートにデータを追加する。
 */
function addData(value) {
  const lastRow = sheet.getLastRow();
  sheet.getRange(lastRow + 1, 2).setValue(value);
}

/**
 * 引数（行番号）で指定されたデータを、スプレッドシートから削除（行削除）する。
 */
function delData(rowNo){
  sheet.deleteRow(rowNo);
}

　※スプレッドシートのファイルIDは、ブラウザーのURLの一部として表示されます。（下図のピンク部分）
Webアプリの作成_05.png

・index.html

　下記のコードをそのままコピーしてください。

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style type="text/css">
      form.main {background-color:lightgreen; margin-top:50px; margin-left:50px; width:400px; padding:10px;}
      div.header {font-weight:bold; color:blue; line-height:1.5;}
    </style>
    <script>
      /**
       * サーバ側のデータ取得処理を呼び出す。
       */ 
      function getData() {
        google.script.run.withSuccessHandler(
          function(data, element) {
            drawList(data);
        })
        .withFailureHandler(
          function(msg, element) {
            console.log('### ERROR: ' + msg.toString());
        })
        .withUserObject(this)
        .getData();
      }

      /**
       * 引数で指定されたデータを元に、リスト（ラジオボタン）を表示する。
       * 引数は、2次元配列の文字列。ex.[['ミカン'],['リンゴ'],['バナナ'],…]
       */
      function drawList(data) {
        let list = document.getElementById('form-list');

        // <div class="list" id="form-list"> の有無を確認して、無い場合は作成する。
        if(list === null) {
          const newList = document.createElement('div');
          newList.setAttribute('class', 'list');
          newList.setAttribute('id', 'form-list');
          const targetElement = document.getElementById('form-input');
          const main          = document.getElementById('form-main');
          main.insertBefore(newList, targetElement);
          list = newList;
        }

        if(data !== null) {
          // リストの明細行（ラジオボタン）を追加する。
          for(let i = 0; i < data.length; i++) {
            const newElement = document.createElement('div');
            const newInput   = document.createElement('input');
            newInput.setAttribute('type', 'radio');
            newInput.setAttribute('name', 'kudamono');
            newInput.setAttribute('value', (i + 3));
            const newContent = document.createTextNode(data[i][0]);
            newElement.appendChild(newInput);
            newElement.appendChild(newContent);
            list.appendChild(newElement);
          }
        }
      }

      /**
       * サーバ側のデータ追加処理を呼び出す。
       */
      function addData() {
        const formText = document.getElementById('form-text');
        google.script.run.withSuccessHandler(
          function(v, element) {
            formText.value = '';
            const list = document.getElementById('form-list');
            list.remove();
            getData();
        })
        .withFailureHandler(
          function(msg, element) {
            console.log('### ERROR: ' + msg.toString());
        })
        .withUserObject(this)
        .addData(formText.value);
      }

      /**
       * サーバ側のデータ削除処理を呼び出す。
       */
      function delData() {
        const elements = document.getElementsByName('kudamono');
        const rowNo = getRadioValue(elements);
        if(rowNo === null) {
          return;
        }
        google.script.run.withSuccessHandler(
          function(v, element) {
            const list = document.getElementById('form-list');
            list.remove();
            getData();
        })
        .withFailureHandler(
          function(msg, element) {
            console.log('### ERROR: ' + msg.toString());
        })
        .withUserObject(this)
        .delData(rowNo);
      }

      /**
       * ラジオボタンから値を取得する（返す）。
       * ラジオボタンが選択されていない場合は、null を返す。
       * 引数には、document.getElementsByName() で取得した Elements を渡す。
       */ 
      function getRadioValue(radioElements) {
        let value = null;
        for(let i = 0; i < radioElements.length; i++) {
          if(radioElements.item(i).checked) {
            value = radioElements.item(i).value;
            break;
          }
        }
        return value;
      }
    </script>
  </head>
  <body onload="getData();">
    <form class="main" id="form-main">
      <div class="header">くだもの</div>
      <div class="list" id="form-list">
        <!-- ex.
        <div><input type="radio" name="kudamono" value="3">ミカン</div>
        -->
      </div>
      <div class="input" id="form-input">
        <input type="text" id="form-text"></input>
        <button type="button" onClick="addData();">追加</button>
        <button type="button" onClick="delData();">削除</button>
      <div>
    </form>
  </body>
</html>

　準備するものは以上です。

ウェブアプリとしてデプロイする

　ウェブアプリとして使用できる状態にする事をデプロイと言います。
　以下に、デプロイする手順を説明します。

①〔デプロイ〕プルダウンリスト

　GASエディタの右上にある〔デプロイ〕プルダウンリストを選択します。
　選択するとリストが表示されますので、［新しいデプロイ］をクリックします。
Webアプリの作成_06.png

②［新しいデプロイ］画面

　［新しいデプロイ］画面が表示されますので、次の選択を行い〔デプロイ〕ボタンをクリックします。

  • 次のユーザーとして実行：ウェブ アプリケーションにアクセスしているユーザー
  • アクセスできるユーザー：自分のみ
    Webアプリの作成_07.png
    【注意】上記の画面が表示されない場合は、［種類の選択］の歯車アイコンを選択して、［ウェブアプリ］をチェックしてください。
    Webアプリの作成_08.png

③ ウェブアプリの表示

　下記の画面が表示されればデプロイは完了しています。
　「ウェブアプリ」のURLのリンクをクリックすると、アプリが表示されます。
Webアプリの作成_09.png
　レビューの許可を確認する画面が表示されますので、〔REVIEW PERMISSIONS〕ボタンをクリックします。
Webアプリの作成_10.png
　下記の画面が表示されたら、自分のアカウントを選択します。
Webアプリの作成_11.png
　続けて下記の画面が表示されたら、〔許可〕ボタンをクリックします。
Webアプリの作成_12.png
　Web画面が表示されます。
Webアプリの作成_13.png
　以降、「③ ウェブアプリの表示」の最初の画面で表示されたURL（リンク）をブラウザーに入力する事により、いつでもウェブアプリを表示する（呼び出す）事ができます。

ウェブアプリを使ってみる

　では、アプリを使ってみましょう。
　テキストボックスに「パイナップル」と入力して〔追加〕ボタンをクリックします。
Webアプリの作成_14.png
　くだものリストに「パイナップル」が追加されました。
Webアプリの作成_15.png
　「Webアプリの作成」スプレッドシートにも「パイナップル」が追加（７行目）されています。
Webアプリの作成_16.png
　今度は、くだものリストの「リンゴ」を選択（ラジオボタン）して〔削除〕ボタンをクリックします。
Webアプリの作成_17.png
　くだものリストから「リンゴ」が削除されました。
Webアプリの作成_18.png
　「Webアプリの作成」スプレッドシートの「リンゴ」も削除されています。
Webアプリの作成_19.png

プログラムを修正する

　データの追加と削除ができる様になったので、更新処理を追加してみます。
　「Webアプリの作成」GASファイルの２つのファイルを修正します。

Code.gs

　以下の関数（updData()）を追加します。

Code.gs
/**
 * スプレッドシートのデータを更新する。
 *   引数 rowNo：更新する行の行番号。／ value：更新するデータ。
 */
function updData(rowNo, value) {
  sheet.getRange(rowNo, 2).setValue(value);
}

index.html

　<script>タグ内に次の関数（updData()）を追加します。

index.html
    <script>
        ：
      /**
       * サーバ側のデータ更新処理を呼び出す。
       */
      function updData() {
        const elements = document.getElementsByName('kudamono');
        const rowNo = getRadioValue(elements);
        if(rowNo === null) {
          return;
        }
        const formText = document.getElementById('form-text');
        google.script.run.withSuccessHandler(
          function(v, element) {
            formText.value = '';
            const list = document.getElementById('form-list');
            list.remove();
            getData();
        })
        .withFailureHandler(
          function(msg, element) {
            console.log('### ERROR: ' + msg.toString());
        })
        .withUserObject(this)
        .updData(rowNo, formText.value);
      }
    </script>
  </head>

　<form>タグ内に<button type="button" onClick="updData();">更新</button>を追加します。

index.html
    <form>
        ：
      <div class="input" id="form-input">
        <input type="text" id="form-text"></input>
        <button type="button" onClick="addData();">追加</button>
        <button type="button" onClick="delData();">削除</button>
        <button type="button" onClick="updData();">更新</button>  // ←この行を追加する。
      <div>
    </form>

　プログラムの修正は上記で完了ですが、ブラウザーを再読込してもWeb画面に変化はありません。
Webアプリの作成_18.png
　プログラムを修正した場合、再度デプロイを実行しないと修正内容がアプリに反映されません。
　以下の手順で行います。

①〔デプロイ〕プルダウンリスト

　GASエディタの右上にある〔デプロイ〕プルダウンリストから［デプロイを管理］をクリックします。
【重要】ここで前回と同じ様に［新しいデプロイ］を選択してしまうと、ウェブアプリを呼び出すURLが変わってしまいます。
Webアプリの作成_20.png

②［デプロイを管理］画面

　［デプロイを管理］画面が表示されたら、編集（鉛筆アイコン）をクリックします。
Webアプリの作成_21.png
　「バージョン」プルダウンリストが変更できる様になりますので、［新バージョン］を選択します。
　続けて、〔デプロイ〕ボタンをクリックします。
Webアプリの作成_22.png
　下記の画面が表示されれば、デプロイの更新は完了です。
Webアプリの作成_23.png

③ プログラム修正の確認

　ブラウザーを再読込するとWeb画面の表示が変わります（〔更新〕ボタンが表示されました）。
Webアプリの作成_24.png
　くだものリストの「ミカン」を選択（ラジオボタン）します。
　テキストボックスに「グレープフルーツ」と入力して〔更新〕ボタンをクリックします。
Webアプリの作成_25.png
　「ミカン」が「グレープフルーツ」に更新されます。
Webアプリの作成_26.png
　「Webアプリの作成」スプレッドシートも「グレープフルーツ」（３行目）に更新されています。
Webアプリの作成_27.png

開発中のアプリの確認方法

　上記の手順でプログラムの修正がアプリに反映されますが、開発中に毎回デプロイを実行してアプリの動作を確認するのは大変です。
　次の手順で簡単にプログラムの修正を確認する事ができます。

①〔デプロイ〕プルダウンリスト

　GASエディタの右上にある〔デプロイ〕プルダウンリストから［デプロイをテスト］をクリックします。
Webアプリの作成_28.png

②［デプロイをテスト］画面

　［デプロイをテスト］画面が表示されるので、表示されているURLのリンクをクリックするとアプリが表示されます。
　このURL（リンク）を使用する事により、デプロイを実行しなくてもプログラムの修正を確認する事ができます。
Webアプリの作成_29.png

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
6