当サイトは2020年小学生のプログラミング必修化に向けて、関連する情報を纏めています。サイトリニューアルしました。

Blockly ブロックリー ゲームズ の次はプログラムを作ってみよう①

Blockly ブロックリー ゲームズ の次はプログラムを作ってみよう①

ブロックリーゲームズは、Googleが提供している、プログラミングの勉強ができる無償のサイトです。このゲームは、同じくGoogleが提供しているBlocklyというビジュアルコードエディターをベースに作られています。この記事では、ブロックリーゲームズを終わられた方の次のステップである、プログラミング言語の習得について、Blocklyを利用して紹介していきたいと思います。

ブロックリーゲームズについてご存知無い方は、以下の記事をご覧ください。

Blocklyとは何

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を習得していただくと良いと思います。

pythonはさまざまな分野のアプリケーションで使われている、極めてパワフルな動的プログラミング言語です。Pythonはよく、Tcl、Perl、Scheme、Javaなどと比較されます。Pythonには次のような特徴があります:
  • とてもクリーンで読みやすい文法
  • 強力な内省(イントロスペクション)機能
  •  直感的なオブジェクト指向
  •  手続き型のコードによる、自然な表現
  •  パッケージの階層化もサポートした、完全なモジュール化サポート
  •  例外ベースのエラーハンドリング
  •  高レベルな動的データ型 事実上すべてのタスクをこなせる、広範囲に及ぶ標準ライブラリとサードパーティのモジュール
  •  拡張とモジュールはC/C++で書くのが容易(JythonではJava、IronPythonでは.NET言語を利用)
  •  アプリケーションに組み込んでスクリプトインタフェースとして利用することが可能
Python japan
Blockyを実際に使ってみる
  Blocklyサイト  

以下のリンクからBlocklyを使うことができます。このサイトは、本来は自分のアプリに組み込むための開発者用のデモです。実際にはGoogle Developerで準備されている、パソコン用のパッケージがありますので、それをここでは使っていきたいと思います。これであれば、インターネットに接続しなくても良いので、お子様でも使えます。その準備については後述しますので、取りあえず以下のサイトをみて下さい。

  Blocklyサイトの使い方  

1.よくある Hello World (単にHello Worldと表示するだけのプログラム)をサンプルとして使い方を説明していきます。テキストブロックからテキストを選びます。

Blockly2

2.えらんだブロックにHello World と入力します。ブロックの白いところをクリックすると入力できます。

Blockly3

3.テキストボックスグループの下の方に印刷ブロックがありますので、選択します。

Blockly4

4.印刷ブロックに、テキストブロックを組み込みます。テキストブロックをドラッグして、印刷ブロックの上に持ってくるとテキストブロックの周りが黄色くなるので、そこで離します。

Blockly5

6.組み込まれました。

Blockly6

7.実行するには、画面の右にある赤い三角のアイコンをクリックします。

Blockly7

8.実行結果が、小さいウインドウに表示されます。Hello Worldが表示されています。

グーグルクロームWS000020

インターネットエキスプローラーBlockly8

9.プログラムコードを見るためにPythonのタブをクリックすると、プログラムコードが表示されます。

Blockly9

10.では、このプログラムがpython実行環境で動くのか、確認してみます。色々な言語を実行できる、ウエブサイト”CodeIQ”がありますので、それを利用します。まず、”CodeIQ”を開きます。

11.使用する言語 Python を選びます。

Blockly10

12.Blocklyデモからプログラムをコピーして、CodeIQの”コードを入力してください”のところにペーストします。

Blockly11

13.INPUTを入力する必要は無いので、その下のRUNをクリックします。結果がOUTPUTに表示されます。簡単ではありますが、Blocklyで作ったプログラムが動きました。

Blockly14

Blocklyのローカル環境を作る

2017/11/20更新:ブラウザーのlocalstorageにブロックを保管するように改善しました。

2017/11/19更新:今回のパッケージでは、作プログラムが保存できません。修正版ができるまでは、当面オンライン版を利用しますので、ダウンロードされる場合は保存が出来ない事をご了承下さい。

  パッケージのダウンロード  

パッケージをダウンロードしてして下さい。

  パッケージの解凍と動作確認  

1.ダウンロードフォルダーに、”google-blockly.zip”ファイルがダウンロードされていますので、適当なフォルダーかデスクトップに解凍して下さい。google-blocklyフォルダーが作成されますので、フォルダーを開いて下さい。index.html というショートカットがありますので、ダブルクリックして下さい。(注:アイコンはクロームになっていますが、使っているパソコンの環境で異なります)いつもインターネットで使っているソフトで、”Blockly‏ 練習”というページが表示されます。

Blockly12

2.以下の画面は、先ほどインターネットでアクセスしたBlocklyとほぼ同じ画面ですので、Hello Worldが同じようにできる事を確認して下さい。作成したブロックの保管と復元が出来るようにしました。

Blockly15

3.準備完了です。

次の記事で、サンプルゲームを使って実際のプログラミングをしていきます。

クロームブラウザーをご使用の方へ

当サイトへの訪問ありがとうございます。その際、グーグルクロームブラウザーをお使いの方にお知らせです。グーグルクロームブラウザーでは、2018年7月から、サイトにより以下の表示がブラウザーのアドレスバーに表示されます。当サイトでも表示されますが、心配ありませんのでご安心ください。
SSL案内1
これは、SSLと呼ばれるWebサイトとそのサイトを閲覧しているユーザとのやり取り(通信)を暗号化するための仕組みを使用していないためです。ネットショッピング、銀行サイトではパスワードやクレジットカードの情報を扱いますので、必須の仕組みです。当サイトでは、そのような情報を扱っておりませんので、暗号化は必須ではありませんが、訪問される方により安心していただけるように、SSL化を予定しております。このメッセージはSSL化完了まで念のため表示します。

ブロックリーカテゴリの最新記事