[iPad] Blocklyプログラミング

スクラッチの課題

　新潟市はGIGAスクール構想でiPadが配布されました。iPadで困るのが、スクラッチでプログラミングしようとすると画面がせまいことです。画面の真ん中がプログラムを編集する場所なんですが、せまくて見通しが悪いですし、編集もしにくいです。

　スクラッチでは、キャラクターごとにプログラムを作ります。上の図だとネコを動かすためのプログラムを作ります。そもそもなぜキャラクターを操作しなければならないんでしょう。例えば、小学6年生の算数で習う「円の面積」を題材にプログラミングするのに、キャラクターは不要です。

ブロックリー

　そこで、画面を広く使えるようにするために、Googleが作った「ブロックリー」に着目してみました。ブロックリーはJavaScriptのライブラリとして提供されており、Google開発者サイトからダウンロードできます。

 　JavaScriptでできているので、ライブラリごと作ったアプリをWebサーバにアップロードすれば、ネットワークが使える環境なら上記新潟市の小学校でもiPadでブロックリーを使ったプログラミング体験ができるわけです。

　まだ開発中ですが、円の面積を題材にしてブロックリーのサンプルプログラムを作ってみました。FireFox、Chromeで動かしてみましたがちゃんと動きます。以下の図では、半径として10を与えています。円の面積は半径×半径×円周率で求まります。10×10×3.14で314が画面上部の実行結果エリアに表示されています。これはiPadではなくWindowsPCのローカル（Webサーバではない）で動かした結果ですが良さそうです。

ブロックリーを使ってみた感想

　デモプログラムが充実しているので、それを読んでパクることが容易です。ただ、ライブラリが圧縮されているのはいただけません（圧縮するとファイルサイズが小さくなり読込速度が向上しますが、かなり読みづらくなります。以下の例をご参照ください）。なぜわざわざ読めないようにするんでしょう。せっかくいいものを提供しているのに、残念です。

圧縮の例

before

const result = [];
const fibonacci = (n, output) => {
 let a = 1, b = 1, sum;
 for (let i = 0; i < n; i++) {
   output.push(a);
   sum = a + b;
   a = b;
   b = sum;
 }
}
fibonacci(16, result);
alert(result.join(', '));

after

const result=[],fibonacci=(e,l)=>{let c=1,i=1,o;for(let t=0;t<e;t++)l.push(c),o=c+i,c=i,i=o};fibonacci(16,result),alert(result.join(", "));

以上