column

ITコラム

old_moonblock

プログラミング

2017.03.24

MOONBlock 評判/評価は? 無料で学べるプログラミング ムーンブロックの使い方から感想まで

秋葉原リサーチセンターで開発された「MOONBlock」は「前田ブロック」とも呼ばれており、enchant.jsをベースとした教育用のビジュアルプログラミング言語です。(enchant.jsとは、HTML5+JavaScriptで作られた、簡単にゲームが作れることで人気のフレームワークです)

現在、国内で最も有名な教育用のビジュアルプログラミング言語といえばScratchを挙げる方が多いかと思いますが、大人のプログラミング学習にMOONBlockを用いることはScratchにはない利点があります。それは、より高度なプログラム表現を可能としており、if文(条件分岐)やfor文(ループの処理)の理解しやすさを重視しているという点です。

そんなより実践につながることを目指して開発されているMOONBlockは、関連するドキュメントはまだ少なめですが大人にもおすすめしたいプログラミング学習サイトとなっています。

1.MOONBlock(ムーンブロック)とは?

サイトURL http://www.moonblock.jp/docs/
対応する言語やスキル ビジュアルプログラミング言語、JavaScript
利用料金 無料
教材タイプ ブラウザ版
対応レベル プログラミング入門者?初級者
備考 日本語対応

▲目次へ戻る

2.未経験から無理なくJavaScriptにステップアップ

MOONBlockの基本はScratchなどと同じく、ブロックを組み合わせていくスタイルのビジュアルプログラミング言語です。しかしこちらはあらかじめ用意されたブロックを使用するだけでなく、自力でJavaScriptを記述してオリジナルのブロックを追加する「JavaScriptキット」も使用可能です。

このようにMOONBlockは学習を進めて物足りなくなればいくらでも極めていくことが可能な拡張性の高さを誇っており、ビジュアルプログラミング言語から始めてJavaScriptプログラマへと無理のないステップアップが可能となっています。

column_image3423_01

▲目次へ戻る

3.ユーザ登録不要でセーブも可能

MOONBlockにはユーザ登録や共有の機能がなく動作はブラウザ上になりますが、作業中の内容はセーブすることができるので安心です。詳しいセーブの方法は、次の項目にてご紹介したいと思います。

▲目次へ戻る

4.MOONBlockの基本的な使い方

4.1 MOONBlockの始め方と動作環境

MOONBlockを始めるには、まず次のサイトにアクセスします。

http://www.moonblock.jp/

インターネットエクスプローラには非対応のバージョンがあるため、上手く動かない場合はFirefoxやGoogle Chromeを使用してみて下さい。

4.2 MOONBlockの画面

MOONBlockにアクセスすると、まず次のような画面が表示されます。

column_image3423_02

画面左上には、ブロックのカテゴリが並んでいます。横に長く「パペット」「ビヘイビア」「リアクション」「ゲーム」「ネットワーク」「制御」「ロジック」「変数」「JavaScript」「システム」の、合計10個のカテゴリがありますが、画面サイズにより隠れています。クリック&ドラッグで左右にスライドすると、隠れているカテゴリを表示することができます。

画面右上のSTARTと描かれた枠は、実行画面です。

画面左下のメニューには、「セーブ」「ソース」「リセット」「スクリーン」「Run」の5つのボタンがあります。

画面右下のごみ箱マークには、不要なブロックを重ねることで削除することが可能です。

画面中央の黒いフィールドは、全体が入力エリアとなっています。

4.3 ブロックの配置

任意のカテゴリをシングルクリックすると、それに対応するブロックの一覧が表示されます。希望するブロックを選んで入力エリアにドラッグ&ドロップすることで、ブロックを配置することができます。

例えばキャラクターを配置したい場合、「パペット」のカテゴリを選択して出てくる一番上の「パペット」と書かれたブロックを使用します。パペットとは、MOONBlockにおいてキャラクターのことを指します。

column_image3423_03

4.4 ブロックの削除

ブロックの削除は、前述のごみ箱へのドラッグ&ドロップで行います。入れ子構造になっている上位のブロックをつかむと、まとめて捨てることができます。

4.5 プログラムの実行

画面左下メニューにある「Run」をクリックすると、画面右上の四角い画面内で作成したプログラムが実行されます。

column_image3423_04

「Run」の隣にある「スクリーン」ボタンを押すと、実行画面を拡大して表示することが可能です。元に戻す場合は、実行画面左下にある「×とじる」ボタンを押します。

column_image3423_05

4.6 プログラムのセーブとロード

MOONBlockはブラウザを再起動してもキャッシュ等をクリアしなければ前回の作業状態が残ったまま再開できますが、特定のポイントでセーブすることも可能です。

セーブしたい場合は、まず左下にある「セーブ」ボタンを押します。

column_image3423_06

公式サイトによると、この画面中央に表示されたソースをテキストファイルなどに保存しておき、ロードする場合はこのセーブ画面の内容を消して保存しておいたテキストを貼り付けることで復元できるとのことです。

ちなみにこのセーブ画面を表示している間だけアドレスバーに表示されるURLをブックマークしておくことでもセーブできる(ロードしたい場合はブックマークにアクセスするだけ)ので、個人的にはそちらの方が簡単かなとも思います。

4.7 ソースコードの確認

左下メニューにある「ソース」ボタンをクリックすると、JavaScriptのソースコードを確認することができます。

column_image3423_07

ブロックを配置したらどんなコードが増えているのかその都度確認してみると、JavaScriptの仕組みに対する理解が深まりやすいのではないでしょうか。

▲目次へ戻る

5.MOONBlockの口コミや評価は?

MOONBlockを小学校のクラブで採用された感想を見つけましたので、ご紹介致します。

MOONBlockへの取り組みは、教師用端末からChromeを全PCで立ち上げ、MOONBlockのサイトアドレスを全PCに飛ばすことからスタートします。逆に言うと、それ以上の手助けはしないようにしましたし、興味が無いならScratchやプログラミンに取り組んでもよい環境でした。ところが、大抵の子はMOONBlockをそのまま続けています。じゃあ、仮にブラウザだけ立ち上げて、好きなサイトを選べ(アドレスを送らない)となったらどのツールを選択するか。一位はMOONBlockでした。二位はプログラミン。三位はブラウザを閉じて、アクションエディタを起動していました。楽しいみたいです。

ただ次のように、マイナス面の評価もみられました。

・マウス操作だと面倒
・保存の仕方がネック
・思考を思った通りに表せないみたい

(出典:MOONBlockとenchantMOONを小学校のクラブで採用した感想

MOONBlockはマウスによる操作感が少し独特なので、その点が子ども達には馴染むのに時間がかかる要素だったようです。またセーブとロードの仕方は説明なしでは大人でも気づくのが難しいのではないでしょうか。このあたりはインターフェースの改善など期待したいところかもしれません。
思考を思った通りに表せないという点はJavaScriptを使用してオリジナルブロックを作ることで解決可能ですが、やはり子どもには難しいようです。しかしこれからJavaScriptを学んでいきたい方にとっては、こんな機能が欲しい!は大きなモチベーションにもつながるのではないでしょうか。

その後MOONBlockはコロコロコミックという少年誌が運営する「コロコロゲーム工作ブロック」のベースシステムとして採用されており、さらに子どもにも分かりやすいよう工夫されたインターフェースで多くの小学生がプログラミングの楽しさに目覚めているようです。

column_image3097_05

当サイトによるコロコロゲーム工作ブロックを使用した詳しい感想は、別途記事をご参照下さい。

▲目次へ戻る

6.MOONBlockは未経験者におすすめのJavaScript学習ツール

未経験からプログラミングを学ぶ場合、多くの方が陥るいくつかの落とし穴があるようです。MOONBlock設計の前段階として行われた調査では、プログラミング経験ゼロの大学生や社会人にプログラミングを教えることで、つまづきやすいポイントとして次のような項目が上がりました。

(1)A=A+1など変数が変化する代入式(数学的な等式としては矛盾してるように見える)を受け入れられない
(2){}や[]などの対応関係がすんなり入力できない。全角半角の区別がつけられない
(3)条件分岐やループなどの概念は理解できるがどのように使えばいいのかわからない
(4)配列を理解するのに時間がかかる

これらのつまづきを解消することを前提として設計されたMOONBlockは、Scratchなどのビジュアルプログラミング言語とは次のような違いがあります。

 Scratch、およびSqueakは、前田ブロックのアプローチと比較すると、フローチャートをビジュアル化したものにより近いものであると言える。
 それは「論理の構築」というプログラミングの一つの側面を教育する用途には適していると言えるが、論理の構築よりも仕様の定義を先に教える前田ブロックとはアプローチが逆である。
 Scratchはボトムアップ型、前田ブロックはトップダウン型の構築を目指していると言っても良いだろう。
 また、Scratchには2.0からクローン機能が搭載されたとはいえ、「本体」というイデアが別に存在するのに対し、前田ブロックはより現状の主流となっているプログラミング言語に近いパラダイムである「クラス」を定義し、「インスタンス」が生成されるという仕組みを導入していることも大きな違いの一つであると言える。

(出典:ScratchとMOONBlock(前田ブロック)はどう違うの?

Scratchと比較すると参考サイトや書籍はまだ少ないMOONBlockですが、Scratchなどのその他のビジュアルプログラミング言語と比較してより大人向き、より実践向きな作りを目指している印象です。プログラミング未経験の大人でJavaScriptを扱うエンジニアを目指しているけどいきなりソースコードはハードルが高いと感じる方は、ぜひMOONBlockを利用してみてはいかがでしょうか。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ