インスタコード用コード譜変換プログラム「toICN」ここまでの開発の記録

この記事ではtoICNの開発の記録を残しておこうと思い書いています。

toICNとは

コード譜サイトの和音表記を、インスタコードのための記法 「ICN」 に変換するためのブックマークレットです。

インスタコードやICNについては以下の記事で詳しく紹介しています。

inajob.hatenablog.jp

toICNは以下で公開しています。

github.com

→→→ インスタコードの購入はこちらから!←←←

バージョン0

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

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

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

GitHubで公開

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

github.com

9/3 nonoyu さん 参戦!

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

github.com

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

github.com

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

github.com

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

github.com

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

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

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

github.com

9/5

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

github.com

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

github.com

9/6

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

github.com

9/9

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

f:id:inajob:20211014152415p:plain

github.com

9/11 pastakさん 参戦

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

github.com

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

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

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

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

www.youtube.com

怒涛のUI変更 by nonoyu さん

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

github.com

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

github.com

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

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

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

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

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

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

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

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

f:id:inajob:20211014153303p:plain

www.youtube.com

10/9 AndroidChromeで突然toICNが動かなくなる対応

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

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

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

github.com

まとめ

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

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

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

github.com

→→→ インスタコードの購入はこちらから!←←←