今回は、下の画面のようなブロックプログラミング環境をJavaScriptを使って自作できるライブラリ、Blocklyに挑戦してみました。簡単な自作ブロックプログラミングページを作成しながら、基本的な使い方について情報提供できればと思っています。今回の記事の対象読者は、次のような方を想定しています。JavaScriptの基本を学習されている方Webに関する基本的な知識(HTMLなど)を持っている方BlocklyとはBlocklyはGoogle社が提供する、ブロックプログラミング環境を構築するためのライブラリです。MakeCode」などもBlocklyライブラリを基に制作されています。JavaScriptで記述し、Webブラウザ上で動作させる構築方法が推奨されています。公式サイトへは下記のリンクよりどうぞ。editors.developers.google.comつくるもの今回構築するブロックプログラミングの環境は、次のイメージとなります。準備するブロックは「上にすすむ」「下にすすむ」「左にすすむ」「右にすすむ」の4つとなります。それぞれのブロックをワークスペースにおいて「スタート」を押すと、JavaScriptのコンソールログにブロックと同じ文字が表示されるというものです。ブロックの作成まずはブロックを作ってみましょう。ブロックはJavaScriptまたはJSONデータとして作成することができます。Toolsを使う事になるかと思います。Toolsの初期画面は下のようになっています。Toolsは、ブロックプログラミングのような形でブロックを作成していくことができます。今回作成したブロックの1つである「右へすすむ」は、次のようにして定義できます。各部分の簡単な説明もあわせて記載します。この設定により完成するブロックはこちらです。ポイントは、上の画像で赤い四角で囲まれている「inputs」の部分です。ブロック内で文章を作る役割は主にこの部分です。下の例では、「inputs」の部分に2ブロック追加し、もう少し複雑な文を作ってみました。できあがるブロックはこちらです。Inputブロックここまで見てきたようにBlocklyの基本となるのがInputブロックです。Input」の3つのブロックがあります。Inputは、他のブロックをはめるくぼみにあたるものです。Inputは、文をはめ込むことができます。Inputは他のブロックがはまることは想定されていません。文字列の表示などブロック内の文の組み立てを補助します。ブロックの定義はたくさんの設定がありますが、まずはこの3つのInputについて理解しておくと良いでしょう。Toolsを使ってブロックを作っていきます。「左へすすむ」のブロックは次のとおりです。"go_left"」のボタンをクリックし保存します。残り3つのブロックも同じ要領です。選ぶと新しいブロックを追加できます。変更点はname部分と表示される文言のみです。4つのブロックのname部分と文言を下にまとめます。Exporter」を選択します。Exporterは次のような画面になっています。Library」を押すとすべてのブロックが選択されます。Settings」のエリアから出力ファイルの形式を選択します。Stub」の2種類です。Definition」はブロック定義ファイルで通常JSON形式のデータとなります。Stub」は、ブロックからプログラムを生成するためのメソッド定義を出力してくれます。どのようなプログラムを生成してくれるかは、あとで開発者が記述しなければいけません。下のように両方を選択し、任意のファイル名を設定しておきます。「Export」ボタンを押すと出力が始まります。jsファイルについては、ダウンロード時に次のような警告が出る場合がありますが、そのまま保存します。myblock.jsonとmyblock.jsという2つのファイルができていればOKです。出力されたファイルを使ってWebページを作っていきましょう。JavaScriptファイルの作成まずは元となるJavaScriptファイルを作成しましょう。myblock.jsファイルを開き、次のようにします。Blockly.defineBlocksWithJsonArray呼び出しを追記しています。JSONファイルの内容は単にJavaScriptの配列ですので、それを同メソッドの引数としています。次に各ブロックが出力するプログラムの内容を決めていきましょう。今回はテストとして「右へすすむ」「左へすすむ」などをコンソールログへ出力するだけのプログラムにしたいと思います。プログラムを出力する4つのメソッドは次のように修正します。code;};それぞれのメソッドが行うことはシンプルです。console.logメソッドを呼び出すプログラムを戻り値として返しているだけです。HTMLファイルの作成それではHTMLファイルを作成します。プログラムをご確認ください。Blockly.JavaScript.workspaceToCode(workspace);//プログラムを実行try{eval(code);}catch(e){alert(e);}}</script></body></html>8~11行目body部の最初でいくつかのBlocklyライブラリを読み込んでいます。これらのファイルについては公式サイトより、プロジェクト一式のファイルをダウンロードして入手できます。必要なファイルはblockly_compressed.jsblocks_compressed.jsjavascript_compressed.jsです。msgフォルダ内にjsフォルダを用意し、言語対応のファイルを配置する必要があります。例では「en.js」が選択されていますが、既存ブロックやメッセージの言語を日本語にしたい場合は「ja.js」を選ぶと良いでしょう。各言語ブロックについてもプロジェクトフォルダ以下msg/jsフォルダに入っています。15行目このdivブロックはBlocklyワークスペースが入る場所です。下方のJavaScriptでこのdivのIDを指定してはめ込みを行なっています。16行目Blocklyで作ったコードを実行するためのボタンです。ボタンをクリックするとdoCodeメソッドを呼び出します。18~23行目XMLでツールボックスを定義します。ツールボックスは様々なブロックが入った左側のグレーのエリアです。xmlタグのidは任意に設定することができます。各ブロックの定義方法はシンプルで、typeのプロパティにブロックの名前を設定するだけです。26~27行目Blockly.injectメソッドでBlocklyワークスペースを埋め込みます。divのidとxmlのidを指定していることがわかります。29~39行目ボタンが押された際に実行されるdoCodeメソッドです。31行目でBlocklyのメソッドを使ってプログラムを作成します。この時点ではまだ、ただの文字列です。34行目ではJavaScriptのevalメソッドを使って、作成されたプログラムを実行しています。try~catchブロックを使って、コードが実行された際に発生したエラーを表示するようにしています。これでプログラムは完成です。このHTMLファイルをブラウザで開くと、下のような画面が表示されるはずです。実際に次のようにブロックを配置し、「コードの実行」をクリックしてみましょう。ブラウザのコンソールを確認し、次のように表示できていれば成功です。Chromeのコンソール画面です)シンプルですがブロックの並べたとおりにプログラムが動作しました。いうわけで、本日はここまでとさせていただきます。最後までご覧くださりありがとうございました。Blocklyはまだまだ奥が深く、頑張れば結構いろんなことができそうな可能性を秘めています。機会にもう少し実用的なところまで踏み込んだご紹介ができればと思います。引き続きよろしくお願いします。合同会社イー・シー・エフでは、子ども向けプログラミングなどの教育講座を実施しています。プログラミング教室の案内や教育教材の情報、また関連するご相談・問い合わせにつきましては下記よりご確認ください。ECFエデュケーションキッズも大人も。Tech関連記事JavaJavaプログラミング練習問題(くり返し)Javaによる初学者向けプログラミングの練習問題を提供中です。for文を用いた繰り返し構文の問題です。Python試しながら学ぶ!Python超初心者講座(4)今回は関数を使います。Pythonの持つ豊富な組み込み関数で、プログラミングを楽しみましょう。Part2Phaserゲームフレームワークを使った記事の第2回です。物理エンジンを使って簡単に2Dアクションを作ることができます。IoTマイクロビットでプログラミング工作-まとめ01マイクロビットと家にあるもので作るプログラミング工作です。マイクロビットの始め方と過去の紹介した7作品を掲載しています。自由研究の材料にもお使いください。Part1)Javaによる初学者向けプログラミングの練習問題を提供中です。今回はifやswitchを扱っています。プログラミングMicroPythonでマイクロビットを動かしてみよう話題のプログラミング言語「Python」を使って、マイクロビットを動かすプログラムを作ってみたいと思います。LLC.メニューホーム合同会社イー・シー・エフECFエデュケーションホーム検索トップサイドバーカテゴリーGitIoTSTEMコンピュータリテラシープログラミングJavaJavaScriptPythonScratchキッズプログラミングプログラミングと教育マイクロビット工作タイトルとURLをコピーしました。