客製化 Google Map 樣式完整教學
發表於
分類於
gamelife
客製化 Google Map 樣式完整教學
Google Maps 是目前最廣泛使用的地圖服務之一,但預設樣式對於追求設計感或特殊主題的網站(例如遊戲、品牌官網、資料視覺化儀表板)來說,往往略顯單調。所幸 Google 提供了完整的樣式自訂機制,讓開發者可以透過 JSON 設定檔調整地圖上每一項元素的色彩、可見度與標籤呈現方式。
本文將介紹兩個最常被使用的工具:官方推出的 Google Maps Styling Wizard,以及社群維護的 Snazzy Maps,並說明如何將樣式套用到實際的網頁中。
為什麼要客製化地圖樣式
預設的 Google Maps 配色雖然中性,但在某些情境下會帶來干擾:
- 遊戲或互動體驗:需要突出地圖上的角色、任務點或路線,過多的 POI(興趣點)反而會分散注意力
- 品牌一致性:希望地圖配色與網站主視覺(Logo、主色調)融合
- 深色模式:夜間瀏覽情境下,亮色地圖會造成眩光
- 資料視覺化:在地圖上疊加大量標記或熱力圖時,需要降低底圖的視覺權重
透過樣式設定,你可以隱藏不需要的元素、調整配色,甚至打造復古、科幻、極簡等各種風格主題。
從零開始導入 Google Maps API
發表於
分類於
gamelife
從零開始導入 Google Maps API
簡介
什麼是 Google Maps API？
Google Maps API 是 Google 提供的網頁地圖服務，讓開發者能在自己的網站或 Web App 中嵌入互動式地圖。除了基本的地圖顯示外，還支援標記（Marker）、路線規劃、街景、自訂樣式等豐富功能,是製作 LBS（Location-Based Service）應用、店家定位、地圖小遊戲等常見專案時的首選方案。
本文以最精簡的範例,示範如何取得 API Key、建立第一張可運作的地圖,並透過 importLibrary() 動態載入新版地圖函式庫。
適合使用情境
- 需要在網站中嵌入互動式地圖的應用
- 開發以地理位置為基礎的小型專案或 Game Jam 作品
- 想體驗 Google Maps 新版動態載入 API（
importLibrary）的開發者 - 需要使用 Cloud-based Map Styling（雲端地圖樣式）的專案
uv 安裝指南
發表於
分類於
python
uv 安裝指南
簡介
什麼是 uv？
uv 是由 Astral 開發的新世代 Python 套件與專案管理工具，以 Rust 撰寫，目標是提供極速、可靠且統一的 Python 工作流程，能夠取代 pip、pip-tools、pipx、poetry、pyenv、virtualenv 等工具。
核心特性
- 極速安裝：效能遠超
pip與poetry，具備全域快取機制 - 一體化工具鏈：整合 Python 版本管理、虛擬環境、套件安裝與專案管理
- 相容 pip 介面：平滑銜接現有
pip使用習慣 - 跨平台支援：Windows、macOS、Linux 皆可使用
- 無需預先安裝 Python：uv 本身可直接下載並管理 Python 版本
用 `/create-skill` 打造專屬 Copilot 技能
發表於
分類於
vscodelife
VS Code Agent Skills 使用指南
發表於
分類於
vscodelife
VS Code Agent Skills 使用指南
GitHub Copilot 的 Agent Skills 功能讓你能夠建立可重複使用的工作流程，並在需要時自動載入對應的指令、腳本與資源。本文將介紹 Agent Skills 的核心概念、建立方式，以及與其他自訂功能的差異。
Agent Skills 是什麼？
Agent Skills 是由一個資料夾組成的技能包，內含 SKILL.md 指令檔、腳本與相關資源。當 GitHub Copilot 判斷某個技能與當前任務相關時，會自動載入對應的內容。
Agent Skills 的設計遵循開放標準（agentskills.io），因此建立好的技能不僅適用於 VS Code，也能在 GitHub Copilot CLI 與 GitHub Copilot Coding Agent 等環境中使用。
使用 Agent Skills 的主要優點：
- 專業化：為特定領域的任務量身打造能力，不需每次重複說明背景
- 減少重工：建立一次，自動套用於所有相關對話
- 組合運用：多個技能可以組合搭配，建構複雜的工作流程
- 高效載入：僅在相關時才將內容載入 context，避免浪費 token
Chrome DevTools MCP 安裝指南與使用
發表於
分類於
vscodelife
Chrome DevTools MCP 安裝指南與使用
簡介
什麼是 Chrome DevTools MCP？
chrome-devtools-mcp 是由 Google ChromeDevTools 官方團隊開發的 MCP（Model Context Protocol）伺服器。它讓 AI 程式輔助工具（如 GitHub Copilot、Claude、Cursor 等）能夠直接控制並檢查一個真實的 Chrome 瀏覽器，賦予 AI 完整的 Chrome DevTools 能力，從效能分析、網路監控到自動化操作，一應俱全。
核心特性
- 效能分析：錄製 Performance Trace 並透過 Chrome DevTools 提取可執行的效能洞察
- 進階除錯：分析網路請求、擷取截圖、查看 Console 訊息（含 Source Map 錯誤堆疊）
- 可靠的自動化：基於 Puppeteer 進行 Chrome 自動化操作，並自動等待操作結果完成
- Lighthouse 稽核：對網頁執行 Lighthouse 品質稽核，涵蓋效能、無障礙、SEO 等指標
- 記憶體快照：擷取頁面記憶體快照，協助追蹤記憶體洩漏問題
- 自動連線（autoConnect）：自動附加至已開啟的 Chrome 實例，保留原有的登入狀態與分頁
支援的 MCP 用戶端
- GitHub Copilot / VS Code
- Claude Desktop / Claude Code
- Cursor
- Gemini CLI / Gemini Code Assist
- JetBrains AI Assistant
- 以及更多支援 MCP 協議的工具
Docker 安裝指南
發表於
分類於
docker
Docker 安裝指南
文章目標
本篇依據 Docker 官方文件整理，帶你在 Ubuntu 上安裝 Docker Engine（含 Docker CLI、Buildx、Compose Plugin），並完成基本驗證。
本教學情境以 Windows 的 WSL2（Ubuntu 發行版）作為安裝載體。
適用環境
- Windows 11（建議）或 Windows 10 + WSL2
- Ubuntu 24.04 LTS、22.04 LTS（64-bit）
- 已可使用
sudo - 網路可連到
download.docker.com
註解
官方對 Ubuntu 衍生發行版（例如 Linux Mint）不提供完整支援，雖然實務上可能可用。
NVM 安裝指南
發表於
分類於
nodejs
NVM 安裝指南
簡介
NVM（Node Version Manager）是一個基於 POSIX Shell 的 Node.js 版本管理工具，可讓你在同一台機器上快速安裝並切換不同版本的 Node.js。
支援平台： Unix、macOS、Windows WSL
提示
NVM 不支援 Windows 原生環境。Windows 使用者可改用 nvm-windows。
Unity MCP 安裝指南與使用
發表於
分類於
unity
Unity MCP 安裝指南與使用
簡介
什麼是 Unity MCP？
MCP for Unity 是由 Coplay 開發並維護的開源專案，透過 Model Context Protocol（MCP） 將 AI 助手（Claude、Claude Code、Cursor、VS Code Copilot、GitHub Copilot CLI 等）與你的 Unity Editor 串接起來。
簡單來說，只要你開著 Unity 編輯器，就可以直接對 AI 說：「幫我建立一個有紅色、藍色和黃色方塊的場景」或「幫我寫一個簡單的玩家控制器」，AI 就能透過 MCP 協定直接操作你的 Unity 專案。
核心特性
- 自然語言控制：用文字描述任務，讓 AI 直接在 Unity 中執行
- 豐富工具集：管理資產、場景、材質、腳本、UI、動畫、著色器等
- 高效能批次執行：
batch_execute指令比逐一呼叫快 10 ～ 100 倍 - 可擴充自訂工具：支援 Roslyn 執行時期腳本驗證與自訂工具擴充
- 多 Unity 實例支援：可同時連接多個 Unity Editor 並指定目標實例
- MIT 授權：完全開源免費
支援的 MCP 客戶端
- Claude Desktop
- Claude Code
- Cursor
- VS Code Copilot
- GitHub Copilot CLI
- Windsurf