micro:bitのメインの開発環境と思われる「JavaScriptブロックエディタ」。さまざまな機能を持ったブロックを並べていくことでプログラミングしていくのですが、パッケージを追加することで、機能を増やすことができます。そのパッケージの作り方の話。というか、そのための環境構築の話。使ったことのないツールが多く、今後もまたつまづきそうなので、自分用のメモに。
「JavaScriptブロックエディタ」は、「Makecode」とか「PXT」とかいろんな呼び方があり、使い分けもされてるようなされてるような感じなのですが、とりあえず、ここでは「JavaScriptブロックエディタ」ということにします。ただ、パッケージの開発について検索する際には「PXT」や「makecode」で探したほうがよさそうです。
で、Windows環境については公式のドキュメントがあります。
Building your own package
Step 0にあるリンクにあるとおり、各種プログラムをインストール。node.jsにはじまり、YottaやPython、Visual Studioなど、どれが何をするかも理解せずにとりあえずインストールすればOK。
で、ローカルでサーバーを構築してエディタを起動。ここまでは問題ないはず。
しかし、その後、うまいこと自作のパッケージがロードできません。
file:で指定するディレクトリの起点はどこか？
上記ページのStep 3で設定ファイル（pxt.json）を編集するのですが、これがうまくいかない。
“banana”: “file:../pxt-banana”
とすることで、ローカルのファイルを参照できるはずなのですが……。
「file:」で指定するパスの起点はどこだろう？ という感じ。どこを指定してもだめ。
これに困り、ツイッターでつぶやいていたら、エディタの開発者からコメントあり。日本語のつぶやきに、英語圏の人から返事がきました。
このスレッド。
@pelikhanさんのコメントはこうです。
「The projects folder under your local server folder」
おお。projectsフォルダが起点なのか。
サーバーを起動するには「pxt serve」というコマンドを使うのですが、これを起動したところにprojectsフォルダが自動的に作成されます。ディレクトリを移動して試すとわかります。そこに関連ファイルも自動的に作成されます。その中に、作成中のパッケージを置けばよいのでした。
というわけで、上の例で言うと、
”banana”: “file:.pxt-banana”
で、よかったわけです。作成中パッケージのディレクトリ「pxt-banana」を「projects」直下に置いた場合です。
これでうまくいった、と喜んでいたのが、昨年の10月のことでした。まだ話は終わりません。
また、ロードできない！
12月に入り、スイッチサイエンスの金本さん（@SgkSsci）という方から先のツイッターのつぶやきにコメントがつきました。
同じ事でいまだに悩んでいます。解決しましたか？pxt.jsonが存在するディレクトリからの相対かなと想像するんですが、pxt serveすると（ブラウザ上で）エラーが出て読み込まれません。
— 金本茂 Shigeru KANEMOTO (@SgkSsci) 2017年12月7日
「起点はprojectsですよ」、と答えるわけですが、一応あらためて確認。ロードできない……。
結局、以前と同じ方法ではロードできなくなっていたのでした。「いろいろ、日々変わるのがつらいです。」とは金本さん。
古いバージョンであらためて挑戦
ということで、昨年末はそのまま放置してたのですが、2018年に入り、もう一度挑戦することに。以前カスタムブロックで作ったものを、パッケージにしておいたほうが後々楽だろう、他の人も使いやすくなるだろう、という感じで。
ローカルのサーバーをインストールし直し。最新版を入れるも、やっぱりだめ。古いバージョンに戻せばいいのかな？ とは思うものの、調べてみるとめちゃくちゃ高い頻度で更新されている。どれが当時うまくいっていたバージョンだろう？ と記録を調べながら試していきます。
pxt-microbitとpxt本体との2つが調べるべき対象となる模様（node-module以下にある「pxt-microbit」と「pxt-core」、以下、microbitとcoreと略）。
作業時点の最新バージョンはmicrobitが0.14.2、coreが0.14.34でした。まずは、pelikhanさんからコメントをもらったあたり、10月13日の0.13.28と0.14.3をインストールしたいと思いました。
公式ドキュメントではmicorbitというディレクトリを作って、その中で「pxt target microbit」とすると、node-moduleディレクトリが生成され、数多くのファイルがダウンロードされていきます。別にフォルダを作って同様に、「pxt target microbit」とすると別途ファイルがダウンロードされます。ということは、バージョン指定できれば、古いバージョンの環境が使えそう。そう考えました。
しかし、どうやってバージョンを指定するのだろう？ という疑問にぶち当たります。調べてみると、pxtコマンド（？）は、node.jsで使われるパッケージ管理ツールを使っている模様（このへん、理解できてない）。で、これならバージョン指定ができるようです。検索しました。npm のパッケージをダウングレードする方法が見つかりました。
ということで、先のmicrobitディレクトリで、古いバージョンをインストールします。
npm install pxt-microbit@0.13.28
npm install pxt-core@0.14.3
とすると、中身が入れ替わりました。この状態でpxt serveして、バージョンをチェック。変わってない！ と思ったのですが、リロードしたら入れ替えたバージョンになりました。ラッキー。
で、このバージョンでも相変わらず、自作パッケージをロードしてくれません。別のバージョンを試します。
ローカルに構築したやつを一番最初にインストールした時点のやつを試します。6月13日にインストールしたやつ（タイムスタンプで確認）。6月11日にリリースされた0.12.25/0.12.83です。これもだめでした。
さらに調べます。GitHubのpxtのissueをpackageで検索すると、@pelikhanさんの投稿がありました。その日付は8月8日。その時点でのリリースと思われる0.12.53/0.12.107を試します。
そして、ついにロードができました！
長かった。
そんなこんなで、古いバージョンでパッケージの開発ができたという話でした。ウチはWindowsでしたが、LinuxやMacだとどうなんですかね。
あと、この状態では最新の機能に対応できない気がしますが、ひとまず、カンタンなパッケージなら作成できるようになったので、よしとします。
作ったパッケージの話はまた別の記事で。
コメント