~/labs.tech-book.net · verified 2026-07-26
ライブラリの実装検証ノート
ライブラリを実際に動かして、設定・典型的な使い方・詰まりどころを記事にまとめています。各記事には触れる demo がついていて、関連する技術書を末尾に並べています。
● 最新更新 · 2026-07-26
deck.gl で数万件の移動データを WebGL アニメ描画する
deck.gl の TripsLayer で「時刻つき経路」を動く軌跡として再生するパターン。Canvas/SVG が数千要素で頭打ちになる領域を WebGL で突破する仕組み、React(@deck.gl/react)での層構成、毎フレーム currentTime だけを更新して GPU にデータを載せたままにする設計、trailLength の演出、MapLibre 併用まで、架空路線網を再生する触れる demo 付きで整理する実装メモ。
● 編集ピックアップ
DuckDB-Wasm で GTFS(公共交通時刻表)をブラウザ分析する
公共交通の標準フォーマット GTFS(stops / trips / stop_times の CSV 群)を DuckDB-Wasm に読み込み、発車本数・次の発車・駅間所要時間をブラウザ内 SQL で集計するパターン。registerFileText での仮想ファイル登録、24 時超え時刻('25:30:00')を TIME にキャストできない罠、window 関数での駅間計算まで、架空 2 路線の触れる demo 付きで整理する実装メモ。
カテゴリで探す
最新の記事
- ● 2026-07-26 · deck.gl 9.3.7deck.gl で数万件の移動データを WebGL アニメ描画するdeck.gl の TripsLayer で「時刻つき経路」を動く軌跡として再生するパターン。Canvas/SVG が数千要素で頭打ちになる領域を WebGL で突破する仕組み、React(@deck.gl/react)での層構成、毎フレーム currentTime だけを更新して GPU にデータを載せたままにする設計、trailLength の演出、MapLibre 併用まで、架空路線網を再生する触れる demo 付きで整理する実装メモ。
- ● 2026-07-26 · @duckdb/duckdb-wasm 1.33.xDuckDB-Wasm で GTFS(公共交通時刻表)をブラウザ分析する公共交通の標準フォーマット GTFS(stops / trips / stop_times の CSV 群)を DuckDB-Wasm に読み込み、発車本数・次の発車・駅間所要時間をブラウザ内 SQL で集計するパターン。registerFileText での仮想ファイル登録、24 時超え時刻('25:30:00')を TIME にキャストできない罠、window 関数での駅間計算まで、架空 2 路線の触れる demo 付きで整理する実装メモ。
- ● 2026-07-26 · maplibre-gl 6.0.0MapLibre GL JS で PMTiles のサーバーレス地図タイルを配信するタイルサーバーを立てずに、静的ホスティングへ置いた 1 個の .pmtiles ファイルだけでベクター地図を配信するパターン。PMTiles の仕組み(HTTP Range request)、pmtiles protocol の登録、tippecanoe での生成、CORS / キャッシュ設定、React との組み合わせまで、都道府県ポリゴンを 126KB で配信する触れる demo 付きで整理する実装メモ。
- ● 2026-07-26 · scrollama 3.2.0Scrollama でスクロール連動のデータストーリーを作るscrollama を使って、スクロールに合わせて sticky なグラフが切り替わる scrollytelling(スクロール連動の読み物)を React で実装するパターン。IntersectionObserver ベースの step 検出、offset の意味、sticky レイアウトの CSS、resize / モバイル対応の落とし穴まで、4 ステップで棒グラフが変化する触れる demo 付きで整理する実装メモ。
- ● 2026-07-26 · @huggingface/transformers 4.2.0Transformers.js でブラウザ完結の意味検索を作る@huggingface/transformers の feature-extraction pipeline で文章を embedding(意味ベクトル)に変換し、cosine 類似度でランキングする意味検索をサーバー推論ゼロで実装するパターン。pipeline の初期化と dtype(量子化)の選択、モデルのキャッシュ挙動、日本語対応モデルの選び方とサイズの現実、UI をブロックしない読み込み設計まで、クリックでモデルを取得する触れる demo 付きで整理する実装メモ。
- ● 2026-05-23 · onnxruntime-web 1.21.xONNX Runtime Web + 蒸留 student でブラウザ完結 intent search を作るVertex AI Gemini embedding を教師に multilingual-e5-small へ蒸留した student を ONNX Runtime Web で動かし、 ユーザの自由文クエリから関連書籍を返す UI をサーバ推論ゼロで実装する。 2000 件で overlap@5=0.26 (random の 104 倍)、 WASM warm 28ms。 設計判断、 INT8 量子化の落とし穴、 Cloudflare Pages 25MB 制約の回避策まで。
Skills(AI agent 用ノウハウ)
Claude Code / Gemini CLI から呼び出せる skill。配布元: github.com/tech-book-net/skills
- beautiful-mermaid-render-recipes — **サーバーサイドで Mermaid 図を SVG 文字列として生成して静的サイトに埋め込みたい** 時に呼び出すべき skill(公式 `mermaid` は…
- react-flow-v12-setup — ワークフローエディタ / ER 図 / マインドマップ / DAG ビジュアライザ等の **ノードベース UI** を React で実装する時に呼び出すべき …
- zod-v4-schema-patterns — TypeScript プロジェクトで **「外部から来る値を信用する境界」**(API レスポンス / フォーム入力 / 環境変数 / LLM 構造化出力 / …
- mdx-shiki-code-rendering — **MDX 技術記事のコードブロックを「VS Code 同等の精度で / dark mode 対応で / ファイル名タブ付きで / diff が一目で / 行ハ…