【GAS】個人用Twitterっぽいものを15分程度で作ってみる
GWの暇つぶしとしてどうぞ。
※GAS → GoogleAppsScriptのこと
何ができるか
お金いつおろしたんだよ!!ということを管理するために、
ボタンを押す → スプレッドシートに反映される、という仕組みを作ってみました。
ここにコメントを投稿すると(コメントは無しでもよいが)
このようにコメントおよび記録をした日時が反映されるというもの。
これを10分で作ってみようと思います。
記事読む時間が5分で、作成時間が10分で15分程度でできればいいかな、と思っています。
(ちなみに、私は下調べも含め10時間ほどかかっています。。)
やることの概要
webの画面を作るためのHTMLを作成 … ②
→ GASの編集画面内でHTMLファイルを生成・編集する「きろくする」ボタンを押したときの処理や
URLにアクセスしたときの処理を書くGASを作成 …③
→ GASの編集画面内でHTMLファイルを生成・編集する
こんな流れでやっていきます。
①：スプレッドシート側の編集
- スプレッドシートのトップ画面から、新規スプレッドシートを作成
- FormDataとemail_listというシートを作成する
- FormDataのセルA1に「1」と入れる。
- email_listというシートのA2に、Gmailのメールアドレスを入れる。
GASの編集画面へ移行する
③：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とする。
そして、以下のコードをコピペ
<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の編集画面で 「公開」 → 「ウェブアプリケーションとして導入」を選択
設定は公開したい範囲に合わせて公開
