自動計算が尊かった昔と違い、便利なツールがある現代では、合計や平均を計算するプログラムをがんばって勉強したところで、表計算の方が便利じゃん？で終わってしまいます。
せっかくプログラミングするなら、すぐにプログラミングならではの凄さが味わえることを味わいましょう。IchigoJamならLED、PCならVR!?
「HTMLで創るVR、A-Frameはじめのいっぽ 」で、コンピューター言語「HTML」に入門できた人向けの次のステップ、JavaScriptを使ったプログラミング入門です。
ループ
for (let i = 0; i < 10; i++) {
// box 設置!
}
マウスで視点を動かしたり、カーソルで前後左右に動けます。スマホはぐるぐる回して見渡せて、Oculus QusetなどVRではこのサイバー空間を歩けます。
二重ループ
for (let j = 0; j < 10; j++) {
for (let i = 0; i < 10; i++) {
// box 設置!
}
}
二重ループで二次元的に設置できます。数や大きさをいじって遊んでみましょう。多すぎると重くなります。
三重ループ
for (let k = 0; k < 10; k++) {
for (let j = 0; j < 10; j++) {
for (let i = 0; i < 10; i++) {
// box 設置!
}
}
}
三重ループで三次元！
英数テキストを表示法 （日本語は別途、シカケ が必要です）
視点がある座標（カメラ座標）をテキスト表示するJavaScriptプログラム 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script type="module">
AFRAME.registerComponent("main", {
init: function() {
},
tick: function () {
const p = camera.object3D.position;
cameraheight.setAttribute("value", p.x.toFixed(1) + ", " + p.y.toFixed(1) + ", " + p.z.toFixed(1));
}
});
</script>
</head>
<body>
<a-scene background="color: white" main>
<a-box position="0 1 -2" width="1" height="1" depth="1" color="green"></a-box>
<a-text id="cameraheight" position="1.5 1 -2" width="5" color="black" rotation="0 0 0" align="center" value="0"></a-text>
<a-camera id="camera"></a-camera>
</a-scene>
</body>
</html>
A-Frameの使い方は、AFRAME.registerComponentを使います。tickが連続して呼ばれるので、そちらでカメラの座標をテキストのvalueにセットしています。
VIDEO
前後左右に動いたり、頭を上下に動かすと、値が変わることを確認できます。
作ったVRを自分のスマホで見られる環境を、Node.js、live-servert、ngrokを使って整えましょう！
自分のスマホでチェックする手順まとめ （スマホとPCが同じネットワーク上にいること）node.js をいれる
npm i live-server -g
*macでは先頭に "sudo " を付けて、sudo npm i live-server -g とする)live-server を起動する
live-server
* ファイル名を index.html にしておくとすぐ開き楽ですngrok いれる
npm i ngrok -g
*macではsudoつける
ngrok http 8080
10. https:// で始まり .io で終わるURLをコピーするQRコードメーカー でQRコード化し、スマモで読み取ってアクセスする
自分で作ったサイバー空間、スマホでグリグリ見られると楽しいですね！
一般公開したくなったら、GitHubが便利です！
GitHubを使って公開する方法 GitHub アカウントをつくる（メールアドレスが必要です）https://github.com/ の Repositories [New] を押すGitHub Desktop をインストールするといいよ！
プログラミングの楽しさに触れたら、いろいろ作っていきましょう！JSはじめのいっぽ 」も参考に！
