ギター練習アプリ「Fretboard Atlas」の開発体験の話をしました。
▼ Fretboard Atlas
https://fretboard.inazuma-base.com/
以下、概要です。
・なぜ作ったのか — 22フレット×6弦の中で「Cはどこにあるのか」が直感的に分からない、ローポジション以外でもコードを押さえられるようになりたい、という自分自身の練習のため
・どんな人向けか — 初心者よりも、音楽理論を踏まえて弾きたい中級者以上の方に
・使い方 — ブラウザで開けばそのまま使えます。iPhone / Android はホーム画面に追加するとアプリのように起動できます。無料です
・作ってみて — デザインは本当に未経験の領域で、ボタンの高さや幅、配置、色、アニメーションまで自分で決めるのは想像以上に難しかった
・AIとの付き合い方 — コードを書くのは主にAI。ただし直したところ以外が壊れる「もぐらたたき」状態にもなり、結局は自動テストで担保する必要があった
・残ったもの — 何を作るか、どんな機能が要るか、この動きは心地よいか。その判断基準を与えるのは人間の役割で、そこを手放すと自分の感覚が反映されなくなる
感想
まだ感想はありません。最初の1件を書きましょう!
00:00
いやー、本当に暑いですね。 今日も何度なんでしょうか。35度はいってますね。
前回の配信、配信じゃないですね、投稿かな?で、
アプリを作ったって話をしたかと思うんですけど、
それ以外でですね、アプリも結構使っている、最近作ったアプリが一個ありまして、
そちらをですね、ちょっと少し紹介しようかなと思っています。で、それは
すでに公開できるように設定とか済ませたので、 概要欄に貼っておこうかと思いますけど、
ギターの練習というかのアプリになります。 アプリの名前がフレットボードアトラスっていう名前にしたんですが、
ギターは楽器なので音楽理論っていうものがね、 関係してくるものですね。ピアノとかも同じですね。
で、ギターはですね、6本の弦があって、
1弦から6弦まであるんですね。で、 フレットって言って指板の上に
何も押さえないところが0フレットで呼ばれているんですが、そこから
だいたいのギターは22フレットまであるんですね。 で、
24フレットのギターもありますね。 で、僕は24フレットのギターは使うことは基本的に
ないし、持ってもないんですが、22フレットあれば十分かなと思って使っていますが、
ギターはですね、例えばドレミファソラシドって弾こうと思った時に、
ピアノとかと違ってですね、 ピアノだとね、そのハチョウチョウっていうキーだと、
いわゆる八弦をドレミファソラシドと弾けばですね、ドレミファソラシドがこう順番に並んで弾けるんですね。
ただですね、ギターの場合は6本弦があってですね、 フレットがこう縦に分かれているんですね。
で、 ピアノで言うドっていうものが
Cっていう音なんですけど、それがですね、ギターの指板の上っていうことですね、押さえるところですね。
で、どこにあるのかっていうのが、法則性はもちろんあるんですけど、
実際こう、指板の上で22フレットかつ6弦あるので、その中でね、そのCっていう音がどこにあるのかっていうのは、
03:08
直感的にすぐわかるかというとですね、僕もなかなかわからないというか、あまりこう覚えてはいなかったし、
じゃあ、Dっていう音がどこにあるんだろうとかね、Eがどこで、Fがどこで、Gがどこで、みたいな。
で、さらにはCじゃなくてCシャープって音はどこにあるんだろうとかね、そういうのとか、いわゆるこう、
ギターの教則本みたいなのには載っているんですけど、なんかこう、
もうちょっと視覚的にわかりやすい、すぐにわかる、参考書じゃないけど、本ではないけど、
そういうのが欲しいなぁと思って、フレットボードアトラスっていうのを作ったんですね。
で、指板の上でですね、その音楽理論を元にして、どこにCとかドとかレとかがあって、
どれミュアソラシドはどこで弾けるのかとかですね、 あとはそうですね、あの
ギターだったらコードって言って、その3つ、 基本的に3つ以上の音をですね、鳴らす場合ももちろんあって、それもまあピアノとかと同じですね。
Cっていうコードであればドミソっていう音をね、同時に鳴らせばCっていう、Cメジャーっていうコードになるんですけど、
それもじゃあどこを押さえたらCメジャーっていうコードになるとかですね、とか、いろいろこう
指板の上で押さえ方、どこを押さえればCっていうコードになるのかとかね、そういうのとかも、ちょっとあの
なかなかわかりづらいかといって、全部覚えているわけでもないっていうので、
ギターを手に取りながらですね、Cっていうコードを押さえようとした時に、じゃあどこにCっていうコードがあるんだろうとかね、そういうのも
だいたいそのギターの弾き語りとかで使われるコードだと、そうですね、だいたい何も押さえてない0フレットから3フレットあたりがよく使われるですね。
ローコードって呼ばれるものなんですけど、そういうのとかは一般的にこう、コードの何でしょうね、
押さえ方みたいなので、載っているところはね、たくさんあるんですけど、
ただこう低い音でCっていうコードを鳴らすのか、もう少しこう高めの音でCっていうコードを鳴らすとかね、そういうところをね、考えたいなと思った時に
やっぱりわからなくなるんですよね。
06:02
そういう時にこういろんなポジションでコードを弾けるようになりたいなとかって思ったし、あとはそのドレミアソラシドとかっていう音階をね、
その一つの場所ではなくて、違う場所でも弾けるようになりたいなとかね、そういうのかもちょっと視覚的にわかるようにしたいなと思って
アプリを作りました。ちょっとここはこのアプリを多分使う人っていうのは
ビギナー、初心者の方というよりはもう少し音楽理論のこととかも踏まえて、ギターを弾きたいとかっていう人向けだとは思いますし、
なので、どちらかというと中級から上級の人向けと言えるものかもしれないですね。
ちょっとまだあの身近なギターを弾いている人たちに一旦シェアして、コメントやらフィードバックをもらってそこから改善したりですね。
あるいは自分で使ってみて使いにくいなと思ったところを直した段階で、ようやくですね、その見た目とかも含めてデザインとかも
ある程度これなら出せるかなっていうところまで一旦行き着いたので、今回出すことにしました。
このアプリ自体はウェブブラウザーでね、リンクに行ってもらえれば使えますし、あとは
iPhoneとか多分Androidもできると思うんですけど、アイコンをねそのホーム画面に追加しておけばですね、
そのアイコンをタップすればこのアプリが使えるっていうものになっています。
無料で使ってもらえるので、ギターやってる人とか気になりますけど、ご興味あれば一度見てもらえればいいかなと思っています。
で、作ってる上でちょっと考えていたのがですね、どういう機能を増やしたらいいかとかっていうのはもちろんあったんですけど、
割と時間がかかったなぁと思うのがそのデザインですね。
まあ要は見た目とかも含めて使い勝手どういうふうに作ったら見せたらいいのかとかですね、そのあたりちょっと時間がかかりましたね。
僕自身そのアプリ開発というものは仕事の中でね、そのやってきたっていうのはもちろんあるんですけど、
デザインとか含めて作ったりとかっていうのはあんまりこうやってこなかったし、
自分でアプリを作って第三者、一般向けに公開するとかっていうのも実は今回のアプリが初めての取り組みでして、
09:06
ちょっとそのいろいろね、その外に出すとかっていうところがまあありますが、使っていくうちにこう
いろいろとこだわりが出てきまして、例えばそのボタン一つ取ってもボタンの高さが揃ってないなとか幅が揃ってないなとかね、そういったところの統一感であったりとか、
あるいはそのボタンだったらボタンをどこに置けばいいのかとかですね、幅はどのぐらいがいいのかとか、じゃあ色はどういう色がいいんだろうとか、
あとじゃあアニメーションはどういう風なのをつけたらいいんだろうとかですね、そういうことはね、あまりこうこれまで
仕事経験の中では考えてはきてなかったというか、他のデザイナーの人が考えていたことだったりするので、
自分で考えるという機会は全くほぼなかったんですけど、今回は自分で作るアプリということでそのあたりも自分で考えてみたんですが、
なかなか自分でやってみると難しくてですね、
なんかこうこういうデザインでっていうのが決まっていてとか、アニメーションをここで入れてとか、そういうのがね、決まった状態でそれをこう形にするっていう仕事だったんで、デザインも含めて
ってなった時に、やっぱり経験がない分ですね、そのあたり難しいのは当然のことですね。
で、僕はそのソフトウェアの開発っていう分野で仕事をしてきていますが、
そのデザインっていうところはね、本当に未経験なので手探りなところもありますし、
今回作ったアプリに関しても結構手探りで、じゃあどういった見せ方とか動き方、アプリの動き方とかね、が心地いいんだろうとかね、そんなことも考えながら一旦作ってみました。
もちろんその、僕自身もなんかモーラ的に使えているかというと、そんなこともなく一旦作ってみて、
外に出してみてですね、なんか使いたい人がいれば使ってくれればいいですし、
っていう感覚で一旦出すことがいいかなと思ったので出すことにしました。で、今回のエピソードではそこの作っている上での裏話というかっていうのをちょっと話していこうかなと思うんですけど、
アプリの説明とかで今10分ぐらいかかってしまいましたが、実際その
なぜ作りたいと思ったかっていうのは、まあ理由があってですね、さっき説明したようにドレミファソラシドという音階がギターの指板上でどこにあるのかっていうのを
12:09
視覚的にわかりやすくしたいっていうところと、あとじゃあコードっていうのを押さえる時に決まったポジションの範囲だけではなくて、
指板全体でですね、コードを弾けるようになりたいとかですね。で、それの練習を僕自身がするためにアプリとして作って、それを見ながらギターを手にとってね、
練習できるっていうところを目指して作りました。で、おそらくこういったアプリってもうすでにたくさん出てるとは思うんですけど、
僕自身がちょっと作りたいなと思った衝動というか、思いが出てきたので、それもあって作ってみたっていうところですね。
で、音楽理論に関してもある程度全て網羅的にわかっているかというとそうでもないところはありますが、僕がわかる範囲とか
調べた中でわかる範囲でですね、正しいかどうかを判断しながら作っていったっていうものですね。
なので、本当にウェブアプリとかもなかなか使うことはあっても自分自身で作ることはなかったし、
実際問題作れなかったというか、作れると思うんですけど、作るにはやはりウェブアプリの作り方とか、あとプログラミングの言語とか、
どういった言語を使えばいいのかとかね、そういうのも正直あまりわかっていなかったので、そこからこう、
一から作ろうってなると、やっぱりこう、そういったウェブ開発に関する技術を学んだりですね、
YouTubeを見るとかね、あとはその インターネットで調べてどういった技術を使えば作れるのかっていうのを
調べながら作らなければいけなかったんですけど、 僕自身がこのアプリを作ったのは、コードっていうかプログラミング自体はもうAIに任せているのが主体で
でして、どういったアプリにするのかとか、じゃあ
実際コードを書いて動くものを見たときに、この動きは僕にとって心地よいのか心地よくないのかとかですね、あと使いにくいか使いやすいかとかですね、そういったところとかの
見極めとかは自分でジャッジしつつ、で、出てきた違和感とかはAIにフィードバックして直してもらったりっていうのを繰り返して完成、
一旦完成に至ったっていう形ですね で結構その苦労したなぁと思うのは
15:02
やっぱこう、アプリなので見た目が結構
こだわりポイントとしていろいろと現れてくるものだなぁと思って
で、AIにコードを変更してもらった後に実際に動かしてみたときにね
なんかボタンの位置がずれちゃったりとかね、あとは変更してほしいってお願いしたところ以外のところが変わってしまったりとかですね
とか、あとはそのAI自身がこことここは整合してなかったのでちょっとついでに直しておきましたみたいなね
こととかも出てくるんですね で、僕がお願いしていないことも
なんかこう変更したりとかですね、あるいはこう 僕がここを直してほしいって言ったことに対して直ったんだけど
すでに動いている他の場所、他の機能がですね なんかこう動かなくなっちゃったりとかですね
っていうこともですね、起きてですね もぐらたたき状態になってしまうというところもちょっと少し経験しましたね
もぐらたたき状態になってですね AIにこう
いやーさっきこれ直してってお願いしたのになんか違うところも 動かなくなってるんだけどって言うとですね
それをまた直してくれるわけですけど、今度はまたそれを直すとですね また別のところがこう壊れちゃってですね
動かなくなっちゃったりとかっていうところがあって これはなんかどうしたものだろうと思っていて
で ああそうかと思ってあの気づいたのが
やっぱこう人間もこれまでね プログラミングしてコードを書いてきたんですけど実際にそのコードを書いた後に
動かしてみてテストをしてるんですよね 僕自身もそのコードを書きながらテストしながら作っていったので
あのきちんとこう動くかどうかっていうのを短い間隔で割と高頻度で テストを行うことで
あの他に影響が出てないかとかっていう見極めをしながら コードを積み重ねていくっていうのをやってたんですけど
AIでコードを書いてもらう場合も実は同じようなことをやらなきゃいけなくてですね あのなので
コードを変更した後にですね 自動テストっていうものを回すようにできる仕組みを入れたりとかですね
そういうのもやりましたね テストパターンをいくつか作ってそれが必ずコードを変更するために
自動で実施されるようにしたりとか でそこでもし自動テストのところでエラーになったりとかしたらそこを直してもらったり
そこはもう自動で直してもらったりっていうふうなことをやったりとかしました なのであの
18:07
もちろんAIを使えば コードは割と短時間で作ってくれますがじゃあそのきちんと動くかとか
っていうところとか他に影響が出ていないかとかっていうあたりは AIだけだと
なかなかこう担保できないところもわかったのでそこはテストっていうのを用意して それで担保するっていうのがやはりいいんだなぁと思ってちょっと少し
学びになりましたね
AIにこれを作ってとかこれを変更してこの機能を追加してってお願いすればもちろん それは動くものできますがじゃあきちんと動くものなのかとか
不具合が出ていないのかとかですねそういったところまでケアしようとするともう少し 手当テストとかを入れないとなかなかこう
思ったりにいかないというのはありましたね そういうのは確かに今回実際作ってみてとてもよくわかったし
やはりこう 作ることは短時間でできるけども
この作った後の動きがですね僕にとってとか 使う人にとって本当に望ましいものなのかとかですねそういった判断をしたり
とか あるいはこう
なんか特定の機能を入れたりとか削除したりとか消したりとかっていうところも 人間自身がですね
やはりこう判断していくっていう必要は 従来同様ですねあるのでそこはあの人間の役割としてまだまだ
残ってますし少なくともその作り方とかそういうところは AI を頼るのは全然アリになってきたとは思うんですけど
どういったアプリを作りたいのかとかですね あるいはどういった機能が欲しいのかとかですね
じゃあ見た目的にどういうものがいいのかとか 使い勝手がどういうものがいいのかとかですねそういった基準っていうのは人間が
こう 与えないと AI は駆動してくれないのでそこの
そこを決めるのはあくまで人間というのは変わらないということは改めてすごくよくわかりました
なのでちょっとまぁたった一つのアプリという開発ではありましたけどいろんな学びがあったので僕自身も
個人プロジェクトで言うこともあったしそれほどこう
なんかこう起源に追われてとかっていうものではなくて楽しみながらでも時々 困りながらどうしたらいいんだろうなぁと思いながら
21:00
やって作ってみたっていう感じですね 一旦こんな感じでしょうかね
うーん まあ様々なねそのアプリが今
世の中にはありますけど前回の配信でも少し話しましたけど アプリみたいな身近に使っているものがですね
結構その一般化する作り方とかは一般化するとは思うんですけど どういったアプリを作りたいのか作るのかとかですね
そういったどちらかというと規格と呼ばれるものだったりとかあるいは 作ったものに対してそれが本当にいいのかとか
使い心地が良いのかとかっていう判断に関してはやはり人間が握るべきものであってですね そこを手放してしまうとですね人間自身の感覚が反映されなくなるので
そこは今後も意識しておけばAIが入ってきたとしてもですね 人間が
こうになるべき領域っていうのはすごく残っていて 作ることはすごく短時間でできるけど
そこの人間が握る領域っていうことさえ抑えておけばですね ある程度こう快適にソフトの開発とかアプリの開発とかっていうのもできるなぁと思い
ました まあ少しその今回出すフレットボードアトラスの機能紹介とかアプリの紹介とか
なんでアプリを作ったのかっていう紹介とかもしましたし あとはアプリをこう作っていた上でどんな点に気づきがあったのかとか
あるいは僕自身どんな気持ちで作ったのかとかですね そういったことを少しお話ししてみました
あのきっとアプリ開発とかそういうことに関心がある人しか多分 聞き続けられないエピソードになったかもしれないですね
まあですがとりあえずまぁ最近取り組んでいたこととしてアプリ開発っていうのが あったので一つ事例として紹介しておきます
はいということで今日は3連休中日ということで今日も暑いですね 本当に暑すぎます
夜もやっぱエアコンがないと 寝るのがちょっと厳しいですね夜になったもやっぱり30度は超えているので
水分補給とかね水分もしっかりとって 過ごさないと辛いなぁと思っておりますね
まだまだ7月なので8月9月と暑いの日が続くとは思っていますので なるべく涼しい場所にいるっていうのはもちろんですが
でもね家の家の中にずっといてもまたそれはそれで涼しいけど 日光浴びないのはよろしくないと思うので日光は浴びつつ過ごしていきたいなと思っています
24:09
ということで今回はギター 向けギターがギターを弾くのが好きな人向けのアプリとして今回作ったフレットボード
アトレスアトラスというアプリの紹介と あとを作った上での体験したこととかあるいは気づきとか
みたいなことを少しお話ししてみました また次のエピソードはどんなエピソードになるかわからないですが
ぼちぼち しばらくこのラジオもお休みというか撮らない期間多かったんですけどちょっと今後は割と
頻度は多めになる気はします あの毎日とかは多分出さない気はしますが
撮りたい時に撮ろうかなっていうスタンスで続けていこうかと思います では今回はこのあたりにしますありがとうございました
25:05
コメント
スクロール