## Claude MCP 安裝與使用指南 # 什麼是 MCP MCP（Model Context Protocol）是一個開放協議，讓 Claude 能夠連接外部工具和資料來源，例如瀏覽器自動化、檔案系統存取、API 整合等。
# 確認已安裝的 MCP ## Claude Code（命令列） # 列出所有已設定的 MCP 伺服器 claude mcp list # 查看特定伺服器的詳細資訊 claude mcp get <server-name> # 在 Claude Code 互動模式中檢查伺服器狀態 /mcp ## Claude Desktop（桌面應用程式） 設定檔位置：
macOS：~/Library/Application Support/Claude/claude_desktop_config.json Windows：%APPDATA%\Claude\claude_desktop_config.json 成功連線後，在對話輸入框的右下角會看到 MCP 伺服器指示器。
# MCP 安裝範圍 範圍 說明 參數 local 僅當前專案目錄可用（預設） 無需參數 project 專案層級，可與團隊共享 -s project user 全域，所有專案都可用 -s user ## 安裝為全域 claude mcp add -s user <server-name> <command> # 安裝 Playwright MCP Playwright MCP 提供瀏覽器自動化功能，適合 UI 測試、截圖、填表單、網頁爬取等任務。
...
# Intro 關於 PWA(progressive web app) MDN 已經有詳細的介紹了, 所以就不多說了
主要記錄以目前 2025 年的當下對瀏覽器的支援現況
# 系統支援度 目前在 mac chrome / Safari 和 windows chrome / Edge 都可以支援
mobile device 的話, iPhone Safari 支援, Android 大多支援, 少部分因為 OEM 品牌可能因為魔改了 Android 系統, 會導致 PWA 安裝了, 但是不會出現, 相當於沒有安裝成功
以下整成表格
mac windows iOS Android 支援 支援 支援 部分手機型號不支援 # 不支援的解決方案 目前也嘗試不出來有其他的解決方案, 所以會建議在統一的使用體驗上不要去支援 PWA, 這樣在 mobile device 上面就只會是單純的添加捷徑的功能
# 測試 可以用以下連結測試 PWA
https://pwa2.tedshd.io/
# other 因為研究 PWA
...
# 中華電信設定固定 IP 中華可以申請一組固定 IP 來使用
有時候都忘記要怎麼處理
紀錄一下
去中華電信網站申請 HiNet非固定制固定IP申請 或是 Google 搜尋 中華固定ip申請
登入中華電信網站 -> 寬頻 -> HiNet非固定制固定IP申請 會顯示固定 IP
router 設定 PPPOE 連線
## 說明 中華電信有可能維護或是調整會導致固定 IP 變換, 但都會寄信通知, 留意信箱就可以了
中華電信設定 PPPOE 連線是 <用戶號碼>@hinet.net
設定固定 IP 的話是要用 <用戶號碼>@ip.hinet.net
因為家裡有兩台 wifi router
所以一台設定非固定 IP 設定 <用戶號碼>@hinet.net
固定 IP 設定 <用戶號碼>@ip.hinet.net
...
# Intro 現在在使用 nodejs 時可以使用副檔名 .mjs 的方式和 package.js 添加 "type": "module" 來使用 import 來取代 require
關於這件事也是因為有許多歷史因素無法完全取代掉 require
但是如果我們想要在 cloud functions 或是 firebase functions 使用時就沒那麼順利
因為光是要使用 .mjs 就是個問題
但是參考下面的文章後發現有取巧的方式
refer - ES6+ in Cloud Functions for Firebase #2
# Solution 先說結論
其實就是先用 babel build 完 code
最後把 build 完的 code 部署到 functions 上面
以 firebase functions 專案的例子
我自己的做法是 多建立一個 src 的目錄來當成再開發的 code
在部署前 build 到 functions 的目錄
package.json
添加
"scripts": { "build": "babel src --out-dir functions" } npm run build
...
# Intro 紀錄一下 MySQL 匯出與匯入資料的一些情況
# 匯出 mysqldump --column-statistics=0 -u <user> -h <host> -P 3306 -p <database> > output_file.sql --column-statistics=0 忽略掉一些匯出時的一些資訊, 節省容量
匯出資料庫中個別的 table
mysqldump --column-statistics=0 -u <user> -h <host> -P 3306 -p <database> <table> > output_file.sql # 匯入 mysql -u <user> -h <host> -P 3306 -p <database> < ./file.sql 如果要忽略一些錯誤並強制執行可以添加 -f
mysql -f -u <user> -h <host> -P 3306 -p <database> < ./file.sql # troubleshooting # 如果遇到有 table 的欄位是使用 binary 的形式像是 point 匯出時在匯入會出現格式錯誤 如果欄位中有以 point 的型態儲存經緯度數據
...
# Intro 在使用 golang 的情境下, 有一個很常用的 migration 工具 golang-migrate
但是在不同系統下安裝我覺得不太容易
所以記錄一下
# Install github 上有提供不同作業系統的安裝方式
cmd/migrate
目前測試 Mac / Ubuntu 有成功
Mac OS X 使用 homebrew 安裝
brew install golang-migrate 在 mac 上面安裝是蠻容易的
Ubuntu 20.04 在 ubuntu 遇到許多權限的問題
github 上面的 *.deb 安裝需要調整指令
curl -L https://packagecloud.io/golang-migrate/migrate/gpgkey | sudo apt-key add - sudo sh -c 'echo "deb https://packagecloud.io/golang-migrate/migrate/ubuntu/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/migrate.list' sudo apt-get update sudo apt-get install -y migrate # Usage 要連接的 DB 的格式
...
# Intro 服務終有停止的一天
firebase 動態連結將於 2025 年 8 月 25 日關閉。
所以要提前做遷移轉換或是找其他替代方案
# Firebase 建議 可以參考 Firebase 文件的建議自己搞
從動態鏈接遷移到應用程式連結和應用程式鏈接通用連結
自己搞的好處是能搞成符合自己需求的東西
但是最大的麻煩點是要記錄的話就得自己搞數據
很多時候都會需要紀錄點擊轉換
這就得自己搞了
# 第三方服務 其實除了自己搞以外
還有很多第三方服務有在做這個東西
目前有找到的有
## Branch io https://www.branch.io/what-is-deep-linking/ branch io 還有個教學文
How to migrate from Firebase Dynamic Links
## Appsflyer https://www.appsflyer.com/products/customer-experience-deep-linking/ ## kochava https://www.kochava.com/product/deep-linking/links/?int-link=menu-links 上面列出來的是比較常見的幾個
應該還有其他服務沒有列出來
這個就評估下要用哪個服務
...
# 前言 不管在 mobile 還是 desktop 都有個困擾就是要處理用戶縮放頁面的問題
如果只是資料類型的頁面, 縮放的話大多都只是畫面 UI 跑版
但如果是複合功能型的頁面, 縮放的話大概率會讓功能壞掉
就得找一些方法處理
# 確認可行性 JavaScript 有一個 api window.devicePixelRatio 是顯示畫面解析度比率的
早期可以用這個是不是 1 來判斷
但是螢幕的解析度其實會影響這個值
所以這個 api 沒有辦法當作判斷的基準
resize 事件可以在頁面縮放時會觸發
搭配 window.outerWidth/window.innerWidth 的值的變化可以知道有沒有縮放
但是這在 mobile device 的兩指縮放是不會觸發
所以也沒用…
但是針對 mobile 兩指縮放
可以使用 window.visualViewport
window.visualViewport.scale 可以知道現在縮放比例
如果只是要判斷有沒有所放的話
可以使用 resize 事件 + mobile 判斷來拿取 window.visualViewport.scale 或是 let zoom = window.outerWidth/window.innerWidth; 的組合來處理
sample code
let zoom = window.outerWidth / window.innerWidth; function isMobileDevice() { return /Mobi/i.
...
.multiline-ellipsis { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */ white-space: pre-wrap; /* let the text wrap preserving spaces */ } refer - Easiest Way to Truncate Text With Ellipsis in CSS
...
# Intro 當使用 Angular 時, 有時會有需要自己建立一個自定義的元素
通常這個都是為了重複使用
這時會有兩種作法
自己建立一個元件, 再把這元件處理成 module, 這樣就可以有自定義元素了
使用 angular create lib 的方式(https://angular.io/guide/creating-libraries)
如果是在公司內部自己使用, 用 1 或是 2 都沒差
如果是要做成給外部或是別人使用, 甚至是開源出去, 那就是得用 2
順帶一提如果要使用自己定義的元素, 需要安裝 @angular/elements
yarn add @angular/elements # 自己建立元件 這邊會用 custom-element 當成元件名字舉例
ng generate component custom-element 建立起一個 custom-element 元件
之後就是依照寫元件的方式開發
只是得自己手動處理一下在 custom-element/custom-element.module.ts 得添加和輸出與建立自定義元素的設定
import { createCustomElement } from '@angular/elements'; import { createCustomElement } from '@angular/elements'; import { NgModule, Injector } from '@angular/core'; import { CustomElementComponent } from '.
...