viewsこんんちは!EYSの中澤です。プログラミング教室のカリキュラムを考えています。今回は、子供のプログラミング学習のみならず、IoTや非エンジニア向けのサービスで使用されているビジュアルプログラミング環境のつくりかたをまとめました。数字の1〜9のブロックと足し算のブロックを作って計算結果を教えてくれる環境を作ります。CSSのみで、GUI関連の処理を実装しなくても作れるようになっています。今回はCDNのファイルを参照します。数字の1のブロックを表示してみましょう。以下の内容で、htmlファイルを作成します。}})</script>作成したHTMLをブラウザで開くと、下記のように表示されます。灰色部分(ツールボックスといいます)のブロックを右側にドラッグすることでブロックを並べることができます。Blockly.Blocksにブロックを定義して、xmlタグ内に定義したブロックをblockタグで並べるとでツールボックに表示される仕組みです。ブロックのプロパティは次のとおりです。次に、同様にして、9までのブロックを追加します。カラフルにしてみました。次は足し算をするブロックを追加します。""})}}足し算をするには足す数と足される数の2つをセットしなければなりません。そのために、arg0というプロパティを用意して、2つの値を受け取る枠を定義します。これらを入力といいます。checkがあります。」としていますが、%1には1つ目の入力枠が設定され、%2には2つ目の入力枠が設定されます。最後に結果を表示するブロックを追加します。これで、足し算のプログラムをブロックで組めるようになりました。あとは実行できるようにします。実行するには、ブロックで作ったプログラムを実行可能なプログラムのソースコード(JavaScript等)に変換してから実行する形になります。するためには、それぞれのブロックがどのようなソースコードに変換されるかを定義する必要があります。1のブロックの定義は次のようになります。]}全ブロックに対して、JavaScriptに変換する定義をつけ、実行ボタンと押したときの処理を作れば完成です。じっこうボタン(id=run)を押したときの処理は次のように書きます。ブロックの内容をJavaScriptのプログラムに変換することができます。Blocklyの仕組みを使えば、任意の処理を行うブロックを作って、任意のプログラミング言語に変換、実行することが可能です。今回作成したHTMLを下記においています。よろしければ動かしたり手を加えてみてください。https://programpark.jp/addition.htmlEYSではシステム開発だけではなく、プログラミング教育のオリジナル教材を作成しています。興味のある方はぜひご連絡ください。/大学に入りプログラミングに没頭、MS-DOSというOSの存在を知るところから始めてC言語の標準ライブラリを自前実装しながら言語を学習。Sound(EYS)”という音楽の新スタイルで「EYS音楽教室」をスタートさせた株式会社EYS-STYLE。入会者への無料楽器プレゼントを始めとした幅広い施策で会員を獲得している音楽教室や、世界中の工房で消費者が楽器を直接購入することのできる越境ECなど、最先端のITとリアルを融合させ、ビジネスの世界を広げています。下記の事業・プロジェクトがあります。当社の根幹事業でもある音楽教室の運営。「音楽教室は楽しくない」というこれまでの常識を覆した当社独自のビジネスモデルを、現場×カスタマー×本部の三方向において、人でなければできない領域を常に思考させ、牽引していく部門。ブロックチェーン技術を用いた著作権管理をおこない、機会学習を活用した楽曲制作機能を用いて、誰でも自由に世界中の人とセッションし、オリジナル楽曲をリリースでき、且つ収入も得られる新しい仕組み(世界)を作り上げる事業です。貿易ルートの開拓や世界各地の楽器工房の開拓を行い、各工房から自由に楽器を販売・購入できるサイトを構築し、世界の楽器市場にメスを入れることがOtolier事業部のミッションです。学習事業において競争優位を確立した現在、最も重要視しているのが中小都市型のビジネスモデルの成功と、全国1000箇所へのスタジオ展開。その実現に向けた戦略立案と実施を行うことがコミュニティー事業のミッション。「エンジニアと音楽家は言語に左右されず、世界のどこでも活躍ができるはず」この思想のもと、世界基準で活躍できるエンジニアを多数輩出することが大きなミッションです。参加型プラットフォームの開発や、気軽にオンステージ体験できるライブイベントの開催、フェスの企画・運営は勿論のこと、音楽でもっと自己表現ができる世界を作り上げることがミッションです。