Blocklyで独自言語のピースを作成(心機一転)：失敗

之山

前回までの流れ

こんな感じでやってきたけど，GitHubから持ってきたものの中にサイトで指定されてたパスがないわ，ブラウザから手元のファイルを上手く使えないわで躓いたので，心機一転，やり直す．

とは言っても，少し同じ作業はあるので，その部分は短くする．



今回の目標

自分で設計した言語に合わせてBlocklyで置くことができるブロックを変更していく．
一旦は，"play(60, 0.5);" のようにplay関数を表現できるようなものを作成．


ブロック作成

今回参照する記事はこれ．(2019年の記事)

Blockly Developer Tooolsでブロック作成するところまでは前回の記事でやったから省略．

この記事ではBlock DefinitionがJSONだからそこだけ変えてExport．


サンプルページの作成

play.jsが変更ない状態で一応保持していたいので，play.jsをコピーしてPMusic.jsとした．

play.jsにplay_block.jsonの内容を付け加える．

Blockly.defineBlocksWithJsonArray(
    [{
        "type": "play",
        "message0": "play %1 Note No. %2 during %3",
        "args0": [
          {
            "type": "input_dummy"
          },
          {
            "type": "input_value",
            "name": "Note No.",
            "check": "Number"
          },
          {
            "type": "input_value",
            "name": "during",
            "check": "Number"
          }
        ],
        "inputsInline": true,
        "output": null,
        "colour": 230,
        "tooltip": "ノートナンバーの音をduringの間流す",
        "helpUrl": ""
      }]
  );

  javascript.javascriptGenerator.forBlock['play'] = function(block, generator) {
    var value_note_no_ = generator.valueToCode(block, 'Note No.', javascript.Order.ATOMIC);
    var value_during = generator.valueToCode(block, 'during', javascript.Order.ATOMIC);
    // TODO: Assemble javascript into code variable.
    var code = 'play(' + value_note_no_ + ', ' + value_during + ');';
    // TODO: Change ORDER_NONE to the correct strength.
    return [code, Blockly.javascript.ORDER_NONE];
  };


HTMLファイルの作成

HTMLファイルを作成する前に，今後必要になるファイルを公式サイトからダウンロードする．

ここではGitHubから取得してきている．

必要なのは，
・Blockly/appengine/blockly_compressed.jjs

blocks_compressed.jsとjavascript_compressed.jsも必要というようになっていたが，このGitHubではファイルが無かったのでバージョンが古いのかもしれない．
ファイル名でググると一応見つかったのでそれは貼っておくが，上手く動作するのかは不明．

blocks_compressed

javascript_compressed

言語対応のファイルをフォルダごと加える．これはGitHubのほうにもある．
msg/js/en.jsが欲しいのでmsgフォルダごとコピー．
と思って中身見てみたら中身JSONファイルになってた．これもバージョン変わってるのが原因かもしれない．ということで先ほどのサイトからen.jsだけコピーしてきてmsg/js/en.jsのパスを作成した．

en.js

DLしたらindex.htmlを作成．



中断

ここまでやってきたが，JSONを使わないやり方で成功したのでそちらに誘導する．

この記事が気に入ったらサポートをしてみませんか？