🏆 企業 YUMEMI賞

7/29 サポーターズ 技育CAMPハッカソン

使用言語

Kotlin

その他

本ページ下部にデモ動画あります

アプリ名

LENON ～ハノン風の楽譜を自動生成して練習～

なぜ出場しようと思ったのか

今回のハッカソンは「キャラバンハッカソン」というもので現地に行って対面で開発をすることができます。私はオンラインで開発したり仕事をしたりすることに強い違和感を持っており対面で参加できるということに魅力を感じていました。

さらに参加するだけで賞金をいただくことができます。まずは参加費で5,000円、賞がもらえると最低10,000円以上はもらうことができます。開発するだけでお金がいただけるのはとてもありがたいことだなと思っていました。この二つの理由が私をハッカソンに参加させる十分な動機となりました。

「ハノン風楽譜生成アプリ」を開発

今回のハッカソンではタイトルのように「ハノン風楽譜生成アプリ」を開発しました。

私自身ピアノを趣味で練習したり演奏したりしているのですがやはり上手に弾くコツは楽しむことや感情をこめて演奏することでもなく運指練習をすることだと思います。その運指練習をするためにハノンという楽譜を用いて練習するのが一般的なようです。

ハノンは指の練習がやりやすい曲をまとめている楽譜です。しかしハノンの楽譜にはいくつか欠点を持っています。

個人的紙ハノン楽譜の欠点5選

①重たい

Ａ３の用紙に印刷された音符は100ページを超えます。つまり毎回練習するたびに重たい楽譜を開く必要があります。

②楽譜が勝手に閉じられる

またこれはピアノの楽譜あるあるなのですが最初のページほど紙の特性上勝手に本が閉じられてしまいます。これでは両手を使ってピアノの演奏に集中したいのに、片手でピアノの楽譜が閉じないように注意しなければならないのでとても不便です。これが実はすごくイライラします。

③暗いところでは楽譜が見えない

この悩みは僕だけかもしれないですが、ピアノの練習をするときは部屋を明るくする必要があります。それは手元を見やすくするためではありません。楽譜を見やすくするためです。意外と楽譜というのは白黒で濃淡があるため見やすいかと思われますがそうではありません。暗くなると五線譜の認識がとたんに難しくなります。したがって暗いところでは楽譜を読むのが困難になります。

ピアノの鍵盤は慣れれば場所を覚えるので問題ないのですが楽譜だけはどうしようもありません。

④ハノンの曲をもっと練習したい

ハノンの曲は簡単な曲で20曲です。しかし20曲毎日練習するのはやはり飽きます。なぜならば音階が１オクターブ登っていき１オクターブ下がっていく練習だからです。

こんなことを言うと世界で活躍しているピアニストに怒られますのであくまでも私の意見です！ピアノの練習をするとき「単純すぎてつまらないなー」と思っていました。ショパン風でもアレンジしたようなものがないかなーと思いながら練習していた記憶もあります。

⑤楽譜のどこを弾いているのか見落とす

これはHANONには関係ないですが、すべての楽譜に共通して私が言えることです。私はピアノの楽譜を読むのが苦手です。特にリピート記号です。

リピート記号がある場合、FPSゲームの銃口のような十印を探す必要があります。

これが僕にはページをペラペラするのが面倒で嫌いでした。特に夏の暑い部屋でピアノの練習をしていると指先の汗でページが一度に２，３ページ移動してしまい暑さの上に楽譜が言うことを聞かなくてイライラしてしまいました。

実装した機能

今回このアプリには一週間で開発できることをぎゅうと詰め込みました。

特に最大の頑張りは本ハッカソンでははじめてJetpack Composeを用いて開発を行ったことです。本ハッカソンに参加する少し前のAndroidStudioのバージョンではJetpack Composeの技術は「Preview」と書かれていたので使うのをためらっていましたが、本ハッカソンを挑戦するときの最新のAndroidStudioでは公式サポートされていたのと、サイバーエージェントのインターンシップに参加したときに社員の方から「今後開発するならJetpackComposeがいいね。社内でもこれが使われているし」とおっしゃっていたのを思い出してこれを選びました。

音の自動認識

今回は紙の楽譜の「自分が今どこを弾いているのか見落とす」という難点を対処するためにまずはピアノの音の認識を行い、自動的に楽譜が前に進むシステムを開発しました。 つまり演奏者は楽譜を見ることに集中するだけでいいのです。なんて楽なシステムなのでしょう。 ちなみに認識システムはごり押しEnumです。

ハノン風の音符を自動生成

単調な音符とはおさらばです。ハノン風の音を自動生成する方法を開発しました。機械学習などは一切使わずただランダム関数などを使ってそれっぽい楽譜を生成しました。そのため生成に時間もかからない上にオフラインでピアノの練習をすることができます。

五線譜を表示させる

今回、ライブラリなどを使わずに五線譜を表示させました。等間隔に表示させたり、音符にMVVMを付けてデータに応じて適切な場所に移動させたりするなどプログラムを頑張って開発して作り上げました。自動生成した楽譜データと五線譜を連動させるシステムを加発するのも大変苦労しました。

デモ動画(ハッカソン当日に使用した動画）

動画からもわかるようにかなりごまかしています。音声認識が正常に動作するときとそうでないときがありました。この動画を撮った時は正常に動作しませんでした。

挑戦した技術

Kotlin

今までは私はJavaを用いて開発していましたが、Kotlinに移行するタイミングをずっと伺っていました。Android Developersの公式ドキュメントなどもほぼすべてのサンプルコードがKotlinで書かれていたりネットの記事もKotlinが多くなってきたりするなど初心者がいる中ではやはり開発しやすいものが良いと思いました。そのためKotlinに決まりました。個人的にもKotlinを勉強できる良い機会で一石二鳥です。ですがやはりKotlinは便利だと感じるところが多かったです。If else の代わりのwhen()やnullの?,! 記号を使った開発やKotlin コルーチンなどの機能です。プログラマーはスマホデバイスのことをあまり気にせず開発できる点は恩恵が大きいなと感じました。

JetpackCompose

JetpackComposeでのビューの使い方の基礎を勉強しました。以前SwiftUIを２週間みっちりと勉強した経験があるのでComposeの入門は特に問題なくできましたが、実際にコードを書いてみるとComposeはSwiftUIと違って細かな定義をする必要がありこの点は一筋縄ではいかないなと思いました。しかし、Android のビューをXMLで開発していたころよく「match_parent」や「wrap_parent」のようなものをComposeではビューを最初に作るときに定義しなければならないのはレイアウトを正しく作らせようという前のXMLの頃の方法を使わせようとしているのが見えて僕は安心しました。

MVVM

私は今までにMVVMというアーキテクチャを聞いたことがあってもそれを実際に使うことはありませんでした。なぜなら今までの自分はMVCという方法で開発がとても便利だと思っていたからです（ずっと前から無意識に開発していた方法はMVCだったようです。MVVMを勉強している時に始めて知りました笑）。ビューはXMLで管理しMainActivity.javaでプログラムをすべて書いたり、ビューの更新も命令させるプログラムを書いたりしていました。

しかしこの方法で開発をしているといつもプログラムが冗長になり可読性にかけるので、プログラムの改修工事をしたりメソッドの中の変数を探すときにマウスのホイールを回すのに忙しかったりととても苦労が多かったです。

しかしMVVMを実装すると世界が変わりました。MVVMの勉強は一週間かけてAndroid Developersの公式ドキュメントやCodelabなどを見ながら行いました。 そして学んだことを生かして実際に本ハッカソンで開発したアプリに適用するとコードがすっきりと簡潔にかけてMainActivity.ktに書く必要があるプログラムをうんと短くなりました。またJetpackcomposeを採用したことにより`binding.textView`や`findViewById`を記述する必要がなくなったこともプログラムの量が短くなりとても感動しました。もっと早く気付くべきだと思いました。またJetpackcomposeはViewModelを引数で渡すのがものすごく楽で、一つのComposeを作りそれにViewModelを付けてあげるといとも簡単にビューの制御ができちゃうのです！

上の文章がわかりづらい人のために説明するとクッキーの型抜きを作り（一つのCompose）、型抜きが終わったクッキーの生地の上にチョコチップ（ViewModelという個性）などを振りかけることが簡単にできるということに感動したのです。MVCではこれが難しかったので込み入ったデザインのアプリを作るのが億劫でいつも逃げていましたが、JetpackComposeなら楽しくデザインもできそうです！

まとめ

当日のプレゼンでは、なんとかして１位を取りたいと思っていたので、会場の雰囲気で男の子が圧倒的に多かったので「モテたい」というキーワードを持ちいてプレゼンしました。しかし、ほとんどの人の心に刺さっていなかったようです（笑） 最後の表彰の時にYUMEMIの方からは技術面での評価で賞をいただきました。正直私はこの一週間技術を高めるためにいろんなことに挑戦したのでそのことを認められてとてもうれしかったです。 チームのメンバーはデータベース周りやJetpackcomposeを使ってデザインをよりよくするプログラムなども書いてくれました。チームメンバーのおかげでここまで素晴らしいアプリケーションを開発できたとおもっています。本当に感謝しています。 次のハッカソンも開発頑張ります。