読者です 読者をやめる 読者になる 読者になる

にしもと.blog

色々してます。

【GAS】個人用Twitterっぽいものを15分程度で作ってみる

GWの暇つぶしとしてどうぞ。
※GAS → GoogleAppsScriptのこと

何ができるか

お金いつおろしたんだよ!!ということを管理するために、
ボタンを押す → スプレッドシートに反映される、という仕組みを作ってみました。

f:id:no-ku-ma:20170505141328p:plain

ここにコメントを投稿すると(コメントは無しでもよいが)

f:id:no-ku-ma:20170505141444p:plain

このようにコメントおよび記録をした日時が反映されるというもの。

これを10分で作ってみようと思います。
記事読む時間が5分で、作成時間が10分で15分程度でできればいいかな、と思っています。
(ちなみに、私は下調べも含め10時間ほどかかっています。。)

やることの概要

  • データベースとしてのスプレッドシートの作成
    スプレッドシート画面 … ①

  • webの画面を作るためのHTMLを作成 … ②
    → GASの編集画面内でHTMLファイルを生成・編集する

  • 「きろくする」ボタンを押したときの処理や
    URLにアクセスしたときの処理を書くGASを作成 …③
    → GASの編集画面内でHTMLファイルを生成・編集する

こんな流れでやっていきます。

①:スプレッドシート側の編集

GASの編集画面へ移行する

f:id:no-ku-ma:20170505135002p:plain

③:GASの編集

現時点では、

function myfunction() {  
}

というのがあるのみだと思う。 これを以下に置き換える。

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

function Getnow() {
  var d = new Date();
  var y = d.getFullYear();
  var mon = d.getMonth() + 1;
  var d2 = d.getDate();
  var h = d.getHours();
  var min = d.getMinutes();
  var s = d.getSeconds();
  var ret_str = y+"/"+mon+"/"+d2+" "+h+":"+min+":"+s;
  return ret_str;
}

function writeLog(form){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("FormData");
  var now = Getnow();
  var nowuser = Session.getActiveUser();
  var comment = form.tarea
  
  // メアド,日時,コメントという形式で書き込む
  var line_index = ss.getRange("A1").getValue()+1;
  ss.getRange("A1").setValue(line_index);
  ss.getRange(line_index, 2).setValue(now);
  ss.getRange(line_index, 3).setValue(nowuser);
  Logger.log(comment);
  if (comment) {
    ss.getRange(line_index, 4).setValue(comment);
  }
}

function GetUser(){
  //アクセス中のユーザのメアドを取得
  var nowuser = Session.getActiveUser();
 
  //承認リストの値を取得
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("email_list").getRange("A2:A").getValues();
  var length = ss.length;
  var retman = "NG"; 
  var array = [];
  for(var i = 0;i<length;i++){
    //メアドが空白のものはスルーする
    if(ss[i][0] == ""){
      continue;
    }
    if(nowuser == ss[i][0]){
      retman = "OK";
      break;
    }
  }
  return JSON.stringify([nowuser,retman]);
}

②:htmlファイルの作成

Webサービスとして公開したときに、見た目を指定するために、HTMLファイルを新規作成する必要がある。 以下のように新規ファイルを作成し、ファイル名はindex.htmlとする。 f:id:no-ku-ma:20170505135925p:plain

そして、以下のコードをコピペ

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ログをとる</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript">

//GetUserの実行結果を受け取る
function onSuccess(data){
  //返り値を配列に戻す
  var json = JSON.parse(data);
  console.log(json);
 
  //判定結果を取得
  var result = json[1];
 
  //ノードを取得
  var node = document.getElementById("mainform");
 
  //判定結果に基いて処理
  if(result == "OK"){
    //OKなのでフォームを表示する
    node.style.display = "block";
  } else{
    //NGなのでメッセージをnodeに叩き込む
    node.innerHTML = json[0] + "さんは、アクセス不可ですよ";
  }
}

function ok() {
  console.log("OK");
  alert("登録完了!!");
}
      google.script.run.withSuccessHandler(onSuccess).GetUser();
    </script>
</head>
<body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">ログをとる</a>
        </div>
      </div>
  </nav>
    <div class="container">
        <div id="mainform" style="display:none">
        <h1>ログ</h1>
        <form name="fm">
            <label for="textArea" class="control-label">コメント(あれば)</label>
            <textarea class="form-control" rows="3" id="textArea" name="tarea"></textarea><br>
            <a href="#" class="btn btn-primary btn-lg" onclick="google.script.run.withSuccessHandler(ok).writeLog(this.parentNode)">きろくする</a>
        </form>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

ここには、色々苦戦したあとが詰まっているが、今は省略。

Webサービスとして公開する

GASの編集画面で 「公開」 → 「ウェブアプリケーションとして導入」を選択 f:id:no-ku-ma:20170505140639p:plain

設定は公開したい範囲に合わせて公開 f:id:no-ku-ma:20170505140753p:plain

参考記事

神サイト: Google Apps Scriptでウェブアプリケーション入門