楽譜管理アプリ　楽譜館

エレクトーンとは

２段の鍵盤と足鍵盤があり、様々な音を同時に出せる楽器

エレクトーンサークル

エレクトーンを通して音楽と部員同士の交流を楽しむサークル

開発の背景

部室の楽譜を把握できていない

部室にはたくさんの楽譜本があり、部員であれば誰でも見られるようになっている。

しかし、どんな楽譜を所蔵しているか全く把握できていなく、弾きたい曲があった時に一つ一つ楽譜を手に取って探さないといけなく、めちゃくちゃめんどくさかった。
また、新サークル員は好きな楽譜を１冊買ってもらえるというイベントがあるのだが、みんなで買いに行ったとき、部室にあるのかないのかわからなかった。
代表がなんかあった気がするなぁって部室の楽譜棚の写真からめっちゃ頑張って探してた笑

既存サービスがなかった

上記のような問題があったので、どうにかしたいなと思っていた。
リサーチしてみると蔵書管理のウェブサービスは発見したが、本の題名のみで、収録されている楽譜（目次）を登録する機能はなかった。
楽譜を管理するようなサービスはなさそうだった。

無いなら作ろう！

ないなら作る!
やっぱいつでもどこでもサークル員が楽譜を検索できるようにしたいよね
androidとかiphoneとかパソコンとかプラットフォームめっちゃちがうし…
webアプリだ！
何もわからんけど頑張ってみるか！
ということで重い腰を上げて頑張りました。

楽譜管理アプリ

要件

どのデバイスでも対応できるようにする
どこでも検索できる
楽譜、楽譜本の検索ができる
無料

設計

プラットホーム

web

さてさて、web知識０の人がwebアプリ開発に挑戦します。
いっちばん最初のプログラミングって何？みたいなときにウェブサービスが流行ってきて、始めようとしましたが、いきなりプロトコルとかサーバーとか出てきて全くわからなくてめっちゃくちゃ苦手意識がありました。
それからロボコンやったりとか、ゲーム作り始めたりとかしたので、あまり触れないまま難しそうなものっていう認識でした。

楽譜管理アプリを作り始める半年くらい前、NEXTjsがめちゃくちゃ人気らしいということで、一度重い腰を上げてチュートリアルをやろうとしたんですけど、２，３ステップ目で全くわからなくなって挫折しました。
そのあと初心者向けとのことでVueに挑戦しましたが、なんかよくわからなくてまたまた挫折です。　　

で、今回。

要件でどのデバイスでも、どこにいても検索できる。さらに、今後追加する楽譜が出てくるのを考えるとさすがにネイティブアプリでの実装は厳しいなと思いました。

webアプリ、頑張ってみます。

いい感じのデザイン

figma

フレームワーク

flask

サークルの友達に聞いたら簡単だとのことでflaskを選択。
序盤で何度も挫折している人でもめちゃめちゃわかりやすかった。

tailwind css

簡単なの教えてもらった。実際頭に入りやすかった。
templateが充実してるので、コピペして簡単にいい感じのデザインにできる。

データベース

sqlite
Pythonに入ってるしめちゃ簡単 postgresqlはちょっとよくわからなかった。
ファイルベースで取り扱いしやすい。Gitでバージョン管理できる。

ORM:flask-sqlalchemy
セッション管理を自動でやってくれるらしい

デプロイ

vercel
無料
renderは一定時間アクセスされないと落ちちゃうらしいこれはスリープになるだけ
読み取り専用ならdbつかえる

データベースに追加

無料で済ませるためにdbが読み取り専用になってしまったので別で行う必要があった
github actions
iosアプリ　ショートカット
楽譜の追加はスクレイピングで情報をとってきて行っている。

ショートカットでバーコードを読み取って検索をかけ、商品コードをgithubにコミットする
このコミットをトリガーにgithub actionsでデータベースに追加しdbファイルを更新する
この更新をトリガーにvercelが自動デプロイする

といった手順。これなら全部無料！

実装

システム構成

設計したものを図にした
flaskのプログラムとしてはformタグでクエリを入力してflask-sqlalchemyを使って検索、結果を反映したhtmlを返して表示という手順を記述した。

データベース

データベースはexelの上位互換らしい。
よくわかんないけどとりあえず一項目一情報を意識して作った。第1正規形ってやつらしい。
一般的に第３正規形にするのがいいらしいけどちょっとよくわからなかった。
まずはつかえればよし笑
flaskに特化？したpythonのORM、flask-sqlalchemyを使用して実装した。

データ登録

実はシステムじゃなくてデータの登録に一番手間がかかった。
200冊くらいある楽譜集、ましてや2000曲くらいある楽譜の情報を手入力なんて絶対にやりたくない。
絶対に自動で登録させたかった。

方法としてはスクレイピングで曲情報を持ってきて登録することにした。
じつはエレクトーンの楽器は確か特許とかとっている関係？で、天下のヤマハさんにしかない楽器です。
それでなのかわからないですが、エレクトーン用楽譜はヤマハから出版されていてすべてこのサイトに載っています。

詳細検索でjanコード、商品コード検索ができて詳細な情報が取得できます。これを利用しない手はありません。

バーコードを読みとる
janコードで検索をかける
商品コードを取得する
商品コードで検索をする
楽譜情報を取得する
データベースに登録する

という処理を書いてひたすら部室の楽譜集を読み込ませて登録しました。
はじめてスクレイピングしましたがとても面白かったです。正規表現にも少し触りました。

はじめ、これをopenCV、beautifulsoup４を使ってパソコンでやっていました。

もっと簡略できるんじゃないかってことで、最終的には前述したように、iosアプリのショートカットとgithub actionsを使ってバーコードを読み取るだけでデータベースに登録するようにしました。
ショートカットの方が読み取り速度が速くてめっちゃ良い。

vercelさんもpushをトリガーに自動デプロイしてくれるのでショートカットで読み取るだけで追加ができる仕組みにできた。素晴らしい。

まとめ

本文でも言っていますが、ちゃんとデプロイしました！人生初デプロイです。
更に実際に使ってもらってます！結構好評でうれしいです。

なんか困りごとを解決するプロダクトってめちゃくちゃやりがいありますよね。
作ってよかったです。

はじめての技術にたくさん触りました。

webapp
- flask
- html
  - jinja
- css
  - tailwind css
  - 生css
- database
  - sqlite
  - sqlalchemy
scrape
- beautifulsoup4
- 正規表現
other
- vercel
- github api
- github actions
- (iosショートカット)
- (openCV)

技術めっちゃついた気がします。
開発期間は半年くらいかかったけど実働でいうと１カ月くらいです笑
根幹部分は1,2週間で完成してました。

改めて考えてみると、webアプリはインターネットにつなげられればほとんどのデバイスで動作できます。そして昨今では、インターネットにつながらない場所はなくなりつつあります。
つまり、いつでもどこでもだれでも制限なくサービスを受けられるということです。これはすごく重要なんじゃないかなと思っています。

意識高い系になっちったｗ

なんもわからない人が頑張ってここまでできました。ぜひwebアプリ、挑戦しましょう！