pxt

Microsoft MakeCode

• ブラウザでエディタを試してみてください...

Microsoft MakeCode は、オープン ソース プロジェクトの Microsoft Programming Experience Toolkit (PXT) に基づいています。 Microsoft MakeCodeはユーザー向けエディターの名前であり、 PXTすべての GitHub ソースで使用されます。

PXT は、特にコンピューター サイエンス教育に重点を置いた、初心者向けの特別な目的のプログラミング エクスペリエンスを作成するためのフレームワークです。 PXT の基礎となるプログラミング言語は TypeScript のサブセットです (JavaScript の動的機能は除く)。

PXT の主な機能は次のとおりです。

• Blocklyベースのコードエディターとテキスト形式へのコンバーター
• VS Code を強化する Monaco コード エディター。エディターの機能はここにリストされています。
• TypeScript で新しいブロックを定義するための拡張性のサポート
• ARM Thumb マシン コード エミッター
• コマンドラインパッケージマネージャー

詳細情報:

• について
• ドキュメント

MakeCode で構築されたエディタの例:

• https://makecode.microbit.org
• https://arcade.makecode.com
• https://makecode.adafruit.com
• https://minecraft.makecode.com
• https://makecode.mindstorms.com
• https://makecode.chibitronics.com
• その他のエディターについては https://makecode.com/labs をご覧ください。

支店

• masterはアクティブな開発ブランチで、現在はv3.*ビルドです。
• v* 、 v*.*ビルドのサービス ブランチです。

ローカルホストからターゲットを実行する

ここの指示に従ってください。

ターゲットを PXT にリンクする

PXT の独自のインスタンスを変更していて、ターゲット (pxt-microbit など) でローカル バージョンを使用する場合は、ターゲットのディレクトリ (この例では pxt-microbit、pxt の兄弟ディレクトリである必要があります) に cd します。 ）そして実行します

 pxt link ../pxt

pxt のチェックアウトが複数ある場合は、次の操作を行うことができます。

• pxtとターゲットでnpm i実行します
• ターゲットで、 pxt link ..some-other-pxtを実行します (最初にnpm install -g pxtを実行して CLI を更新する必要がある場合があります)

その後 (ターゲットまたは pxt で) npm i実行する場合は、これらの手順を繰り返す必要がある場合があります。

建てる

まず、Node: 最小バージョン 8 をインストールします。

PXT コマンド ライン ツールを構築するには、次の手順を実行します。

 npm install
npm run build

次に、 pxtコマンド ライン ツールをインストールします (一度だけ実行する必要があります)。

 npm install -g pxt

次に、 gulpをインストールします (一度だけ実行する必要があります)。

 npm install -g gulp

この後、ビルド ツリー内のどこからでもpxt実行できます。

ローカル Web サーバーを起動するには、アプリ ターゲット (pxt-microbit など) のルート内からpxt serve実行します。 PXT はデフォルトの Web ブラウザでエディタを開きます。

pxt に対して開発している場合は、pxt リポジトリのルート内からgulp watch実行して変更を監視し、再構築できます。

 gulp watch

CLI のみを使用して作業している場合は、

 gulp watchCli

関連する Web アプリのスイート (スキルマップ、マルチプレイヤーなど) をビルドする必要がない場合は、それらをスキップしてビルドを少しスピードアップできます。

 gulp --no-webapps

アイコン

svgicons/ディレクトリには、(http://semantic-ui.com/elements/icon.html に加えて使用する) カスタム アイコンが多数あります。これらは1000x1000pxである必要があります。既存のものから始めるのが最善です。利用可能なアイコンを確認するには、http://localhost:3232/icons.html にアクセスしてください (このファイルは、生成された WOFF アイコン フォントを含むicons.cssとともにビルド中に作成されます)。

作成したアイコンの表示に問題がある場合は、次のことを試してください。

 npm install -g svgo
svgo svgicons/myicon.svg

共有スタイリング

エディター ターゲット (micro:bit、Arcade など) およびサブアプリケーション (スキルマップ、教師ツールなどの別名「CRA」) 全体で共有される CSS カラーまたはその他のスタイル要素を追加する場合。 theme/themepacks.lessで CSS 変数を宣言します。

1. 新しい変数を:root擬似クラスに追加します。ファイル内のガイドラインに従って、適切なデフォルト値を選択してください。
2. そのファイルで定義されているすべてのテーマ クラスに新しい変数を追加します。この記事の執筆時点では、 theme-highcontrastのみが定義されています。特定のテーマに適した値を選択してください。
3. 新しい変数を各ターゲットのテーマのオーバーライドに追加します。これは、ターゲット リポジトリのtheme/themepacks.lessファイル (pxt-microbit、pxt-arcade など) で行われます。

この方法で宣言された変数は、実行時に CRA で使用できるようになり、変数が実行されているターゲットによって定義されたオーバーライド値で初期化されます。

ドキュメントの強調表示

ドキュメントでは、コード スニペットの強調表示には、highlight.js (hljs) を使用します。現在、次の言語が含まれています。

• TypeScript
• パイソン
• JavaScript
• HTML、XML
• マークダウン

他の言語を追加する必要がある場合、または既存の言語を更新する必要がある場合は、https://highlightjs.org/download/ でディストリビューションを見つけることができます。含めたいすべての言語 (上記の言語も含む!) を選択し、ダウンロードして解凍し、最後に、 highlight.pack.js webapp/public/highlight.js/にコピーします。

テスト

テストはtests/サブディレクトリにあり、ノード テストとブラウザ テストを組み合わせたものです。これらを実行するには、ルート ディレクトリでnpm run test:allを実行します。

ライセンス

MITライセンス

行動規範

このプロジェクトはマイクロソフトのオープンソース行動規範を採用しています。詳細については、「行動規範に関するよくある質問」を参照するか、追加の質問やコメントがあれば [email protected] までお問い合わせください。

お問い合わせ

連絡する

商標

MICROSOFT、Microsoft ロゴ、および MAKECODE は Microsoft Corporation の登録商標です。これらは、https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general.aspx で公開されている Microsoft の商標およびブランド ガイドラインに記載されている目的でのみ使用できます。その使用が Microsoft の公開ガイドラインに記載されていない場合、または不明な場合は、法律顧問または MakeCode チーム ([email protected]) にご相談ください。