Note
作りながら考えたこと、つまずいたこと、うまくいった瞬間の気分を書いている技術日記です。きれいにまとまった解説ではなく、その時点で分かったことの記録です。
AdSense に「有用性の低いコンテンツ」で落ちた
3D の惑星が主役のサイトは、審査する側からは「文字がほとんど見えない、2ページだけのサイト」に見えていた。測った数字と、見えない文章を増やさずに直した方法。
#AdSense#Next.js#SEO読むスマホは PC の縮小版ではなかった
PC の画面を縮めただけだったスマホ版を作り直した記録。スマホの判定を1か所に決め、PC の数字を書き換えず、2本指の操作を両方の経路で成り立たせるまで。
#スマホ#ジェスチャ#React Three Fiber読むヘッドレス Chrome で 3D を撮る罠
WebGL の画面を自動で撮って確かめる仕組みが、何度も間違った結論を出しかけた。毎秒3フレーム、4秒かかるタップ、いつも左上を撃つイベントなど。
#テスト#Puppeteer#WebGL読む太陽をつかんで動かせるようにした
固定の光では惑星の全部を照らせないと分かり、カメラを光源にする案を作って測って捨て、読む人が太陽を動かす形にたどり着いた。追従率41%から100%への話も。
#Three.js#ライティング#計測読むトラックパッドの慣性に、2回目のスワイプを飲まれていた
カードのスクロールが「効いたり効かなかったり」する原因は、慣性スクロールの尾が次のスワイプを飲み込んでいたことだった。感度を上げずに直した方法。
#UI#スクロール#ジェスチャ読むスター・ウォーズ風の自己紹介を、マス目に並べる
奥へ流れる自己紹介の文字を、映画のフレームと同じく1行きっちり同じ文字数にそろえた。禁則なし・両端そろえ・全角化と、ファイルに存在しない空白の話。
#CSS#文字組み#3D変形読む看板が鏡文字になった日
球体の惑星で、建物に寄ると看板が左右反転していた。原因はカメラの「上」の向き。最初の診断が間違っていたことと、テストがバグを守っていたことの記録。
#Three.js#カメラ#テスト読む平らな島を捨てて、惑星にした
空に浮かぶ平らな島だったトップページを、宇宙に浮かぶ球体に作り替えた。参考写真を測って数字を2つ否定され、雑居ビルを290棟で止めるまでの記録。
#Three.js#ボクセル#設計読む