<h2>目次</h2>
<ol>
<li>概要</li>
<li>aframe-physics-system の CDN が動かない問題</li>
<li>まとめ</li>
<li>追記</li>
</ol>
<h2>概要</h2>
<p>ここのところ、遊びで<a href="https://aframe.io/docs/1.2.0/introduction/">a-frame</a>を触っているのですが、a-frame の物理演算ライブラリである<a href="https://github.com/n5ro/aframe-physics-system">aframe-physics-system</a> で動かない問題が発生したので場当たり的な対処方法を記します。</p>
<h2>aframe-physics-system の CDN が動かない問題</h2>
<p>結論から<a href="https://github.com/n5ro/aframe-physics-system">aframe-physics-system</a> に記載されている CDN ではなく以下に変更したところ動作しました。(2022/01/05 時点)
<code>//cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js</code></p>
<h2>まとめ</h2>
<p>最近は、巷に落ちている a-frame のソースコードと ESC(Entity Component System)を使った本家のサンプルソースコードを読み比べて ESC を使った方が理解するのに難儀な気がしてならないこの頃です。これも慣れなのでしょうか。。。</p>
<h2>追記(2021/01/06 時点)</h2>
<p><a href="https://jgbarah.github.io/aframe-playground/physics-01/">参照記事</a>よりa-frame@1.2.0では Ammo.js の<a href="https://github.com/n5ro/aframe-physics-system/blob/master/AmmoDriver.md#basics">ドライバー</a>を入れる必要があるらしいです。</p>


aframe-physics-systemについて

<h1>目次</h1>
<ol>
<li>概要</li>
<li>three.jsで遊ぶ際のテンプレ</li>
<li>まとめ</li>
</ol>
<h2>概要</h2>
<p><strong>three.js</strong>で遊びはじめて3日ほどですが、簡単なものを試す機会が出てきました。簡単なオブジェクトを生成するだけでもブラウザのリサイズに対応した<strong>renderer</strong>、<strong>camera</strong>、<strong>scene</strong>や生成したオブジェクトをあらゆる角度から見るのに役立つ<strong>OrbitControls</strong>やGUIデバッグをするために<strong>lil-gui</strong>を導入したくなります。今回は、これらを用意したテンプレートを備忘録として残します。</p>
<h2>three.jsで遊ぶ際のテンプレ</h2>
<p>以下のテンプレはthree.js側のコードを切り出したものになっています。</p>
<pre><code>
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import * as dat from "lil-gui"

/**
 * Base
 */
//Debug
const gui = new dat.GUI()

//Canvas
const canvas = document.querySelector("canvas.webgl")

//Scene
const scene = new THREE.Scene()

/**
 * Box
 */
const box = new THREE.Mesh(
	new THREE.BoxGeometry(2, 2, 2),
	new THREE.MeshBasicMaterial({ color: "#ffffff" })
)
scene.add(box)

/**
 * Light
 */
//Ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
gui.add(ambientLight, "intensity").min(0).max(1).step(0.001)
scene.add(ambientLight)
/**
 * Sizes
 */
const sizes = {
	width: window.innerWidth,
	height: window.innerHeight,
}

window.addEventListener("resize", () => {
	//Update sizes
	sizes.width = window.innerWidth
	sizes.height = window.innerHeight

	// Update camera
	camera.aspect = sizes.width / sizes.height
	camera.updateProjectionMatrix()

	//Update renderer
	renderer.setSize(sizes.width, sizes.height)
	renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
//Base camera
const camera = new THREE.PerspectiveCamera(
	75,
	sizes.width / sizes.height,
	0.1,
	1000
)
camera.position.x = 1
camera.position.y = 1
camera.position.z = 5
scene.add(camera)

//Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
	canvas: canvas,
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () => {
	const elapsedTime = clock.getElapsedTime()

	//Update controls
	controls.update()

	//Render
	renderer.render(scene, camera)

	//Call tick again on thre next frame
	window.requestAnimationFrame(tick)
}

tick()
</code></pre>
<h2>まとめ</h2>
<p><strong>three.js</strong>の学習を初めて3日目ほどで得た、現時点でのテンプレを載せました。とりあえずは、影や物理現象を考慮した環境を作ってみたいと思うのでコツコツ遊びながらやっていければと思います。</p>


three.jsのテンプレ

<h2>目次</h2>
<ol>
<li>概要</li>
<li>three.js について</li>
<li>three.js のデバッグについて</li>
<li>まとめ</li>
</ol>
<h2>概要</h2>
<p>ここ最近のマイブームの<a href="https://aframe.io/">a-frame</a>をより深く知るために<a href="https://threejs.org/docs/">three.js</a>で遊び始めたのでデバックについて調査したことを備忘録として本記事を記述します。</p>
<h2>three.js について</h2>
<p>ウェブブラウザ上で 3D 表現をする際によく使われる WebGL ライブラリだと認識しています。</p>
<h2>three.js のデバッグについて</h2>
<p>three.js を触っていると何かと思い通りの表現になるまで値を変更する作業があるかと思います。手作業で値を変更していくことに辟易していた頃にデバッグツールなるものが存在することを観測しました。本記事時点では、更新が途絶えた<strong>dat.gui</strong>から<a href="https://www.npmjs.com/package/lil-gui">lil-gui</a>への転換期のようです。雑感としては、<strong>lil-gui</strong>を使っておけば問題ないようです。<strong>dat.gui</strong>をサンプルにして<strong>lil-gui</strong>でデバッグを行ったりしましたが、問題なく動作しました。<br>
以下のようにインポートしてあげると情報の多い<strong>dat.gui</strong>のサンプルもいい感じに使えました。(簡単なことしかしてないからかもしれないです。。。)<br>
<font style="color:#2550C7; font-weight:bold"><code>import * as dat from "lil-gui"</code></font></p>
<h2>まとめ</h2>
<p>three.js のデバッグの触りについて記述しました。まだまだ<strong>three.js</strong>に慣れていないので正月の時間を使って戯れようと思います。</p>


three.jsのデバックについて

<h1>経歴</h1>
<ul>
<li>職業: 某 IT 企業で社内 SE -> 転職</li>
</ul>
<h2>目次</h2>
<ol start="0">
<li>概要</li>
<li>転職が決まるまで</li>
<li>今後</li>
<li>まとめ</li>
</ol>
<h2>概要</h2>
<p>今回は、転職に至るまでの流れと今後を書きます。</p>
<h2>転職が決まるまで</h2>
<p>2021 年 10 月:転職活動を本格化<br>
2021 年 10 月中旬:転属願い提出<br>
2021 年 11 月中旬:転属が叶わないことを確認<br>
2021 年 12 月中旬:内定受理<br>
2021 年 12 月末:退職<br>
->転職の面談と社内での転属を願い出たことによる影響で 1 日の大半を閉める毎日は自分の成長が感じられず、苦しく感じた毎日でした。(面談時の似たようなやりとり繰り返しに飽きていたのかも)</p>
<h2>今後</h2>
<p>どうにか 2 月までは個人的に好きなことに割ける時間を作ったので自分の好奇心の赴くままに探究します。</p>
<h2>まとめ</h2>
<p>安定した環境から成長を見込める分野・環境に飛び込むことにしました。この選択が良かったと思えるように日々を楽しみます。</p>


退社

<h1>経歴</h1>
<ul>
<li>職業: 某 IT 企業で社内 SE</li>
</ul>
<h2>目次</h2>
<ol>
<li>新人研修</li>
<li>配属後</li>
<li>まとめ</li>
</ol>
<h2>新人研修</h2>
<p>新人として 4~6 月の 3 ヶ月間の新人研修を受けた感想を書きます。
新人研修の 6 月初めあたりから同期と仲良くなり始め飲みに行ったり遊ぶことが増えました。うまく環境に馴染めたようで一安心しました。</p>
<p>その期間に基本情報技術者試験を受け合格しました。取得してみたけれど、何か新しく学びになったかというとそうでもないような...
一番の収穫は、チーム開発課題に取り組む日々を楽しめたことです。自分が主体となって、実装に対してタスクを洗い出し → 依頼 or 自分で実装 → レビューの流れをうまくこなせたことが良かったと思います。正直、自分が苦手な書類仕事やデザインまわりを最初に伝えてメンバーと一緒に解決したことが功を奏しました。なんだかんだと、最優秀賞チームのリーダーになっていたことが感慨深かったです。</p>
<p>研修中の懸念点として、配属先が希望通りではなく開発ができるかどうか不明なことだったが、従来の比較しても結構な結果を出したことから少なくとも開発周りに配属されると思っていました。（配属希望には、開発一本でやっていく旨と運用や社内調整的な仕事をするぐらいなら営業がしたいと伝えていた。）</p>
<p>総じて、結果や相対的に勝つことにフォーカスした結果、達成をする経験を得ることができた。今までは、なんとなく心地よい状態を維持するための行動をしていたが負荷をかけてでも結果や相対的に勝つことに対してフォーカスした目標を設定することの重要性を感じた。注意点としては、普段の行動は前述の目標を意識するのではなく自分に合った負荷をかけることが重要なことがわかった。
なんだかんだと、同期の中では一番の成果を出したといっても過言ではない状況を味わえたのは良い経験でした。</p>
<h2>配属後</h2>
<h3>7 月</h3>
<p>どんな部署なのかどんな技術を要求されるのか不安と期待を持ったまま入部しました。しかし、新人研修時の一抹の不安がまんまとあたり、社内調整と苦手な書類仕事を言い渡されました。先輩上司にこの仕事は、希望通りでは無いとかのレベルではなく、やりたく無い仕事だと相談しました。結果として世話役の上司が早々に(二週間ほど)で変わり、7~8 月はこの資料を読み自己学習することを命じられました。その資料は、いかにも古いとわかる茶色くなったプリントと 10 年前ほどの資料集が数冊でした。正直、愕然としたが内容を見る前から決めつけるのは良く無いと思い読み進めると古めかしい内容ばかりでした。そうは言っても、使ったことない技術であることは変わりないので実装をしてみることにしました。しかし、困ったことに PC には 管理者権限がないのでほとんどのソフトウェアがインストールできない上、制約ばかりでした。先輩に相談すると文字だけ読めと言われ全て読んだことを伝えると仮想サーバを用意するからと書類仕事を任されました。待てど暮らせど、仮想サーバは用意されることがないので研修期間は実装をしたいから自分の PC を使わせてくれと役員まで話をしに行ったところ先輩は大慌てで権限の緩い PC を用意してくれました。直後に別室に呼ばれ先輩上司以外に断りなく話にいくなと怒られる経験をしました。さらに、どうしても開発がしたいなら会社との秋の面談に転属願いを出すか転職をしろと言われました。</p>
<p>なんだかんだと、セキュリティ周りの WAF を実装したり Rust の actix-web を触ってバックエンドを書いたり nginx でリバースプロキシをしてみたりと 7 月の中旬から二週間弱で自己学習をしました。また、任された書類仕事は Python で自動化したので立派な自己学習に時間を当てられたことがよかったです。色々な実装を始めて二週間目に部署内の配属後研修の報告会が設けられたが先輩は病欠で休職に入ったため、世話役の上司がいなくなってしまいました。この頃から、カジュアル面談に参加して他社の状況を見るようになりました。。。</p>

<h3>8 月</h3>
<p>そんなこんなで、8 月の頭ら辺から休職に入った先輩の代わりに新しく異動してきた先輩が上司になりました。その先輩にも「技術的な仕事はないのか？(書類仕事しかないのか？)」と詰め寄ったが学べることはあるし、技術的に学びになるような内容のタスクを渡してくれることを約束してくれました。結果は、インストーラの色々な Windows での検証や製品の API 検証などの簡単なものに終始し技術的に追えない部分はベンダーに問い合わせて対応をするお仕事でした...また、API 検証の際にわかったことだが先輩は curl コマンドの簡単な使い方や API 基礎的な話を理解されていないのでは、との不安が出てきました。（技術力には自信があるみたいなことを言っていたのはなんだったのだろうか）</p>
<h3>9 月</h3>
<p>9 月ぐらいから、何社かカジュアル面談をして最終面談まで行きました。その際に実装をして見せろと言われたため一週間ぐらいでサーバーレスを使った簡易サービスのバックエンドをプライベートで実装しました。この頃から通常業務によるストレスによって、頭にもやがかかっているような状況に陥いっていた気がします。この現象は、所属組織に期待が持てない時の不安から来るもののように思える。（高校の時を思い出すようになった。）
さらに、9 月末頃から先輩上司がさらにかわることが告げられ宙ぶらりんの状態になりました。また、会社と秋の面談が組まれることが決まりました。転属を伝えるチャンスが来たことにとても安堵しました。</p>
<h3>10 月（8 日間）</h3>
<p>転属のため 1 週間ほど資料や社内のツテを使って状況確認と準備をして面談に備え中</p>
<h1>3. まとめ</h1>
<p>勝てそうな環境を選択して勝ち切れたことは大きな収穫でした。</p>

one_milliのブログ

aframe-physics-systemについて

three.jsのテンプレ

three.jsのデバックについて

退社

入社半年経ってみて