ブロックリーゲームズは、Ｇｏｏｇｌｅが提供している、プログラミングの勉強ができる無償のサイトです。このゲームは、同じくＧｏｏｇｌｅが提供しているＢｌｏｃｋｌｙというビジュアルコードエディターをベースに作られています。この記事では、ブロックリーゲームズを終わられた方の次のステップである、プログラミング言語の習得について、Blocklyを利用して紹介していきたいと思います。
ブロックリーゲームズについてご存知無い方は、以下の記事をご覧ください。
[su_spacer]
[su_accordion]
[su_spoiler title=”Blocklyとは何” style=”fancy”]
Blocklyは、WebアプリケーションやAndroidアプリにビジュアルコードエディターを追加するライブラリー群です。それを使って、BlocklyGamesをWebアプリケーションとしてGoogleが提供しているわけです。プログラムを作る場合、通常はプログラム言語(JavaScript、PHP、Pythonなど)を使う必要がありますが、Blocklyを使えば、言語を詳しく知らなくてもプログラムを作ることができます。当サイトで紹介している、Scratch、ScratchJrなども同じビジュアルコードエディターです。BlocklyGames同様にプログラム実行環境も持っているので、その場でプログラムを実行して結果を確認することができます。Scratch、ScratchJrのステージと言われているところが、プログラム実行環境です。Scratchについてご存知ない方はこちらを、ScratchJrをご存知ない方はこちらを、ご覧ください。
BlocklyGamesをやられたことがある方は，ステップを終えるごとに以下のメッセージがでる事に気が付かれたと思います。これは、ブロックを使って回答した内容は、実際にはJavaというプログラム言語で実行されたという事です。
メッセージ
回答ブロック
ですので、BlocklyGamesではブロックを使ってクイズを解くことしかできませんでしたが、Blocklyではプログラムを作る事ができます。ただ、自分で実行環境を作る必要があります。Javascript、PHP、Pythonそれぞれに専用の実行環境が必要です。これから、順次プログラム作成して実行するまで紹介していきますが、全ての言語を紹介できませんので、この記事ではpythonを使っていきます。以下、pythonの特徴です。ひとつ言語を覚えれば、他の言語は理解しやすいですので、今までプログラム言語は知らないという方はPythonを習得していただくと良いと思います。
[su_quote cite=”Python japan ” url=”https://www.python.jp/about/”]pythonはさまざまな分野のアプリケーションで使われている、極めてパワフルな動的プログラミング言語です。Pythonはよく、Tcl、Perl、Scheme、Javaなどと比較されます。Pythonには次のような特徴があります:
[su_list icon=”icon: thumb-tack”]
- とてもクリーンで読みやすい文法
- 強力な内省(イントロスペクション)機能
- 直感的なオブジェクト指向
- 手続き型のコードによる、自然な表現
- パッケージの階層化もサポートした、完全なモジュール化サポート
- 例外ベースのエラーハンドリング
- 高レベルな動的データ型 事実上すべてのタスクをこなせる、広範囲に及ぶ標準ライブラリとサードパーティのモジュール
- 拡張とモジュールはC/C++で書くのが容易(JythonではJava、IronPythonでは.NET言語を利用)
- アプリケーションに組み込んでスクリプトインタフェースとして利用することが可能
[/su_list]
[/su_quote]
[/su_spoiler]
[su_spoiler title=”Blockyを実際に使ってみる” style=”fancy”]
[su_highlight background=”#2e85de” color=”#ffffff”] Blocklyサイト [/su_highlight]
以下のリンクからBlocklyを使うことができます。このサイトは、本来は自分のアプリに組み込むための開発者用のデモです。実際にはGoogle Developerで準備されている、パソコン用のパッケージがありますので、それをここでは使っていきたいと思います。これであれば、インターネットに接続しなくても良いので、お子様でも使えます。その準備については後述しますので、取りあえず以下のサイトをみて下さい。
[su_highlight background=”#2e85de” color=”#ffffff”] Blocklyサイトの使い方 [/su_highlight]
１．よくある Hello World (単にHello Worldと表示するだけのプログラム)をサンプルとして使い方を説明していきます。テキストブロックからテキストを選びます。
２．えらんだブロックにHello World と入力します。ブロックの白いところをクリックすると入力できます。
３．テキストボックスグループの下の方に印刷ブロックがありますので、選択します。
４．印刷ブロックに、テキストブロックを組み込みます。テキストブロックをドラッグして、印刷ブロックの上に持ってくるとテキストブロックの周りが黄色くなるので、そこで離します。
６．組み込まれました。
７．実行するには、画面の右にある赤い三角のアイコンをクリックします。
８．実行結果が、小さいウインドウに表示されます。Hello Worldが表示されています。
グーグルクローム
インターネットエキスプローラー
９．プログラムコードを見るためにPythonのタブをクリックすると、プログラムコードが表示されます。
１０．では、このプログラムがpython実行環境で動くのか、確認してみます。色々な言語を実行できる、ウエブサイト”CodeIQ”がありますので、それを利用します。まず、”CodeIQ”を開きます。
１１．使用する言語 Python を選びます。
１２．Blocklyデモからプログラムをコピーして、CodeIQの”コードを入力してください”のところにペーストします。
１３．INPUTを入力する必要は無いので、その下のRUNをクリックします。結果がOUTPUTに表示されます。簡単ではありますが、Blocklyで作ったプログラムが動きました。
[su_spacer]
[/su_spoiler]
[su_spoiler title=”Blocklyのローカル環境を作る” style=”fancy”]
2017/11/20更新：ブラウザーのlocalstorageにブロックを保管するように改善しました。
2017/11/19更新：今回のパッケージでは、作プログラムが保存できません。修正版ができるまでは、当面オンライン版を利用しますので、ダウンロードされる場合は保存が出来ない事をご了承下さい。
[su_highlight background=”#2e85de” color=”#ffffff”] パッケージのダウンロード [/su_highlight]
パッケージをダウンロードしてして下さい。
[wpdm_package id=’2357′]
[su_highlight background=”#2e85de” color=”#ffffff”] パッケージの解凍と動作確認 [/su_highlight]
１．ダウンロードフォルダーに、”google-blockly.zip”ファイルがダウンロードされていますので、適当なフォルダーかデスクトップに解凍して下さい。google-blocklyフォルダーが作成されますので、フォルダーを開いて下さい。index.html というショートカットがありますので、ダブルクリックして下さい。（注：アイコンはクロームになっていますが、使っているパソコンの環境で異なります）いつもインターネットで使っているソフトで、”Blockly 練習”というページが表示されます。
２．以下の画面は、先ほどインターネットでアクセスしたBlocklyとほぼ同じ画面ですので、Hello Worldが同じようにできる事を確認して下さい。作成したブロックの保管と復元が出来るようにしました。
３．準備完了です。
[/su_spoiler]
[/su_accordion]
[su_spacer]
次の記事で、サンプルゲームを使って実際のプログラミングをしていきます。
[su_spacer]
