GitHub Blocks と p5.js の組み合わせをさっそく試した時のメモ（記事執筆時点では Technical Preview）

GitHub から、「Welcome to GitHub Blocks!」というメールが来ていて、記事執筆時点では Technical Preview となっている GitHub Blocks が自分のアカウントで使える状態になったようだったので、早速試してみたという話です。

試した内容

サンプルを見ながら GitHub Blocks でできることを確認していると、その中に JavaScript の描画ライブラリ p5.js に関する内容のものがありました。

具体的には、p5.js で作った内容を描画するキャンバスを、GitHub上で表示できるというものでした。それに関して、「キャンバスを単独で出すもの」と、「キャンバス ＋ ソースコードを並べて表示するもの」があるようでした。

今回の記事では、このサンプルとして用意されたものをベースに試していきます。

サンプルを自分のリポジトリで試してみる

上記のツイートは、GitHub Blocks のサンプルをそのまま表示していたものですが、それと同じことを自分のリポジトリ（GitHub Blocks のお試し用に作成したもの） でもやってみました。そして、問題なく成功。

サンプルとは別の描画で試してみる

次に、p5.js公式サンプルの「WEBGLもモードを使った 3D での表示」と「Webカメラの映像表示」を試してみました。その結果は、以下の通りです。

表示は 2つの方法（「キャンバスを単独で表示」、「キャンバス ＋ ソースコードを並べて表示」）で試したました。

「Webカメラの映像表示」と「キャンバス ＋ ソースコードを並べて表示」の組み合わせだけ、キャンバス上の描画が行われていなかったようでした。

作成したリポジトリ

お試し用に作成したリポジトリは、こちら。

●yo-to/p5GitHubBlocks
　https://github.com/yo-to/p5GitHubBlocks

「リンクのメモ」という項目の下には、GitHub Blocks を試すためのリンクを並べています。

●p5GitHubBlocks/README.md at main · yo-to/p5GitHubBlocks · GitHub
　https://github.com/yo-to/p5GitHubBlocks/blob/main/README.md

GitHub Blocks を利用する際の URL

GitHub Blocks を利用する際の URL について少し補足します（※ 記事執筆時点での内容）。

具体的には、今回の p5.js関連の表示用サンプルで、自分が用意したリポジトリ内のファイルを使う場合の話です。例えば、3D表示を行う JavaScript のプログラムの URL は https://github.com/yo-to/p5GitHubBlocks/blob/main/p5-orbitControl.js なのですが、そのファイルに対して「キャンバスを単独で表示」と「キャンバス ＋ ソースコードを並べて表示」を行うための URL は以下となるようでした。

• キャンバスを単独で表示
  • https://blocks.githubnext.com/yo-to/p5GitHubBlocks/blob/main/p5-orbitControl.js?blockKey=Wattenberger__blocks__p5-sandbox
• キャンバス ＋ ソースコードを並べて表示
  • https://blocks.githubnext.com/yo-to/p5GitHubBlocks/blob/main/p5-orbitControl.js?blockKey=githubnext__blocks-examples__processing

構成としては、以下となるようでした。
https://blocks.githubnext.com/【GitHub のユーザー名】/【リポジトリ名とそれ以下のファイルのパス】?【GitHub Blocks の表示に関するパラメータ】

ブロックの自作やその他

公式のドキュメントの中に、以下の「Developing blocks」という内容があるので、今回のようにサンプルとして用意された表示方法を利用する以外に、表示部分を自作をすることもできそうです。これについては、まだあまり把握できてないので、追って情報を見ていこうと思います。

●blocks/docs/Developing blocks at main · githubnext/blocks
　https://github.com/githubnext/blocks/tree/main/docs/Developing%20blocks

また、p5.js の描画用キャンバスを表示させる以外にも、数値データを可視化したり、Markdown のプレビューのサンプルがあったりするようなので、それらも見ていければと思います（※ 以下は、そのようなサンプルが置かれた場所の URL）。

●blocks/examples at main · githubnext/blocks · GitHub
　https://github.com/githubnext/blocks/tree/main/examples