レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

変数と演算

変数を使うのと同じように入力項目を=から書き始めることで、計算式を作ることができます。

「= 1 + 1」のように数値だけで計算もできますし、「= x - 2」のようにあらかじめデータをいれた変数を使った式にすることもできます。

以下のプログラムは、「段数」という名前をつけた変数を使って直方体を階段状に配置しています。

 

f:id:iad_otomamay:20191127214753p:plain

変数を使って階段を作るCODE

 

[公式]変数を使って階段を作る

変数によるデータの名前付け

変数には数値やデータに対する名前づけの効果もあります。

10や-4という数字は味気ないですし、プログラムが巨大になってくるとどの数字が何を指しているかわかりにくくなります。

 

以下のプログラムでは、変数名に「高さ」という名称をつけました。

参照する箇所(大きさのY)でも「= 高さ」にしています。読みやすい名前をつけることでプログラムの意図が一目瞭然となります。*1

 

f:id:iad_otomamay:20191127201911p:plain

 

実行すると、高さが5の物体が表示されます。

 

[公式]変数による名前付け

 

 

*1:変数名などのプログラムの構成要素に日本語で名前をつけるのは、あまりオススメできません。日本語などのマルチバイト文字に対応していないソフトウェアに連携するときなどに、余計な手間がかかることがおおいからです

BLOCKVROCKでの変数

BLOCKVROCKで変数(へんすう)を使います。変数はプログラミングのとても基礎的ながら重要な要素です。

 

プログラムで変数を使うメリットはいくつかあります。

  • 同じ値を使っている場所にセットしておくと、変更するときに1箇所変更するだけですむ
  • 値に名前をつけることができて、意図がはっきりする
  • 計算結果などを記憶しておくことができる(値は書き換えることができる)

 

変数には、はじめに変数に値をセットしておいて、変数を使いたい場所で「=変数名」と書きます。

Excelで計算式を書くときみたいですね。

 以下のプログラムで、「= z」の箇所は全て変数zに入った値-5が使われます。

f:id:iad_otomamay:20191127195753p:plain

変数の利用

 このプログラムでは、3つのブロックのz値を変数で設定しているので、変数zの値を-5から−10などにかえると、3つの物体の位置を一気に変更できます。

 

今回のプログラムは、実行結果だけではあまり面白みがありませんね。 

[公式]変数の利用

このプログラムは3つのブロックのz(奥行き)の位置を変数zから読み込むようにしています。

  

 

BLOCKVROCKでHelloWorld

BLOCKVROCK入門編

様々な言語で、初めの1歩といえばHelloWorldとコンソールに出すことですが、BLOCKVROCKでもやってみます。

 

 

[公式]BLOCKVROCKでHelloWorld

 

半角英数文字を浮かせるコードです。

f:id:iad_otomamay:20191126154757p:plain

BLOCKVROCKでHelloWorld

位置のX Y Zの感覚が少し迷いがちですね。

 

X : 横方向、+になるほど右

Y:縦方向、+になるほど上

Z:奥行き、+になるほど手前

 

半角英数を-1においているのは、カメラよりも少し先に置かないと見えないからです。

Yを2にしているのは、カメラのデフォルトの高さが1.6に設定されているため、目線の位置より少し上に配置しました。

背景は、プリセットのものをいくつか選べます。フォレストが唯一明るい背景ですが、もっと選択肢が欲しいとよく言われます。

 

子要素をとにかく円形に配置してくれるブロック

勢いに乗って早速の連投をしていきます。

BLOCKVROCKは、入門編の話もできていないのに、いきなり新機能の話をしていきます。

ブログを書くテンションをキープするためです。

 

円形に配置というブロックは、Aframe-Layout-Componentというコンポーネントを使って、要素を円形に配置してくれます。円の半径を広げたり横に倒したりできるので、カメラを取り囲む物体群などが簡単にできます。

https://www.npmjs.com/package/aframe-layout-component

 

[公式] 円形に配置 created by BLOCK VROCK

 

コードは以下のような感じです。向きをxzにすると横に倒すことができます。(x(横)とz(奥)の方向を平面とする)

この例ではループを使って子要素を作っていますが、個別にブロックを配置することもできます。

子要素を追加すると、自動的に円形配置に加えてくれるのがいいところです。

f:id:iad_otomamay:20191126150150p:plain

円形に配置するコード

 

BLOCKVROCKというWebVRサービス

昨年より、BLOCKVROCKというサービスをやっています。

https://blockvrock.com/

 

 WebVR/ARを、誰でも作れるようにするサービスで、例えば下に載せたようなのが5ステップぐらいで簡単に作れます。

プログラミングに興味のある高校生などを対象に、プログラミングを使って何をするか?を学んでもらうために作りました。

 

(以下がみられなければ、リンクで飛んでみてください。https://run.blockvrock.com/show_user_contents?user_id=429&project_id=16ea635e56a88

 

プログラミングといえば、「HelloWorld」から始めるものですが、それを楽しめる人と楽しめない人がいて、参入障壁の高さはどうしてもあるように思っていました。

BLOCKVROCKの最初のプログラムは、バーンと世界を作ることです。面白いことを簡単にできることで、いろいろやってみたいと好奇心を持ってもらうことが、第1歩になると思ってます。

 

まずは紹介ということで、記事にしましたがいろいろとチュートリアルや開発中に発見したハックなどを書いていきます。

 

上記で紹介したプログラムのコードはこれだけ。

BLOCKVROCKのプログラムコード

ランダムブロック コード

 

設計力で測る課題解決力

設計力は、課題解決力の一部です。

 

プログラミングを使って「設計」がうまくできるようにすることを目的にすると、結果として「課題解決力」が身につき、課題解決力が測定しやすくなると思います。


例えば、「おばあちゃんの安否を見守りたい」という課題を解決するカリキュラムを立てるとしましょう。

まずは一部に既存のシステム(例えば電話とか)が含まれるような設計でもかまいません。

プログラミングやコンピューティングからスタートせずに設計からスタートして解決策を上げていきます。

 

初めは、自分たちに考えられる手段で答えがまとまると思います。

「毎朝電話する」とか「毎日LINEでスタンプを押してもらう」とか。

 

その上で、効率を考えたり、異常パターンを考えたり、リスクを考慮したり、変なトラブルを切り分けたり、予測や仮説を立てたり、実測・実験してみたり。
一部のプロセスが、プログラミングによって解決するかもしれませんし、最終的にプログラミングの要素が全く無く、あるものの組み合わせで解決できることもあるかもしれません。

解決方法そのものではなく、効率、異常パターン、リスク、トラブルなどに対して考慮された設計力をポイントに評価すれば、すなわち課題解決力と言えるのではないかと思います。