楽譜共有WEBサービスを作成した

概要

「楽譜を共有する」サービスを作った。
既存サービスと異なる点

基本的にコードで楽譜を記述する
Gitサーバーが搭載されているので、楽譜の間違いなどを修正することが容易
アーティスト情報や曲情報を整理できるようになっている
- 例) 「凛として時雨」「TK from 凛として時雨」「Ling tosite Sigure」どれ...?
翻訳機能がついている

それを作るにあたって、困ったこと、工夫した点、使用した技術、などをまとめたいと思います。
※語彙力ないです
alphaTab様の恩恵が非常に大きいです

自己紹介

大学3年生
都内在住
WEBエンジニア

はじめまして。私は主にWEB系の開発を行っています。
プログラミングは大学1年生の時にRailsTutorialに入門しました。
今は、RailsとReactをメインで開発を行っています。

今回使用した技術

STAVE Editor

STAVE Editor 概要

STAVE Editorとは、楽譜を記述するデスクトップアプリケーション

シンプルに記述が可能なalphaTexを採用
Javascriptで記述することが可能
Git管理が可能

STAVE Editor 技術

STAVE Editor 工夫

alphaTab様が提供しているalphaTexをJavascriptで動くようにした。
Node.jsとElectronとReactをうまく組み合わせた
UIでGitを扱える

STAVE Editor 展望

alphaTexのLint機能
UIのアップデート

STAVE Web

STAVE Web 概要

STAVE Webとは、alphaTexの楽譜を共有、表示するWEBアプリケーションです。

Git Serverを搭載
alphaTexを表示、再生が可能
曲、アルバム、アーティスト、バンドなどの情報を整理することが可能

STAVE Web 技術

Git Serverを備えていて、pushするとNginxとRails(devise)でBasic認証を行うようになっています。

STAVE Web 工夫

NginxとRailsのdeviseを組み合わせてGit Push時にBasic認証を行った
GraphQL使ってみた。
既存の楽譜アップロードサイトと差異をつけるために、曲情報、アーティスト情報、バンド情報を正しく整理できる設計になっている。

STAVE Web 展望

ブラウザでSTAVE Editorを使えるようにする。(JSでJSスクリプトの実行さえできればいける)
UIのアップデート
alphaTex以外もアップロードできるようにする
git push時に拡張子をチェックし、不適切なファイルは取り除く
gitファイルを外部のストレージサービスに保存する

CI/CD

技術話

React + Typescript + VSCodeはすごい

メリット

ほかのJSフレームワークに比べて型が効いてる(気がする)
Vue(3は知らん)やAngularに比べて、型がよく効く
JSXの属性に渡す値などもReactは厳密にチェックしてくれる

デメリット

JSファイルにCSSファイルをインポートして要素に適応させるのは面倒くさい
Typescriptに対応していないパッケージを使用する際に、既存の型システムに適応させながら組み込むのがめんどくさい

React Component + Typescript Genericsすごい

場合によりますが、とにかくすごいです。コンポーネントを様々なデータ型で使いまわしたい場合最強になります

JSのオプショナル演算子はとりあえず使えばいいわけではない

Typescriptの「undefineやnullを含む可能性がある」という警告に対して、とりあえずオプショナル演算子をつけるのはあまりよくないという話です。
特に、GraphQLやエンドポイントの多いREST、JSフレームワークのコンポーネントがpropsのバケツリレーを多くする場合に非常に重要になります。

GraphQL + devise_token_authの組み合わせをどうにかしたい

本来であれば、REST APIかGraphQLのどちらかの設計に寄せるべきです。
しかし、GraphsQLでヘッダーの称号や認証を行うスマートな方法が思いつきませんでした。
結局、認証のいらないリクエストはGraphQL、認証のいるリクエストはRESTという構造になってしまい、気持ち悪くなってしまいました。

多言語対応した

今までの楽譜共有サービスでは、アーティストの記述の違いや、曲名の誤字、スペースの混入などが多く、検索をかける際に不便でした。
また、youtubeやspotify,itunes,wikipediaなどの、外部のサイトと連携を行う際に以下のような問題が起きました。

アーティスト名や曲名が国によって異なる
wikipediaのurlが国によってことなる
itunesでの曲タイトルが国によって異なる

これらの問題を容易にに解決することができたのはmobilityのおかげです！

GithubActions dispatch_event 便利

GithubActionsのdispatch_eventを使用してみました。
リポジトリが更新された場合、このリポジトリを所有する親リポジトリの参照を更新するものです。
わざわざ親リポジトリを開いて、下記のコマンドを実行するのはめんどくさかったので、よかったです

git submodule update 
git add 
git commit 
git push

展望

実はStave Web/Editorだけではなく、Stave Effectorのプロトタイプも作成しています。これは、ブラウザのWEB Audio APIを使用して、ギターなどのエフェクターを仮想的に作るものです。こちらの開発もしたいと思っています。

個人的には、コードベースの楽譜データを貯めると、いろんなサービスに展開することができると考えています。

デベロッパー向けにAPI解放することで機械学習による作曲ができる
カラオケサービス
楽器の学習サービス
作曲や楽器への学習
音楽業界の振興 ...etc

デプロイしたのですが、それを公開するのはまだ早いと感じています。
著作権の問題を解決するための窓口のシステム開発や、UIのアップデートは必須です。
また、様々な音楽著作権団体と包括契約を行う必要があるでしょう。
なので、いつかデプロイできたらなーと考えています！
ここまで読んでいただきありがとうございました！
なにかありましたら、下記のTwitterから気軽にメッセージをください。
(就活してます)
Twitter

Gitサーバーが搭載された楽譜共有WEBサービスを作成した