LoginSignup
2
0

More than 3 years have passed since last update.

@yumetodoinQiitadonユーザー会

楽譜でプログラミングできる言語velatoのオンライン実行環境を作ったけどvelato-jsの挙動がなんかへん？ #atgt2020

Last updated at Posted at 2020-12-31

はじめに

ことしもあんたがたの季節がやってきました。

ちなみに「あんたがた」シリーズ第3弾です

  1. #atgt2019 14匁にC++の力で挑んだが甜菜はそんなものをふっとばして答えにたどり着く
  2. #atgm_2020 12匁 特殊な数独をソルバーで解くためにpythonとpulpを勉強する

atgtとは

「Twitterのあんたがたに挑戦します」とは？
「あめちゃん」が考案し、2ちゃんねるVIP板にて開催された「VIPPERのあんたがたに挑戦します」
GMが提示したパスワードから出題される謎を解き、その答えが指し示す「場所」に突撃すると、そこには次のパスワードが。

全国に散らばった謎を辿り、顔も知らない仲間達と協力する、世界で最もｗｋｔｋな遊びです。
そして、その遊びはTwitterの世界にも持ち込まれました。それが「Twitterのあんたがたに挑戦します」です。

新型コロナウイルスの流行により、依然として外出の自粛が要請されるなど大変な事態となっています。しかし、外出を不要とするシステムを使用し、今だからこそできるあんたがたをお届けします。

Twitterのあんたがたに挑戦します2020GMからのお知らせ

  • ハッシュタグは #atgt2020 を使用して下さい。
  • 本イベントに関するツイートには全てこのハッシュタグを付けて下さい。
  • GM側からあんたがたに対するサポートは以下の通りです。 問題が長時間解けない時のヒント出しを行います。 ヒントを出す前に、それが必要かどうかの投票を行います。
  • GMは24時間体制でのサポートは行いません。
  • サポートできない時間帯もございます。ご了承ください。

11匁

そうして始まった11問目、歌詞から音程と曲を行ごとに(?)特定してなんかいろいろしたところ、velatoというプログラミング言語にたどり着きました。

調を基準として音の度数が大事な言語のようです。
調？度数？という人は音楽教育業界で知らない人はいないヤマハのオンライン資料を見てください。ちなみに筆者は子どもの頃にヤマハ音楽教室に通っていて、この辺のこともやったような気はするのですが、あんまり覚えてません。カデンツとかその応用とかその検定試験とかやった気がするんだけどなぁ・・・。
ヤマハ | 第4日 音階と調

ブラウザ上で動くplaygroundがない？なら作ればいいじゃない

velatoをオンライン上で動かせるのないのかなと思ってたのですが、どうもなさそうという。Twitterが舞台となって進むイベントの性質上、ブラウザ上で動かせるplaygroundがあるといいよなぁと思っていたところ、
velato-js
という処理系を発見。じゃあこれを動かそう

escodegenに依存している、それが問題だ。

velato-js自体はASTを作るところまでで、実際にブラウザで動かすためにJavaScriptに変換するのはescodegenというツールになる。

velato-jsのドキュメントにはbowerでとか書いてあるが、そんな4億年くらい昔に死んだツールは使いたくない。

幸いこれはnpmに公開されている。ということはUNPKGあたりからpre buildされたjsが手に入るんじゃね？そう思っていた。

ところが
https://unpkg.com/browse/escodegen@2.0.0/
にあるJSファイルはすべてブラウザでは動かない。requireとかが見える。

READMEには

Escodegen can be used in a web browser:

<script src="escodegen.browser.js"></script>

escodegen.browser.js can be found in tagged revisions on GitHub.

とある。tagged revisions on GitHubってどこやねん。Github packagesにもGithub Releaseにもtagついたcommitにもねーぞ。

仕方ないので手元でビルドする。

今どき珍しくpackage-lock.jsonすらないのでnpm iする。大量のwarningがでた。

よほどPR投げつけようかと思ったが、commitがあるのにPRのmergeがぜんぜんされてないというよくわかんない状態に陥ってるようだったので、断念した。

というかまじでせめてchange logくらい書いてください、何も言わずにさらっとメジャーバージョン上げんな、頼むし、まじで

npm buildして成果物をcpしてgit管理に含めるというなんともあまり良くない依存管理でとりあえず乗り切ることにしました。

仮完成

UIは雑にbootstrap4で組みました。リアルタイム謎解きですからね、動けばいいのですがさすがにcssなしは・・・と思ったので。そういえばbootstrap5が出たらしいですね。

エラーメッセージ表示機能追加

さすがにエラーはF12してみて！だとスマホユーザーが困ってしまうので、追加しました。

どうも様子がおかしい

どうも言語仕様に対して解釈違いがあるらしい・・・？(よくわかってない

当該部分は次のようになっています。

velato.js
    Note.prototype.asInt = function(rootNote) {
      var distance, int, intervalTable;
      distance = this.semitoneDistance(rootNote);

      /*
       * In the Root of C
       * c#  d  d# e f f# g g# a a# b
       * 0   1  2  3 4 5  - 6  7 8  9
       */
      intervalTable = ["Minor Second", "Major Second", "Minor Third", "Major Third", "Perfect Fourth", "Augmented Fourth, Diminished Fifth", "Minor Sixth", "Major Sixth", "Minor Seventh", "Major Seventh"];
      int = intervalTable.indexOf(distance.interval);
      if (int === -1) {
        return null;
      }
      return int;
    };

intervalTableを書き換えて、ということらしいのですが、ライブラリそのものに手を出したくないので、prototype経由で差し替えます。

    const originalAsintFunc = Velato.Note.prototype.asInt;
    const replacedAsIntFunc = function(rootNote, changed) {
        var distance, int, intervalTable;
        distance = this.semitoneDistance(rootNote);
        /*
         * In the Root of C
         * c#  d  d# e f f# g g# a a# b
         * 1   2  3  4 5 6  - 7  8 9  10
         */
        intervalTable =  ["Perfect Prime", "Minor Second", "Major Second", "Minor Third", "Major Third", "Perfect Fourth", "Augmented Fourth, Diminished Fifth", "Minor Sixth", "Major Sixth", "Minor Seventh"];
        int = intervalTable.indexOf(distance.interval);
        if (int === -1) {
            return null;
        }
        return int;
    };
    //中略
    for (const form of document.forms) {
        //中略
        form.addEventListener("submit", e => {
            //中略
            Velato.Note.prototype.asInt = (form.changeRoot.checked) ? replacedAsIntFunc : originalAsintFunc;
            try {
                const re = Velato.compileJS(form.in.value);
                //中略
            } catch (e) {
                //中略
            }
        });
    }

そんなわけで次のような感じになりました。

image.png

token is null(未解決)

image.png

何故かエラー落ちするという現象が確認されています。

出力がおかしい(未解決)

image.png

実行結果はfとなっていますが、脳内コンパイルされた方いわく、fiとなるのが正しいようです。実際これを使って問題の次のステップに進めたのですからfiが正でしょう。ドウシテ・・・。

11匁のその後

人力コンパイル班の活躍で問題は次のステップに進めたようでよかったです。その後は埋め込んだツイートにぶら下がっているまとめをみるか、自分でTwitterを検索して見てください。

イベント終了時のGMのコメントがこちらです。きっとQiitaかなにかで記事を出してくれるでしょう。

問題解説

ヴェールに包まれた – atgt2020解説ページ

Velatoで数字を記述するには、基準音(ドキュメントではCommand Root Note)を予め指定した上で、その基準音からどれだけ離れているかによって数字を指定する。離れれば離れるほど大きな数値を表すことになるのだが、実は公式ドキュメントの中でも「どれくらい離れるとどの数値に対応するのか」について矛盾が存在していた。

なるほどなぁ。この点については上のprototype injectionで対応できてたと思うんですよね。

それとは別のバグも踏んでしまった感があるのでつらい。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0