기트 서버를 탑재한 악보 공유 WEB 서비스를 만들었습니다.

공유 악보를 위한 WEB 서비스 만들기
개요
'공유 악보'서비스를 만들었다.
기존 서비스와 다른 점

기본적으로 코드로 악보를 묘사한다

기트 서버가 탑재돼 있어 악보 오류 수정 등이 용이

아티스트 정보와 노래 정보 정리 가능

예: "매서운 시우""TK from 매서운 시우""Ling tosite Sigure"어느 것...?

번역 기능 있음

그걸 만들 때 어려운 점, 신경 쓴 점, 사용한 기술 등을 정리하고 싶었어요.
※ 어휘량 부족
alphaTab 당신의 은혜는 매우 큽니다.
자기 소개

대학 3학년생

도쿄 도내에 산다

WEB 엔지니어

처음 뵙겠습니다.나는 주로 WEB 시스템의 개발을 진행한다.
프로그래밍은 대학 1학년 때 RailsTutorial에 입학했다.
지금은 주로 Rails와 React를 개발하고 있습니다.
이번에 사용한 기술
STAVE Editor
STAVE Editor 개요
STAVE Editor는 악보를 설명하는 데스크톱 응용 프로그램입니다.

간단하게 설명할 수 있는 알파텍스

를 채택

자바스크립트로 기술할 수 있음

Git 관리

STAVE Editor 기술
STAVE Editor 일정 알파탭에서 제공하는 알파텍스는 Javascript를 통해 이동합니다. Node.js와 Electron과 React를 잘 조합했어요. UI에서 Giit 처리 가능 STAVE Editor 전망 알파텍스의 라인 기능 UI 업데이트 STAVE Web STAVE 웹 개요 STAVE 웹은 알파텍스 악보를 공유하고 표시하는 WEB 앱이다. Giit Server 탑재 재생 가능한 알파텍스 표시 노래, 앨범, 가수, 밴드 등의 정보를 정리할 수 있다 STAVE 웹 기술 Giit Server를 갖추고 push 후 Nginx와 Rails(devise)를 통해 Basic 인증을 받습니다. STAVE 웹 공략 Nginx와 Rails를 결합한 devise는 Git Push에서 Basic 인증을 받았습니다. GraphiQL을 사용해 보았습니다. 기존 악보 업로드 사이트와 차이를 내기 위해 노래 정보, 아티스트 정보, 밴드 정보를 올바르게 정리할 수 있도록 디자인했다. STAVE 웹 비전 브라우저에서 STAVE Editor를 사용합니다.(JS에서 JS 스크립트를 실행할 수만 있다면) UI 업데이트 알파텍스 이외에도 올릴 수 있어요. git push에서 확장자를 검사하고 부적합한 파일을 삭제합니다 git 파일을 외부 저장 서비스에 저장 CI/CD
기술 담화
React+Typerscript+VScode 대단하다.
장점

다른 JS 프레임워크에 비해 모델이 더 효과적(감각적)

Vue(3 모름)나 Anglar보다 체형이 더 효과적

React도 JSX 속성에 전달되는 값 등을 엄격히 검사한다

결점

JS 파일에 CSS 파일을 가져오는 것이 번거롭다

Typescript를 지원하지 않는 봉인을 사용할 때 기존의 유형 시스템에 적응하면서 조립하는 것이 번거롭다

React Component+TypeGenerics 대단합니다.
상황에 따라 어쨌든 대단하다.여러 가지 데이터 유형 중에서 구성 요소를 반복적으로 사용하는 것이 가장 강하다고 생각합니다.
JS의 선택적 연산자는 먼저 사용하면 되는 것이 아니다
Type script의 "undefine 및 null이 포함될 수 있음"에 대한 경고는 어쨌든 선택 연산자를 추가하는 것은 좋지 않습니다.
특히 GraphiQL과 종점이 많은 REST, JS 프레임의 구성 부분이 proops의 통형 계전기가 많을 때 매우 중요하다.
GraphQL + devise_token_auth의 조합을 짜려고 해요.
REST API나 GraphiQL의 디자인에 보내야 했는데
하지만 GraphisQL로 제목을 짓는 칭호와 인증을 하는 스마트한 방법은 떠오르지 않는다.
결국 인증이 필요 없는 요청은 그래픽QL로, 인증이 필요한 요청은 REST로 바뀌면서 기분이 나빠졌다.
다국어 지원
지금까지의 악보 공유 서비스는 예술가의 기술이 다르고 곡명의 오자, 공간의 혼입 등이 많아 검색을 걸 때 불편하다.
또 유튜브, 스팟ify, 아이튠즈, 위키백과 등 외부 사이트와 협업할 때 다음과 같은 문제가 발생했다.

예술가의 이름과 곡명은 국가에 따라 다르다

위키백과의 URL은 국가가 결정한다

아이튠즈의 노래 제목은 국가에 따라 다름

이 문제들을 쉽게 해결할 수 있었던 것은 모빌리티 덕분이다!
GithubActions dispatch_이벤트 편의성
GiithubAction Dispatch이벤트를 사용해 보았습니다.
창고가 업데이트되었을 때, 이 창고를 가진 부모 창고에 대한 인용을 업데이트합니다.
일부러 부모님 창고를 열었는데, 아래의 명령을 집행하는 것은 매우 번거롭다. 다행이다

git submodule update 
git add 
git commit 
git push

전망하다
사실 Stave Web/Editor뿐만 아니라 Stave Effector의 원형도 제작되어 있습니다.브라우저의 WEB 오디오 API를 사용해 기타 등의 효과기를 가상으로 제작한 것이다.나도 이쪽 개발을 하고 싶어.
저는 개인적으로 코드 기반 악보 데이터를 저장하면 다양한 서비스를 펼칠 수 있다고 생각합니다.

개발자에게 API를 방출함으로써 머신러닝 작곡

카라오케 서비스

악기 학습 서비스

작곡과 악기 배우기

음악계의 진흥
...etc

디자인은 했지만 그걸 공개하기에는 너무 이른 것 같아요.
저작권 문제를 해결하기 위해서는 창의 시스템 개발과 UI 업데이트가 필수적이다.
또 각종 음악 저작권 단체와 종합 계약도 필요하다.
그래서 언제 depro를 할 수 있을지 생각하고 있어요!
여기까지 읽어주셔서 감사합니다!
질문이 있으면 아래 트윗으로 가볍게 메시지를 보내주세요.
(일자리를 찾는 중)
Twitter