ししかわです。
社員研修の一環で、自作マウスを作って大会に出場します。
記事一覧 – 元Web屋のマイクロマウス製作記 | RT MicroMouse
M5StackをJavaScriptで開発できるよう準備していきます。
コア（M5Stack：ESP32）とマウスモジュール（STM32）間の通信処理を実装するのがゴールです。
前回、JavaScriptの開発プラットフォームとしてModdableを使うことを決めました。
今回はModdableの環境構築方法を紹介します。
本記事の内容は拙著「実践Moddable – JavaScriptではじめるIoTアプリケーション –」からの引用です。
インストール手順が長いため、「①PCのシミュレータ上でアプリを動かす」「②ESP32にアプリを書き込む」の
2回にわたって紹介します。
実行環境
- Moddable publicブランチの最新版 （f2e2ed2）
- ESP-IDF v3.2.2
- M5Stack Fire （2019年12月購入）
- Ubuntu v18.04 64bit
以下のセットアップ手順はOSがUbuntu 18.04 LTS ( 64 ビット)の場合です。 Windows や MacOS の方は公式のセットアップ手順を参照してください。
ホスト環境セットアップ（Linux）
GTK+ 3 ライブラリをインストールします。ModdableのデバッガやシミュレータのGUIを動かすために必要です。
$ sudo apt-get install libgtk-3-dev
ホームディレクトリ配下に Projects という名前でディレクトリを作成します。
$ mkdir ~/Projects
Moddable リポジトリをダウンロードするか、 git でクローンします。リポジトリの保存場所は任意ですが、本書では ~/Projects/moddable にある前提で進めます。
“~ (チルダ) ” は現在のユーザのホームディレクトリを指します。
$ cd ~/Projects $ git clone https://github.com/Moddable-OpenSource/moddable Cloning into 'moddable'... remote: Enumerating objects: 1401, done. remote: Counting objects: 100% (1401/1401), done. remote: Compressing objects: 100% (669/669), done. remote: Total 26064 (delta 805), reused 1083 (delta 679), pack-reused 24663 Receiving objects: 100% (26064/26064), 54.61 MiB | 902.00 KiB/s, done. Resolving deltas: 100% (15336/15336), done.
環境変数 MODDABLE の設定を ~/.bashrc に追記します。
.bashrc は Linux の代表的なシェルプログラムであるbash を立ち上げる際に自動で読み込まれるユーザ向けの設定ファイルです。
かわりに普段 zsh を使っているユーザは、このパスを ~/.zshrc に読み替えてください。
#!/bin/bash MODDABLE=~/Projects/moddable export MODDABLE
Moddable のコマンドラインツール（mcconfig）、シミュレータ（simulator）、デバッガ（xsbug）をビルドします。
$ cd $MODDABLE/build/makefiles/lin $ make
ビルドしたバイナリは /build/bin/lin/release に置かれます。再び ~/.bashrcを開いて、このディレクトリを PATH に追加します。
#!/bin/bash export PATH=$PATH:$MODDABLE/build/bin/lin/release
シミュレータとデバッガをインストールします。
$ cd $MODDABLE/build/makefiles/lin $ make install
sudo のパスワードを聞かれるので入力します。
これによって /usr/share/applica-tions, /usr/bin, /usr/share/icon/hicolor などのディレクトリに実行可能ファイルがコピーされます。
これで Moddable のツール群のインストールは完了しました。確認のために、デバッガである xsbug を立ち上げてみましょう。
$ xsbug
インストールが成功していたら、 xsbug のウィンドウが立ち上がります。アプリケーションと接続していないため、空の画面が表示されます。
Moddableのデバッガ「xsbug」
Moddable リポジトリにはサンプルコードが沢山あります。 GUIで動くサンプルを実際にビルドして、環境が正しくセットアップできたか確認してみましょう。
$ cd $MODDABLE/examples/piu/balls $ mcconfig -d -m -p lin
mcconfig がビルドのためのツールです。
オプションの意味は次のとおりです。
- -d デバッグモードでビルド
- -m ビルドとデバイスへの書き込みを同時に行う
- -p ビルド対象のプラットフォームを指定するオプション。-p lin は「 Linux の Moddable シミュレータ」を指す。
セットアップがうまくいっていれば、ここでxsbugとModdable シミュレータが立ち上がります。
スクリーンの中をボールが跳ね回っているのが確認できます。アプリケーションのソースを見るとわかりますがボールの座標計算と描画命令がJavaScriptで書かれています。
GUI開発の際はシミュレータ上で画面を確認しつつ、完成してきたら実機で動作確認という流れで行うと効率がよいです。
「①PCのシミュレータ上でアプリを動かす」を行いました。
次回は「②ESP32にアプリを書き込む」で実際にM5Stack上でアプリを動かします。