暮井慧といっしょ♪　冬休みプログラミング！　第3回

　こんにちは～！　あっという間に今年も終わりだね。この集中企画も今回で終わりだよ。ざんねん。とてもざんねん。ほんとは、週一で一年中やりたいんだけどなー。でもとりあえず終わりなんだよね。というわけで今回は、ブロックを組み合わせてプログラミングできる「Blockly」を使ってみるよ！

　ちなみに、第1回と第2回は、タッチ操作でプログラミングできちゃう「TouchDevelop」を紹介しているよ。こっちもおもしろいから、まだ見てない人はチェックしてよね！

暮井 慧（くれい　けい）　17歳

都内の公立高校に通う女子高生。部活は、情報処理研究会。身体を動かすのも好きで、気が向いたときはなぜか体育会系の部活に混ぜてもらっていろんなスポーツをすることも。IT・開発系コミュニティ“プログラミング生放送”のマスコットキャラクターとして活動中。

「少し早いけど、メリークリスマス！　この時期に誕生日の人は、クリスマスケーキが誕生日ケーキ代わりだったり、プレゼントもまとめられちゃったりするよね。ところで、ケーキは温かいナイフで切ると、きれいに切れるんだって。切るたびにクリームを拭き取るのもコツだって。私の持ってるタブレット、薄くて熱いから意外とケーキきれいに切れたりしないかな？ あ、でも液晶がぬるぬるになっちゃうね。スペック的なぬるぬるじゃなくて、表面が。」

Twitter:@pronama

BlocklyとApp Inventor

　夏にApp Inventorを紹介したんだけど覚えてるかな？　App Inventorもブロックを組み合わせてプログラミングできるっていうなかなかに楽しげなやつなんだけど、パッと見それと似てる感じがするよね。だから、ちょっと比較しながらBlocklyを見てみよう！

Blockly

App Inventor

　うーん、似てる！　すごく似てる！　どれくらい似てるかっていうと、「春雨」と「くずきり」くらい似てるよね！　Blocklyは、App Inventorに影響されてできたプログラミング言語だから、どうしても似ちゃうんだよね。ちなみに、App InventorはもともとGoogleが開発してたもので、BlocklyもGoogleの社員が開発しているの。Scratchっていう言語に影響されてるよ。

ブロック──高機能なブロック！　カスタムブロック！

　ブロックの違いも見てみよっかなー。App Inventorは、Androidの機能を使うためのブロックがいろいろあったよね。Blocklyは、一般的なロジックのブロックしかないから数は少ないんだよね。

　でも、ブロックの設計は洗練されてる感じがあるよ。下のブロックは、数値の比較や四則演算をするブロックを比べたものだよ。App Inventorでは機能ごとにブロックがあるけど、Blocklyでは、ブロックの機能を変更できるようになってるんだよ。

　あと、Blocklyは、独自のブロックを作るのがわりと簡単なの。組み込むアプリ用のブロックを作る必要もあるしね。専用のブロックを作れば、ひとつのブロックで高機能な処理をさせることもできるし。ブロックを作るブロックなんてのもあるんだよ。ただし、独自ブロックはJavaScriptのコーディングも必要になってくるけどね。

　さらに言うと、Blocklyはローカライズもはじめから考えられていて、英語以外の言語にも対応できるようになってるよ。プロジェクトサイトには、英語と台湾語のデータしかないけどね。アラビア語みたいな、右から左へ書く言語にも対応してるの。

App InventorでWi-Fiデバッグ！

　もしかしたらApp Inventorの方に興味がわいちゃった人もいるかもね！　夏の集中企画も見てくれるとうれしいな。せっかくだからApp Inventorの新しい機能をひとつ紹介しておくよ。

　この12月に、実機（携帯電話やタブレットだね）でアプリのデバッグが、簡単にできるようになったんだよ！　Wi-Fiを使って実機からApp Inventorを動かしてるPCに無線接続して、アプリのデバッグをするっていう方法だよ。

　じゃ、さくっと説明しちゃおう。App Inventorを動かしてるPCと実機が、同じネットワークにいる必要があるよ。実機をおうちの無線LAN環境につないで試してみてよね。

　まず、実機に専用のアプリをインストールしておく必要があるの。Playストアから「MIT AICompanion」をインストールしよう！

　新しいブロックエディターでは、「Connect to Device」ってところから「WiFi」が選べるようになってるの。アプリのデバッグを開始するときは、ここを選択しよう！

　そしたら、こんな感じのダイアログが表示されたでしょ？

　ダイアログはそのままで、次は実機の出番！　MIT AICompanionを起動してね。画面はこんな感じ。

　［Scan the QR code］ボタンからブロックエディターで表示されたQRコードを読み取るか、テキストボックスに「Your Code」のところに書いてあるコードを入力して［Connect to App Inventor］ボタンをタップすればOK！

　これで、エミュレーターと同じようにアプリを実機でデバッグできるよ。簡単だったでしょ？　いろいろApp Inventorもいろいろ進化してるから、チェックしてみるといいかもね。

はじめてのBlockly！

　で、Blocklyに話を戻すんだけど、ちょっと使ってみたくなったでしょ？　というわけで、ここからは実際に使ってよう！　やっぱり、なんでもそうだけど、自分で触ってみないと面白さはわかんないもんね♪

　最初に注意事項。Blocklyは、プログラミングの初心者向けにも考えられているんだけど、まだまだ開発途中で、今は興味のある開発者によるテスト利用が想定されているよ。だから、具体的に何かアプリを作ってみるのは難しいかもしれないー。というわけで今回はデモで用意されているBlocklyのアプリを触ってみるね。

　Blocklyは、オープンソースとして開発されてるの。そのプロジェクトのサイトにアクセスしてみるよ。

　まずはMazeっていうデモを見てみようかな？　「Maze」のリンクをクリックしてね。これはブロックでロジックを組んで、ゴールまでキャラを動かすゲームだよ！　このデモのポイントは、ゲーム専用のブロックを作って、ゲームの入力方法にBlocklyを使ってるところ。このゲームとの統合は今日の本題じゃないから気にせず進めよう！　ブロックを組み合わせてロジック作るところが、今日の注目ポイント！

　画面の右がBlocklyのブロックを組み合わせてプログラミングするエリアだよ。左画面にある［Run Program］をクリックしてみて。今は「move forward（前進）」っていうブロックがひとつあるだけだから、一歩進んでプログラムは終了するよね？　ゴールに導けるよううまくブロックを組み合わせてみよう！

　使い方は直感でわかるかなー？　「Command」と「Logic」からブロックを選んでドラッグ＆ドロップしてね。　ゴールにたどり着く一番単純な方法は「move」と「turn」ブロックを組み合わせていく方法だよ。

　これだけじゃ、なんかあれだよね……？　正解がわかってるクイズにただ答えてるような……もうちょっとこう、迷路脱出プログラムっぽくしたいよね！　じゃあ、どんな迷路にでも対応できるよう、「Logic」のブロックを使ってプログラミングしてみよっか！　「if」や「repeat」ブロックを使えば、条件によって処理を変えたり、繰り返して同じ処理ができるようになるよ。このゲームで条件に使えるのは「wall（壁）」ブロックだよ。

　「ahead（正面）」に壁があるか、「to the left（左側）」に壁があるかって判断ができるわけ。

• 正面に壁がない かつ 右側に壁がある場合、前進
• 右側に壁がない場合、右へ転換して前進
• それ以外の場合、左へ転換

　この法則でブロックを組んだら、こんな感じだよ。なんとなくわかるかな？　もしわからなくても同じブロックを組み立てて動作を確認してみて！　このあと、別のデモもブロックの使い方を説明するから、そっちを先に進めてもOKだよ。

　ifブロックだけ、ちょっと特殊だから説明するね。if～else if～else（もし～なら…する、そうでなければ、もし～なら…する、そうでなければ…する）っていうひとつのブロックになっているけど、これは［+］部分をクリックして、吹き出しの中でブロックを組み合わせて作るんだよ。

　どう？　特殊だけど、難しくはないよね？　いろいろ試して遊んでみてよ！　あなたの知恵と工夫があれば、もっと少ないブロックでゴールにたどり着けるよ♪

Blocklyでプログラミング！

　次は、「Code」っていうデモを見てみよう！　これはBlocklyで組んだプログラムを、JavaScriptなどのコードにエクスポートするデモなんだよ。Mazeとは違って、Blocklyの基本的なブロックを使うこともできるよ。

　とりあえず何か組んでみよう！　私と一緒に、ブロックを組んでみてね。なんかこの企画ではお馴染みな感じだけど……ランダムな数値を作るよ。そして、作った値を「変数」に入れるの。

　ランダムな値を作るブロックは、「Math」グループの「random fraction」ブロック。変数は「Variables」グループの……ここでは「set item」を選ぼう！

　「random fraction」は、0以上1未満の小数の値を作るブロック。これで「item」っていう変数にランダムな小数の値が入ってることになるよ。

　次は、この作った値によって処理を分岐させるよ。「Control」グループから「if」ブロックを持って来て、ブロックをつなげてみてよう。そして、［+］部分をクリックして、if～elseの形にしてみてね。

　「もし～なら…して、そうでなければ…する」っていうブロックだね。「もし～なら」の条件は、ifの右のところに条件になるブロックをつなげて、「…して」の動作は、doの右側、「そうでなければ…する」の動作はelseの右側にブロックをつなげればOKだよ。

　というわけで、条件は、itemの値が0.5より大きかったらにしよう。「Logic」と「Variables」、そして「Math」のグループから次のブロックを持ってきてね。条件の「item > 0.5」に合うようブロックを変化させよう。

　あとは、doとelse部分にブロックを追加するだけ！　「Text」グループから「print」と「“”」ブロックを持ってきて、次のように組み立てるんだよ。

　はい、完成!!　「クリスマスパーティーで仮装するときサンタとトナカイどっちにするか決めちゃうコード」でした～。実行は、右上の赤い三角ボタンからだよ。動いたかな？

　「print」ブロックは、こんな感じでダイアログ表示になるんだね。

コードのエクスポート

　さあ、ここでこのデモコードをエクスポートするよ。今回いちばん肝心なとこかもしれない！　JavaScriptタブを見てみて！　JavaScriptのコードができてるでしょ？　DartやPythonのタブも見てみると、それぞれのコードに変換されてるよね。

　そして、もうひとつXMLがあるよね。これはちょっと特別で、Blocklyは、ブロックで組んだコードをXMLとして書き出せるの。でそして、XMLからまたブロックの組み合わせに戻せるの。ようは、ブロックで組んだコードの保存と読み込みができるってこと。ここのXMLのコードを取っておいて、また貼り付ければブロックを再現できるから、友達と作ったプログラムを共有したりとかもできちゃうよ。

　ちなみにね、JavaScriptとか、あとほかのプログラミング言語との連携はコードのエクスポートのみ、書き出しオンリーなんだよ。また、将来もJavaScriptなどそのほかもろもろのコードからBlocklyのブロックにインポートする機能は予定されてないみたい。

Blocklyをダウンロード！

　さっきも言ったけど、Blocklyは今、開発段階なの。だから、一般ユーザー向けにインストーラーなんかは用意されてないんだよね。でも、自分のPCで動かしてみたくなるよねー？　なるでしょ？　そんな人たちのために、ダウンロード方法も紹介しておくよ。

　Blocklyは紹介したように、Webブラウザーだけで動いてオフライン環境でも使えるから、何かと便利かも？　あと、最新のコードを動かせるっていうのも楽しいかもね。どれぐらいアップデートされているかは、プロジェクトサイトのリンク「Source」の「Changes」に載ってるよ。

　Blocklyのプロジェクトは、Subversionっていうソースコードの管理ツールが使われていて、開発者の人はこれ使ってコードを手に入れるんだけど、別にそれ使わなくてもダウンロードはできるから、そっちの方法を教えるね。Blocklyのファイルは、全部WebDavクライアントでダウンロードできるの。WebDavクライアントは、窓の杜のライブラリーにあるからそれを使ってみよう。

　私は「CarotDAV」を使ってみたよ。「http://blockly.googlecode.com/svn/」につないで、trunkフォルダーを全部ダウンロードすれば、とりあえずOK。

　ダウンロードしたフォルダーの「demos」フォルダーの中身が、今回紹介したデモのファイルね。index.htmlを開いてみるとわかるよ。ただし、PCで動かす場合、アドレス欄が「file:///」から始まってるでしょ？　これだとセキュリティ的な制約でGoogle Chromeだと動かないの。FirefoxやOperaなら、今のところ最新のバージョンでも動いてるから、そっちで試してみてね。

　もちろん、Webサイトにアップロードして、「http://」から始まる場所におけば、問題なく動くよ。あ、バグがなければだけどね！

おしまい！

　といった感じかな！　今回のBlocklyは、前回までのTouchDevelopなんかと比べて、まだまだ開発中って感じだけど、こんなのがあるんだ～っての知って、実際にちょこっと触ってもらえるとうれしいかな！

　さてさてー、3週連続でプログラミングの話題をお届けしてみたけど、どうだったな～？　冬休みプログラミングって言ってるけど、実はまだ私、冬休みじゃないんだよね。みんなもまだでしょ？　これまでの内容は、冬休みに挑戦するプログラミングのネタってことで、休みになったらいじってみてよ！　感想も待ってるからね。じゃあ、また次の機会に！　よいお年を～。