みんなの「作ってみた」

弾きたい曲を最短で弾けるようになるサービス Rinaria を作った

2018/12/20

Hassan
Hassan
Twitter で会いましょう

何を作ったか

弾きたい曲を最短で弾けるようになるサービス Rinaria を作りました。 

https://rinaria.co/

なぜ作ったか

社会人は日中は仕事をしているため、中々趣味の時間が取れない世の中です。

しかし、そんな中で趣味も上手だったらかっこいいですよね。

自分の場合はその対象が楽器で曲を弾くことでした。

そこで、そもそも何の曲を弾きたいんだっけな??から考え始め、弾きたい曲を洗い出し (楽しい)、まずは練習の期限を設定し、期限までの残り日数を把握できるようにしようと考えました。

弾きたい曲を登録して、期限を設定して、期限までに弾けるように練習を続けよう!と思わせるのが今現在、提供できる価値(最短ルート)です。

使ってみてどうか

直近で言うと、 Rinaria で設定した期限(今回は60日)で、60日の間に0から1曲をひたすら練習して、動画にすることが出来ました。


東方プロジェクトから Bad Apple!! という楽曲です。

個人的にはもう少しクオリティを上げれたけど、 Rinaria での期日は迫っていたというジレンマがあり
これはどうしたもんか。というのが1曲弾いてみて分かった課題です。

使っている技術

Rinaria を作成するにあたって最低限必要な機能と使っているライブラリ名を上げていきます。

無理に新しい技術を使わず、慣れている技術を使いました。(rails new からリリースまでの所要時間は2日です)

言語・フレームワーク

Ruby 2.5.1 / Rails 5.2.1

View(HTML テンプレート)

slim / slim-rails

とても簡潔に書くことのできるテンプレートです。

UI フレームワーク

Adminlte 3

管理画面用のUIフレームワークです。
Adminlte3の良いところは、各UIの記述方法だけではなく、ページ単位での使用例があるところです。

Googleのデベロッパーツールの Elements から Copy → Copy OuterHTML をして html2slim を使って Slim ファイルに埋め込めばそれなりのものはすぐ出来ます。

これは利用者としてとても体験が良いので、全てのUIフレームワークでページ単位での Example を用意してほしい気持ちでいっぱいです。(素晴らしいUIフレームワークは他にたくさんあります)

ログイン周り

Devise / Twitter Omniauth

この辺りは定番です。

Devise + Omniauth の実装例

権限

Pundit

Devise 等の認証ライブラリでは authenticate_user! のようなメソッドで認証のチェックをしますが、認証済みのユーザーがリソースに対してアクセス可能かどうかをチェックしてあげる必要があります。

実装例

インフラ

Heroku / S3 / Redis / Cloudfront / PointDNS

Heroku は Tokyo リージョンが無いため日本からのアクセスは遅い印象がありますが、画像や JS/CSSを S3 に置いて CDN から配信するようにすればそこまで致命的にはなりません。

Rails の場合は assets_sync を使って実現できます。以下が参考になります
http://rock-and-hack.blogspot.com/2013/02/railsassetss3cloudfront.html

あと Heroku のアドオンである PointDNS を利用すれば、手軽に Naked domain(www 無しのドメイン)を設定できます。

低コストなため使わない手はないでしょう。

エラー通知

Rollbar / rollbar-gem

エラー通知系のサービスは色々あるのですが Rollbar を使っています。
Slack 連携をしてエラーが発生したらすぐ気付けるようにしています。

その他

その他よく使うライブラリとしては、View からロジックを切り離すために active_decorator 、 ページネーションは kaminari、レコードが新規作成 / 削除された時のカウントアップ・ダウンに counter_culture、 管理画面は administrate 、ファイルアップロードが必要な場合は carrierwave ( Rails 5.2 からは ActiveStorage 使いたい!)

だいたいこれらを利用しています。

個人開発についての所感

新しい技術を学ぶことと、作りたいものを作ることは分けて取り組む

実は途中まで Vue.js + Rails API で作成していたのですが、SEOとかOGP周りの調査・実装で手間かけたくないなというのもあり素の Rails で作り直しました。個人開発では、慣れている技術で素早く機能開発をすることに注力するのが良いです。

自分が抱える課題を解決するサービスを選ぶ

誰かの課題を想像して作ったけど、その後何もせずに終わりが一番虚しいです。

自分で作って使ってを繰り返し、必要な機能を充実させて、 SEO を頑張って、見つけて使ってもらうところまで持っていきたいですね。

アイデアは書き出しても良いが、タスク管理はしない

タスク管理をしないとストレスがありません。

アイデアを Issue に書き留めておいて、作りたい気持ちになったら作るで良いと思います。

サービスの今後の展望

さて、最短で曲が弾けるようになるためには耳コピは外せないでしょう。

耳コピ「209番道路」byゆゆうた兄貴
https://www.youtube.com/watch?v=BneiFVRDXfk

この動画を見てください。
最終的にはこのような芸当ができるようになりたいし、できる人が増えたらいいなという思っています。

そのためには、たくさんの曲を体で覚えつつ、コード進行をも容易に身に付けれることが大切です。

それができるようなサービスになったらいいなぁという思いです。