검색결과 리스트
[정보] IT정보&활용에 해당되는 글 90건
- 2024.08.27 [구글 스프레드 시트] 서명받기
- 2024.06.21 컴퓨터 예약 종료 배치파일(.bat) 만들기
- 2024.05.29 yt-dlp를 쉽게... 배치파일(bat) 만들기
- 2023.03.30 한글, ( )안의 글자만 모양 바꾸기
- 2022.10.18 [엑셀] 파일명 구하기
글
[구글 스프레드 시트] 서명받기
appsscript활용
4 대상자 검색,수정,추가하기1 동영상 대상자 검색,수정,추가하기2 동영상 대상자 검색,수정,추가하기3 동영상 대상자 검색,수정,추가하기4 동영상 대상자 검색,수정,추가하기5 동영상 대상자 검
swsp.or.kr
여기에 가보면 구글 스프레드 시트 의 앱 스크립트를 활용한 다양한 사례들을 보여주고 있다.
그 중 주목한 것 하나가 바로 "서명받기"
후원신청서나 프로그램 참가 신청을 받을 때에도 유용할 거 같아서 좀더 자세히 살펴보았다.
소스는 다 오픈되어 있어 하나하나 뜯어보면서 나에게 필요한 방식으로 수정해보았다.
여기에 입력하면,
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 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">
<h2>성함을 입력하시고 아래 패드에 서명해 주세요.</h2><br><br>
성명: <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 src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.3/dist/signature_pad.umd.min.js"></script>
<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정보&활용' 카테고리의 다른 글
| 컴퓨터 예약 종료 배치파일(.bat) 만들기 (0) | 2024.06.21 |
|---|---|
| yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
| 한글, ( )안의 글자만 모양 바꾸기 (0) | 2023.03.30 |
| [엑셀] 파일명 구하기 (0) | 2022.10.18 |
| 사용자 프로필 경로 확인하기 (0) | 2022.10.18 |
설정
트랙백
댓글
글
컴퓨터 예약 종료 배치파일(.bat) 만들기
컴퓨터를 켜놓은 채 나가야하는 경우, 예약 종료 기능을 사용하면 편리하겠다 생각해본 적 없는가?
cmd 창을 띄우고, shutdown 명령어를 사용하면 되지만, 이런 명령어 입력에 익숙치 않다면, 배치 파일(.bat)을 만들어 두면 유용하게 사용할 수 있다.
메모장을 열고 아래 초록색 박스 안의 내용을 복사해 붙여넣으면 된다.
이후 저장할 때 파일 형식을 "모든 파일(*.*)"을 선택한 후, 확장자를 bat로 해서 저장하면 된다.
| @echo off echo ============================================ echo 예약 종료 또는 예약 종료 취소를 실행합니다. echo ============================================ @set /p onoff="예약종료=1, 예약종료취소=2:" if %onoff%==1 goto on if %onoff%==2 goto off : on echo 예약 종료 시간을 설정합니다. echo ============================================ @set /p poweroff=몇 시간 뒤에 종료할까요? : set /a offhour=%poweroff%*3600 shutdown /s /t %offhour% goto end : off echo 예약 종료를 취소합니다. pause shutdown /a goto end : end echo. echo 설정이 완료되었습니다. echo ============================================ pause |
사실 필요한 명령어는
shutdown /s /t "종료까지 필요한 시간(초)"라는 명령어 한줄이다.
하지만 이 경우 초단위로 설정하게 된다.
익숙한 시간 단위로 변환할 수 있도록 명령어를 수정했고,
한번 설정하면 이걸 해제해야지만 새로 설정이 가능하다.
하여 예약종료를 취소하는 메뉴까지 추가해서 파일을 구성해보았다.
이때 주의할 점, 반드시 인코딩을 ANSI로 해야 한글이 깨지지 않는다.
모르겠으면 아래 첨부파일을 다운 받아서 그냥 실행해도 된다.
'[정보] IT정보&활용' 카테고리의 다른 글
| [구글 스프레드 시트] 서명받기 (0) | 2024.08.27 |
|---|---|
| yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
| 한글, ( )안의 글자만 모양 바꾸기 (0) | 2023.03.30 |
| [엑셀] 파일명 구하기 (0) | 2022.10.18 |
| 사용자 프로필 경로 확인하기 (0) | 2022.10.18 |
설정
트랙백
댓글
글
yt-dlp를 쉽게... 배치파일(bat) 만들기
컴퓨터로 업무를 보다보면, 단순 반복 등 간단한 업무는 자동화할 수 없을까 하는 생각을 하게 된다.
https://github.com/ 같은 곳에서 유용한 프로그램을 발견했을 때도 마찬가지이다.
예를 들면, yt-dlp 같은 것이다. https://github.com/yt-dlp
yt-dlp는 Windows용 실행파일을 제공한다.
https://github.com/yt-dlp/yt-dlp?tab=readme-ov-file#installation
하지만 단순한 더블클릭만으로는 실행되지 않는다.
즉 간단한 DOS 명령어를 알지 못한다면 그림의 떡인건 마찬가지이다.
이때 이를 위한 배치파일(bat)을 만들어두면 아주 유용하다.
우선 이 실행파일은 cmd 창에서 실행해야하며, 프로그램이 있는 위치(경로)로 이동해야하고, 다운로드할 링크 주소를 별도로 입력해주어야 한다.
yt-dlp
yt-dlp has 13 repositories available. Follow their code on GitHub.
github.com
| C:\Users\내계정>_ C:\Users\내계정>cd C:\yt-dlp C:\yt-dlp>yt-dlp.exe https://youtube.com/watch?v=a123456 |
게다가 구체적인 옵션을 부여하려면 더 복잡해진다.
생각을 단순화해보자.
1. Windows에서 더블클릭만으로 실행되었으면 좋겠다.
2. 실행하면, 친절하게 무엇을 입력할지 안내해주면 좋겠다.
자, 이제 yt-dlp.bat 파일을 만들어보자.
메모장을 열고 다음과 같이 입력한다.
| set /p url=Enter Youtube URL : yt-dlp %url% |
이제 끝났다.
이 파일을 yt-dlp.exe가 있는 폴더에 같이 저장하기만 하면 된다.
set /p url= // 입력하는 내용을 url이라는 변수에 저장
%url% // url에 입력된 값을 표현
yt-dlp %url% // yt-dlp 명령어(실행프로그램)에 더해 url이라는 변수에 저장된 내용을 자동으로 입력해준다.
-----------------------------------------------------------------------
세상에 나와 같은 생각을 하는 사람은 아주 많고, 이들은 더욱 전문적인 배치파일을 만들어 배포하고 있다.
https://github.com/edinsuta/yt-dlp-batch
GitHub - edinsuta/yt-dlp-batch: Simple batch files for simplifying basic usage of https://github.com/yt-dlp/yt-dlp (a fork of ht
Simple batch files for simplifying basic usage of https://github.com/yt-dlp/yt-dlp (a fork of https://github.com/rg3/youtube-dl) Windows .exe releases - edinsuta/yt-dlp-batch
github.com
같은 방식으로 업데이트도 만들 수 있다.
※ 참고로 배치파일의 내용은 한글도 입력이 가능하지만, 많은 경우 오류(특히 주석)가 생긴다.
그러니 최소한의 쉬운 영어로 입력할 것을 권고한다.
- (덧붙임) -------------------------------------
FFmpeg를 설치하면 더욱 좋습니다.
1. http://ffmepg.org 에서 파일을 다운받습니다.
https://ffmpeg.org/download.html#build-windows
※ 아래 두 종류 중 아무거나 받으시면 됩니다.
- https://www.gyan.dev/ffmpeg/builds/
- https://github.com/BtbN/FFmpeg-Builds/releases
2. 압축파일을 풀어서 아래 경로에 복사합니다.
C:\Program Files\FFmpeg
3. 경로(path)를 추가합니다.
- cmd 창에서 아래를 복사&붙여넣기 하셔서 실행하시면 됩니다.
set path="%PATH%";C:\Program Files\FFmpeg\bin
- (덧붙임2) -------------------------------------
현재 경로를 확인하거나 변수로 지정하는 방법
%cd%
예)
set /p current_path=%cd%
# 현재경로를 current_path라는 변수에 저장
xcopy "%cd%" "D:\" /e
# 현재 경로의 모든 파일과 (하위)폴더를 D:\로 복사
'[정보] IT정보&활용' 카테고리의 다른 글
| [구글 스프레드 시트] 서명받기 (0) | 2024.08.27 |
|---|---|
| 컴퓨터 예약 종료 배치파일(.bat) 만들기 (0) | 2024.06.21 |
| 한글, ( )안의 글자만 모양 바꾸기 (0) | 2023.03.30 |
| [엑셀] 파일명 구하기 (0) | 2022.10.18 |
| 사용자 프로필 경로 확인하기 (0) | 2022.10.18 |
설정
트랙백
댓글
글
한글, ( )안의 글자만 모양 바꾸기
'[정보] IT정보&활용' 카테고리의 다른 글
| 컴퓨터 예약 종료 배치파일(.bat) 만들기 (0) | 2024.06.21 |
|---|---|
| yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
| [엑셀] 파일명 구하기 (0) | 2022.10.18 |
| 사용자 프로필 경로 확인하기 (0) | 2022.10.18 |
| 파워포인트 등에서 강조점 쉽게 입력하기 (0) | 2022.09.30 |
설정
트랙백
댓글
글
[엑셀] 파일명 구하기
간혹 엑셀을 하다보면, 경로 문제 등의 이유로 파일명을 알아야 하는 경우가 있다.
1. 현재 엑셀 파일의 경로, 파일명, 시트명을 알고 싶다면?
=cell("filename")
2. 현재의 파일명만 알고 싶다면?
=MID(LEFT((CELL("filename")),FIND("]",(CELL("filename")))-1),FIND("[",(CELL("filename")))+1,LEN((CELL("filename"))))
3. 현재의 시트명만 알고 싶다면?
=MID(CELL("filename"), FIND("]", CELL("filename"))+1, LEN(CELL("filename"))-FIND("]", CELL("filename")))
4. 1번의 출력값에서 특정 문자가 몇번째인지 찾으려면?
예를 들어 \ 기호를 찾으려면
=FIND("\", 1번 출력값이 있는 셀, 1)
'[정보] IT정보&활용' 카테고리의 다른 글
| yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
|---|---|
| 한글, ( )안의 글자만 모양 바꾸기 (0) | 2023.03.30 |
| 사용자 프로필 경로 확인하기 (0) | 2022.10.18 |
| 파워포인트 등에서 강조점 쉽게 입력하기 (0) | 2022.09.30 |
| 사회복지시설에서 사용 가능한 무료 소프트웨어 (0) | 2022.08.31 |
RECENT COMMENT