ノート
タイルサーバーが HTTP 200 を返しているのに、地図が全面「API KEY REQUIRED」になっていた
ステータスコード200のまま約2KBの透かし入りPNGを返していたCARTOタイルから国土地理院の淡色地図へ切り替えた記録と、15分削除の約束を守るためのSupabase Realtime設計。
#Leaflet#Supabase#セキュリティ読む数百件と数千万件が並ぶグラフを、1画面の対数タイムラインに収めるまで
一覧ページを廃して1画面の散布図タイムラインに振り切り、スクロールでの時間移動・ピンチでの時間単位ズーム・表示範囲に応じた対数縦軸の滑らかな伸縮を実装するまで。
#データ可視化#UI#Astro読む情報漏洩の記事をAIで全自動公開しようとして、1日でやめた理由
収集から公開までを全自動化する設計が「推測や二次情報を載せない」原則と衝突。公式PDFやJS描画ページから一次情報を抽出し、人が確認して公開する半自動フローへ転換した記録。
#設計#AI#スクレイピング読むGmail API の審査が重すぎて、React Native 上で IMAP / SMTP / MIME を自前で書いた
Gmailの制限付きスコープ審査と年次セキュリティ評価の壁に直面し、iCloudメールのIMAP対応へ転換。TCPソケット上でMIME解析器やSTARTTLSの二重受信防止を実装した記録。
#React Native#IMAP#プロトコル読むメールの挨拶と署名をルールベースで消そうとして、初見メール5件中3件で失敗した話
ルール作成時の12件では全勝だった解析器が、初見サンプルでは箇条書きを署名と誤認して本文を消してしまった実験記録。「迷ったら残す」安全策と初見テスト運用を決めるまで。
#テキスト解析#テスト#TypeScript読む回答と正解と平均が重なった棒を、グラデーションではなく45度ストライプにした
横棒グラフに背景枠を敷くと進捗ゲージに見えてしまう罠を外し、複数の属性が同じ価格帯に入ったときの色の濁りを45度ハードエッジストライプで解決したUIの試行錯誤。
#UI#CSS#データ可視化読む4択クイズとレーダーチャートを捨てて、電卓のテンキーにした
4択・スライダー・偏差値・レーダーチャートで作った初期版を全廃し、「10秒制限のテンキー直打ち」と「10分割の回答分布ヒストグラム」だけに削ぎ落とした引き算の設計記録。
#UI#設計#React読むCSS3Dで傾けたHTMLに overflow: hidden を付けたら、Chromeの当たり判定が0点になった
3D空間のモニターに置いたHTMLにクリックが届かない原因を、elementFromPointの格子計測で特定した記録。背景穴あけ合成と樽型魚眼レンズの立体射影もあわせて解説。
#Three.js#CSS#デバッグ読む「鳴らさない場所」を先に決める——植物と話すARアプリのハプティクス設計
騒がしい展示会場で音を使わずに状態を伝えるため、触覚を「機械の操作」と「植物の気配」の2層に分離。エラーの三連振動を禁じ、株の削除に0.9秒の減衰を鳴らすまでの設計。
#iOS#Core Haptics#UX読むARの吹き出しが「板に貼った字幕」に見えないためにやった5つのこと
ARKitの映像にすりガラスが効かない制約を3本の反射光で越え、1€フィルタによる手ぶれ除去、バネアニメの撤去、見かけの株サイズに比例する拡縮で空間に吹き出しを定着させた記録。
#ARKit#SwiftUI#アルゴリズム読むAdSense に「有用性の低いコンテンツ」で落ちた
3D の惑星が主役のサイトは、審査する側からは「文字がほとんど見えない、2ページだけのサイト」に見えていた。測った数字と、見えない文章を増やさずに直した方法。
#AdSense#Next.js#SEO読むスマホは PC の縮小版ではなかった
PC の画面を縮めただけだったスマホ版を作り直した記録。スマホの判定を1か所に決め、PC の数字を書き換えず、2本指の操作を両方の経路で成り立たせるまで。
#スマホ#ジェスチャ#React Three Fiber読むヘッドレス Chrome で 3D を撮る罠
WebGL の画面を自動で撮って確かめる仕組みが、何度も間違った結論を出しかけた。毎秒3フレーム、4秒かかるタップ、いつも左上を撃つイベントなど。
#テスト#Puppeteer#WebGL読む「動体視力テスト」という嘘の入口を守りながら、SEOとAdSense審査を通すパズル
初見の友達には動体視力テストと信じ込ませつつ、検索エンジンには視線計測ゲームの説明を見せるパズル。「検索する人はすでに知っている」という転換と、同日2回の改称の教訓。
#SEO#Next.js#設計読む太陽をつかんで動かせるようにした
固定の光では惑星の全部を照らせないと分かり、カメラを光源にする案を作って測って捨て、読む人が太陽を動かす形にたどり着いた。追従率41%から100%への話も。
#Three.js#ライティング#計測読むトラックパッドの慣性に、2回目のスワイプを飲まれていた
カードのスクロールが「効いたり効かなかったり」する原因は、慣性スクロールの尾が次のスワイプを飲み込んでいたことだった。感度を上げずに直した方法。
#UI#スクロール#ジェスチャ読むスター・ウォーズ風の自己紹介を、マス目に並べる
奥へ流れる自己紹介の文字を、映画のフレームと同じく1行きっちり同じ文字数にそろえた。禁則なし・両端そろえ・全角化と、ファイルに存在しない空白の話。
#CSS#文字組み#3D変形読む看板が鏡文字になった日
球体の惑星で、建物に寄ると看板が左右反転していた。原因はカメラの「上」の向き。最初の診断が間違っていたことと、テストがバグを守っていたことの記録。
#Three.js#カメラ#テスト読む平らな島を捨てて、惑星にした
空に浮かぶ平らな島だったトップページを、宇宙に浮かぶ球体に作り替えた。参考写真を測って数字を2つ否定され、雑居ビルを290棟で止めるまでの記録。
#Three.js#ボクセル#設計読む3,200個の破片を事前分割して破綻し、「1打目の殻＋実行時スライス」に行き着くまで
ワイングラスを割るために約3,200ノードの事前破断ツリーを用意したら実機で生成ラグと7mm網目の継ぎ目が露出。1打目の粗破断と実行時平面カットのハイブリッドへ転換した記録。
#Unity#3Dメッシュ#パフォーマンス読む