Otto Blockly の Web 版を使う

2022年4月14日

Otto ロボットの作者 Camilo さん曰く、Otto Blockly の Web版について、アクセスが集中すると動作が不安定になる現象を確認しており、現在サーバー増強などの対策を検討中とのこと。現時点で安定して使うにはディスクトップ版をおすすめするとのことでした。ディスクトップ版のダウンロードはこちらから。

https://www.ottodiy.com/software

使い方はこちらから

Otto Blockly ガイド

---

Otto DIY ロボットのプログラミングをビジュアルにできる開発ツール Otto Blockly の Webブラウザー版がオフィシャルにリリースになったようです。ここでは Otto Blockly Web版のセットアップの方法をみていきたいと思います。なお、ここでは主に Windows 版を例に説明を進めますが、同じことは Mac、Linux でも行うことができます。

何故 Web 版？ インストール中に変な警告が出ないので安心してセットアップできる Otto Blockly Web 版

Otto Blockly Web 版、機能的には Otto Blockly のディスクトップ版 と全く一緒なのですが、ディスクトップ版はコードサインというベンダー発行の証明書によるアプリケーションの登録作業がまだ行われていないため、インストールの際、オペレーティングシステムから警告メッセージのようなものが出てくるのを無視する必要があり、少し気持ちが悪いなと思われるかたもいるようでした。Web版をセットアップする場合、このインストール中に警告が出てくるという問題に遭遇しなくてよいので、より安心してセットアップができ、その後の使用感についてはディスクトップ版と変わりません。特にお友達や、知人、他人のマシンにインストールをする場合など、Web 版のほうが変な不安を相手に与えずインストールできそうですね。

Otto Blockly Web 版をとりあえず開いてみる

Web版、とりあえず開始してみるのはすごく簡単です。 Webブラウザーで次の URL にアクセスするだけです

https://ottoschool.com/blockly

サンプルプログラムを開いてみましょう。帽子のマークをクリックするとサンプルプログラムのリストが出てきます。中から「Level 1 | Otto walk」を選んでみます。

Otto を歩かせるサンプルプログラムがロードされました。

ブロックは実際は Arduino のプログラムに翻訳されて実行されます。ウィンドウ右上の </> のアイコンをクリックすると翻訳された Arduino のプログラムコードを確認することができます。さらにその表示されているコードの右上のアイコンをクリックすることで Arduino のコード (.ino ファイル) としてファイルをダウンロードしたり、コードをクリップボードにコピーしたりすることができます。

Arduino IDE でダウンロードした .ino ファイルを開いたり、コピーしたコードをペーストすれば、Arduino IDE 経由で Otto DIY ロボットにプログラムを書き込むことも可能です。しかしこれは少し面倒です。PCに Arduino オフィシャルサイトから提供されている Arduino Create Agent というソフトをインストールすることでこの状況をさらに改善することができます。

　Arduino Create Agent をインストール、セットアップすることで Otto ロボットへのプログラム書き込みも可能に

Otto DIY のロボットへのプログラムの書き込みは基本的に Otto を PC に USB ケーブルで接続し PC との間での「シリアル通信」という通信を経て行われます。ここで Webブラウザーが直接 USB ポートを経て「シリアル通信」ができてしまうとセキュリティー上あまり安全ではないので、現状ほとんどの Web ブラウザーで直接の通信はできないようになっています。

Ottp Blockly Web版は Otto とシリアル通信をするために Arduino Create Agent というソフトウェアを活用しています。 Arduino Create Agent は Arduino コミュニティーによりメインテナンスされており、インストーラーはコードサインもされているので、インストール中に警告が出てくるようなこともありません。Arduino Create Agent のインストールは次の URL リンクからご自身のプラットフォームに合うインストーラーを探してダウンロード、実行します。

https://github.com/arduino/arduino-create-agent/releases

インストールさえすればOKとなればいいんですが、一つ手作業で設定を変えなければならないところがあります。Arduino Create Agent の設定ファイルである config.ini というファイルをテキストエディターで開いて編集します。config.ini ファイルはつぎの場所にあります。

• Mac の場合: ~/Applications/ArduinoCreateAgent/ArduinoCreateAgent.app/Contents/MacOS/config.ini
• Linux の場合: ~/ArduinoCreateAgent/config.ini
• Windows の場合: C:\Users[your user]\AppData\Roaming\ArduinoCreateAgent

ファイルを開いたら origins のところに  http://ottoschool.com という項目を追加します。変更した後のファイルは例えば次のような感じです

# Type of garbage collection. std = Normal garbage collection allowing system to decide 
# (this has been known to cause a stop the world in the middle of a CNC job which can 
# cause lost responses from the CNC controller and thus stalled jobs. use max instead to
# solve.), off = let memory grow unbounded (you have to send in the gc command manually
# to garbage collect or you will run out of RAM eventually), max = Force garbage collection
# on each recv or send on a serial port (this minimizes stop the world events and thus
# lost serial responses, but increases CPU usage)
gc = std
# Override the hostname we get from the OS
hostname = unknown-hostname  
# Regular expression to filter serial port list
regex = usb|acm|com  
# show debug logging
v = true  
appName = CreateAgent/Stable
updateUrl = https://downloads.arduino.cc/
origins = https://ottoschool.com, https://local.arduino.cc:8000
#httpProxy = http://your.proxy:port # Proxy server for HTTP requests
crashreport = false # enable crashreport logging

設定を変更したら Arduino Create Agent を再起動します。Arduino Create Agent は一度起動されると裏でずっと動いているので、これを一度停止して、再度立ち上げます。Windows の場合、常駐している Arduino Create Agent はトレイの中のアイコンで確認できます。これを一度停止（Quit Agent）して、そのあと再び Arduino Create Agent を起動します。

セットアップができたら [？] ボタンの左側にあるボタンをクリックします。これは Otto にプログラムを書き込むときに使うボタンです。

ブラウザーと Arduino Create Agent との接続がうまくいっていれば Agent Installed と Agent Connected がそれぞれ Yes になります。

さてでは Otto にプログラムを書き込んでみましょう。まず先ほどクリックしたボタンの左側のプルダウンリストが「Arduino Nano (old bootloader)」になっていることを確認します。違っていたら一度今開いたウインドウを閉じて（ウインドウ以外の箇所をクリックすることで閉じることができます）、設定を変更してから再びプログラム書き込みのウィンドウを開きます。これは書き込む先の CPU ボードの選択で、Otto DIY スタータキット由来のロボットは Arduino Nano (old bootloader) を選択します。

Ottoロボットと PC を USB ケーブルでつなげます。次に 過去込みウィンドウの「Select Port」のプルダウンリストをクリックします。出てきた番号を選択します。

[Compile] ボタンがクリックできるようになります。これをクリックします。

コンパイル（プログラムを CPU が実行できる形式に変換する作業）がうまくいくと [Upload] ボタンがクリックできるようになります。

[Upload] ボタンをクリックしてプログラムを Otto に転送します。

無事 Upload に成功すると Otto は転送された新しいプログラムの実行を始めます。

設定ファイルを変更しなければならないところは少し面倒ですが、ブラウザーからプログラムができるのは手軽で魅力的だなぁと思いました。そしてPC にインストールするプログラムがすべてコードサイン済みでオペレーティングシステムやウィルス検出ソフトなどに警告されないところもいいところかなぁと思いました。

一方で Otto Blockly Web 版をブラウザーで動かすのははそれなりに CPU パワーも必要になるようで。タブをたくさん広げがちなわたしは、一旦開いているブラウザータブを閉じてからでないと Otto Blocky はスムーズに動いてくれませんでした。その点、ディスクトップ版は単体のアプリケーションなので、実行することによる他の作業への影響は最小限で済みそうです。

ご自身の使い勝手に合わせて Web 版、ディスクトップ版、使い分けられるといいのかと思います。

Otto のツールを使うと Arduino のプログラミングがビジュアルプログラミングでできて、しかもブラウザーからできて、しかもそれらはすべて無償のツールでできるわけです。さらに Otto Blockly はオープンソースでプログラムコードも公開されているわけで、いろいろ応用もできそうです。この応用範囲の広さ、ユーザーに与える懐の深さが Otto の魅力だなぁと思います！