CodePenでp5.js
アンプラグドやCode.org、Scratchなどプログラミング体験のコンテンツは結構あるんですが、本当のコーディングに移っていくところには高い壁があると感じています。
新しいソフトはインストール難しい
Webフィルタリングがきつくてブログなど見えない
Webサービス系も使えたり使えなかったり
IE9だったり…
などなど、PC教室はいろいろ問題があって選択肢が限られるんです。
CodePenでp5.js
そして今回使うことにしたのがCodePenとProcessing系言語のp5.js です。
https://gyazo.com/615b4ea0468bd0d57a2a5696a4655f5b
これが実際に使ったページです。JSと書いてある欄にプログラムが書いてありその実行結果が画面下部に表示されます。
CodePenは、教育専用のサービスではなく実際のプログラマーがプロトタイプを簡単に作ったりいろんな技術を気楽に試してみるためのサービスです。
1つの作品がユニークなURLになる
ユニークなURLだと何がいいんでしょうか?
正解は、ロイロノートのWebカードで「配布・回収・友達と共有」が簡単にできるんです!先生が用意しておいたプロジェクトを配布して、変更して、提出して、友達が作ったプロジェクトを貰ったりなど、ロイロでできることがそのまま応用できます。
さらにURL覚えておくだけで、自宅で続きもできます。
先生から配布
そのWebカードをクラス全員に配布します。
みんなで改造する
送られてきたWebカードの虫眼鏡マークから、Webを開きます。
https://gyazo.com/8ffdca33be6e2b3457b2c99e1154ce73
ここでちょっとややこしいです。個別に保存しておかないと、作業内容が飛んでしまいます。
ページ右上の「Fork」というボタンを押します。こうすることで、URLが自分専用のユニークなURLに変わり自動で保存されるようになります。必ず「Fork」するように指示してください。
https://gyazo.com/a8e2e471f2c5be1f21bf4fa184c4ca64
「Fork」ボタンを押すと、こんなダイアログが出てきますが、一番下の「Save as Anonymous」(匿名で保存)を押すようにしてください。アカウント作らなくても保存されます。
https://gyazo.com/cc53743aa973e34f66fd7394fbd48505
また、デフォルトのレイアウトだとJS欄が狭いので、「Change View」→Editor Layoutを一番左端に変えます。
https://gyazo.com/dad9215ad80f4fdcfb40d8ddf28509b1
今回の課題
今回の課題は「一番綺麗な花火を作れた人が優勝コンテスト」です。変更するとパーティクルの色やサイズが変えられる場所に予めコメントを入れてあります。
しかし、ここで問題発生!先生機では問題なく表示出来てたんですが、生徒機の実行ウィンドウは真っ白です…。
またか…と思いつつ、生徒機と先生機のWebフィルタの設定が違うのを思い出して、p5.jsをロイロのサーバーに移動してリンクを変えたところ、無事動くようになりました。
CDNがカテゴリでごっそりフィルタリングされるという鬼仕様なんです。今回はCloudFlareにあるp5.jsファイルが読み込めないという問題でした。他にもCDN上のjsライブラリが読めなくて表示されないWeb多数あるんです。設定した人は絶対CDNの意味がわかってないと思う…。
焦りましたが、動くようになると子どもたちは夢中で改造してくれてました。
たまたま今回だけ未踏ジュニアに採択されている霜田君(麹町中3年)が参加してくれていて彼の作品はこんな感じ。
https://gyazo.com/a0a66f86f77f5ffe7ecd94c7851aad88
提出する
できてきたら、一旦先生に提出してもらって、生徒共有もかけて他の子の作品を見てもらいます。グループワークやペアワークにしたりとか他にもいろいろ工夫ができそうですね。出来た作品は公開URLになってるので、SNSでシェアしたり親御さんに見せたりも簡単にできます。
下敷きにできる作品がたくさん
CodePenには世界中の人が作った様々なPenが公開されています。今回の使ったプログラムも私が0から作ったのではなく他の方が作られていたPenを少し整形して、コメントを入れただけです。公開されているPenはMITライセンスで、商用利用もコピーも改変も自由だそうなので安心して利用してください。
CodePenは、もともと教育用のサービスではなく、Web系のプログラマやデザイナーが知識共有やプロトタイピングの為に使うサービスですが、ユニークなURLになるWebコンテンツはロイロノート・スクールと相性がいいなと感じました。Fork最高!
Processing(p5.js)も癖がなくてコーディング入門には持って来いな感じがします。
コーディングも第二言語習得と同じで、たくさんコードを読んで書くのが効果的なのかなと最近は思っています。
そのために教科書的に0から作るより、いっぱい改造させたらどうだろうと。
p5.jsを使ったPenのテンプレート作りました
p5.jsを使うには、少しSettingが必要なのでひな形になるPenを作っておきました。自由に使ってください!