Kouji Takao

先日の続き です。今回はスモウルビーそのものを改良して、スモウルビーのブロックをRubyのプログラムに変換するやり方を説明します。    Google広告やりたいこと: スモウルビーのブロックをRubyのプログラムに変換するイベントブロック フラグが押されたとき を Ruby のプログラム when_flag_clicked do ~ end に変換できるようにします。例によって最終的な修正内容をざっと見てください。これでだいたい何をするのか、わかると思います。feat: when_flag_cliecked #326今回もチュートリアル形式で説明していきます。スモウルビーのブロックをRubyのプログラムに変換する処理は、ブロックのカテゴリごとにファイルを分けて実装しています。今回は、イベントカテゴリなので修正するのは次のファイルです。テスト    smalruby3-gui/test/integration/ruby-tab/events.test.js実装    smalruby3-gui/src/lib/ruby-generator/event.js準備まずは常にテストを実行できる状態にします。smalruby3-developレポジトリを利用して、Docker上で開発しているので、docker-composeコマンドを使います。docker-compose run --rm gui bash -c "\$(npm bin)/jest --watch"しばらくすると以下のように表示されるはずです。No tests found related to files changed since last commit.Press `a` to run all tests, or run Jest with `--watchAll`.Watch Usage › Press a to run all tests. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run.さらに、今回はテストの実行前に、修正したJavaScriptをコンパイルして1つのファイルにする必要があります。なんだか難しそうな気がしますが大丈夫です。テストと同じように、ファイルを保存したタイミングで自動的にコンパイルしてくれる仕組みが用意されています。そのため以下のコマンドを実行すればOKです。docker-compose run --rm gui npm run watchこれにはかなり時間がかかりますが、以下のように表示されたら準備完了です。OK的な表示がでないので不安になりますが、NGの場合は赤色の字でいろいろ出るので、エラーが発生したことがわかると思います。    Child worker:         2 assets        Entrypoint main = extension-worker.js extension-worker.js.map           20 modulesテストの実装つぎにテストを作ります。smalruby3-gui/test/integration/ruby-tab/events.test.js:32行目 に記述されている変換後のRubyのプログラムを修正します。# 修正前self.when(:flag_clicked) doend# 修正後when_flag_clicked doendテストの修正はこれだけです。簡単ですね。保存すると自動的にテストが実行されて、以下のようなエラーが表示されます。これでOKです。それにしても、jestの実行結果はわかりやすい。    Difference:    - Expected    + Received    @@ -1,6 +1,6 @@    - when_flag_clicked do    + self.when(:flag_clicked) do変換処理の実装つぎに変換処理を実装します。smalruby3-gui/src/lib/ruby-generator/event.js:7行目 を修正します。Generator.event_whenflagclicked = function (block) { // (1)    block.isStatement = true; // (2)    return `${Generator.spriteName()}.when(:flag_clicked) do\n`; // (3)};変換処理では、次のようことを行います。Generator.%ブロック名% に変換を行う関数をセットします (1)。先日と同じように今回の変換対象のブロック名は event_whenflagclicked ですので、 Generator.event_whenflagclicked となります。変換後のRubyのプログラムが式であれば、isStatement を true にします (2)。x座標のような変数の場合は isStatement に対して何もせず、デフォルトの false のままにします。最後に変換後のRubyのプログラムを生成して、関数の戻り値として返します(3)。また、 (10)歩動かす のようにブロックに引数がある場合は、ここで引数を取り出して Ruby のプログラムに変換します smalruby3-gui/src/lib/ruby-generator/motion.js:8行目 。今回は最後のRubyのプログラムを変更するだけです。Generator.event_whenflagclicked = function (block) {    block.isStatement = true;    return `when_flag_clicked do\n`; // ここを修正};保存すると、テストが自動的に実行されて、関連するすべてのテストがパスすれば完成です。(省略)Test Suites: 3 passed, 3 totalTests:       17 passed, 17 totalSnapshots:   0 totalTime:        43.538s修正ができたら、コミットしてpushします。そして、PRを作成して私がレビューしてマージです。これで、イベントブロック フラグが押されたとき を Ruby のプログラム when_flag_clicked do ~ end に変換できるようになりました。今回はとても簡単でしたね(※)。まとめまとめます。スモウルビーのブロックをRubyのプログラムに変換する処理は、jest --watch と npm run watch を実行してテストを実行する準備をするsmalruby3-gui/test/integration/ruby-tab/ にテストを実装するsmalruby3-gui/src/lib/ruby-generator/ に変換処理を実装するコミットしてpush、PRを作成するCircle CIが通ればマージするという流れで実装します。その逆である Rubyのプログラムをスモウルビーのブロックに変換すること と比べると簡単にできましたね。協力者の募集スモウルビーの開発にご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。※ 変換処理を作ることは簡単でしたが、その前段階として、手元で自動テストを正しく動作させることが大変でした。 Docker上でjest + Selenium + Headless ChromeでE2Eテストを実現する 、 test: add test for event blocks to generate ruby #324 、 test: block to ruby #325 がその足跡です。

スモウルビーの開発方法:スモウルビーのブロックをRubyのプログラムに変換する

報告です。スモウルビーは、「CircleCI セキュリティアラート: CircleCI 内に保存されているシークレットのローテーションをお願いいたします」に対応済みですので、ご安心ください。

報告:CircleCIのシークレットのローテーションが完了しました

スモウルビーの開発を Docker 上で行うようにしましたが、その結果 integration テストが失敗するようになっていました。今回、それを解消することができたのでここに記録を残しておきます。    Google広告最近では仕事で Docker (docker-compose) を使うことがほとんどで、その便利さからスモウルビーの開発も Docker 上で行うようにしました。Smalruby 3 Development Environment実は、Docker に移行したときにミスをしていました。手元でのテストは unit までしかしておらず、Selenium を使った E2E のテスト integration は実行していませんでした。Circle CI にパスしていたので問題ないと決めつけてしまっていました。しかし、というかやはりというか、今回、スモウルビーの開発を再開にするにあたって問題が発覚しました。integration のテストが失敗するんですよね。これは Docker 上でのみ発生します。確認は重要ですね。原因は、 integration テストで利用するためのウェブブラウザがセットアップできていないことでした。何も設定していないので当然ですね。考慮漏れでした。対策1: 同じコンテナにウェブブラウザをインストールする (未完)そこで、同じコンテナにウェブブラウザをセットアップするためにいろいろ試しました。Circle CI の Docker イメージ (cimg/node:14.20-browsers) を使ってみるpuppeteer のドキュメントに従って google-chrome-standalone をインストールしてみるjest から google-chrome-standalone を起動するときのパラメーターを変更してみるしかし、私にはできませんでした。原因の調べ方がわからなかったのが大きいです。ウェブブラウザが起動しなかった以上の情報が得られませんでした。 jest や Node.js から Selenium を使う方法をよくわかっていないのがまずかったですね。また、 jest の公式ドキュメント「puppeteer を使用する」 を読む限り、 puppeteer を使うと良さそうでしたが、自動テストの多くは Scratch のものなので変更点が多すぎて採用できませんでした。対策2: 別コンテナにウェブブラウザをインストールする (不採用)そこで、 Ruby on Rails の開発でよく採用されている別コンテナで Selenium と Chrome を起動する方法を試すことにしました。これなら勝手がよくわかっているのでなんとかなりそうです。【Rails5.2 Selenium】Docker 環境下でのRSpec のSystem test実行方法【Rails6】Docker環境でRSpecのシステムスペックを実行するまず docker-compose.yml に以下の設定を追加します。  chrome:    image: selenium/standalone-chrome:latest    environment:      - START_XVFB=false    shm_size: 2gb    ports:      - 4444:4444さらに docker-compose.yml に以下の設定を追加して、環境変数で Selenium と Chrome を操作するURLをスモウルビーに伝えます。services:  gui:    build: gui    environment:      (省略)      - SELENIUM_REMOTE_URL=http://chrome:4444/wd/hubポートの 4444 は設定しているので理解できたのですが、/wd/hub はなぜそのパスを指定するのかこのときはまだわかりませんした。あとは、これを jest のテストで扱えばOKなはず。smalruby3-gui/test/helpers/selenium-helper.js:59行付近 で Selenium の設定をしています。環境変数 SELENIUM_REMOTE_URL が設定されていれば、自動的にそれを使ってリモートの Chrome を使うようになっているとのこと。素晴らしい！import webdriver from 'selenium-webdriver';// 省略class SeleniumHelper {    constructor () {        // 省略    }    // 省略    getDriver () {        const chromeCapabilities = webdriver.Capabilities.chrome();        const args = [];        // 省略        this.driver = new webdriver.Builder()            // .usingServer(process.env.SELENIUM_REMOTE_URL) は不要            .forBrowser('chrome')            .withCapabilities(chromeCapabilities)            .build();        return this.driver;    }これでリモートのChromeを使うことができるようになりました。しかしながら、それでもテストに失敗してしまいます。実は integration のテストはローカルのブラウザでローカルのファイルにアクセスすることを前提にしていたのです。そのため、ブラウザが開くURLは file://~ を指定していました。smalruby3-gui/test/helpers/selenium-helper.js:141行目        return this.driver            .get(`file://${uri}`) // ここでローカルのファイルにアクセスしている            .then(() => (                this.driver.executeScript('window.onbeforeunload = undefined;')            ))これではだめですね。以下のように修正して、        return this.driver            .get(`http://gui:8061${uri}`)            .then(() => (                this.driver.executeScript('window.onbeforeunload = undefined;')            ))さらにテストのコード smalruby3-gui/test/integration/ruby-tab.test.js:20行目 を修正して、const uri = '/';uri をローカルのファイルへの絶対パスではなく / に変更すると、期待通りに動作して、テストが成功することを確認できました。ただ、この変更は面倒すぎます。CircleCIと手元でテスト内容を変えないといけない手元で自動テストを実行する前にDevサーバーを起動しておかないといけないさらにそのDevサーバーは、リモートのChromeからguiという名前でアクセスできないといけない    ので、同じタイミングで起動したり、 docker-compose exec gui で自動テストを実行しないといけないjest と比べると Ruby on Rails は、これらをすべてフレームワーク側で用意してくれているのは本当にありがたいことだなと思いました。対策3: 同じコンテナにウェブブラウザをインストールする v2 (採用！)さて、これからどうするか。リモートのChromeならば期待通りに動作したので、やはりここはローカルのChromeで再度チャレンジしてみようと思います。仕組みは理解できたし、動作確認のやり方も増えたのでなんとかなるはず。Running Puppeteer in Docker を参考にして、Dockerfileに設定を追加します。smalruby3-develop/gui/DockerfileRUN set -eux \    && apt update \    && apt install -y wget gnupg \    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \    && apt update \    && apt install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \      --no-install-recommends \    && rm -rf /var/lib/apt/lists/*注意点としては、google-chrome-stable を Docker イメージにインストールした状態で、環境変数 DETECT_CHROMEDRIVER_VERSION を true にして smalruby3-gui の npm install を実行することです。ENV DETECT_CHROMEDRIVER_VERSION trueこうすると、適切な chromedriver がインストールされます。npm install を先に実行してしまうと、google-chrome-stable とのバージョンのミスマッチが発生して、正しく動作しません。この状態で、google-chrome-stable に適切なオプションを指定して、 file:///app/gui/smalruby3-gui/build/index.html にアクセスしてみます。オプションは 「Seleniumでよく使うChromeOptionsまとめ」を参考にしました。# google-chrome-stable --headless --no-sandbox --disable-setuid-sandbox --disable-gpu --disable-dev-shm-usage --disable-extensions --use-fake-ui-for-media-stream=deny --autoplay-policy=no-user-gesture-required file:///app/gui/smalruby3-gui/build/index.html[0105/084535.261668:ERROR:bus.cc(399)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory[0105/084535.262802:ERROR:bus.cc(399)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory[0105/084535.268792:WARNING:bluez_dbus_manager.cc(247)] Floss manager not present, cannot set Floss enable/disable.[0105/084535.280952:WARNING:sandbox_linux.cc(380)] InitializeSandbox() called with multiple threads in process gpu-process.[0105/084537.223678:WARNING:audio_manager_linux.cc(60)] Falling back to ALSA for audio output. PulseAudio is not available or could not be initialized.[0105/084537.281428:ERROR:gl_utils.cc(319)] [.WebGL-0x3f3c0a2fbf00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels[0105/084537.446800:ERROR:gl_utils.cc(319)] [.WebGL-0x3f3c0a2fbf00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels[0105/084537.469693:ERROR:gl_utils.cc(319)] [.WebGL-0x3f3c0a2fbf00]GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixelsエラーはたくさん出ていますがこれでOKです。NGなときは最後に Abnormal renderer termination. と出ます。つぎに自動テストと同じ内容を、Node.jsの REPL を使って試します。# nodeで Node.js の REPL を起動して、require ('chromedriver');const webdriver = require ('selenium-webdriver');const chromeCapabilities = webdriver.Capabilities.chrome();const args = [];args.push('--headless');args.push('--no-sandbox');args.push('--disable-gpu');args.push('--disable-dev-shm-usage');args.push('--disable-extensions');args.push('--use-fake-ui-for-media-stream=deny');args.push('--autoplay-policy=no-user-gesture-required');chromeCapabilities.set('chromeOptions', {args});chromeCapabilities.setLoggingPrefs({    performance: 'ALL'});const driver = new webdriver.Builder().forBrowser('chrome').withCapabilities(chromeCapabilities).build();driver.get('file:///app/gui/smalruby3-gui/build/index.html').then(() => { console.log('OK'); });と打ち込んでから少し待つと無事に OK と出ました。なるほどね。chromedriver のバージョンの違いが原因で期待通りに動作していなかったようです。これに合わせて jest の設定も変更しました。すると jest も正しく動作しました。test: run integration test on docker #323なお、 --disable-dev-shm-usage を設定しないと動作が不安定でした。オプションの付替えを何時間も試してようやくたどり着きました。最後に、Dockerの設定変更も行って作業完了です。build(gui): install chrome for integration testまとめます。スモウルビーの開発を Docker 上で行うようにしましたが、その結果 integration テストが失敗するようになっていました別コンテナでchromeを動かして integration テストが成功するようになったのですが、別の問題があるためこれは採用しませんでしたDockerにchromeをインストールして、chromeにオプションを適切に設定することで integration テストが成功するようになりました途中、何度も諦めようかと思いましたが、無事作業が完了できてよかったです。また、今回の作業を通じて、あらためて Ruby on Rails のすごさを思い知らされました。E2Eの自動テストを実行するまでの準備がこれほど面倒だとは思ってもみませんでした。すごい Rails！

Docker上でjest + Selenium + Headless ChromeでE2Eテストを実現する

今回はスモウルビーそのものを改良するときのやり方を説明します。開発するのは、Rubyのプログラムをスモウルビーのブロックに変換する機能です。    Google広告半年ぶりのスモウルビーの開発は難しかった…。やりたいことは、MADR「 self.whenからself.を取り除いたRubyの命令を検討する 」で決めた、イベントブロックと when_%event_type%(%args%) との相互変換です。しかし、なにから手を付けたらいいんだっけ？テストはどうやっていたんだっけ？動作確認はどうするんだっけ？と、疑問だらけ。少しずつ思い出しながら進めていますが、近い将来の自分のために、開発のためのドキュメントを残しておこうと思います。やりたいこと: Rubyのプログラムをスモウルビーのブロックに変換する今回は、Ruby の命令 when_flag_clicked do ~ end を、イベントブロック フラグが押されたとき に変換できるようにします。なにはともあれ最終的な修正内容をざっと見てください。これでだいたい何をするのか、わかると思います。feat: when_flag_clicked / ruby to block [#309] #321それでは、チュートリアル形式でスモウルビーそのものの開発方法を説明していきます。準備Rubyのプログラムをスモウルビーのブロックに変換する処理は、ブロックのカテゴリごとにファイルを分けて実装しています。今回は、イベントカテゴリなので修正するのは次のファイルです。テスト    smalruby3-gui/test/unit/lib/ruby-to-blocks-converter/event.test.js実装    smalruby3-gui/src/lib/ruby-to-blocks-converter/event.js他のカテゴリもファイル名からどのファイルに実装されているのか推測できると思います。基本的なブロックだけでなく、拡張機能のものも同じところにあります。まずは常にテストを実行できる状態にします (smalruby3-developレポジトリを利用して、Dockerを使って開発しています) 。docker-compose run --rm gui bash -c "\$(npm bin)/jest --watch"しばらくして以下のように表示されたら準備完了です。No tests found related to files changed since last commit.Press `a` to run all tests, or run Jest with `--watchAll`.Watch Usage › Press a to run all tests. › Press p to filter by a filename regex pattern. › Press t to filter by a test name regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run.テストの実装つぎにテストを作ります。先に変換処理を実装してもいいのですが、動作確認でブラウザを操作するのが手間なのと、テストを後で実装するとなると面倒くさくなります。私は先にテストから書くことをオススメします。smalruby3-gui/test/unit/lib/ruby-to-blocks-converter/event.test.js を修正します。以下が今回の修正対象のテストです。テストは jest を使っています。    describe('event_whenflagclicked', () => {        test('normal', () => {修正前は以下のようになっていました。code = 'self.when(:flag_clicked) { bounce_if_on_edge }'; // (1)expected = [ // (2)    {        opcode: 'event_whenflagclicked',        next: {            opcode: 'motion_ifonedgebounce'        }    }];convertAndExpectToEqualBlocks(converter, target, code, expected); // (3)(1) 変換対象のRubyのプログラムを code 変数に代入する(2) 変換結果のスモウルビーのブロック (を表現したデータ) を expected 変数に代入する(3) 実際にチェックする    convertAndExpectToEqualBlocks がうまいことやってくれる単純に修正するだけならテストは以下のように修正すればOKです。code = 'when_flag_clicked { bounce_if_on_edge }' // 修正したのはここだけexpected = [    {        opcode: 'event_whenflagclicked',        next: {            opcode: 'motion_ifonedgebounce'        }    }];convertAndExpectToEqualBlocks(converter, target, code, expected);実際には、 self.when もこれまでと同じように変換できることを確認しておきたいため、以下のように修正しました。ついでに、いくつかのパターンも追加しています。expected = [    {        opcode: 'event_whenflagclicked',        next: {            opcode: 'motion_ifonedgebounce'        }    }];[    'self.when(:flag_clicked) { bounce_if_on_edge }',    'when_flag_clicked { bounce_if_on_edge }',    'when_flag_clicked() { bounce_if_on_edge }', // ()を省略しない場合    'self.when_flag_clicked { bounce_if_on_edge }' // self.を省略しない場合].forEach(s => {    convertAndExpectToEqualBlocks(converter, target, s, expected);});これを保存すると、自動的にテストが実行されて以下のようなエラーになります。実際には色付けされていて、エラーは赤色で表示されるのでわかりやすいです。 jest はとても親切ですね。 FAIL  test/unit/lib/ruby-to-blocks-converter/event.test.js (26.179s)  ● RubyToBlocksConverter/Event › event_whenflagclicked › normal    expect(received).toHaveLength(length)    Expected value to have length:      0    Received:      [{"column": 0, "row": 0, "source": "when_flag_clicked", "text": "\"{SOURCE}\" is the wrong instruction.", "type": "error"}]    received.length:      1      at convertAndExpectToEqualBlocks (test/helpers/expect-to-equal-blocks.js:229:28)      at test/unit/lib/ruby-to-blocks-converter/event.test.js:38:64          at Array.forEach (<anonymous>)      at Object.<anonymous> (test/unit/lib/ruby-to-blocks-converter/event.test.js:37:7)          at new Promise (<anonymous>)      at processTicksAndRejections (internal/process/task_queues.js:95:5)変換処理の実装つぎに変換処理を実装します。smalruby3-gui/src/lib/ruby-to-blocks-converter/event.js を修正します。今回は「send(メソッド呼び出し)」という種類のRubyの命令を変換するため、 onSend を修正します。onSend: function (receiver, name, args, rubyBlockArgs, rubyBlock) {メソッド呼び出しのレシーバーが self か、未指定 (スモウルビーでは Opal.nil) のどちらかであることをチェックして、} else if (this._isSelf(receiver) || receiver === Opal.nil) {さらに以下のチェックをして、メソッド名が when_flag_clicked であること引数が指定されていないことブロック引数が指定されていることブロック変数 (ブロックパラメーター) が指定されていないことswitch (name) {// 省略case 'when_flag_clicked':    if (args.length == 0 && rubyBlockArgs && rubyBlockArgs.length === 0 && rubyBlock) {ようやくブロックを作る処理です。ブロック名 event_whenflagclicked とブロックの形状 hat を指定します。block = this._createBlock('event_whenflagclicked', 'hat');さらに、作ったブロックの中にRubyのブロック引数で指定した処理を入れるために、それを Ruby からブロックに変換したもの (rubyBlock) との親子関係を指定します。this._setParent(rubyBlock, block);これで変換処理ができました。保存すると、テストが自動的に実行されて、以下のような結果が表示されるはずです。 PASS  test/unit/lib/ruby-to-blocks-converter/event.test.js  RubyToBlocksConverter/Event    event_whenflagclicked      ✓ normal (71ms)      ✓ hat (26ms)      ✓ invalid (24ms)      ✓ error (10ms)(省略)Test Suites: 1 passed, 1 totalTests:       34 passed, 34 totalSnapshots:   0 totalTime:        6.602sスモウルビーのベースとしている Scratch の scratch-gui にはプログラミング言語からの変換処理はありません。そのため、独自に開発する必要がありました。仕組みを考えて、実際に動くようにするまでは大変でしたが、こうしてみるとよくできていますね。なお、 event_whenflagclicked のようにRubyの命令に対応するスモウルビーのブロックの名前を知っていないといけないのですが、それらは scratch-blocks の scratch-blocks/blocks_vertical/ に記述されています。今回のものは scratch-blocks/blocks_vertical/event.js:73行目 に記述されています。Blockly.Blocks['event_whenflagclicked'] = {  /**   * Block for when flag clicked.   * @this Blockly.Block   */  init: function() {    this.jsonInit({      "id": "event_whenflagclicked", // ブロックの名前      "message0": Blockly.Msg.EVENT_WHENFLAGCLICKED,      "args0": [        {          "type": "field_image",          "src": Blockly.mainWorkspace.options.pathToMedia + "green-flag.svg",          "width": 24,          "height": 24,          "alt": "flag"        }      ],      "category": Blockly.Categories.event,      "extensions": ["colours_event", "shape_hat"] // ブロックの形状は hat    });  }};これらのファイルには開発で使う様々な情報が記述されています。例えば、イベントブロック [スペース▼]キーが押されたとき は、以下のように記述されていて、 [スペース▼] の名前が KEY_OPTION であるということがわかります。scratch-blocks/blocks_vertical/event.js:265行目Blockly.Blocks['event_whenkeypressed'] = {  /**   * Block to send a broadcast.   * @this Blockly.Block   */  init: function() {    this.jsonInit({      "id": "event_whenkeypressed",      "message0": Blockly.Msg.EVENT_WHENKEYPRESSED,      "args0": [        {          "type": "field_dropdown",          "name": "KEY_OPTION",  // [スペース▼]の名前          "options": [            [Blockly.Msg.EVENT_WHENKEYPRESSED_SPACE, 'space'],            // 省略            ['9', '9']          ]        }      ],      "category": Blockly.Categories.event,      "extensions": ["colours_event", "shape_hat"]    });  }};また、 hat のようなブロックの形状には次のものがあります。statement: (10) 歩動かす のように上下にブロックをつけられるものhat: フラグを押されたとき のように下にのみブロックをつけられるものterminate: [すべてを止める▼] のように上にのみブロックをつけられるものvalue: x座標 のような値を表すものvalue_boolean: (マウスポインター▼)に触れた のような、はい/いいえの真偽値を表すもの    一部バグ で boolean を指定しているものがありますが、正しくはvalue_booleanです。修正ができたら、コミットしてpushします。コミットメッセージは commitlint に従うようにします。手元で npm install してあれば husky 経由で手元でコミットするときにチェックしてくれるので安心です。あとはPRを作成してレビューしてマージです。このとき Circle CIによる自動テスト がパスすることもチェックしてくださいね。これでRubyのプログラム when_flag_clicked do ~ end をスモウルビーのブロック フラグが押されたとき に変換することができるようになりました。まとめまとめます。Rubyのプログラムをスモウルビーのブロックに変換する処理は、jest --watch を実行してテストを実行する準備をするsmalruby3-gui/test/unit/lib/ruby-to-blocks-converter/ にテストを実装するsmalruby3-gui/src/lib/ruby-to-blocks-converter/ に変換処理を実装するコミットしてpush、PRを作成するCircle CIが通ればマージするという流れで実装します。協力者の募集スモウルビーの拡張機能のブロックは、Rubyのプログラムからスモウルビーのブロックに変換できないものがあります。理由は私の作業時間が取れないからです。そのため、スモウルビーにご協力いただける方を常に募集しています。ご協力いただける方は、 contact@smalruby.jp までご連絡いただいてもいいですし、連絡なしで「xxx のブロックに対応しました」というPRを作成してもらってもかまいません。むしろその方が好都合です。日本中の小・中学生が学校の授業や地域のプログラミング教室でスモウルビーを使っています。みなさんのご協力で、たくさんの子どもたちがハッピーになります。ご協力、よろしくお願いします。

スモウルビーの開発方法:Rubyのプログラムをスモウルビーのブロックに変換する

スモウルビーのOpalを1.5.1にアップデートしました。たまにしかアップデートしないため、ここに記録を残しておきます。ついでにスモウルビーでどのようにOpalを利用しているのかも説明します。    Google広告スモウルビーでは、Rubyのプログラムからスモウルビーのブロックへ変換するときに Opal を利用しています。Opal は、Ruby のプログラムを JavaScript のプログラムに変換するためのソフトウェアです。このようにある言語から別の言語に変換するためのソフトウェアのことをトランスパイラと呼びます。Parser という Ruby のプログラムを解析してプログラムで扱いやすいデータ (構文木) にすることができる Ruby のライブラリがあります。これを Opal を利用して Ruby から JavaScript に変換して JavaScript で記述されたスモウルビーで利用しています。スモウルビーのソースコードでいうと、 smalruby3-gui/opal/ に、 Opal 本体 と、Parser を JavaScript に変換したものを含んでいる opal-parser を配置しています。確認してみると、Opalのバージョンは 0.11.4 でした。 0.11.4 がリリースされたのは Nov 7, 2018 とのことなのでもう4年以上前になりますね。そして、smalruby3-gui/opal/config-opal-parser.js で読み込んでいます。パーザーが対象としている Ruby のバージョンは 2.3 です。実は、2.3にしたいのではなくて、利用している opal-parser に同梱されているのが 2.3 だけだったので仕方なくそうしています。Opal.load('opal-parser');Opal.load('parser');Opal.load('parser/ruby23');Opal.Parser.CurrentRuby = Opal.Parser.Ruby23;これらは smalruby3-gui/scripts/make-setup-opal.js によって、ビルドするときに連結されて、 setup-opal.js という1つのファイルになってブラウザに読み込まれます。実際にParserのparseメソッドを呼び出しているのは、smalruby3-gui/src/lib/ruby-to-blocks-converter/index.jsconst root = RubyParser.$parse(code);Parserのparseメソッドの前に $ がついています。Opal では JavaScript から Ruby で定義されたメソッドを呼び出すときには $ をつけることになっています。これはJavaScriptのメソッドと区別するためですね。また、RubyParserはスモウルビーで定義したオブジェクトです。Parserのままでは使いにくいところが少しあったので、スモウルビーの起動時に Ruby で記述したモンキーパッチを Parser に適用しています。随分前に実装したところなのですが、我ながらすごいことをしていますね。smalruby3-gui/src/lib/ruby-parser.jsconst patch = Opal.String.$new(`# (省略)module Parser  class Diagnostic    def render_line(range, ellipsis=false, range_end=false)      source_line    = range.source_line# (省略)    end  endend`);eval(Opal.Opal.$compile(patch)); // eslint-disable-line no-evalexport default Opal.Parser.CurrentRuby;このようにして、スモウルビーでは Opal を使って Ruby のプログラムを解析してブロックに変換しています。しかし、まだ続きがあって、スモウルビーの単体テストは Node.js で実行しているのですが、残念ながらブラウザ用の Opal は使えませんでした。そこで単体テストでは Node.js 用に改良されたものを使っています。Opal Runtime for Node.js: 1.0.14Opal Compiler for Node.js: 1.0.15これらに対応する Opal は 1.0.0 で、opal-compilerに含まれるパーザーは Ruby 2.5用のものです。つまり、ブラウザと単体テストで Opal とパーザーのバージョンが異なっています。これは良くないことなのですが、当時から今に至るまで解決方法を見つけられていません。それで、思い立ってバージョンを揃えてみようと思って、まずは Node.js 用のものを最新のものにアップデートしてみました。diff --git a/package.json b/package.jsonindex 85186dc33..b2b5df0e0 100644--- a/package.json+++ b/package.json@@ -60,8 +60,8 @@     "lodash.throttle": "4.0.1",     "minilog": "3.1.0",     "omggif": "1.0.9",-    "opal-compiler": "^1.0.15",-    "opal-runtime": "^1.0.14",+    "opal-compiler": "^2.2.0",+    "opal-runtime": "^2.4.0",     "papaparse": "5.3.0",     "postcss-import": "^12.0.0",     "postcss-loader": "^3.0.0",そして、単体テストを実行すると、$ docker-compose run --rm gui bash -c "\$(npm bin)/jest test/unit/lib/ruby-to-blocks-converter/control.test.js"Creating smalruby3-develop_gui_run ... doneObject freezing is not supported by Opal FAIL  test/unit/lib/ruby-to-blocks-converter/control.test.js  ● Test suite failed to run    TypeError: $$(...).$first is not a function      at Object.<anonymous>.Opal.modules.nodejs/base (node_modules/opal-runtime/src/nodejs.js:15:24)      at Object.<anonymous>.Opal.load (node_modules/opal-runtime/src/opal.js:2661:20)      at Object.<anonymous>.Opal.require (node_modules/opal-runtime/src/opal.js:2694:17)      at constructor.$require (node_modules/opal-runtime/src/opal.js:5363:19)      at Object.<anonymous>.Opal.modules.nodejs (node_modules/opal-runtime/src/nodejs.js:3109:8)      at Object.<anonymous>.Opal.load (node_modules/opal-runtime/src/opal.js:2661:20)      at Object.<anonymous>.Opal.require (node_modules/opal-runtime/src/opal.js:2694:17)      at Object.<anonymous> (node_modules/opal-compiler/src/index.js:5:6)      at Object.<anonymous> (test/helpers/opal-setup.js:11:1)          at Generator.next (<anonymous>)      at processTicksAndRejections (internal/process/task_queues.js:95:5)Test Suites: 1 failed, 1 totalTests:       0 totalSnapshots:   0 totalTime:        25.043sRan all test suites matching /test\/unit\/lib\/ruby-to-blocks-converter\/control.test.js/i.ERROR: 1と、こんな具合にエラーがでて、簡単にアップデートできないことがわかりました。残念です。開発に利用している Node.js のバージョンが v14.21.2 なのが問題な気がして、なるべく最新のものに変えてみたりもしましたが、エラー内容は変わりませんでした。とりあえず、Node.js用のOpalの更新はあきらめて、実行時に使っている smalruby3-gui/opal/ の各ファイルを更新しました。 Opal の CDN から以下のファイルをダウンロードして上書きして、少しだけ修正すれば更新できました。//cdn.opalrb.com/opal/1.5.1/opal.js//cdn.opalrb.com/opal/1.5.1/opal.min.js//cdn.opalrb.com/opal/1.5.1/opal-parser.js//cdn.opalrb.com/opal/1.5.1/opal-parser.min.jstk2002mac:smalruby3-gui kouji$ git diff opal/config-opal.js opal/config-opal-parser.jsdiff --git a/opal/config-opal-parser.js b/opal/config-opal-parser.jsindex 931980b04..e2a4a2989 100644--- a/opal/config-opal-parser.js+++ b/opal/config-opal-parser.js@@ -1,4 +1,4 @@ Opal.load('opal-parser'); Opal.load('parser');-Opal.load('parser/ruby23');-Opal.Parser.CurrentRuby = Opal.Parser.Ruby23;+Opal.load('parser/ruby31');+Opal.Parser.CurrentRuby = Opal.Parser.Ruby31;diff --git a/opal/config-opal.js b/opal/config-opal.jsindex 913237fae..fa5d20999 100644--- a/opal/config-opal.js+++ b/opal/config-opal.js@@ -1,2 +1 @@-Opal.load('opal'); Opal.config.unsupported_features_severity = 'ignore';ふと思い立って、実行時の Opal をそのまま自動テストでも使えるようにしてみました。すると、きちんと動作するではありませんか。diff --git a/package.json b/package.jsonindex 85186dc33..cadc7713c 100644--- a/package.json+++ b/package.json@@ -60,8 +60,6 @@     "lodash.throttle": "4.0.1",     "minilog": "3.1.0",     "omggif": "1.0.9",-    "opal-compiler": "^1.0.15",-    "opal-runtime": "^1.0.14",     "papaparse": "5.3.0",     "postcss-import": "^12.0.0",     "postcss-loader": "^3.0.0",@@ -153,7 +151,7 @@     "setupFiles": [       "raf/polyfill",       "<rootDir>/test/helpers/enzyme-setup.js",-      "<rootDir>/test/helpers/opal-setup.js"+      "<rootDir>/static/javascripts/setup-opal.js"     ],     "testPathIgnorePatterns": [       "src/test.js"おそらく、Node.jsを10から14にバージョンアップさせたことが要因ではないかと思っていますが、詳しくは調べていません。無事に Opal をアップデートすることができました!opal-runtimeパッケージに合わせて、Opalのバージョンを1.5.1にしたのですが、これなら最新のOpalにバージョンアップすることができそうです。よかった。無事、Opalをアップデートすることができました。今後のためにスモウルビーの Opal についてまとめておきます。スモウルビーではRubyからブロックに変換するために Opal を利用している    smalruby3-gui/src/lib/ruby-to-blocks-converter/index.jsOpalはsmalruby3-gui/opal/に配置しているOpalのバージョンは 1.5.1。Rubyのパーザーのバージョンは 3.1。OpalのバージョンアップはOpal の CDN から以下のファイルをダウンロードして上書きすればOK    opal.jsopal.min.jsopal-parser.jsopal-parser.min.js

スモウルビーのOpalを1.5.1にアップデートしました！

スモウルビーの開発でもADR(MADR)を採用して、意思決定の記録を残すことにしました。    Google広告ADR はArchitectural Decision Record(s)の頭文字をとったもので、日本語では「システム構成に関する意思決定の記録」とでも表現すればいいでしょうかね。例えば、スモウルビーの開発時に、xxxというライブラリを使うことに決めたとします。そのときに、なぜそのライブラリが必要になったのかという背景ライブラリの選択肢としては他にどのようなものがあったのか。そして、それぞれの良い点と悪い点。数ある選択肢の中から、そのライブラリに決めた理由その結果、課題は解決できたのかといったことを頭の中で考えたり、手元にメモしたりしますが、それを、ある一定のフォーマットに従ってドキュメントとして残したものが ADR です。さらに、それをマークダウンで記述し、システム構成に限らず、なにかしら(Any)の意思決定を行った記録を残すためのものが MADR:Markdown Any Decision Records です。スモウルビーでも当然のように様々な意思決定をしています。直近では、 self.when をやめて別のメソッドにすることにしました。これまでは、なぜそのような考えにいきついたのか、そして、その結果、どうするのか、といったことは、意思決定した私だけが知っている状態でした。これまでの経験で、近い将来、「なんでこうしたんだっけ？」と、疑問に思うのが容易に想像できます。さっそくですが、 MADR を作成しました。self.whenからself.を取り除いたRubyの命令を検討するMADR を記述することで、他の選択肢についても良い点と悪い点を考えておくことで、開発中にやっぱりあっちがいいかな、それともこっちがよかったかな、という迷いが少なくなるこうやってブログなどで公開することで、(いちおう) 他人にも確認してもらっているという安心感があるというメリットはあるかなと思っています。ただ、すべての意思決定を MADR として記録することは続けられそうにありません。なにを記録して、なにを記録しないのかも決めないといけませんね。そして、その意思決定も MADR に記録することになるでしょうね (笑)いまのところ、MADR として記録したほうが、記録しない場合よりも開発効率が良さそうなもの、という基準で MADR として記録する/しないを判断していこうかなと考えています。いつまで続けられるかどうかは未知数ですが、スモウルビーの開発に MADR を採用しました、という報告でした。

スモウルビーでMADRを採用しました

お待たせしました、再びスモウルビーでmicro:bitが使えるようになりました！    Google広告数カ月ぶりにスモウルビーを更新しました。最新のScratch (scratch-vmおよびscratch-gui) をマージしたので、micro:bitが再び使えるようになりました。本当にお待たせしました。最初の不具合報告から半年以上も経ってしまっています。申し訳ない。言い訳ですが、私事で昨年の下半期は何もできませんでした。本当にもう何も。全部投げ出したくなるくらいに…。なんとか仕事はこなしていましたが、他のことは何も手つかずでした。が、そんなことはスモウルビーを使っておられる人には関係ないですね。本当に、お待たせしてしまって申し訳ありませんでした。以下、スモウルビーで micro:bit を使うための便利なリンク集です。ご利用ください。Scratch Linkmicro:bit拡張機能のファームウェアMicrobit More v1のファームウェア microbit-pxt-scratch-microbit-more-v050.hexそれにしても、スモウルビーをしばらく触っていなかったのでScratchの開発環境がいろいろ変わっていました。そのため、リリースできるようになるまでにかなり時間がかかってしまいました。ただ、その作業の過程で次のような知識を得ることもできました。CircleCIの設定GitHub の Fine-grained tokenshuskycommitlintなかでも、commitlint は手こずりました。私は普段からコミットメッセージに feat、test、chore、refactor などをつけるようにしていたので問題はなかったのですが、自動生成されるコミットメッセージやCIで自動化しているタスクのコミットメッセージなんかも修正しないといけませんでした。とはいえ、どれも理解できたら便利なものでした。仕事にも役立ちそうな感じ。ちょっとうれしいです。さぁ、次はScratchのブロックに対応する Ruby の命令の変更です。これはめっちゃ楽しみ！今回の更新作業はどちらかというとコードを書くというよりは、ソフトウェアの設定をするって感じだったので、久しぶりにスモウルビーの本体をがっつり触ることになるんですよね。ワクワクします。Smalruby & NPO プロジェクト on GitHub

スモウルビーのmicro:bit対応が帰ってきました

2022年のスモウルビーおよびNPO法人Rubyプログラミング少年団の活動を振り返りたいと思います。    Google広告今年も残すところ数時間となりました。そこで今回は、2022年のスモウルビーと、NPO法人Rubyプログラミング少年団の活動を振り返っていきたいと思います。スモウルビー今年も JAET全国大会 で 「GIGA スクール環境下における中学校技術のプログラミング －続「スモウルビー」の活用－」 と題してスモウルビーの活用事例を発表することができました。毎年恒例となっています。来年は 青森 で開催されます。これまでの私達の発表は研究とは名ばかりの、スモウルビーを使って授業をしました、という報告だけだったので、次の大会ではきちんとねらいをもった研究を行い、その成果を発表したいと考えています。お楽しみに！それで、肝心のスモウルビーですが、松江高専の学生のみなさんが少し機能追加をしてくださいました。が、少しだけの開発で終わってしまいました。もっとあんなことやこんなこともしたい、と計画はしていたのですが、私的な事情で開発を中断してしまいました。関係者のみなさまにはご迷惑をおかけしましたことを、お詫びいたします。特に、お問い合わせをしてくださった方への返信ができていません。この場をお借りして、お詫び申し上げます。それでもなにかしようと、この年末年始の休暇を使ってもりもり開発を再開しています。まずは、スモウルビーの現状をまとめるべく、以下のウェブページを公開しました。スモウルビー自体の説明スモウルビーの基本的なブロックとRubyの命令との対応というのも、ちょっとScratchのブロックに対応する Ruby の命令を変更したくて。class や def を使うことができません。スモウルビーでRubyを学べる、ということを掲げておきながら、 class が使えないって、それで Ruby を学べたことになるのかとね。それと、イベントのブロックを self.when(...) というメソッド呼び出しで実現しているのですが、 self. をなんとかしたいなと。この休みの間になんとかしようと思っています。もちろん従来の Ruby のプログラムもそのまま使えますのでご安心あれ。書籍「小学生から楽しむ きらきらRubyプログラミング」とは100%互換性を保った上での修正を行います。それと、micro:bitに接続できなくなってしまっているので、早急になおします。すみませんが、いましばらくお待ちいただきたいです。NPO法人Rubyプログラミング少年団今年も月に1度、オンラインで、 「CoderDojo しまね」 を運営しました。きちんと集計していないのですが、参加してくれたNinjaは平均すると3人程度と小規模なもので、メンターのほうが多い日があったりました。そして、10月からは島根県松江市のJR松江駅前のオープンソースラボにて、対面での 「CoderDojo しまね 松江会場」 を再開しました :tada:懐かしい顔ぶれに再開することもできました。３年ぶりにあったNinjaは本当に成長していました。「おぉ、久しぶりだね〜」なんて言いながら接していると、実は全員、弟さんだったりもしました (笑)。小学生の3年間って本当にすごいんだなって思いました。また、Ninjaの一人が全国大会につながる島根県小学生プログラミング大会で最優秀賞に選ばれました。俵君（島根大付５年）島根代表　小学生プログラミング最優秀これは本当にうれしかったですね。当日は、 (アドバイザーという名目で参加して) いつものように司会をさせていただきました。いろいろなドラマがあり、勝利の涙もあれば、悔し涙もあり、感動的な大会となりました。できることなら、YouTubeなどで興味があるみなさんにも録画したものを見ていただきたいくらいです。応募総数は8作品。来年も開催されますのでぜひご応募ください。 「CoderDojo しまね 松江会場」 に参加して、プログラミング力や発想力を高めるのもいいと思いますよ！ただ、肝心のNPO法人Rubyプログラミング少年団の運営は全然順調ではありません。事務作業が滞りまくっていて、関係省庁にはご迷惑をおかけっぱなしです。なんとかします、なんとかしまう、といいながら、全然やる気がでないので、 本当にどなたか助けていただきたいです。2023年の目標それでは、2023年の目標です！スモウルビーの継続開発    Microbit More v2 の対応Rubyのプログラムの補完機能 (VS Codeのインテリセンスみたいなの)スモウルビーで作成したプログラム(作品)の共有機能        Scratch のようにプログラムをアップロードして共有できるようにしますCoderDojo しまね/松江会場の運営    毎月1回。島根県小学生プログラミング大会に向けたプログラミング教室の実施JAET全国大会での発表    中学校技術のCとDの教材開発と実践を行って研究発表したい

スモウルビーの2022年を振り返って

今年も寒い季節がやってきました。寒さ対策の1つとして「充電式の湯たんぽ」を購入しました。これが思いの外いいものだったので紹介します。Pankaman 湯たんぽ 充電式 ゆたんぽ 電気湯たんぽ ソフト 暖房器具 省エネ エコ湯たんぽ 繰り返し3段階 過熱防止 防爆機能 電気湯たんぽ 秋冬防寒対策 省エネ 生理期最適 PSE認証済み＆METI経済省登録済み保護カバー付き    Google広告今年も寒い季節がやってきました。昨年の1月の電気料金は7万円以上。7人家族、お正月に親戚も集まった、というのはあるかもしれませんが、今年は対策をしておきたい。電気を使わない暖房器具としてまず使ってみたのが湯たんぽ。これはたしかにあたたかい。いや、逆に熱すぎるくらい。なのですが、とても便利が悪い…。家族にお湯を入れてもらっていたときは気が付かず、自分でお湯を入れてみてはじめてわかったのですが、湯たんぽのお湯はぎりぎりいっぱいまで入れないといけません。例えば2.6Lの湯たんぽであれば本当に2.6Lのお湯が必要です。2.5Lでも2.7Lでもだめなのです。少ないと冷めたときに容器内が減圧されてしまい、容器が変形したり破損したりします。多いとそのお湯が無駄になります。電気代節約のための湯たんぽなのにもったいない。また、寝る前の23時くらいに、沸騰したお湯を湯たんぽの狭い注ぎ口に事故なく注ぎ続けるなんて、とうてい無理です。というわけで、一週間も経たずに使うのをやめました。で、次に選んだ、というか家族に選んでもらったのが、電子レンジであっためるタイプ。その名も「ゆたぽん」。ほどよいあたたかさが3時間くらい続きます。あたためた直後も熱すぎることはなくちょうどよい。触るとビニールのガサガサという音がするのが気になるくらいで、これは良さそう。と、思ったのですが、これもNG。自宅の電子レンジはテーブルが回転するタイプなのですが、大きさ2倍のLサイズだとうまく電子レンジに入らず…。毎回、四苦八苦していい感じに置いて、電子レンジの壁にゆたぽんが触れないようにしないといけません。また、夜に電子レンジを使うと家族に迷惑がかかるというのもあり、これを使うのも断念。それで、なんかいいのがないかなとAmazonで物色していたら見つけましたよ、充電式の湯たんぽ。これはまじでベストバイ。たぶん、もう少ししたらインフルエンサーが紹介して入手困難になるんじゃないかと思うレベル。気になる人はとりあえず買ってください。Pankaman 湯たんぽ 充電式 ゆたんぽ 電気湯たんぽ ソフト 暖房器具 省エネ エコ湯たんぽ 繰り返し3段階 過熱防止 防爆機能 電気湯たんぽ 秋冬防寒対策 省エネ 生理期最適 PSE認証済み＆METI経済省登録済み保護カバー付き商品は、写真中央の本体、右上のカバー、充電ケーブルで構成されます。本体は、4重のビニール構造になっていて、その中に水と、それをあたためるために仕組みが入っています。もしかすると、バッテリーが入っているのかもしれませんが、確認できていません (廃棄するまでには確認しておかないといけない)。本体のカバーを開けると充電用のコネクタがあらわれます。充電ケーブルを接続すると約15分ほどであたたまります。あたためているときは水が沸騰するときのグツグツという音がして、あぁ、いまあったまっているんだな〜、と実感できます。使うときは、このカバーに入れて使います。めっちゃ肌触りがいいです。ふっわふわ。本体をカバーに入れるときのTIPSですが、写真のように充電口から入れるようにしています。当初は、充電口が持ちやすいので反対向きで入れていたのですが、それだと途中でカバーから本体が出てくることがありました。完成形。これを足元に置いて、足を上にのせたり、逆に足の上においたりして、使っています。ふっわふわで気持ちいい。ちなみにカバーは空洞になっています。膝の上において、この中に手を入れると幸せな気分になります。いかがでしたでしょうか？みなさんも寒い季節がやってきましたが、電気を節約しつつ、乗り切りましょう。

充電式の湯たんぽで足元ぽっかぽか

1日に1回はアクセスしているんじゃないかってくらい 使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」 には大変お世話になっています。これはすごいドキュメントです。永久保存版です。本当に感謝です。このドキュメントには、 Rails でシステムテスト(feature spec)を書くときに「あれ？こんなことがしたいけど、どうすればいいんだっけ？？？」というときの答えが書いてあります。60個以上あります。すごいです。ほとんどのことがこのドキュメントを読めばわかります。ただ、それでもわかんないことがあるんですよね。システムテストって、だいたい複雑でシステムによってやりたいことが違うんですよね。だから、60個じゃあ、まだまだ足りません。ということで、私がシステムテストを実装するときに見つけた問題とその回答をこのブログに随時挙げていこうと思います。「逆引きCapybara大辞典」を勝手に補完して、より良いものにしていこう、というシリーズものです。今回はその1回目ってことで、システムテストからPOSTする方法について書きます。    Google広告「逆引きCapybara大辞典」補完計画:001 POSTリクエストするvisitメソッドであるURLにアクセスすることができます。visit new_content_pathこのときの HTTP メソッドはGETです。RailsのControllerのアクションだと index, new, show ですね。では、Railsのcreateにあたる POST はどうすればいいのでしょうか？visit contents_path, method: :post # ！？ こんなことはできません！残念ながら Capybara には、POST するためのメソッドは用意されていません。visit root_path などでウェブページを表示しておく必要があります。uri = URI.parse(current_url)uri.path = contents_pathres = Net::HTTP.post_form(uri, param1: 'param1の値', param2: 'param2の値')expect(res).to be_a(Net::HTTPSuccess)メソッドにしてもいいでしょう。def post(path, **params)  uri = URI.parse(current_url)  uri.path = path  res = Net::HTTP.post_form(uri, **params)  expect(res).to be_a(Net::HTTPSuccess)endこれは以下のように使います。post cotents_path, param1: 'param1の値', param2: 'param2の値'