[個人開発]スクラッチの楽譜を作成するWebサービスリリースしました
スクラッチの楽譜作成アプリ Visible Scratch Skillz をリリースしました。
フィヨルドブートキャンプ の卒業制作としてこのサービスを作りました。
何ができるのか
- スクラッチの楽譜を作成し、作成した楽譜を画像にエクスポートすることができます。
- トリック名、パターン、拍の長さを選んで追加していくことで簡単に楽譜を作ることができます
- ログイン無しでも作成することができます
ログインして利用すると以下の機能が使えるようになります
- 作成した楽譜の保存(画像用のURLが生成されます)
- 保存した画像のURLをワンクリックでクリップボードにコピー
- 保存した画像のembedタグをワンクリックでクリップボードにコピー
| 作成画面 | ユーザーページ |
|---|---|
 |
 |
技術スタック
- バックエンド
- Ruby on Rails 6.1.4
- Ruby 3.0.2
- フロントエンド
- Vue.js 3.1.5
- Konva.js 8.1.1
- CSSフレームワーク
- Bulma
- インフラ
- AWS EC2
- RDS(PostgreSQL)
- Amazon Route 53
- Amazon S3
- デプロイ
- GitHub Actions
- Capistrano
インフラ構成図
RailsとVue.jsを使用したアプリで、楽譜の作成機能はKonva というライブラリを使ってcanvasタグで描画しています。
作成した画像はActive Storageを使ってAmazon 3Sに保存しています。
本番環境のインフラ構築はAWSで行い、GitHub ActionsとCapistranoを使用してデプロイの自動化をしました。
作った経緯
毎日プログラミング学習ばかりしていたので、勉強の合間にスクラッチの練習して気分転換をしていました。昔ビートジャグリングの練習していた時期があったんですが、スクラッチはあまりやっていなかったため少しの知識とスキルがある程度です。どうせならちゃんとやりたかったのですが、あまり時間を割くわけにはいかないので、効率よく上達できるよう紙に楽譜を書いたりしながら練習していました。
拍を表現するのに手書きだと定規などできっちり線を書いていくのは大変だし、メモ紙に書いてしまうので結局捨てることになってしまう。かといって図形作成ソフトみたいなので作るのも面倒臭そうだなと思って自分でアプリを作ることにしました。
制作中にハマったところ
- 技術検証
- 最初はsvgの画像ファイルを用意してそれを組み合わせていくことで楽譜を作ろうとしていましたが、かなり効率が悪く実装もできなさそうだったのでKonva.jsで実装することになりました。かなり時間を使ってしまったので技術検証の重要性を痛感しました。
- 楽譜作成機能
- ユーザーが選んだトリック名や拍の長さによってJavaScriptで計算によって線を描画しているんですが、線の追加に加えて削除機能など多くのことに同時進行で取り組んでしまい手戻りが多くなってしまい実装が進まないことがありました。タスク分割をして1つずつ対応していくことで全体の機能を実装することができました。
- 作成した画像の保存
- 作成した画像をフォーム使用せずActive Storageで保存する必要があったのですが、調べてもなかなか似たようなことをやっている例が無く苦労しました。別記事にまとめました。
- レスポンシブ対応
- CSSフレームワークのBulmaを使っていたのですが、自分が想定していないstyleが当たったりすることが多くレスポンシブ対応だけで結構時間がかかってしまいました。画面数が少ないので自前でCSS書いてもよかったかもしれません。
- デプロイ
- 今回本番環境にデプロイするのは初めてで、軽い気持ちでせっかくなのでAWSでやろうと思っていたんですが環境構築はかなり大変でした。エラーログを見ながら解決していき、本番環境で実際に動いているところを見れたときは達成感凄かったです。インフラ周辺の勉強にもなったのでやってよかったと思います。
- デプロイの自動化
- また軽い気持ちでCapistranoとGitHub Actionsで自動デプロイしようと思いやってみたんですがそれぞれかなりハマってしまいました。時間はかかりましたがmainブランチにマージしただけで本番環境に反映されるようになったので、デプロイ作業の時間をスクラッチの練習時間に当てられるようになりました。
最後に
開発を始めてからデプロイするまでずっと苦戦してしまうというのは全く想定外でしたが、勉強になったことも多くいい経験になりました。困難に数多く直面したことで自分で解決する力がより一層ついたと思います。
進捗が無い日が続いたときはモチベーションが下がってしまいましたが、自分で使いたいものなこともあってなんとか持ちこたえることができました。フィヨルドブートキャンプの仲間やメンターの方々の存在も大きかったと思います。独りでやってたら多分どこかで投げ出してました。
自分で使ってみましたが便利です。とくに三連符や裏拍が絡んでいるとリズムのとり方難しいですが、視覚化することでかなりイメージしやすくなりました。まだ増やしたい機能もあるので、自分のスクラッチのスキルとともにこのサービスも進化できたらいいなと思います。
このサービスを使ってみて感想、要望などありましたらTwitterの DM やハッシュタグ #VisibleScratchSkillz でお願いします。
感想を中心にブログを書いたのでよければこちらも読んでいただけると嬉しいです。
Discussion