50
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

GoogleスプレッドシートのデータをHTMLフォームで動的に読み込んでデータベース代わりにする

Last updated at Posted at 2018-03-05

無題.png

これを

sousa.gif

こうするプログラムです。
Google Spreadsheetから表部分を読み込み、A列(上記の例では名前)をHTMLフォームのselect要素に突っ込み、選択結果に応じてB,C列(上記の例ではメールアドレスと電話番号)をdiv要素内に動的に表示します。選択肢を変えると前の選択内容は消え、新たな選択内容に応じた情報にリフレッシュされます。
行を増やしていっても最終行を自動的に調整してくれるので、プログラムを変える必要はありませんし、読み込むデータも最小限で済みます。
簡易データベースのように使えるのでそこそこ便利です。
.htmlと.gs(Google Apps Script)は下記の通りです。

form.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <title>Google SpreadSheetをHTMLフォームで動的に読み込む</title>
    <script>
 
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
        //.gs内のloading()を呼び出し、読み込み後にListBack()でselect要素に選択肢を設定します。
        google.script.run.withSuccessHandler(ListBack).loading(); 
      }
      
      window.addEventListener('load', preventFormSubmit);

      //フォームなのでsubmit後の挙動を書く関数(今回は省略)
      function handleFormSubmit(formObject) {
        var div = document.getElementById('output');
        div.innerHTML = "送信完了";
      }
      
      //リスト読み込み
      function ListBack(data) {
        //他関数でも読めるようにグローバル変数としてセット
        listdata = data;
        var list = document.getElementById('list');
        for (var i=0; i<data.length; i++){
          var option = document.createElement('option');
          option.setAttribute('value', data[i][0]);
          option.innerHTML = data[i][0];
          list.appendChild(option);
        }
      }
      
      //動的にリスト情報を表示
      function addElement(select) {

            //該当行を探すためのforループ。iで保持します。
            for(var i=0; i<listdata.length; i++){
                if(select.value ==listdata[i][0]){
                    break;
                }
            }
            var element = document.createElement('div'); 
            var obj = document.getElementById("information"); 
            var division = obj.getElementsByTagName('div');
            //例えばAさん→Bさんと選択を変えたときにdiv内にAさんの情報が残らないようにする

            if(division.length > 0){
                obj.removeChild(division[0]);
            }
            
            element.class = "information"; 
            element.innerHTML =  "メールアドレス" + listdata[i][1] + "<br>電話番号" + listdata[i][2];
            obj.appendChild(element);
      }

    </script>
  </head>
  <body>
  <form>
    <div id="information">
        <select id="list" name="list" onchange="addElement(this);" required><br>
        <option value=""></option>
        </select>
    </div>
  </form>
  </body>
</html>

code.gs
//loading()で任意のスプレッドシートのデータを格納します。
function loading() {
    var ss = SpreadsheetApp.openById("スプレッドシートID");
    var listss = ss.getSheetByName("シート名");
    //最終行を調べる
    var lastrow = listss.getLastRow();
    //シートの大きさによって違いますがここでは2行1列目最終行3列目までを二次元配列に入れています。
    var list = listss.getRange(2, 1, lastrow-1, 3).getValues();
    
    return list;
}

function doGet() {
    var html = HtmlService.createTemplateFromFile('form');
    return html.evaluate();
}
50
55
1

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
50
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?