Help us understand the problem. What is going on with this article?

ブラウザだけで micro:bit javascriptブロックエディター用パッケージ(拡張)が作れるGitHub package authoring

More than 1 year has passed since last update.

これまでの状況

これまでmicro:bitの javascriptブロックエディター(以下makecode)用パッケージを作ろうとすると、nodeの環境設定でハマったり、bumpしてもすぐに反映されなかったりと、やる気を削がれる事が多い状況でした。

GitHub package authoring

2018年9月9日現在、まだリリースされていませんが、まもなくmakecodeがリニューアルします。
これに合わせて、ブラウザだけでパッケージを作る事が出来るGitHub package authoring
がリリースされます。

サンプルとして何もしない「コメントブロック」を作ってみる

makecodeには元々コメント機能があります。従来はコメントを表示しっぱなしに出来なかったのですが、v1-betaからは、表示しっぱなしに出来るようになりオーっと思ったのですが、まだツッコミどころは一杯ありそうです。
comment.jpg

そこで、GitHub package authoringを使ってサンプルとして「一切なにもしないコメントが書けるブロック」を作ってみます。ちなみに、新しいmakecodeでは、パッケージと言わず拡張と呼ぶようになるようです。(以下、拡張)

手順

makecodeとGitHubを接続

GitHubのアカウントを持っている事を前提として書きます。

  1. GitHubにログインしておきます
  2. https://makecode.microbit.org/beta にアクセスして新しいプロジェクトを作成します(v1リリース後は/betaは不要になります)
  3. 右上の歯車マークをクリックし「拡張」(従来のパッケージ)をクリックします
  4. 画面下の「Login to GitHub」をクリックします。
  5. 認証トークンを貼り付ける画面になります
  6. GitHub token generation pageのリンクをクリックしrepoへのアクセス権限を与え、Generate token をクリックします。 p4.jpg
  7. 生成したトークンをコピーして 5の画面に貼り付ければ接続完了です p5.png

新規拡張環境を生成

  1. 上部のホーム(従来のプロジェクト)をクリック
  2. 右の方にある「読み込む」をクリック
  3. 「Your GitHub Repo... 」をクリック
  4. 一番上の「Create new...」をクリック
  5. 「Create HitHub repo」でレポジトリ名と説明を入力し「つづける」をクリック p6.png
  6. 従来のpxt init を実行した際と同じ構造が自動的につくられmain.tsやtest.tsも用意されます

拡張を開発

開発方法は、https://makecode.com/extensions/getting-started/simple-extension あたりを参考にしてください。

1.初期パッケージにあるmain.tsとtest.tsを書き換えます

main.ts
//% weight=70 icon="\uf075" color=#555555 block="コメント"
namespace comment {
    //% blockId=show_strings block="コメント %v"
    export function noaction(text: string): void {
    }
}
test.ts
// tests go here; this will not be compiled when this package is used as a library
basic.forever(() => {
    comment.noaction("test")
})

2.GitHubにCommitを行いつつpxt bumpを実行します

p7.png
p8.png

以上で完成です。

動作確認

新しいブラウザのウインドウを開き、makecodeにアクセス(2018年9月9日現在はbetaでないと駄目)し「拡張」を見ると自分で作ったパッケージが表示されるようになります。
p9.png
p10.png

公開

作った拡張を人に伝える場合は、readmeを整えGitHubのURLを公開すればOKです。

asondemita
CoderDojo守谷、CoderDojoつくばで子供達にプログラミングの楽しさに気づいてもらう活動をしています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした