当サイトは2020年小学生のプログラミング必修化に向けて、関連する情報を纏めています。サイトリニューアルしました。

ローカル環境でMakecodeを構築

ローカル環境でMakecodeを構築

Micro:bitのブロックプログラミング環境であるMakecodeでは、拡張機能を使ってブロックを追加する事ができます。自分で拡張機能を追加できます。また、他の方(会社)が作成した拡張機能を修正する事もできます。一番身近な利用例はブロックの日本語化の支援をする時と思います。この記事では、最近Ring:bit Car V2を購入して拡張機能を使用したのですが、日本語が分かりにくいので修正した時の経験を備忘録兼ねて纏めてみました。拡張機能作成や修正に関する情報がなかなか見つからず、苦労しましたので。

1.当記事の前提

・ウインドウズ10パソコンを使用している
・Github ユーザーアカウントを持っており、使い方を理解している
フォーク、クローンなどを使用します
・DOSコマンドプロンプトでDOSコマンドを使える

2.前提ソフトウエア『NodeJSとPXT』の導入

A.https://nodejs.org/en/download/ からWindows用のLTSをダウンロードして導入してください。

Node.jsとは:Webサーバー側でJavaScriptが動くようにしてくれるプラットフォームのようなものです。(JavaScriptはWebクライアント上でページに動きを追加できるプログラミング言語)

 

Node.jsの導入手順

1.ダウンロードされた『node-v12.16.3-x64.msi』をダブルクリックすると以下のウインドウが表示されるので『Next』をクリックします。

2.ライセンス条項の確認メッセージには了承に☑をいれて『Next』をクリックします。

3.導入先フォルダー選択はデフォルトで良いので『Next』をクリックします。

4.導入オプションもデフォルトで良いので『Next』をクリックします。

5.自動的に必要なツールをインストールするに☑を入れて『Next』をクリックします。

6.インストール準備が出来ましたので『Install』をクリックします。

7.導入が始まります

8.導入が完了しましたので、『Finish』をクリックします。次に追加ツールの導入が始まります。

9.以下のウインドウが開きますので、続行するためにEnterキーを押します。

10.更に同様なウインドウが開きますので、続行するためにEnterキーを押します。

11.最後に以下のウインドウが開きますので、完了するまで待ちます。これでNode.jsの導入は完了です。

B.DOSコマンドプロンプトからpxtコマンドツール群を導入します。

pxtコマンドツールとは:Microsoft Programming Experience Toolkit (PXT)で、Makeodeはこれをベースに開発されています。

 

3.Makecode ローカル環境の構築

1.GithubでMakecodeリポジトリーをフォークします。

2.フォークしたリポジトリーを自分のパソコンのC:\にクローンします。クローン後DOSコマンドdirを実行すると以下のようになります。

3.pxt-microbitディレクトリーに移動して、『nmp install』を実行します

4.Makecode ターゲットが作成されましたので、『pxt serve  --cloud』で実際にローカル環境でMakecodeが稼働するか確認します

5.4の実行途中でエラーメッセージも出ますが、問題が無ければいつも使用しているウエブブラウザーが自動的に開きMakecodeが動きます

5.これで以降の前提作業が完了しました

4.翻訳したいGithubリポジトリーのクローンと翻訳変更

1.日本語訳を修正したい拡張機能をGithubでフォークします。以下はRing:bit car V2の拡張機能の例です。

2.フォークしたリポジトリーを自分のパソコンのC:\にクローンします。クローン後DOSコマンドdirを実行すると以下のようになります。

3.pxt-ringbitcarディレクトリー内に『_locales』ディレクトリーがあります。この中の『ja』ディレクトリー内の『RingbitCar-strings.json』が日本語メッセージファイルです。以下、古いバージョンのメッセージファイルです。例えば、『左の車輪を設置する %left | 右の車輪を設置する %right』ですが、日本語として分かりにくいので、これを修正したいと考えました。

上記のメッセージファイルの場合のブロックは以下のようになります。

4.上の3つのブロックのメッセージを変更した例が以下となります。

ブロックは以下のようになります。

5.修正が終わったら、c:\pxt-ringbitcarをc:\pxt-microbit\libs\にコピーします。

6.c:\pxt-microbit\libs\pxt-ringbitcarの名前を変更してc:\pxt-microbit\libs\RingbitCarにします。

上記手順完了後にlibsディレクトリーを表示すると以下のようになります。

7.c:\pxt-microbit\pxtarget.jsonをエディターで編集して、 “bundleddirs”エントリーにlibs/RingbitCarを追加します。以下のようになります。

8.c:\pxt-microbit\libs\RingbitCar\pxt.jsonをエディターで編集して、 “bundleddirs”エントリー内の”core”エントリーを”file:../core”に修正します。また、”description”エントリーを自分の修正版であることが分かるように修正します。以下のようになります。

9.c:\pxt-microbit\libs\RingbitCarでpxt installを実行します。以下のようになります。

10.これでRingbitcarが含まれたMakecodeを実行するためにc:\pxt-microbitでpxt serve --cloudを実行します。以下のようになります。

11.10の実行途中でエラーメッセージも出ますが、問題が無ければいつも使用しているウエブブラウザーが自動的に開きMakecodeが動きます。

12.RingbitCar拡張機能が追加されたか確認するために、『新しいプロジェクト』をクリックします。『プロジェクトに名前をつけてください』メッセージが表示されますので、適当な名前を入力して作成をクリックします。

13.高度なブロックをクリックします。

14.高度なブロックの一番下の拡張機能をクリックします。

15.RingbitCarが追加されていますのでクリックします。ステップ8で追記したdescriptionが表示されていますので、自分が追加した拡張機能であると確認できます。

20.RingbitCarのブロックが追加されました。

これでローカル環境でMakecodeが構築できました。この環境で日本語が問題無い事をテストして、完成したら開発者の方にgithubでpullして、正式版に組み込んでもらう事になります。pullの方法は改めて別の機会に紹介します。

クロームブラウザーをご使用の方へ

当サイトへの訪問ありがとうございます。その際、グーグルクロームブラウザーをお使いの方にお知らせです。グーグルクロームブラウザーでは、2018年7月から、サイトにより以下の表示がブラウザーのアドレスバーに表示されます。当サイトでも表示されますが、心配ありませんのでご安心ください。
SSL案内1
これは、SSLと呼ばれるWebサイトとそのサイトを閲覧しているユーザとのやり取り(通信)を暗号化するための仕組みを使用していないためです。ネットショッピング、銀行サイトではパスワードやクレジットカードの情報を扱いますので、必須の仕組みです。当サイトでは、そのような情報を扱っておりませんので、暗号化は必須ではありませんが、訪問される方により安心していただけるように、SSL化を予定しております。このメッセージはSSL化完了まで念のため表示します。

より詳しい話カテゴリの最新記事