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

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

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

Aframe arのドキュメント いつもわすれるので。 github.com

笑い男模倣犯アプリ 2024年2月1日の記念に作りました

笑い男事件の模倣犯Webアプリ作りました。 やってみてください↓https://demo.blockvrock.com/laughingman/ 2024年2月1日が笑い男事件の日だそうですので。

AframeのマーカーARでa-cameraやa-marker-cameraを使うとマーカーと物体位置がズレる

なぜかなと思って、ずっと別の方法で誤魔化していたが解決したので記。 現象 ダメなパターンは以下、a-cameraを使っている。 <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> </meta></meta></head></html>

astro+Restのサービスを作る時にCORSにならない方法

Astroからaxiosやfetchやらで、RestAPIを呼ぼうとするとCORSの制限に引っかかる。 ローカルだとClientとServerをそれぞれポートを分けて立てたりするから。 仮に以下のようにするとする Astro => http://localhost:3000/ Server => http://localhost:8080/ap…

覚書:git である程度大きいファイルをアップする時に、pushが進まなくなる現象の対処

Git のプッシュでWriteが終わり、Total 6626 (delta 1700), reused 0 (delta 0), pack-reused 0と出たあとに止まってしまう。 ある程度大きなファイルがあるときは、以下のようにバッファを増やしてからpush する。 git config http.postBuffer 157M 大きす…

A-FrameでVRを始めるときにトラブらない最低限の設定

A-Frameを使ったVRをいくつか作っていて、いつも設定で回避していることを備忘録的に記載します。 最終形 最終形を始めに示し、以降で構成要素を見ていくことにします。 <html > <head> <meta name="description" content="VR template" /> <meta charset="utf-8" /> <title>VR Template</title> </meta></meta></head></html>

決定的に重要な資質 Integrityの人

私の大好きな経営の神様ドラッカー。そのドラッカーがよく使った言葉「integrity」は、真摯さと訳されます。 大変難しい言葉ですが、高潔、誠実、清廉、品位、完全性を含んだ言葉で、ドラッカーが言うには「integrityこそが組織のリーダーやマネジメントを担…

Webサイトリニューアルと夏休みのイベント

株式会社レベルエンターの新しいWebサイトができました。 levelenter.com たくさんの皆様に協力いただき、オープンすることができました。WebARになるのでちょっと遊んでみてください。 また、7月1日よりレベルエンターは8期目が始まっています。 7年間もフ…

NFTとXMLの類似性

NFTについてひとこと言えるほどの力量はないけれど、やっぱり最近の以下の議論がとても面白かったので書きたくなってしまった。 kumagi.hatenablog.com NFTとXMLはアルファベット3文字の略称という以外にも、「実現できることは比較的シンプルな技術でありな…

Typescriptで国際化対応する方法を試行錯誤したので、viteつかってハンズオンできるように残す

国際化対応の完成図 Typescriptを使った開発で、国際化対応(多国語へのコンテンツ変換)に対応し、できるだけ開発体験をよくするための方法を考えてみました。 この記事では、typescriptの環境を作るためにviteでバニラtypescript(フレームワークを使わな…

人は炎上案件ではなく、教育で育てるべきなのだ。

ござ先輩が荒ぶってる!いいぞいいぞ! gothedistance.hatenadiary.jp 大元は、ソフトウェア開発者1000万プレイヤーへの近道として、「炎上案件を経験したらいいぜ」みたいな話をしたソフトウェア会社の代表の話で、前後関係はわからないけどこの発言が拡散…

Vueのスタイルガイド

Vueを使ったプロジェクトで守るべきガイド。ちゃんと押さえておくべきだな。 Vue 3 v3.ja.vuejs.org Vue 2 jp.vuejs.org

クォータニオン(Quaternion)をAframeで基礎から学ぶ

クォータニオン(Quaternion)は3次元空間の回転を表現するものです。 回転軸(3次元のベクトル)と回転角で成り立っているので、4要素があるので四元数(Quaternion)といいます。 A-frameでのrotationはオイラー角という方法で表現されています。これはxyzの…

44歳にもなってプログラミングが楽しくてしょうがない

あと10日ほどで44歳になります。 で、いまはプログラミングが楽しくって、いやーどうしよう。ここ1−2年は人生で一番プログラムを書いたかもしれない。 あたらしいことをやるのも楽しい、VR/ARとかAIとか、ひと昔前ならSFだったことが実現できるのはとっても…

a-frame raycasterを使って壁との衝突判定を実装する

a-frame raycasterを使って高低差のある地形に沿って移動する - レベルエンター山本大のブログの続き 目的 a-frameではWASDキーおよび矢印キーでカメラの位置を移動させることができるものの、壁や物体への衝突判定は自分で作り込む必要があります。 以下の…

a-frame raycasterを使って高低差のある地形に沿って移動する

目的 AframeのカメラはデフォルトでWASDキーや矢印キーによる操作ができますが、高低差のある地形に沿って移動はしてくれません。 また、階段のようなモデルも登っていきたいところですね。 Aframeで地面に指定したモデルの地形に添って移動できるようにしま…

2000年代オブジェクト指向は絶対の正義だった。つまり僕は洗脳を経験している

私がIT業界の片隅に所属をし始めた2000年ごろ、Javaエンジニアはスーパースターだった。Javaエンジニアを名乗るということは、秘奥義オブジェクト指向を習得していることに他ならないからだ。 「オブジェクト指向こそ正義」だった。 Javaとオブジェクト指向…

ビジョナリーカンパニー弾み車の法則

「ビジョナリーカンパニー弾み車の法則」(TURNING THE FLYWHEEL)は90ページほどしかない書籍だけれど、重要な指針を書いてくれている良い本だと思います。90ページなので紹介もしやすいですね。 ビジョナリー・カンパニー 弾み車の法則 作者:ジム・コリン…

プログラマ育成者に知っておいて欲しい初心者の5段階

プログラミングスクールといえばグレーなビジネスモデルというようなイメージが蔓延ってしまって悲しいですが、プログラミングのスキルを多くの人が手にすることはとても有用なことではあるので今後も頑張っていきたいと思います。 プログラミングを習得しよ…

VSCode「デコレーターの実験的なサポートは将来のリリースで変更になる可能性がある機能です」を消す

VSCodeでtypescriptを書いていてデコレーターを使うと、 デコレーターの実験的なサポートは将来のリリースで変更になる可能性がある機能です。'experimentalDecorators' オプションを設定してこの警告を削除します というワーニングがでる。 tsconfig.jsonで…

視線の方向に常に直進する

VRの視点を操作してVR空間を自由に動き回りたい時は、カメラに「常に直進」属性ブロックを設定します。 カメラを常に直進する スマートフォンVRでは、コントローラーやタッチなどで操作できない場合が多いため、スマートフォンの向きを変えることでスマート…

カメラを操作する

VR空間では、カメラという物体でユーザの視点を決めます。 カメラはシーンに1つだけ登録できます。 [公式]カメラ このプログラムでは、カメラブロックを表示してYの位置を10にセットしています。 これによって上空に視点が移動して空を飛んでいるような表現…

殴れる物体を作る

「動きのある物体」で重力の影響を受ける物体を作ることができます。 また「動きのある物体」に「クリックした時〜のチカラでなぐる」ブロックを設定することで、注視点カーソルでクリックした時に力を発生させることができるようになります。 土台ブロック…

クリックしたときに物体を移動させる

クリックした時に反応する処理を作るには、「ブロック〜をパラメータ〜を受け付けるように定義」のブロックでクリックされた時に行うべき処理を先に定義しておいて、「クリックした時に〜を処理する」ブロックに、その名前を記述します。 物体を注目点カーソ…

物体をアニメーションさせる

物体をアニメーションさせるためには、「アニメーション用のコマ送り」ブロックと、「〜づつ〜する」というブロックを組み合わせます。 このサンプルは、物体を回転させます。 [公式]アニメーションループ アニメーション用のコマ送りブロックは、「繰り返し…

チェックポイントによる移動

Aframe が先日2019年12月16日に晴れてVersion1.0リリースとなりました。 早速BLOCKVROCKもAframe Version1.0に対応しています。 チェックポイントによる移動という機能によって、「常に直進」とは異なるやり方でカメラを移動させることができます。 以下のプ…

JavaScriptコードモードを使って物体をアニメーションさせる

BLOCKVROCKには、コードモードという機能があります。 コードモードでは、JavaScriptを使ったプログラミングが可能です。 BLOCKVROCKで作った物体や世界は、Webで使われるHTMLとJavaScriptで出来上がっているためJavaScriptを使うことで自由に操作することが…

NodeからRDSの接続で SSL/TLSの証明書を rds-ca-2019に更新する

RDS のCA証明書が2019になるとアナウンスがあって、最終警告っぽいメールがきてたので慌てて対応。 そのメールのタイトルはこちら。 重要なお知らせ:2020年2月5日までにお客様のAmazon RDS SSL/TLS証明書の更新を行ってください | Important Reminder: Upda…

物体の位置

物体の位置は、3つの軸で決定します(X軸、Y軸、Z軸) Xは左右(プラスになるほど 右) Yは上下(プラスになるほど 上) Zは奥行き(プラスになるほど 手前) を表します。 以下のサンプルプログラムでは 赤い物体を左右に 青い物体を上下に 黄色い物体は、…

物体を受け止める土台を作る

動きのあるブロックは、重力を受けるようになるのでそのままでは落下していきます。 「静止した物体」属性をつけたブロックは、動きのある物体に対して衝突判定があります。 静止した物体の大きさのXとZ方向を広くすれば、重力のある物体を受け止める土台と…