この記事ではtoICNの開発の記録を残しておこうと思い書いています。
toICNとは
コード譜サイトの和音表記を、インスタコードのための記法 「ICN」 に変換するためのブックマークレットです。
インスタコードやICNについては以下の記事で詳しく紹介しています。
toICNは以下で公開しています。
バージョン0
8/31に作りました。記憶が怪しいですが、8月は娘のコロナ騒動で非常にバタバタしており、その後自分は2回目のコロナワクチン接種などをして、副反応で寝込んでたりしたのがこの頃です。
バタバタでプログラミングがしばらくできていなかったのと、待ちに待っていたインスタコードがそろそろ届きそう、というワクワクの2つの感情から、前々から作りたかったブックマークレットの作成に着手しました。
ChordWikiの和音をInstaChordのICNに変換するブックマークレットの試作品が出来た！
— ina_ani@1歳児のパパ (@ina_ani) 2021年8月30日
※ルートがCのみしか対応していないので右上メニューで移調してください。
試したい方はこちらhttps://t.co/sxwXhppK7O
（InstaChordにもChordWikiにも許可を取っていないので怒られたら消します） pic.twitter.com/ysTHTAHGcE
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などに投稿したときにいい感じの画像が出るようにしました。 （ロゴを頑張って書きました）
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を一気に作ってくださいました。見た目が良くなり一気に使いやすくなりました。
レベル変更機能もインスタコード初心者のためによさそうです。
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 さんの成果ですが、 「一五一会」という楽器に対応させるという野心的な試みです。
新たなモードを追加（Offモード・一五一会モード） by ts-uc · Pull Request #128 · inajob/toICN · GitHub
10/7 YouTuber 東雲めぐ さんの弾き語り動画
これは toICNの話というよりはインスタコードの話ですが・・ チャンネル登録数がすさまじい YouTuberさんにもインスタコードを紹介されていて、すごいところまで来たなーと感じました。
ちらっとtoICNの話も触れられていてうれしかったです。
10/9 AndroidのChromeで突然toICNが動かなくなる対応
Twitterやインスタコードのフォーラムで報告があって気づいたのですが、どうもAndroid版Chromeのブックマークレットの文字数制限が急に実装されたようで「5000文字」を超えるブックマークレットがうまく登録されない問題が起きました。
GitHub PagesにJavaScriptを配置し、それをブックマークレットから呼び出すように構成を変更し事なきを得ました。
pastakさんが作ってくださったユーザスクリプト用のJavaScriptが役に立ちました。
まとめ
インスタコードが届くのが楽しみすぎて自分のために作り始めた toICNですが、ここまで書いてきたように様々な方の助けを得て、私が思っていた以上に良いものとなりました。
ここまでのところで大まかな機能は完成しているので、今後は開発のペースは落ちていくとは思いますが、継続して機能追加やバグ修正をしていこうと思っています。
バグ報告やプルリクエストもお待ちしていますので是非是非！
