오늘은 쓰레기의 날을 알려주는 시스템 (Trash_day_notification) 2/3

14588 단어 spreadsheet HTML 자바스크립트 gas 안드로이드

오늘은 쓰레기의 날을 알려주는 시스템 (Trash_day_notification)

마지막 기사

오늘은 쓰레기의 날을 알려주는 시스템 (Trash_day_notification) 1/3

어려움

쓰레기의 날을 아무래도 기억할 수 없는,
내 집에는 정원이 있고 쓰레기를 일시적으로 보관할 수 있기 때문에 언제든지 쓰레기를 버리는 것이 좋습니다.
쓰레기의 날을 기억할 수 없기 때문에, 기본적으로 아침의 일이 있을 때, 주위를 보고, 오늘 어떤 쓰레기의 날인지를 확인하고 있다.
-> 이것은 매우 귀찮습니다,,

그래서 통지를 해주는 시스템을 만들자!

기능

매일 아침 8시 30분에 쓰레기의 날을 LINE에 통지한다 ( 마지막 기사 )

무슨 쓰레기가 재고되어 있는지가 저장되고, 그 재고되고 있는 쓰레기의 날에만 통지한다. (이번 기사)

사용하는 것

GAS

GET 요청 얻기

응답으로 HTML을 표시하는 웹 서버

Google 스플릿 시트

디자인

1. 설정 및 코딩 1

GAS로 서버를 만들고 스마트 폰에서 화면을 열어 http 요청을 보낼 수 있습니다.

인수 (trash_type)에 태우는 쓰레기/종이/천 (골판지)/병/캔/플라스틱 병
인수 (action)에 추가/재설정
설정하고 get 리퀘스트를 보내, 거기에 수반한 html를 표시한다.

trash_type
* burn: 점화 쓰레기
* paper: 종이·포류(골판지)의 쓰레기
* bottle: 병, 캔, 페트병 쓰레기

액션
* 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>

스플릿 시트

※{스플릿 시트 key}는 스플릿 시트 URLhttps://docs.google.com/spreadsheets/d/{スプレットシートkey}/edit

스마트 폰으로 각 URL을 홈 화면에 추가

다음 6개의 URL을 홈 버튼에 추가https://script.google.com/macros/s/{GAS_ID}/exec?trash_type=burn&action=addhttps://script.google.com/macros/s/{GAS_ID}/exec?trash_type=paper&action=addhttps://script.google.com/macros/s/{GAS_ID}/exec?trash_type=bottle&action=addhttps://script.google.com/macros/s/{GAS_ID}/exec?trash_type=burn&action=resethttps://script.google.com/macros/s/{GAS_ID}/exec?trash_type=paper&action=resethttps://script.google.com/macros/s/{GAS_ID}/exec?trash_type=bottle&action=reset

요약

이제 GAS와 Google 스플릿 시트와 LINE Notify를 사용하여,
쓰레기가 쌓이면 그 요일에 가르쳐 주게 되었습니다.
마치 부모처럼 보입니다 (웃음)

다만, 지금은 스마트폰이 필요하므로, 다음 번에 IoT엔지니어처럼 물리 버튼 만들어 연계시킵니다.

Reference

이 문제에 관하여(오늘은 쓰레기의 날을 알려주는 시스템 (Trash_day_notification) 2/3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kurikurisan/items/84456334082b72892985

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Google App Script(GAS)로 이메일을 추출하여 SpreadSheet으로 내보내기

GoogleAppsScript의 Drawing Class로 만들어 놀자!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다