inajob&#39;s blog

バージョン0

8/31に作りました。記憶が怪しいですが、8月は娘のコロナ騒動で非常にバタバタしており、その後自分は2回目のコロナワクチン接種などをして、副反応で寝込んでたりしたのがこの頃です。

バタバタでプログラミングがしばらくできていなかったのと、待ちに待っていたインスタコードがそろそろ届きそう、というワクワクの2つの感情から、前々から作りたかったブックマークレットの作成に着手しました。

ChordWikiの和音をInstaChordのICNに変換するブックマークレットの試作品が出来た！

※ルートがCのみしか対応していないので右上メニューで移調してください。

試したい方はこちらhttps://t.co/sxwXhppK7O

（InstaChordにもChordWikiにも許可を取っていないので怒られたら消します） pic.twitter.com/ysTHTAHGcE
— ina_ani@1歳児のパパ (@ina_ani) 2021年8月30日

618文字の比較的簡単なスクリプトですが、単純な楽曲であればこれで十分に役立つものでした。

GitHubで公開

バージョン0はgistで公開しましたが、今後ももう少し改良していきたいのと、音楽がわかる方にアドバイスをもらいたかったので、GitHubのリポジトリを作る事にしました。

9/3 nonoyu さん参戦！

9/3 nonoyuさんからプルリクエストを頂きました。ここからnonoyuさんの怒涛の快進撃が進みます。

この変更が、この後の転調機能対応時に非常に役立ちました。

今後のことを考えてテストコードを入れたのもここです。あとからこのテストコードは非常に役立ちました。入れておいてよかった・・

すでにこの時点でChordWikiのKey情報を読み取り適切な調を認識できるようになりました。

9/3 インスタコード作者様参戦！

nonoyuさんと日を同じくしてインスタコードの作者様であるゆ～いちさんからもアドバイスをいただきました。

以降、音楽的な疑問や、インスタコードの設計思想など様々な面でゆ～いちさんからアドバイスをいただいています。

9/5

その後GitHub Actionsを設定しPR時に自動的にテストを実行するようにしました。めっちゃ便利です。 (このあたり仕事でも似たようなことをやっていたのが役立ちました）

インスタコード利用者のことを意識してGifアニメーションでの説明を用意しました。このあたりからインスタコード利用者の方々からtoICN便利！という感想をいただき始めました。

9/6

ChordWikiに記載された曲の途中での転調にも対応しました。（by nonoyuさん）

9/9

toICNのURLをTwitterなどに投稿したときにいい感じの画像が出るようにしました。（ロゴを頑張って書きました）

f:id:inajob:20211014152415p:plain

9/11 pastakさん参戦

user.js版をpastakさんに作ってもらいました。これは今後、ブラウザの機能拡張など作る場合に大いに役立ちそうです。

インスタコード公式ページに紹介してもらう

仕事が早いですね。インスタコード利用者の中にはPC操作が苦手な方も多く、そういった方にも優しく書いていただけているようで、助かっています。

toICNがインスタコード公式ページで案内されている！！説明もわかりやすい！！https://t.co/s71ORbr1BU pic.twitter.com/kcCGbCgcoV
— ina_ani@1歳児のパパ (@ina_ani) 2021年9月16日

みやびさんの動画で紹介していただく

インスタコード公式Youtuberである「みやび」さんにも紹介いただきました。こちらも非常にわかりやすい。

怒涛のUI変更 by nonoyu さん

キーやレベルを表示・変更するUIを一気に作ってくださいました。見た目が良くなり一気に使いやすくなりました。 f:id:inajob:20211014153433p:plain

レベル変更機能もインスタコード初心者のためによさそうです。

新たなモードを追加（Offモード・一五一会モード） by ts-uc · Pull Request #128 · inajob/toICN · GitHub

Twitterでの音楽理論話 by さろげーとさん

和音名とその構成音について、よくわからなくなってまとめていたら、いろいろ教えてくださいました。これ以外にも音楽理論的な側面で様々なアドバイスをいただいています。

取り急ぎ現在の状況を共有（閲覧のみ可です）https://t.co/YfuejGYvRz pic.twitter.com/RwhRXO24jZ
— ina_ani@1歳児のパパ (@ina_ani) 2021年9月15日

＞RT を下敷きに複雑なコードの図解的なやつをつくってみたが上級者向けになってしまった……https://t.co/cClo8I25p8
— さろげーと (@surrogatepair) 2021年9月19日

10/2 そして新たな楽器へ・・

こちらもnonoyu さんの成果ですが、「一五一会」という楽器に対応させるという野心的な試みです。

10/7 YouTuber 東雲めぐさんの弾き語り動画

これは toICNの話というよりはインスタコードの話ですが・・チャンネル登録数がすさまじい YouTuberさんにもインスタコードを紹介されていて、すごいところまで来たなーと感じました。

ちらっとtoICNの話も触れられていてうれしかったです。

f:id:inajob:20211014153303p:plain

10/9 AndroidのChromeで突然toICNが動かなくなる対応

Twitterやインスタコードのフォーラムで報告があって気づいたのですが、どうもAndroid版Chromeのブックマークレットの文字数制限が急に実装されたようで「5000文字」を超えるブックマークレットがうまく登録されない問題が起きました。

GitHub PagesにJavaScriptを配置し、それをブックマークレットから呼び出すように構成を変更し事なきを得ました。

pastakさんが作ってくださったユーザスクリプト用のJavaScriptが役に立ちました。

まとめ

インスタコードが届くのが楽しみすぎて自分のために作り始めた toICNですが、ここまで書いてきたように様々な方の助けを得て、私が思っていた以上に良いものとなりました。

ここまでのところで大まかな機能は完成しているので、今後は開発のペースは落ちていくとは思いますが、継続して機能追加やバグ修正をしていこうと思っています。

バグ報告やプルリクエストもお待ちしていますので是非是非！

2021-09-15

インスタコード/InstaChordファーストインプレッションとtoICNの紹介

インスタコード/InstaChordとは

ついに我が家にもやってきましたよ！

ってインスタコードって何？って人のために少しだけ説明すると・・

インスタコードとは「誰でも弾ける新しい楽器」です！

具体的には、こんな形の楽器で、ネックの部分のボタンで和音を簡単に選択でき、ボディ部分の6個のパッドを撫でることでギターのように演奏ができるというものです。

f:id:inajob:20210915002311j:plain

インスタコードのクラウドファンディングが行われたのは2020年5月のこと。

確かこの記事を見てその存在を知りました。

fabcross.jp

自分も「和音が鳴る電子楽器」を開発しているので、このクラウドファンディングにはかなり注目しました。

加えて、Maker Faireなどでも良く出会う、電子楽器の先輩（と勝手に思っている）「電子楽器”ウダー”の宇田さん」が開発にかかわっているという事で、自分の中の期待が非常に高まりました。

f:id:inajob:20210915002400p:plain — https://instachord.com/company/developper/ より

そして自分は2020年6月1日に予約注文しました。

インスタコード/InstaChord ファーストインプレッション

非常に洗練された筐体で、かなりの高級感があります。

画面も大きく見やすく、音色も安っぽくなくいい感じです。

f:id:inajob:20210915002911j:plain

和音を選択するボタンは、ダイアトニックコードがワンタッチで選択できるようになっており、それ以外の和音については修飾キーを利用して選択します。

f:id:inajob:20210915004626p:plain — https://instachord.com/instruction/manual/ から転載

まぁこの辺の思想は自分も似たような楽器を作っているのでするっと理解できました。

全体的な仕様は予想していた通りで、そこに関して驚きは少なかったのですが、やはり「実物を演奏する」というこの体験はモノがあってこそです。

和音を選択した状態で6つのパッドを撫でるとギターさながらの「ジャララーン」という音が鳴るという体験は、予想していた以上の物でした。

インスタコードでは、伴奏のみでメロディを弾くことが出来ないのですが、そこはいわゆる「弾き語り」スタイルで、歌を歌いながら弾くというのが標準的な使い方のようです。

実際に歌を歌いながら演奏してみるとこれまた楽しく、あえて文字で書くとするとカラオケと音ゲーが合わさったような楽しい感覚を感じました。

開封動画や、使い方のチュートリアルなどはYoutubeに動画が上がっているので気になる人は見てみると良いと思います。

InstaChord用の専用表記「ICN」

インスタコードは和音を簡単に入力できますが、和音というのは一般的な楽譜には「C」「Am」のように音名で書かれています。

では、インスタコードのボタンはこの音名と直接対応しているのかというと、話はそう簡単ではありません。曲にはそれぞれ「キー」があり、キーが異なると曲を構成する和音のセットも変わります。そのため、曲のキーがCの時によく使う和音は「C, Dm, Em, F, G, Am, Bm」ですが、曲のキーがAとなると「A, Bm, C#m, D, E, F#m, G#」というようによく利用する和音の音名が異なります。

f:id:inajob:20210915004740p:plain

よく使う和音の数はキーが定まれば、さほど多くないのですが、キーに応じて異なる和音の表記がインスタコードのどのボタンに対応しているかをいちいち覚えておかないと演奏できないという問題があります。

インスタコードではこの問題を解決するために、あらゆるキーの曲を簡単に弾けるようにするために「InstaChord Number (ICN)」という特別な表記を用意しています。

ICＮの簡単なものは単なる数字で「1」とか「2」とかです。

f:id:inajob:20210915003016p:plain — https://instachord.com/instruction/icn/ から転載（表は一部の和音の例です）

この番号はインスタコードのネックにある9つのボタンと対応しており、ICNが書いてある楽譜があれば、「C」とか「Am」とかのキーにより異なる和音とボタンの対応を覚えることなく演奏することが出来ます。

インスタコードに対応した楽譜をどうやって用意するか？

これはすごいんですが、このICNはインスタコード独自の表記のため、楽譜を専用に用意しないといけません。

インスタコードでは当初「楽器.me」というコード譜サイトと提携して、ICNをサポートした楽譜を提供する予定だったのですが、もろもろの事情により、この計画は頓挫しました。

現在インスタコードが公式で用意している方法としては「コード譜ライター」というツールがあります。これは一般的な音名に基づく和音（「C」とか「Am」とか）を入力すると、それをICNに変換して表示してくれるというアプリです。

「コード譜ライター」も便利なのですが、弾きたい曲の和音を調べて、それを入力し、ICNに変換する、という手間が結構面倒なのが難点です。

「コード譜ライター」で変換したICNをインターネット上で共有する試みも行われていますが、正しく権利処理しないと、歌詞などのデータは著作権侵害になる恐れもあります。

そこで自分が思いついたのが「toICN」です。

toICNの開発

インターネット上にはコード譜を公開しているWebサイトが多数あります。これらのWebサイトでは、一般的な音名に基づく和音（「C」とか「Am」とか）で和音が表示されるのみで、ICNには対応していないのですが、これを何とかICNに変換できれば、「コード譜ライター」にちまちま和音を入力して変換しなくても良くなるのでは？と考えました。

f:id:inajob:20210915005729p:plain — 譜面は https://ja.chordwiki.org/wiki/%E3%81%B5%E3%82%8B%E3%81%95%E3%81%A8 から転載

実現の手段としては、「ブックマークレット」を用いることにしました。

これは結構古くからある手法で、ブラウザのブックマークにURLではなくJavaScriptを登録することで、任意のWebサイトで独自の処理を実行できるというものです。

これを思いついて、簡単な実装を試してみて、公開したのが8/30でした。

その後GitHubでリポジトリとして公開したところ、インスタコードの購入者の方にも見つけていただくことが出来、さらには一緒に開発してくれる方も現れました。

toICNの開発の軌跡も紹介したいのですが、長くなるので、ここでは割愛します。

ともかく、toICNは「ワンクリックでコード譜Webサイトの楽譜をインスタコード用に変換できる」という便利なツールです。

↓↓↓↓↓ インスタコード持っている人にはぜひ試してほしいです。↓↓↓↓ github.com

下記で利用方法をGIFアニメで紹介しているので、試してみる際は参考にしてみてください。 (パソコンでも、iPhone・iPadでもAndroidでも利用できます）

コード譜からインスタコード用のICNに変換するブックマークレット。

Gifアニメでチュートリアルを作ってみた。
これで少しでも使い方が伝われば・・！https://t.co/gewVqZ7h8B pic.twitter.com/YKXWvkZFhb
— ina_ani@1歳児のパパ (@ina_ani) 2021年9月5日

何とインスタコード公式Youtuberである「みやび」さんがtoICNの説明動画を作ってくださいました。こちらも非常にわかりやすいので是非見てみてください。

まとめ

インスタコードがやっと届いて、少し触ってみましたが、期待以上に面白い製品でした。

弾き語り用の楽器としてはかなり良いものとなっているので、楽器演奏が苦手だけど歌は好き・得意という人にはぜひ試してみて欲しいと思いました。

また拙作「toICN」もインスタコードで既存の楽曲を演奏するうえで非常に便利ですので、ぜひ試してみてください。

最後にこの記事を読んで「自分もインスタコードが欲しい！」と思った方！ぜひ下記リンクから注文してみてください。

（インスタコードは代理店を持たず、紹介パートナー制度を使ってマーケティングをしています。下記リンクは私のアフィリエイトコードとなっています。）