구글 스프레드 시트에 해당되는 글 3건

[정보] IT정보&활용 2025. 1. 10. 18:55
,

구글 스프레드 시트에서 날짜와 시간을 계산하는 방법

반응형

1. 일반적인 경우 날짜와 시간의 연산
날짜와 시간의 연산은 상식의 범위 내에서 계산됩니다. 예를 들어, 2025. 1. 2에서 2025. 1. 1을 빼면 1이 나옵니다.
시간 연산도 마찬가지로, 8:00에서 3:00을 더하면 11:00이 나옵니다.


2. 날짜와 시간이 함께 있는 경우
2025. 1. 2 오후 6:00에서 2025. 1. 1 오전 9:00을 빼면 1.375가 나옵니다.
서식을 수정하면 33:00으로 표시될 수 있습니다. 이는 33시간의 차이를 의미합니다.


3. 1.375의 의미
2025. 1. 1은 숫자 45,658에 해당합니다. 이는 1900. 1. 1을 기준으로 45,658번째 날임을 의미합니다.
오전 9:00은 9/24, 즉 0.375로 표현됩니다. 따라서 2025. 1. 1 오전 9:00은 45658.375가 됩니다.
같은 방식으로 2025. 1. 2 오후 6:00은 45659.75가 됩니다.
이 둘을 빼면 1.375가 됩니다.


4. 근무 시간 계산
일반적으로 1일 8시간을 근무합니다. 따라서 1시간은 1/8, 즉 0.125로 계산됩니다.
8시간을 1일로 계산하려면 날짜와 시간을 따로 추출하여 계산해야 합니다.

 

5. INT와 MOD 함수 활용
INT 함수는 소수점 이하를 버리고 정수 부분만 반환합니다. 예를 들어, =INT(B1)은 날짜값만 반환합니다.
MOD 함수는 나머지를 구하는 함수입니다. 예를 들어, =MOD(B1, 1)은 시간값만 반환합니다.
날짜와 시간을 따로 추출하여 연산할 수 있습니다. 예를 들어, =INT(B1)-INT(C1)과 =MOD(B1, 1)-MOD(C1, 1)을 사용합니다.


6. 8시간을 1일로 계산
INT로 구한 날짜값은 그대로 두고, MOD로 구한 시간값을 다시 INT로 몫을 구해 날짜에 더해줍니다.
MOD로 구한 나머지는 시간으로 나타냅니다.

반응형
저작자표시 비영리 동일조건

'[정보] IT정보&활용' 카테고리의 다른 글

엑셀로 IPA 분석하기, VBA 활용  (1) 2024.11.29
PDF 나누기(split)  (2) 2024.11.06
PDF 파일 합치기(수정)  (1) 2024.11.01
[구글 Apps Script] PDF로 출력하기  (0) 2024.10.23
[구글 스프레드 시트] 서명받기  (0) 2024.08.27
[정보] IT정보&활용 2024. 8. 27. 13:14
,

[구글 스프레드 시트] 서명받기

반응형

http://swsp.or.kr/3.html

 

appsscript활용

4 대상자 검색,수정,추가하기1 동영상 대상자 검색,수정,추가하기2 동영상 대상자 검색,수정,추가하기3 동영상 대상자 검색,수정,추가하기4 동영상 대상자 검색,수정,추가하기5 동영상 대상자 검

swsp.or.kr

여기에 가보면 구글 스프레드 시트 의 앱 스크립트를 활용한 다양한 사례들을 보여주고 있다.

그 중 주목한 것 하나가 바로 "서명받기"

후원신청서나 프로그램 참가 신청을 받을 때에도 유용할 거 같아서 좀더 자세히 살펴보았다.

소스는 다 오픈되어 있어 하나하나 뜯어보면서 나에게 필요한 방식으로 수정해보았다.

 

https://script.google.com/a/macros/bmsenior.org/s/AKfycbyU6cbIQfPkMm9Soqcz5l9ORI_QB320vAogSsqQFnGYoLEVxM118wXig9rsB32ogHc/exec

여기에 입력하면, 

 

https://docs.google.com/spreadsheets/d/13EJTaSd31_r8A8I4v6WzGqr1BJfqsmVmu4Xv55IpZpw/edit?gid=0#gid=0

여기에 이름과, 서명이미지, 그리고 해당 이미지의 url을 저장해 보여준다.

 

그런데 이 걸 내가 사용하기 위해서는 몇가지 수정해야할 것이이 있다.

서명이 저장되는 ① 구글 스프레드 시트의 고유 ID를 알아야하고, ② 서명 이미지가 저장될 폴더의 고유 ID를 알아야 한다.

마지막으로 ③ 저장될 시트의 이름도 일치시켜야 한다.

 

그래서 내가 편하려고 소스를 좀 수정해보았다.

 

1. Code.gs 

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function receiveSiganture(encodedImage,signame){

  // 폴더, 스프레드시트 ID 및 시트명을 직접 입력해주세요.
  const folderId = "23GF3aHMo0MDOxjCQLss12Ir-WjQmQT_T7B9";
  const spreadsheetId = "2Ak0WTqcdsc25RcaQZ86dRNMbddcOn88_eIdo";
  const sheetName = "시트1";

  var fileTime = new Date();
  var s1 = signame.sigName;
  const data = encodedImage.split(",")[1];
  const dataDecoded = Utilities.base64Decode(data);
  const signatureAsPictureBlob = Utilities.newBlob(dataDecoded).setName(s1+fileTime+"somefile.png");

  // 서명이 저장될 폴더
  var signurl = DriveApp.getFolderById(folderId).createFile(signatureAsPictureBlob).getId();
  var signfile = '=image("https://drive.google.com/uc?export=view&id=' + signurl + '")';
  var signfile2 = "https://drive.google.com/drive/folders/" + folderId + "/uc?export=view&id=" + signurl;
 
  // 입력된 서명 정보가 저장될 스프레드 시트
  var sa = SpreadsheetApp.openById(spreadsheetId);
  var sheet1 = sa.getSheetByName(sheetName);
  var rowData = [[fileTime, s1, signfile, signfile2]];
  var lastRow = sheet1.getLastRow();

  sheet1.getRange(lastRow+1, 1, 1, 4).setValues(rowData);
  getTexttS();
 
}

function getTexttS(form){
       var text = "서명이 입력되었습니다.";
       return text;
}

이제 위 음영처리한 ID와 이름만 정확히 확인해서 입력하면, 다른 소스는 수정할 필요가 없다.

 

2. index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>서명받기</title>
  </head>
  <body>
    <form id="signatureForm">
     
      <div id="app" class="container">
        &nbsp;<h2>성함을 입력하시고 아래 패드에 서명해 주세요.</h2><br><br>
        &nbsp;성명: <input type="text" name="mname" id="mname"><br><br>
        <div class="">
        <canvas id="sig" style="background-color: #e0e0e0; border: 1px solid black; width: 500px height: 300px;">
        </canvas>
        </div>
        <div>
          <button type="button" id="clearSig">Clear</button>
          <button type="button" id="send">Send</button>
        </div>
       
      </div>
      <input type="hidden" id="mtext" name="mtext">
    </form>
    <!-- 서명패드 스크립트: 오픈소스이며, 무료입니다. 아래는 원본 링크 -->
    <script>

      var signaturePad

      function setupSignatureBox(){
       
        var canvas = document.getElementById("sig");
        signaturePad = new SignaturePad(canvas);
      }

      function clearSignature(){
        signaturePad.clear();
      }

      function sendToDrive(){
        if(mname.value.length == 0){
          alert("성명을 입력하세요");
          mname.focus();
        } else {
        var imageData = signaturePad.toDataURL();
        var signame = {sigName: document.getElementsByName('mname')[0].value};
        google.script.run.receiveSiganture(imageData, signame);
        google.script.run.withSuccessHandler(getText).getTexttS(document.forms[0]);
        setTimeout('note()', 2000);
        clearSignature()
        // console.log(imageData);
        }
      }

      function note(){
        var alt = document.getElementById('mtext').value;
        alert(alt);
        document.getElementById("signatureForm").reset();
      }

      function getText(text){
        var txtTextt = document.getElementById('mtext');
        txtTextt.value = text;
      }

      document.getElementById("clearSig").addEventListener("click",clearSignature);
      document.getElementById("send").addEventListener("click",sendToDrive);
      document.addEventListener("DOMContentLoaded",setupSignatureBox);
    </script>

  </body>
</html>

원본에서는 1개의 css 파일과 2개의 js 파일을 참조토록 하고 있었다.

하지만 굳이 디자인이 복잡할 필요가 있는게 아니라서 과감히 삭제했다.

그리고 꼭 필요한 서명용 js 파일을 확인하고, 원본 사이트에 들어가 가장 최신의 스크립트로 교체하였다.

 

github에서 배포되고 있으며, 확인결과 상업적 사용까지 무료인 것을 확인하였다.

https://github.com/szimek/signature_pad

 

GitHub - szimek/signature_pad: HTML5 canvas based smooth signature drawing

HTML5 canvas based smooth signature drawing. Contribute to szimek/signature_pad development by creating an account on GitHub.

github.com

그리고 이를 웹에서 링크로 사용할 수 있도록 제공하는 url은 위와 같다.

 

사실 gemini에게 물어보면 굳이 링크에 있는 스크립트를 사용하지 않아도 이미지를 그릴 수 있는 소스를 만들어준다.

 

1. Code.gs

// 그리기 기능
function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html;
}

// 지우개 기능 (선의 색을 흰색으로 설정)
function erase() {
  ctx.strokeStyle = 'white';
  // 드로잉 로직과 동일하게 사용
}

 

2. index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>

    성명: <input type="text" name="ur_name" id="ur_name"><br><br>
    <input type="hidden" id="n_text" name="n_text">
    <canvas id="myCanvas" style="background-color: #e0e0e0; border: 1px solid black; width: 500px height: 300px;"></canvas>
    <button id="saveButton">저장</button>
    <button id="clearButton">지우기</button>

  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

  function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }

  function draw(e) {
    if (!isDrawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    [lastX, lastY] = [e.offsetX, e.offsetY];
  }

  function stopDrawing() {
    isDrawing = false;
  }

  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mouseout', stopDrawing);

  // 터치 이벤트 추가 (모바일 지원)
  canvas.addEventListener('touchstart', startDrawing);
  canvas.addEventListener('touchmove', draw);
  canvas.addEventListener('touchend', stopDrawing);

  // 지우기 버튼 클릭 이벤트 처리
  const clearButton = document.getElementById('clearButton');
 
  clearButton.addEventListener('click', () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });

  </script>
</body>
</html>

 

처음의 드로잉처럼 자연스럽진 않지만, 그래도 웬만큼 흉내는 된다.

이걸 다시 세세한 부분을 손봐야하는데, 귀찮아서... ㅡ.ㅡ

반응형
저작자표시 비영리 동일조건

'[정보] IT정보&활용' 카테고리의 다른 글

PDF 파일 합치기(수정)  (1) 2024.11.01
[구글 Apps Script] PDF로 출력하기  (0) 2024.10.23
컴퓨터 예약 종료 배치파일(.bat) 만들기  (0) 2024.06.21
yt-dlp를 쉽게... 배치파일(bat) 만들기  (0) 2024.05.29
한글, ( )안의 글자만 모양 바꾸기  (0) 2023.03.30
[楞嚴] 생각 나누기/[平] 사회조사와 데이터분석 2024. 7. 28. 00:22
,

구글 스프레드 시트로 데이터 분석하기

반응형

구글 스프레드 시트를 이용해 데이터를 분석할 수 있도록 만들어 보았습니다.

 

2024.05.27 - [[楞嚴] 생각 나누기/[平] 사회조사와 데이터분석] - Excel로 통계분석하기 #3

 

Excel로 통계분석하기 #3

Excel(엑셀)은 데이터 분석을 위해, 추가기능을 통해 분석도구를 제공하고 있다.2021.11.07 - [[정보] 복지 이야기/[福] 복지 배우기] - Excel로 통계분석하기 #1 Excel로 통계분석하기 #1굳이 비싼 통계 프

welfareact.net

이전에도 엑셀로 통계분석하는 파일을 만들기도 하였지만, 해당 파일은 결측값이 있는 경우에 대한 반영이 정확히 되어 있지 않습니다.

 

이번 버전에서는 결측값에 대한 처리를 SPSS의 결과 값과 비교하면서 보완을 해보았습니다.

 

https://docs.google.com/spreadsheets/d/1bvD_d5KbLt4yeyXHhg6FfbowdwjgjQHWTroWbvNYyag/edit?usp=sharing

 

데이터 분석

목차 구글 스프레드 시트로 데이터 분석하기 by,정수홍, jshever@hanmail.net <a href="http://welfareact.net/">https://welfareact.net</a> update 2024. 7. 27. 목차,DATA set,활용 <a href="#gid=1653135853">영가설 기각의 의미</a>,<a

docs.google.com

 

현재 모수검정 중 구현이 가능한 부분은 완료한 상태이며,

추가로 비모수검정인 순위상관분석과 카이제곱검정은 어떻게 하면 좋을지 검토 중에 있습니다.

추가로 비모수 검정인 순위상관분석과 카이제곱검정을 추가하였습니다.(2024. 9. 1)

 

혹시 오류가 있다면 알려주시면 반영해보겠습니다.

이 문서의 활용은 Data Set에 분석할 데이터를 입력하시면 됩니다.

직접 수식을 수정해보시려면 "사본 만들기"를 하셔 테스트해보세요~

반응형
저작자표시 비영리 동일조건

'[楞嚴] 생각 나누기 > [平] 사회조사와 데이터분석' 카테고리의 다른 글

다중응답에 대한 카이제곱(χ²) 검정 방법 by SPSS  (0) 2024.06.02
Excel로 통계분석하기 #3  (0) 2024.05.27
알아두면 쓸모있는 통계관련 잡학상식  (0) 2023.12.11
표본오차(sampling error)  (2) 2023.11.01
리커트(Likert) 척도는 서열척도인가?  (0) 2023.11.01

티스토리툴바