LoginSignup
2
1

More than 3 years have passed since last update.

@kurikurisan(kenimo)

今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)2/3

Last updated at Posted at 2020-06-14

今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)

前回の記事

今日は何のごみの日かを教えてくれるシステム(Trash_day_notification)1/3

困っていること

ごみの日がどうしても覚えられない、、
私の家には、庭があって、ごみを一時的にためておくことができるために、ごみをいつでも捨てれるのは素晴らしいのですが、
ごみの日を覚えられないため、基本的に朝の用事があるときに、周りを見て、今日何のごみの日かを確認している。
-> これが非常に面倒くさい、、

ということで、通知してくれるシステムを作ろう！

機能

  • 毎朝8時30分にごみの日をLINEに通知する(前回の記事)
  • なんのごみがストックされているかが保存され、そのストックされているごみの日にだけ通知する。(今回の記事)

使用するもの

  • GAS
    • GETリクエストを取得する
    • レスポンスとして、htmlを表示するwebサーバ
  • Googleスプレットシート

設計

1. 設定とコーディング1

GASでサーバを作成して、スマホから画面を開くことにより、httpリクエストを送信できるようにする。

引数(trash_type)に、燃やすゴミ/紙・布類(段ボール)/ビン・缶・ペットボトル類を
引数(action)に、追加する/リセットするを
設定してgetリクエストを送ることで、それに伴ったhtmlを表示する。

trash_type
* burn: 燃やすゴミ
* paper: 紙・布類(段ボール)のゴミ
* bottle: ビン・缶・ペットボトル類のゴミ

action
* add: 追加する
* reset: カウントをリセットする

request.gs

function requestPost(message){
  let token = '{LINE Notifyトークン}';
  let options =
   {
     "method"  : "post",
     "payload" : "message=" + message,
     "headers" : {"Authorization" : "Bearer "+ token}

   };

   UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}

function myFunction(){
  let day_of_week = get_day_of_week();
  let trash_dict = {
    'Mon': '紙・布類(段ボール)',
    'Tue': '燃やすごみ',
    'Fri': '燃やすごみ',
    'Sat': 'ビン・缶・ペットボトル類',
  }

  let trash_str = trash_dict[day_of_week];

  if (trash_str != undefined){
    let message='今日は'+ trash_str +'のごみの日です。' ;
    requestPost(message);
  }

}

function get_day_of_week(){
//  曜日を取得する
  let arr_day = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
  let day_num = new Date().getDay();
  console.log(arr_day[day_num]);
  return arr_day[day_num]
}

main.gs

function doGet(e) {

  let trash_dict = {
    'burn': '燃やすゴミ',
    'paper': '紙・布類(段ボール)のゴミ',
    'bottle': 'ビン・缶・ペットボトル類のゴミ'
  };

  if (e.parameter == undefined) {
    //パラメータ不良の場合はundefinedで返す
    var getvalue = "undefined";
    //エラーはJSONで返すつもりなので
    rowData.value = getvalue;
    var result = JSON.stringify(rowData);
    return ContentService.createTextOutput(result);
  }else{
    let trash_type = e.parameter.trash_type;
    let action = e.parameter.action;
    console.log(trash_type);
    let trash_str = trash_dict[trash_type];
    let text = '';
    if (action == 'add'){
      text = trash_str + 'が追加されました。';
    }else if (action == 'reset'){
      text = trash_str + 'をすべて捨てました。';
    }
    let tpl;
    tpl = HtmlService.createTemplateFromFile('form');
    let title = 'ごみ捨て通知システム';

    tpl.title = title;
    tpl.text = text;
    tpl.burn_num = 3;
    tpl.paper_num = 3;
    tpl.bottle_num = 3;
    tpl.imageurl = '{好きな画像URL}';
    return tpl.evaluate(); 

  }
}

form.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <title>trash_day_notification</title>
        <meta name="description" content="ゴミ捨て通知システム" />
        <meta name="keywords" content="" />
        <!-- Base Layout CSS.Design Sample -->
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <!-- キーワード -->
                <h1 class="logo"><?=title?></h1>
                <!-- 名前 -->
                <h2 id="text"><?=text?></h2>
            </div>
                <!-- header end -->
            <div id="contents">
                <p>燃やすゴミ：<?=burn_num?>個</p>
                <p>紙・布類(段ボール)ゴミ：<?=paper_num?>個</p>
                <p>ビン・缶・ペットボトル類ゴミ：<?=bottle_num?>個</p>
                <img id ="photoimage" src=<?=imageurl?> width="400" height="400" alt="画像">
            </div>
                <!-- sidebar end -->
                <!-- 削除不可 -->
            <div id="footer">
                <!-- コピーライト / 著作権表示 -->
                <p>Copyright &copy; kurikurisan</p>
            </div>
        </div>
    </body>
    <style>
        body{
            background-color: chocolate;
        }
        .logo{
            margin-top:50px;
        }
        #photoimage{
            margin-top:50px;
        }
        #name{
            margin-top: 20px; 
        }
        #text{
            text-align: center;
        }

        div#wrapper{            
            text-align: center;
        }
        #contents{
            margin: 10% 20% 5%;
            text-align: center;
        }
        #footer{
            margin-top: 200px;
        }
    </style>
</html>

2. 設定とコーディング2

GASとGoogleスプレットシートを連携して、各ごみの数を保存し、
その曜日にあったゴミがあれば通知するようにする

request.gs

function requestPost(message){
  let token = '{LINE Notifyトークン}';
  let options =
   {
     "method"  : "post",
     "payload" : "message=" + message,
     "headers" : {"Authorization" : "Bearer "+ token}

   };

   UrlFetchApp.fetch("https://notify-api.line.me/api/notify",options);
}

function myFunction(){
  let day_of_week = get_day_of_week();
  let trash_dict = {
    'Mon': {'text': '紙・布類(段ボール)', 'key': 'paper'},
    'Tue': {'text': '燃やすごみ', 'key': 'burn'},
    'Fri': {'text': '燃やすごみ', 'key': 'burn'},
    'Sat': {'text': 'ビン・缶・ペットボトル類', 'key': 'bottle'},
  }

  let trash_data = trash_dict[day_of_week];

  if (trash_data != undefined){
    let trash_str = trash_data.text;
    // ごみの数を確認
    let trasu_num = get_trash_num(trash_data.key);
    if (trasu_num > 0){
      let message='今日は'+ trash_str +'のごみの日です。'+ String(trasu_num) + '個ごみがあります。';
      requestPost(message);
    }
  }
}

function get_day_of_week(){
//  曜日を取得する
  let arr_day = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
  let day_num = new Date().getDay();
  console.log(arr_day[day_num]);
  return arr_day[day_num]
}

function get_trash_num(key){
 let trash_dict = {
    'burn': {'name': '燃やすゴミ','cell': 'B2'},
    'paper': {'name': '紙・布類(段ボール)のゴミ','cell': 'B3'},
    'bottle': {'name': 'ビン・缶・ペットボトル類のゴミ','cell': 'B4'}
  }; 
  let spreadsheet = SpreadsheetApp.openById('{スプレットシートkey}');
  let sheet = spreadsheet.getActiveSheet();

  let range_data = sheet.getRange(trash_dict[key].cell);
  let trash_num = range_data.getValue();
  return trash_num;
}

main.gs

function doGet(e) {

  let trash_dict = {
    'burn': {'name': '燃やすゴミ','cell': 'B2'},
    'paper': {'name': '紙・布類(段ボール)のゴミ','cell': 'B3'},
    'bottle': {'name': 'ビン・缶・ペットボトル類のゴミ','cell': 'B4'},
    'all': {'name': '全て','cell': ''}
  };

  if (e.parameter == undefined) {
    //パラメータ不良の場合はundefinedで返す
    var getvalue = "undefined";
    //エラーはJSONで返すつもりなので
    rowData.value = getvalue;
    var result = JSON.stringify(rowData);
    return ContentService.createTextOutput(result);
  }else{
    let spreadsheet = SpreadsheetApp.openById(''{スプレットシートkey}');
    let sheet = spreadsheet.getActiveSheet();

    let range_data = sheet.getRange('B2:B4');
    let range_val_list = range_data.getValues();
    console.log(range_val_list);

    let burn_num = Number(range_val_list[0]);
    let paper_num = Number(range_val_list[1]);
    let bottle_num = Number(range_val_list[2]);

    let text = '';
    let trash_type = e.parameter.trash_type;
    let action = e.parameter.action;
    console.log(trash_type);
    let trash_data = trash_dict[trash_type];
    if (trash_data == undefined){
      text = '現在のゴミは以下の通りです。'
      return view_html(text, burn_num, paper_num, bottle_num);
    }
    let trash_str = trash_data.name;
    let trash_cell = trash_data.cell;



    if (action == 'add'){
      if (trash_type == 'burn'){
        burn_num += 1;
        sheet.getRange(trash_cell).setValue(burn_num);
      }else if (trash_type == 'paper'){
        paper_num += 1;
        sheet.getRange(trash_cell).setValue(paper_num);
      }else if (trash_type == 'bottle'){
        bottle_num += 1;
        sheet.getRange(trash_cell).setValue(bottle_num);
      }

      text = trash_str + 'が追加されました。';
    }else if (action == 'reset'){
      if (trash_type == 'burn'){
        burn_num = 0;
      }else if (trash_type == 'paper'){
        paper_num = 0;
      }else if (trash_type == 'bottle'){
        bottle_num = 0;
      }
      sheet.getRange(trash_cell).setValue(0);
      text = trash_str + 'をすべて捨てました。';
    }
    return view_html(text, burn_num, paper_num, bottle_num);
  }
}

function view_html(text, burn_num, paper_num, bottle_num){
  let tpl;
  tpl = HtmlService.createTemplateFromFile('form');
  let title = 'ごみ捨て通知システム';

  tpl.title = title;
  tpl.text = text;
  tpl.burn_num = burn_num;
  tpl.paper_num = paper_num;
  tpl.bottle_num = bottle_num;
  tpl.imageurl = '{好きな画像URL}';
  return tpl.evaluate(); 

}

form.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <title>trash_day_notification</title>
        <meta name="description" content="ゴミ捨て通知システム" />
        <meta name="keywords" content="" />
        <!-- Base Layout CSS.Design Sample -->
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <!-- キーワード -->
                <h1 class="logo"><?=title?></h1>
                <!-- 名前 -->
                <h2 id="text"><?=text?></h2>
            </div>
                <!-- header end -->
            <div id="contents">
                <p>燃やすゴミ：<?=burn_num?>個</p>
                <p>紙・布類(段ボール)ゴミ：<?=paper_num?>個</p>
                <p>ビン・缶・ペットボトル類ゴミ：<?=bottle_num?>個</p>
                <img id ="photoimage" src=<?=imageurl?> width="400" height="400" alt="画像">
            </div>
                <!-- sidebar end -->
                <!-- 削除不可 -->
            <div id="footer">
                <!-- コピーライト / 著作権表示 -->
                <p>Copyright &copy; funtastic</p>
            </div>
        </div>
    </body>
    <style>
        body{
            background-color: chocolate;
        }
        .logo{
            margin-top:50px;
        }
        #photoimage{
            margin-top:50px;
        }
        #name{
            margin-top: 20px; 
        }
        #text{
            text-align: center;
        }

        div#wrapper{            
            text-align: center;
        }
        #contents{
            margin: 10% 20% 5%;
            text-align: center;
        }
        #footer{
            margin-top: 200px;
        }
    </style>
</html>

スプレットシート

キャプチャ7.PNG

※{スプレットシートkey}はスプレットシートのURL
https://docs.google.com/spreadsheets/d/{スプレットシートkey}/edit

210.jpg

スマホで各URLをホーム画面に追加

次の6つのURLをホームボタンに追加する
https://script.google.com/macros/s/{GAS_ID}/exec?trash_type=burn&action=add
https://script.google.com/macros/s/{GAS_ID}/exec?trash_type=paper&action=add
https://script.google.com/macros/s/{GAS_ID}/exec?trash_type=bottle&action=add
https://script.google.com/macros/s/{GAS_ID}/exec?trash_type=burn&action=reset
https://script.google.com/macros/s/{GAS_ID}/exec?trash_type=paper&action=reset
https://script.google.com/macros/s/{GAS_ID}/exec?trash_type=bottle&action=reset

209.jpg

まとめ

これで、GASとGoogleスプレットシートとLINE Notifyを使って、
ごみがたまっていたらその曜日に教えてくれるようになりました。
まるで、親みたいですね(笑)

ただ、今はスマホが必要なので、次回でIoTエンジニアっぽく物理ボタン作って連携させます。

2
1
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
2
1