自作Webサービス Visible Scratch Skillz をリリースしました。
スクラッチの楽譜を作成し、作成した楽譜を画像にエクスポートすることができます。
フィヨルドブートキャンプ の卒業制作としてこのサービスを作りました。
URL
https://visible-scratch-skillz.net
リポジトリ
obregonia1/visible_scratch_skillz
デモ動画
ログインして利用すると以下の機能が使えるようになります
毎日プログラミング学習ばかりしていたので、勉強の合間にスクラッチの練習して気分転換をしていました。昔ビートジャグリングの練習していた時期があったんですが、スクラッチはあまりやっていなかったため少しの知識とスキルがある程度です。どうせならちゃんとやりたかったのですが、あまり時間を割くわけにはいかないので、効率よく上達できるよう紙に楽譜を書いたりしながら練習していました。
拍を表現するのに手書きだと定規などできっちり線を書いていくのは大変だし、メモ紙に書いてしまうので結局捨てることになってしまう。かといって図形作成ソフトみたいなので作るのも面倒臭そうだなと思って自分でアプリを作ることにしました。
このサービスは使用するユーザーがかなり限定されてしまうものなので、海外の方にも使ってもらえるように全て英語で表記しました。もともとスクラッチの技名なども英語なので日本の方でも特に問題なく使えると思います。
あとはいくつかスクラッチが好きな人にはわかるような小ネタをいくつか入れてみました。
まずサービス名なんですが Invisibl Skratch Piklz というビッグネームが複数いるターンテーブリスト集団の名前を文字って付けてみました。わかりやすく例えると宇多田ヒカルとか椎名林檎とかがいるグループみたいな感じです。サービスの内容ともマッチしていて個人的にも気に入っています。
サービスのロゴも 某大会 のロゴをサンプリングしてみたり、愛用のミキサーのフォントや配色をサンプリングしてみました。凝り性を発揮してしまったせいでロゴの作成にもかなり時間かかってしまったんですが、せっかくなのでTシャツ作ってみました。
Visible Scratch Skillz Logo のTシャツ通販 ∞ SUZURI（スズリ）
今まではオーソドックスなRailsアプリの勉強をしていたので、画像を作るアプリなんか作れるんだろうか？みたいな状態でスタートしたのでどうやったら実現できるか考えたり、技術検証したりする必要があるなど苦労したことがいくつかありました。
メンターの方に相談してみたところ「canvasやsvgを使うと良さそうです〜」みたいな回答を頂いたので、色々調べてみて「基本になる画像ファイルを用意してそれを組み合わせいけばできそう」と思いやってみたのですがなかなか思うように実装できず数日間ほぼ進捗ゼロでした。
再度相談してみると「JavaScriptのライブラリを使ってcanvasを作っていくと良さそう」とのことだったので、色々探してみるとcanvasで図形などを描いたりそれを画像化できる Konva が便利そうだったのでこれを使って実装することができました。
おそらく最初相談したときにメンターの方には「ライブラリを使ってcanvasやsvgを書けば良い」という意図があったと思います。ですが自分自身がJavaScriptのライブラリの存在を知らなかったことで、画像を組み合わせて実装できそうだなーぐらいの狭い視野でしか考えることができませんでした。
あとは先日 鹿児島.mk のLTでも発表したんですが、アプリのメインである楽譜作成機能の実装にもかなり苦労しました。
自作サービス開発で成長したこと - Speaker Deck
リポジトリを作ってコードを書き始める前にタスク分割をして、GitHubのカンバンに登録していたのでそれぞれブランチを切って作業していました。そして「楽譜作成機能を実装する」という大きなタスクに取り組んでいました。同時進行で複数の作業を進めてしまったことで、色々なことを想定してしまいなかなか一通りの機能を実装することができずにまた進捗が出ない状況が続いてしまい辛かったです。
諦めて他のサービスを作ることも考えたんですが、「楽譜作成機能を実装する」というタスクを10個ほどの細かいタスクに切り分けて1つずつ対応していくことでなんとか実装することができました。
楽譜作成機能を実装ができたところであとはそこまで難しいことはないだろうと思っていましたが、作成した画像の保存をする実装でも結構詰まってしまいました。
ローカルに保存されている画像をフォームからアップロードする実装はやったことがあるんですが、今回は作成した画像を直接保存する必要があるので少し違った手順でやる必要があります。
調べてみてもフォームからアップロードする記事ばかりでなかなか参考にできるものが見つからず、実装方法がわからず途方に暮れてました。
これは画像をIOオブジェクトに変換することで実現できたんですが、実はRailsガイドにも載っているんですよね。一応読んではいたんですが、IOオブジェクトがよくわかっておらずスルーしてしまいかなりの遠回りしてしまいました。
再び自分の知識がなかったせいで「目の前に答えがあるけど、それを答えだと認識できなかった」状況になってしまったので、幅を広げて知識を増やすためにもっと勉強しないといけないなと感じました。
このあたりの実装をまとめた記事を書きました。
Vue.jsで画像を作成しRailsのActive Storageで保存する
基本的には今まで学んできたことを中心に作ってみたんですが
の2つはプラスアルファで頑張ってみました。
特にAWSでのデプロイはかなり時間もかかり苦戦しましたが、理解が浅かったインフラ周りの勉強にもなったので挑戦してみてよかったなと思います。全て自分一人でアプリを開発し、自分で環境構築をした本番環境にデプロイしたものが実際に動いていることが確認できたときはめちゃくちゃ嬉しかったです。
開発を始めてからデプロイするまでずっと苦戦してしまうというのは全く想定外でしたが、勉強になったことも多くいい経験になりました。困難に数多く直面したことで自分で解決する力がより一層ついたと思います。
進捗が無い日が続いたときはモチベーションが下がってしまいましたが、自分で使いたいものなこともあってなんとか持ちこたえることができました。フィヨルドブートキャンプの仲間やメンターの方々の存在も大きかったと思います。独りでやってたら多分どこかで投げ出してました。
自分で使ってみましたが便利です。とくに三連符や裏拍が絡んでいるとリズムのとり方難しいですが、視覚化することでかなりイメージしやすくなりました。まだ増やしたい機能もあるので、自分のスクラッチのスキルとともにこのサービスも進化できたらいいなと思います。
このサービスを使ってみて感想、要望などありましたらTwitterの DM やハッシュタグ #VisibleScratchSkillz でお願いします。
技術を中心に記事を書いたのでよければこちらも読んでいただけると嬉しいです。