圧倒的令和ッ！！ぴょこりんクラスタ Advent Calendar 2019投稿記事です。

はじめに

あまりにヘタクソなので普段この話題あまり触れないようにしているんですが、時々僕は現実逃避を目的にギターを弾きます。僕のギターに対する熱意、意識は驚くほど低く、雑にコード弾きをするだけな上に暗譜もしません。何ならコードの押さえ方もあまり覚えていません。

そんな僕がお気に入りのサイトがあります。u-フレットというサイトです。 www.ufret.jp

このサイト、何が良いかというと、

移調ができる（カポ対応）
押さえ方（コードダイアグラム）が書いてある
自動スクロールしてくれる
割と曲が充実/更新も活発

という感じ。このサイトを眺めながら夜な夜なヘタクソギターをかき鳴らすわけです。

たとえばこのページを流して、 www.ufret.jp

これのバッキングを弾いている。弾いてるのはバッキングだけだよ（？？？）。

しかしながら、曲が充実しているといっても、まぁまぁ無いものもある。

クソマイナーなやつだとどこにも見つからないけど、ニッチなやつだと意外にChordWikiにあったりする。

ja.chordwiki.org

で、所望のコード譜を見つけたのは良いけど、これじゃあ楽しく現実逃避できないのです。何故なら移調もスクロールもしてくれるものの、クリックしないとコードダイアグラムが表示されないからです。世の中の各位はコードダイアグラム見なくてもコード名だけで瞬時に押さえられてしまうん・・・？

というわけで今回のネタはもうお察しですね。ChordWikiのコード譜からu-フレット風のコード譜に変換するやつを書きましょうという話です。

全体の設計

複雑なことをするわけでもないので、わざわざ書くまでもないんですが以下のようなイメージでしょうかね。pythonでの開発を想定しています。

f:id:cappsLk:20191121161808p:plain — 全体のイメージ図

縦方向の下から上への流れがデータ生成部、横方向左から右への流れがデータ表示部みたいなノリで眺めていただければ。

まずデータ生成部、所望の曲があったとき、そのChordWikiの譜面ページを入力として、まずbeautifulsoupにブチこんでほしい要素だけ取り出します。移調の機能、ChordWikiではすべてのデータを保持しているのではなく、たぶんJavaScriptで変換する機能が実装されてるんじゃないかなと思っています（未確認）。なので同じことを実行する諸々をpythonで書くことにします。元の譜面含む12種の調の譜面データを生成、json形式で格納します。このあたりはルールにのっとった処理を淡々と書いてけばいいわけです。

そしてデータ表示部、データはあるので、表示するガワをつくってあげるわけです。個々にダイレクトにhtmlファイル生成しても良いんですが、flaskのテスト用のWebサーバ機能使って、クエリに応じてjsonを読み込んで表示、みたいな感じで使うのが簡便かなと。移調とスクロール速度調整のセレクトボックス、あとは画面のスクロールあたりはJavaScriptをポリポリ書けば何とかなりそうです。

・・・まぁ書かないんだけどね。

もっと簡単に出来るよね

そう、Chrome拡張ならね。

この記事を参考にしました。コード名をクリックしたら表示されるコードダイアグラムの画像が最初から表示されるようにWebページを改変するChrome拡張を書きます。 symfoware.blog.fc2.com

jqueryちゃんを落としてきます。jquery-x.x.x.min.js的なやつダウンロードして (本記事ではx.x.x=3.4.1とします)、 Download jQuery | jQuery

manifest.jsonを以下のように書いて、

{
 "manifest_version": 2,
 "name": "sample",
 "description": "sample description",
 "version": "1.0",
 "content_scripts": [
 {
    "matches": ["https://ja.chordwiki.org/*"],
    "js": ["jquery-3.4.1.min.js","script.js"],
    "run_at": "document_end"
 }
 ]
}

script.jsを以下のように書いて、

$(function(){
    $("span.chord").each(function(){
        var value = $(this).html();
        if(!value) {
            return true;
        }
        $(this).html("<img src='/cd/"+ value.replace('/','on') +".png'>");
        console.log(value);
    });
});

使ってみる

出来上がったやつらをChrome 拡張機能として読み込んで、ChordWikiにアクセス。

このページが、 ja.chordwiki.org

こうなるんじゃ！！！

やったぜ↑↑

まとめ

ChordWikiのコード譜において、u-フレットのように押さえ方の画像を表示するChrome拡張を書いた。これで現実逃避が捗る。

以上。

ぴょこりんブログ

裏垢です。

現実逃避にギターを楽しく弾くための取り組み。

はじめに

全体の設計

もっと簡単に出来るよね

使ってみる

まとめ