누구나 트위터에 포인트를 찍을 수 있는 서비스를 만들었어요.

올해도 드디어 왔습니다Kso 응용 프로그램 추가 일정. 첫날 다음날@nabettu을 제가 맡겠습니다.
올해로 5년째인 것 같아요.정말?
과거의 쓰레기 응용
만든 물건
올해는 이거!
100Pixel Art 같은 점화를 쓸 수 있는 웹 서비스입니다.

무슨 서비스
도화문자의⬜ 🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛9가지 색상의 사각형으로 점을 그릴 수 있습니다.
10에 10을 더하면 100점만 9가지 색상 한정으로 9^100가지 패턴만 가능한 편집입니다.
캔버스 크기는 100점, 사용하는 색상은 9가지 색상으로 스팸 적용의 한계!
서비스 특징
Finish 버튼을 누르면 서비스의 특징으로 편집이 완료되면 그림 문자이기 때문에 직접 문자로 복사할 수 있습니다.
완성되면 바로 트위터에 글로 올릴 수 있다는 얘기죠!

그림으로 어디에 저장하지 않아도 돼요. 그렇게 공유하면 편리해요...
(저기, 생각보다 완전 스팸 앱이 아닐 수도 있는데...)
기술적인 말

React(라우팅은 없지만 Next.js만 사용)

Cloudflare Pages

Cloudflare Pages는 매우 편리합니다. 모두 사용할 수 있습니다!Netlify에 아시아 지역이 없어 슬퍼하는 사람에게 추천합니다.
힘든 곳
Canvas를 사용하지 않고 Dom에서 수행됨을 나타냅니다.
점을 클릭하여 그림 문자를 전환하는 것은 온클릭뿐이지만 드래그한 후에도 그림 문자를 잘 반영할 수 있기 때문에 시간이 좀 걸린다.
컴퓨터 상황: 마우스 동작

캔버스에서 하강을 클릭한 후 로고를 ON

에 놓는다

마우스 클릭 후 마커 닫기

마우스 커서가 캔버스에서 밖으로 나갈 때 닫기

캔버스에 ON으로 표시된 상태가 드래그되면 문자 변경

이런 형식으로 이루어졌다.
핸드폰의 상황: 터치 동작에 대해
기본 탭은 PC와 모양이 같지만 터치하면서 이동(터치 이동)은 같은 설치에서 이동할 수 없다.
터치 이동 중, 활동은 접촉을 시작하는dom에서 발화한다

터치 이동을 통해 다른 컴포넌트로의 이동이 감지됨

이동한 좌표 확인

자화포 전체의 상대 좌표 검사 10*10 중 어느 위치

좌표 위치를 바꾸는 문자

이런 작은 계산을 추가하여 실현하였다.
(····원래 JS로 만든 거라 도서관에 갈 수 있어요! 웃음)
Android에는 사각형 색상 문자가 없습니다.
이거 귀찮아서 노트 콜로 이모지를 넣었어요.
※Apache2.0 라이센스.
이상은!
Kso Appadvent 캘린더 2021 다음 날, 100 Pixel Art!
내일은 @alclimb선생님입니다.×바보✨」저 이상한 앱들 잘 부탁드려요!