技術ブログ
ブラウザで動く3D鉄道模型シミュレーター「山手線 3Dジオラマ」の開発で得た技術的な知見やノウハウを公開しています。
-
2026.05.07エンジニアのAIエージェントとの付き合い方Claude Code を使い始めて開発スタイルが激変した話。これからのエンジニアに必要なプロンプトエンジニアリング、AIを「優秀なシニア」として扱う姿勢、引き出しの重要性、そしてPM × プロンプトエンジニアという未来像について。
-
2026.05.01運営3ヶ月の振り返り（開発ポストモーテム）2026年1月に公開してから3ヶ月。アクセス数、良かった技術選定、後悔した選択、個人開発の辛さと楽しさ。同じく個人開発を頑張る人への応援メッセージも込めて。
-
2026.04.28スマホでCPUが100%になった話 ― モバイル端末の発熱対策公開直後「iPhoneが熱くなる」と報告が殺到。30fps制限、画面非表示時の描画停止、ピクセル比の抑制など、モバイル端末の負荷を下げるために行った対策を振り返ります。
-
2026.04.17ユーザーフィードバックで直したバグ Top 5公開後にユーザーから寄せられたバグ報告のうち、特に印象に残った5件。iPhone SEでの黒画面、恵比寿駅の停車位置、メモリリーク、Web Audioの重複、iOS passive eventの罠。
-
2026.04.02GitHub Actions で S3 自動デプロイ手動アップロード時代からの脱却。OIDC認証でAWSアクセスキーを持たず、CloudFrontのキャッシュ invalidation まで自動化する GitHub Actions のワークフローを公開。
-
2026.03.27PLATEAU 利用ライセンスとクレジット表記の整理PLATEAU（CC BY 4.0）、OpenStreetMap（ODbL）、Three.js（MIT）、MapLibre（BSD-3-Clause）などのOSSとデータを使う際の正しいクレジット表記と、AdSense対応でハマった話。
-
2026.03.24音声ファイルの軽量化で AAC と OGG を比較した20個の効果音で合計30MB超に膨らんだ音声ファイルを、AAC / OGG Vorbis / Opus で比較検証。ブラウザ対応表とiOS Safariの自動再生ポリシーの壁を乗り越えた話。
-
2026.03.13glTFをDraco圧縮で1/5にした話数十MBに膨らんだ .glb モデルを Draco 圧縮で劇的に縮小。gltf-pipeline の使い方、Three.js DRACOLoader のセットアップ、Meshopt との比較検証までまとめました。
-
2026.03.01Chrome DevTools でメモリリークを追いかけた夜1時間プレイするとクラッシュする現象の原因を、Chrome DevTools のヒープスナップショットで追跡。THREE.js の dispose 忘れ、eventListener の残骸、MapLibre の remove 忘れを潰した記録。
-
2026.02.21SafariとChromeで描画が違う問題Chromeで完成させたWebGL実装を、SafariやFirefox、iPhoneで開いたら別物に。precision mediump float、DPR、UNPACK_FLIP_Y_WEBGL等、ブラウザ間差異との戦いの記録。
-
2026.02.15疑似ダイヤを生成するアルゴリズム山手線の4分間隔運行をブラウザ上で再現するために、複数編成を同時制御する疑似ダイヤ生成アルゴリズムを開発。衝突回避・簡易ATC・団子運転の回避まで。
-
2026.02.01スマホのタッチイベントで詰まった話iOS Safari での touchstart 挙動、{passive: false} の罠、MapLibre ジェスチャとマスコンUIのタッチ競合、ダブルタップでズームされる問題、pointer events 移行までの奮闘記。
-
2026.01.28駅データのスナップ処理で苦しんだ話山手線30駅の緯度経度を線路LUTにマッピングする処理で発生した悲劇。Turf.jsのnearestPointOnLineの使い方、目黒・恵比寿で湘南新宿ラインに誤スナップする問題、CIテスト化まで。
-
2026.01.22PLATEAUが重すぎて落ちた話 ― LOD2モデルとの格闘記録国土交通省のPLATEAU LOD2モデルをブラウザに表示しようとしてクラッシュした失敗談。テクスチャ地獄、GPUメモリ枯渇、そしてリアルを捨てる決断に至るまでの経緯を振り返ります。
-
2026.01.22S3+CloudFrontで静的サイトを爆速配信する構成ガイド3Dモデルや大量のアセットを含む静的サイトを、AWS S3とCloudFrontで高速かつ低コストに配信する方法。HTTPS化、キャッシュ戦略、CORS対応などの実装ポイントも解説。
-
2026.01.22操作用UIのこだわりと実装 ― CSSだけで描くマスコン画像を使わずCSSのみで鉄道のマスコン（マスターコントローラー）を再現。ノッチ感の演出、レスポンシブ対応、スマホ専用コントローラーの設計思想を紹介。
-
2026.01.22MapLibreでのカメラ追従実装 ― 滑らかな「おいかけ」モード地図上を走る電車をカメラが自動追尾する「おいかけモード」の実装方法。easeToによる滑らかな追従と、マルチアングル切り替えの計算ロジックを解説。
-
2026.01.22PLATEAUの3D都市モデルで「鉄道模型ジオラマ」の質感を出す工夫国土交通省PLATEAUデータをそのまま使うと「白い箱」になる問題を、プロシージャルテクスチャ生成とライティング調整で解決。模型っぽい質感を出すテクニック。
-
2026.01.22音声実装と車両のState管理によるリアリティの追求車両の状態（加速・減速・停車）をステートマシンで管理し、走行音を滑らかにクロスフェードさせる手法を解説。速度に応じた再生位置の動的決定など。
-
2026.01.22MapLibre上に3Dモデルを配置・制御する実装の裏側MapLibreの地図上にThree.jsの電車を走らせるための座標変換と、ボギー台車を考慮したリアルな向き計算ロジックの実装詳細。
-
2026.01.22MapLibre GL JSとThree.jsで山手線を走らせる技術ブラウザ上でリアルな鉄道模型シミュレーターを動かすための技術スタック選定と、MapLibre + Three.jsの座標同期、滑らかなアニメーション実現の裏側。