104學習

JavaScript

這項技能是前端開發的核心語言,負責網頁互動效果和動態內容呈現。擅長此技能能讓你打造使用者體驗佳的網站和應用程式,並且與後端系統有效溝通。隨著單頁應用(SPA)和跨平台開發需求增加,具備此技能在職場上競爭力高,廣泛應用於網路公司、科技新創與數位行銷產業。掌握相關框架如React、Vue或Angular,更能提升就業及專案開發機會。

3,692 個相關職缺

提升你的實力,朝專業更進一步

精選課程

充實自己,讓能力持續成長

成為前端工程師|JavaScript 入門:帶你逐步培養網頁開發技能
成為前端工程師|JavaScript 入門:帶你逐步培養網頁開發技能
成為前端工程師|jQuery 入門密技,愉快打造互動式網頁不求人
成為前端工程師|jQuery 入門密技,愉快打造互動式網頁不求人
成為後端工程師 | 踏上程式起點,逐步掌握 Java 語言特性與物件導向程式設計
成為後端工程師 | 踏上程式起點,逐步掌握 Java 語言特性與物件導向程式設計
學程式也能很好玩:不背語法寫Java
學程式也能很好玩:不背語法寫Java
成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面  (上集)
成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)
JSP + Servlet | 吳永志Java Web 技術開發
JSP + Servlet | 吳永志Java Web 技術開發
成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面  (下集)
成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (下集)
Cursor AI全端開發所:Java 網站系統獨立製作全攻略
Cursor AI全端開發所:Java 網站系統獨立製作全攻略
【線上課程】 Python 基礎程式設計|開外掛勇闖 Python 異世界
【線上課程】 Python 基礎程式設計|開外掛勇闖 Python 異世界
工程師救星-用Bootstrap速成響應式網頁開發
工程師救星-用Bootstrap速成響應式網頁開發

精選證照

考取專業證照,讓能力被市場看見

ITS JavaScript 程式語言核心能力 |
Information Technology Specialist(IT 資訊科技專家認證),簡稱 ITS,是Pearson VUE/Certiport 推出符合產業趨勢的初階資訊科技認證,涵蓋 IT 資訊技術、資料庫、軟體研發、新興科技四大領域,共十三個科目,透過 IT 資訊科技專家訓練課程,可驗證考生是否具備雇主所需的 IT 技能,幫助考生為未來職涯做好準備。 即使是國際性的專業認證、英文證書,但是在試題上可以自由選擇語系,因此,在國內的 ITS 認證考試亦提供有正體中文化試題,只要通過 Certiport 的認證考試,即頒發全球通用的國際性證書。 IT 資訊科技專家課程的目標對象為正在考慮或剛剛開始踏上資訊科技職涯的人士。考生能夠驗證他們在各個 IT 領域中的知識,其中包含軟體開發、資料庫管理、網路與安全、行動與裝置管理、程式開發、編程與代碼、雲端運算以及人工智慧。
Certiport
SSE Java程式語言國際認證 |
Java程式語言已經是目前欲進入資訊科技殿堂最重要的程式語言,也是最全方位的程式語言,目前大部分的網路應用程式、電子商務,人工智慧,跨平台開發、手機app開發等都是使用Java語言完成。掌握Java語言是軟體工程師最重要的技能。讓你在各個不同領域都能得心應手完成困難的工作。通過我們的認證,你將證明自己具備高人一等的Java語言開發能力。
Silicon Stone Education (SSE)
OCP Java Dev. |
Oracle Java Developer (Java 語言開發人員) 是針對擁有Java開發技術的人員提供。以Java程式語言為開發工具,從事設計、製作與維護網際網路應用軟體,以及建立具動態特性的網頁。OCP Java Dev.證照,目前已停止發放。
Oracle
乙級電腦軟體設計技術士-Java |
乙級為具備能從事程式設計、測試、維護及系統文件製作,並能協助甲級(帶領丙級)電腦軟體設計人員從事(進行)程式設計工作之能力。
勞動部勞動力發展署技能檢定中心
Adobe Photoshop |
Adobe Photoshop是一個由Adobe Systems出品的專業影像處理軟體。跟公司的其它軟體一樣,Photoshop適用於Mac OS及Microsoft Windows兩個作業系統,同時公司也發布了Unix作業系統上的版本。 Photoshop主要處理以畫素(Pixels)所構成的數位影像。利用其廣泛的編修與繪圖工具,可以有效的進行圖片編輯工作。獨特的歷史紀錄浮動視窗和可編輯的圖層效果功能,能讓使用者可以方便的測試效果。對各種濾鏡的支援更令使用者能夠輕鬆創造出各種奇幻的效果。目前,Photoshop 也正在被廣範地應用在網路影像處理。Photoshop的幾個後續版本中搭配了一個獨立的軟體ImageReady,其加強了Photoshop對網路影像(主要是GIF圖檔)的支援功能。而在CS3中ImageReady被Fireworks所代替。Photoshop CS3以上版本允許使用者更新以容易操作的方式升級到最新的硬體平台。 Photoshop被大部份的人認為是最好的影像處理軟體,但與著名的3D Studio Max一樣,價格昂貴使其難以普及。這也令Jasc Software公司的Paint Shop Pro,GIMP小組的GIMP和友立資訊的Ulead PhotoImpact佔領了不少的市場佔有率。
Adobe
物件導向視窗及資料庫程式設計 (Java/C#/VisualBasic) |
「物件導向視窗及資料庫程式設計」證照核心旨在驗證開發者融合物件導向理論、視窗圖形使用者介面與資料庫應用的綜合實務能力。不論使用 Java、C# 或 Visual Basic 語法,持證者皆具備利用類別與物件建構視窗應用程式的技術,並能熟練處理事件驅動程式設計。此外,持證者亦精通資料庫連線、SQL 指令操作及資料存取邏輯,具備將前台介面與後端資料庫無縫整合的關鍵職能,是企業評估現代視窗軟體開發與資料庫應用人才的專業客觀指標。
尚未查核發照單位

精選貼文,掌握第一手知識

前端工程師2025年必學技能清單:10大工具與技術指南,職場增能懶人包整理

前端工程師需要掌握的技能和專業涵蓋了多個方面(HTML、CSS 、 JavaScrip...等),包括基礎的網頁開發知識、前端框架、以及與團隊合作的工具等。本篇文章將深入探討前端工程師必備的 10 大核心技能與工具,幫助您在職涯中站穩腳步,開發出高效且吸引人的網站與應用。 1. HTML、CSS 和 JavaScript HTML: 用於結構化網頁內容,是前端開發的基礎語言。 CSS: 負責設計和佈局,使網站具有視覺吸引力。 Java Script: 增加互動性,處理用戶事件和動態內容。 ⚡推薦課程⚡ 成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集) https://nabi.104.com.tw/course/tibame/f5b246b2-ec79-4f0d-8ef5-2fdf8d6f5bcb 成為前端工程師|Java Script 入門:帶你逐步培養網頁開發技能 https://nabi.104.com.tw/course/tibame/830671fb-2c58-48fa-9a5a-6c1f1798598a 【更多課程學習】https://user266414.pse.is/6ps94k 2. 前端框架和庫 React.js: 一個用於構建用戶界面的 JavaScript 庫,能夠快速開發單頁應用(SPA)。 Vue.js: 一個漸進式框架,適合於小型到大型應用的開發。 Angular: 一個全面的前端框架,適合大型企業級應用。 Svelte: 新興的前端框架,以其高效的性能和簡化的開發體驗而受歡迎。 ⚡推薦課程⚡ Let’s Vue! 前端開發入門到實戰 https://nabi.104.com.tw/course/tibame/ee965aa9-eb02-43d5-ae79-1dcd50f965dc 3. 版本控制工具 Git: 版本控制系統,用於跟蹤代碼變更,方便團隊協作。 GitHub 或 GitLab: 托管代碼庫,協作開發和版本管理的主要平台 ⚡推薦課程⚡ Git 速成攻略:2.5 小時變身版本控制達人 https://nabi.104.com.tw/course/tibame/20a2bbd6-ee21-4d92-8899-18e59ea3b97f AI助理GitHub Copilot | 提升前端開發效率 https://nabi.104.com.tw/course/tibame/c4795096-ae10-43a5-b5e3-2a6548c30e8c GitHub Copilot AI賦能開發實戰訓練班 https://nabi.104.com.tw/course/tibame/2617c99d-b815-442d-89b4-aa35a360273a 4. 預處理與構建工具 Sass 或 Less: CSS 預處理器,能夠提高樣式表的可維護性和可重用性。 Webpack、Parcel 或 Vite: 模塊打包工具,用於優化資源加載、處理 JavaScript 模塊化等。 【更多課程學習】https://user266414.pse.is/6psa64 5. 響應式設計與跨平台兼容 響應式網頁設計: 掌握使用 CSS 媒體查詢(Media Queries)以適應不同屏幕尺寸的布局技巧。 跨瀏覽器兼容性: 確保網站在不同的瀏覽器(如 Chrome、Firefox、Safari、Edge)上的一致性。 ⚡推薦課程⚡ RWD響應式網頁設計入門 https://nabi.104.com.tw/course/tibame/9e4a630f-6e3b-4261-adf6-a6ac1edf1ea8 工程師救星-用Bootstrap速成響應式網頁開發 https://nabi.104.com.tw/course/tibame/9e4a630f-6e3b-4261-adf6-a6ac1edf1ea8 6. 調試與測試 Chrome DevTools: 瀏覽器內建的開發者工具,用於調試 JavaScript、分析網頁性能。 前端測試框架: 如 Jest、Mocha、Cypress,用於自動化測試和單元測試。 7. API 與 AJAX 技術 Fetch API 或 Axios: 用於與後端服務進行 HTTP 通信,拉取數據或發送數據。 RESTful API 與 GraphQL: 理解如何與 API 交互並消費 API 提供的數據。 8. 設計工具和基礎設計原則 Figma 或 Adobe XD: 瞭解設計工具以便與設計師協作。 UX/UI 基礎: 基本的用戶體驗和用戶界面設計原則,確保設計既美觀又實用。 ⚡推薦課程⚡ UI/UX 新時代指南:產品設計 x 商業思維 x AI 工具 https://nabi.104.com.tw/course/ppa/d9785ca3-7de2-4567-aae5-2c771a5471e8 UI/UX新手實務班|UI介面設計,洞悉使用者體驗 https://nabi.104.com.tw/course/tibame/1550e806-07b1-49a2-a8e8-42668911d4ca 9. 性能優化 代碼分割與懶加載: 減少初次加載時間,提升網站性能。 圖片優化與資源壓縮: 優化圖片格式與大小,減少網頁加載時間。 10. SEO(搜索引擎優化) 理解基本的 SEO 概念,確保網站在搜索引擎中具有良好的可見度,包括結構化數據的應用和適當的標題標籤。 ⚡推薦課程⚡ SEO搜尋引擎優化七大密技|攻上頂端排名寶座 https://nabi.104.com.tw/course/tibame/b0d286b0-9106-406c-beff-c53918ab2270 具備以上這些技能,能幫助前端工程師在現代網頁開發中具備更強的競爭力與靈活性。
104學習・職涯學習課程專文推薦

精選 一句話改完整份簡報!Gemini、Copilot、Canva 三家 AI 簡報新功能怎麼選?

簡報做到一半,主管說「整份換成公司品牌色」「第 5 到 7 頁濃縮成一頁」,你是不是又要一頁一頁慢慢改? 十月底,Google、Microsoft、Canva 都在 AI 改簡報上有新動作:不用從頭重做,打一句話就能改整份現有的簡報。 先看三家各推了什麼: Gemini in Google Slides(10/29 開始推出) 在側邊欄下一句指令,Gemini 會自己判斷要改哪幾頁,直接改在可編輯的投影片上,改完列出修改摘要。 適合:統一整份字型和配色、照另一份簡報的風格改、引用雲端硬碟的檔案補內容。 限制:目前只支援英文指令;要 Workspace 商務/企業版或 Google AI Pro、Ultra 方案。 Copilot in PowerPoint(10 月持續更新) 在 Copilot 對話框用聊天的方式改簡報,可以新增和重組投影片、換圖、套公司品牌範本。10 月新增品牌套件技能,比較長的工作關掉檔案也能在背景繼續跑。 適合:公司已經用 Microsoft 365、要符合品牌規範的正式簡報。 限制:完整功能需要 Microsoft 365 Copilot 授權;簡報太大可能超出系統上限。 Canva Brush(10/29 推出) Canva 自家訓練的設計編輯模型,看得懂版面結構,小到改一行字、大到改整份簡報都可以,也能把簡報頁直接改成 IG 尺寸。 適合:行銷素材、提案簡報,以及同一份內容要改成不同尺寸的情況。 限制:目前開放給 Canva Pro 訂閱者,在 Canva AI 的模型選單選 Brush。 那我該用哪一個?先問自己三個問題: 1. 簡報平常放在哪裡? Google 雲端硬碟 → Gemini;公司用 Office 和 Teams → Copilot;行銷素材都在 Canva → Brush 換工具的成本,常常比功能差異還大。 2. 要改的是「內容」還是「外觀」? 補數據、濃縮頁數 → 挑能讀到你原始檔案的工具(Gemini 讀雲端硬碟、Copilot 讀公司檔案) 換風格、改尺寸 → Canva Brush 和 Gemini 的整份套風格最順手 3. 有沒有品牌規範要守? 要對外、要對客戶 → Copilot 搭配公司品牌套件最穩;個人或小團隊 → Canva 品牌工具組也夠用 三個好用的指令寫法(英文版是給 Gemini 用的): ・「把所有頁面的標題改成同樣的字級和顏色」 Make the titles on all slides the same font size and color. ・「把第 5 到 7 頁整理成一頁重點摘要」 Summarize slides 5–7 into a single slide. ・「依照這份檔案的內容,補充第 3 頁的數據」 Update slide 3 with more details based on [檔案名稱]. 最常見的三個錯誤: ・一句話塞太多要求,改壞了也不知道是哪一步出錯 ・改完沒有逐頁檢查,數字和專有名詞被 AI 改掉都沒發現 ・忘了 AI 會直接改原檔:先複製一份,或記得用版本記錄還原 小練習:下面三種情況,你會先打開哪個工具? ① 業務提案要套客戶指定的品牌色,公司全面使用 Microsoft 365 ② 季報簡報放在 Google 雲端硬碟,要把三頁數據濃縮成一頁 ③ 活動簡報要同時改成 IG 貼文和限動尺寸 (參考答案:① Copilot ② Gemini ③ Canva Brush) 想把 AI 用進簡報、文案、視覺到影音的完整企劃流程,推薦 104 獨家課程「AI內容企劃力實戰課|高效文案創作 × 視覺設計 × 簡報製作 × 影音生成」: https://nabi.104.com.tw/course/104nabi/51189062-5156-4dec-9153-8464c6732b13 也歡迎留言分享:你最常用哪一家改簡報?「一句話改整份」真的有省到時間嗎? 資料來源: Google Workspace Updates〈Edit entire presentations with Gemini in Google Slides〉 https://workspaceupdates.googleblog.com/2026/10/edit-entire-presentations-with-gemini-in-Google-Slides.html Microsoft Support〈Edit with Copilot in PowerPoint〉 https://support.microsoft.com/en-us/powerpoint/edit-with-copilot-in-powerpoint Canva Newsroom〈Introducing Canva Brush, a vision-language model for design〉 https://www.canva.com/newsroom/news/canva-brush/ (功能、方案與開放範圍以 2026 年 11 月官方說明為準,各家都是分批開放,帳號不一定馬上看得到)
104學習・AI 趨勢報-科技愛好者的產地🤖

用Codex操作Chrome瀏覽器,自動讀Gmail、寫Google Sheet教學!設「3層護欄」防AI亂點亂寄

想讓AI幫忙操作Chrome瀏覽器、讀Gmail、下載附件、寫進Google Sheet,又怕它亂點、亂寄信?作者以教師可能遇到的「自動批改作業信」為例,示範用Codex Chrome Extension設定白名單、二次確認與留痕log三層護欄,再一步步放手讓AI操作瀏覽器。本文節錄自《ChatGPT × Codex全攻略》。 文/曾慶良(阿亮老師) 本文目錄(點擊可快速前往) 動手做前準備清單全章流程地圖:4步由小到大動手實作:讓Codex操作你的Google Chrome動手操作3大禁區 編按:作者以「老師自動批改學生作業信」為範例,示範讓Codex讀取Gmail「作業繳交」標籤的來信、下載附件、產出評語,再逐列寫進Google Sheet。雖然示範情境在教學現場,但換個主題就能套用到職場,例如整理應徵者的履歷信、客戶詢價信或活動報名回覆;文中的白名單、二次確認、留痕log三層護欄,也適用於任何讓AI代操瀏覽器的工作。※本文以「Chrome Extension」模式操作,是由Codex直接在你的Chrome「已登入」的Gmail等分頁操作,不必處理OAuth、API token(這些憑證都不用辦),看得到它在做什麼。 動手做前準備清單 項目規格沒有怎麼辦Codex CLI + 桌面App已完成、能登入補安裝,Codex CLI 、桌面AppChrome Extension從Codex App Plugins內裝補安裝,Chrome extensionGmail帳號有「作業繳交」標籤、收得到信Gmail內建立一個Label「作業繳交」Google Sheet一張空白工作表,欄位先排好Drive內新建一張,命名「本學期_作業批改」 Google Sheet欄位先排好 第一列填入這6個欄位(順序很重要,等下Skill要按這個順序寫入): ABCDEF批改日期學生姓名作業主題AI評語字數建議評分 權限設「僅特定人員」或「限校內帳號(你的學校網域)可存取」,把你自己(和真的需要看的同事)逐一加進去。不必也不要用「擁有連結的任何人可檢視」,Codex用你登入的身分操作,本來就進得去,不需要開公開連結。 此表含學生個資(姓名+評語),絕對不可以用「擁有連結的任何人可檢視/可編輯」公開連結分享。公開連結等於把全班個資丟到網路上任人抓取。務必設成「僅特定人員」或「限校內帳號」,並定期到「共用」設定檢查存取名單有沒有跑進不該有的人。 【補充】企業導入前置(用公司信箱、下載含個資附件前必看) 本章讓Codex操作你「已登入」的信箱、下載附件、寫進Sheet,放在公司環境要先過3關,別自己一個人默默開跑: 公司信箱須經IT /資安核准:使用Codex Extension操作公司Gmail / Workspace前,先問過IT或資安窗口,確認符合公司對第三方工具存取信箱的規範,否則別用個人身分擅自授權公司帳號。 先用測試帳號跑通:第一輪用一個測試信箱+假資料把流程走順,確認護欄有效,再碰真實信箱。 附件含個資要確認合法性、用完清除:下載的.docx /客戶附件若含個資,先確認你有處理的合法依據(同意/業務必要),處理完就從~/Downloads/inbox-essays/之類暫存夾刪除,別長期堆在本機或同步到公開雲端夾。 全章流程地圖:4步由小到大 1 授權與護欄 Chrome Extension 範圍限定 + 二次確認 ↓ 2 寫 Skill auto-email-processor 四階段定義 ↓ 3 跑 1 封測試 盯著看,確認沒亂點 ↓ 4 放開跑全部 批次處理 + 失敗重試 + 總結報告 絕不可跳過步驟3,跑1封測試看看,這是整章最關鍵的安全閘門。沒看過第1封就放執行,等同把你的Gmail鑰匙交給陌生人。 動手實作:讓Codex操作你的Google Chrome 步驟1-A 授權與三層護欄 確認Codex桌面App已開啟、已登入 確認Chrome已裝Codex Extension Chrome右上工具列點Codex圖示 看到「Chrome plugin connected」狀態 = 正常 Codex桌面App內的Plugins區也顯示「Chrome plugin connected」,兩邊都看得到 = OK Codex從這裡開始就有能力「在你登入的Chrome內」做事。所以下一步馬上設範圍限制,沒設好就不要往下做。 步驟1-B 護欄1:範圍限定(白名單) Codex Extension預設「進入新網站會問」。但更穩的做法是明確設一份白名單。在Codex對話開頭就先宣告: 本對話只允許操作 mail.google.com、docs.google.com、sheets.google.com。 任何其他網域請拒絕並回報給我。 明確列出允許與禁止的清單: # 允許 Codex 操作的網域白名單 mail.google.com # Gmail docs.google.com # Google Sheet / Docs sheets.google.com # Google Sheet(舊網域別名) # 禁止:其它一律不行 ✗ bank.example.com # 銀行 ✗ pay.example.com # 支付 ✗ facebook.com / x.com # 社群媒體 這是用文字下的範圍限制,搭配Extension預設的「進新網站問一次」雙重防護。 步驟1-C 護欄2:二次確認 在Codex對話開頭就先指定下面五類動作必須先暫停問你,得到「OK」才能繼續: 刪除任何信件 → 必須問 寄出任何信件 → 必須問 移動信件到垃圾桶 → 必須問 修改Sheet既有列(非新增)→ 必須問 修改Gmail filter / forwarding設定 → 必須問 「標記為已讀」、「加標籤」、「下載附件到自己電腦」、「在Sheet新增一列」這幾項算可逆操作,不需要每次都問。 步驟1-D 護欄3:留痕log 叫Codex把它做的每一步寫成log,方便事後抽查: 請建立一個 ~/codex-logs/email-processor.log 每次處理一封信,寫一行 JSON: {"ts":"2026-05-17T10:00:00Z","subject":"...","sender":"...","action":"已批改寫入Sheet","ok":true} 失敗時 ok:false,多寫 reason 欄位。 請在每次跑完 Skill 後自動 append。 跑完一輪後,cat ~/codex-logs/email-processor.log(Windows PowerShell:Get-Content $HOME\codex-logs\email-processor.log)看得到N行JSON,每行對應一封信。 動手操作3大原則 範圍限定:只開放特定網域,其餘一律拒絕 二次確認:刪/寄/改既有資料必須先問 留痕:每次操作寫log,可事後追查 三個都做到了,才往下進步驟2寫Skill。 步驟2-A 寫auto-email-processor Skill macOS / Linux(或在Git Bash執行): mkdir -p ~/.agents/skills/auto-email-processor cd ~/.agents/skills/auto-email-processor touch SKILL.md Windows PowerShell寫法(同一件事的PowerShell寫法): New-Item -ItemType Directory -Force $HOME\.agents\skills\auto-email-processor Set-Location $HOME\.agents\skills\auto-email-processor if (-not (Test-Path SKILL.md)) { New-Item -ItemType File SKILL.md } 如果Windows使用者希望直接沿用Bash指令,可以在~/.agents/skills/的上層資料夾右鍵 → Open Git Bash Here,就能在Git Bash內原樣執行mkdir -p、touch。兩個方式擇一即可,不必兩邊都跑。 為什麼用Skill而不是直接打prompt?Skill寫一次、用很久。下次要批改只要說「跑auto-email-processor」,不必再貼整段流程描述。 2026新功能NEW:Record &amp; Replay(錄一次、重播多次) Skill有3種建立法: 手寫SKILL.md(本節做的) 對話中請Codex幫你生 Record &amp; Replay,你手動把一連串網頁操作(點「作業繳交」標籤 → 過濾未讀 → 下載.docx)錄製一遍,Codex會把它存成可重播的Skill。像Gmail這種步驟固定、重複性高的流程特別適合這種方式,錄完再回頭微調SKILL.md補上護欄。搭配always-allow(總是允許):把重播時重複跳出來的權限請求(例如每次都問「可以操作mail.google.com嗎」)設為「總是允許」,就不會一直被打斷,但只對白名單網域開always-allow,刪/寄/改既有資料這類敏感動作仍維持二次確認。 步驟2-B SKILL.md開頭:frontmatter與Scope SKILL.md一定要以YAML frontmatter開頭(name、description是必要欄位,觸發詞寫進description,Codex才會自動觸發): --- name: auto-email-processor description: 讀 Gmail「作業繳交」標籤內的未讀信,抓 .docx 附件,套 essay-feedback Skill 批改,寫回 Google Sheet「本學期_作業批改」。觸發詞:批次批改、處理交作業信、跑 email processor。 --- # auto-email-processor ## Scope - 允許網域:mail.google.com、docs.google.com、sheets.google.com - 禁止:其它任何網域 - 允許動作:讀信、下載附件、加標籤、Sheet 新增列 - 禁止動作:刪信、寄信、修改 Sheet 既有列 Skill的「身分證」段落,讓Codex知道「我可以做什麼、不能做什麼」。 步驟2-C 中段:四階段Steps ## Steps ### Phase 1 讀 1. 開新分頁到 https://mail.google.com 2. 點左側「作業繳交」標籤 3. 加「is:unread」過濾條件 4. 列出信件主旨與寄件者,不要點開 ### Phase 2 分(過濾) 對每封信,符合所有三條件才處理: - 寄件者是學生(你的學校網域,例:@school.edu.tw) - 主旨含「作業」或「homework」 - 有 .docx 附件 ### Phase 3 處(批改) 1. 下載 .docx 到 ~/Downloads/inbox-essays/ 2. 從寄件者名 / 主旨解析學生姓名與作業主題 3. 呼叫 essay-feedback Skill 批改 4. 把回傳的「評語/ 字數/ 評分」記下來 ### Phase 4 記 1. 開 Google Sheet「本學期_作業批改」 2. 新增一列:日期 / 姓名 / 主題 / 評語 / 字數 / 評分 3. 回 Gmail 標該信「已讀」+ 加「已批改」標籤 4. 寫一行 log 到 ~/codex-logs/email-processor.log 【補充】Phase 3那句「呼叫essay-feedback Skill」是哪來的? 這支批改Skill在「多檔案批次處理」篇建立過,該章resources/essay-feedback/有現成檔案,只要將其複製到~/.agents/skills/essay-feedback/就能被本章觸發。還沒建也能先跑通流程,把Phase 3第3步暫時換成這3行替代做法: 用Codex內建能力讀出.docx純文字內容 請Codex直接寫一段150字評語、估算字數、給A / B / C建議評分 把這三個值當成回傳結果往Phase 4傳(先能寫進Sheet,之後再換成正式的essay-feedback) 步驟2-D 末段:Rules護欄 ## Rules ### MUST(必須) - MUST 敏感操作前停下來問我(刪信、寄信、改既有列) - MUST 處理失敗的信維持「未讀」、加標籤「需人工處理」 - MUST 每處理一封寫 log - MUST 全程操作我這個帳號,不可切到別人的 Gmail ### NEVER(絕不) - NEVER 自動回信給學生 - NEVER 跨網域操作(白名單以外) - NEVER 刪除任何信件 - NEVER 修改 Sheet 既有列(只能 append) ## Tools - Codex Chrome Extension(Gmail / Sheet 操作) - Codex 內建 .docx 解析 - essay-feedback Skill(subagent 呼叫,來源見第三篇 CH19) Skill寫完存檔。Codex下次看到觸發詞會自動讀SKILL.md。 準備測試素材:先讓信箱有東西可讀 Skill寫好了,但如果「作業繳交」標籤裡一封信都沒有,步驟3的測試就沒東西可跑。動手前先花3分鐘,自己造1~2封測試信,讓自動化有真實素材可讀。這步驟做完,跑步驟3才有意義。 準備1~2份.docx測試檔:隨手開Word(或Google Docs →下載為.docx)打一段假作文,存成例如:測試作文_王小明.docx。想更真實就做兩份、換個學生名。 自己寄給自己:在Gmail點「撰寫」,收件者填你自己的Gmail,主旨故意帶關鍵字(例:第八單元作文 作業繳交 王小明,一定要含「作業」讓Phase 2過濾條件吃得到),把剛才的.docx當附件夾進去,寄出。寄1~2封。 建一個標籤:Gmail左側sidebar往下拉找到「建立新標籤」,命名為作業繳交(就用這章Skill要讀的標籤名,別另取,不然Skill讀不到)。若動手前清單那步已經建過,這步跳過。 手動把測試信貼上該標籤:回收件匣,勾選剛剛那1~2封自寄信 → 點上方「標籤」圖示(或右鍵)→ 勾「作業繳交」。現在這個標籤底下就有真實的未讀作業信可供Codex練習了。 【提醒】用「自寄信」當測試素材最安全就算Codex跑歪了、標錯標籤,動到的也只是你自己建立的虛假信件,不會影響到學生真正交的作業。等步驟3測試通過,再放真實信件進來。 步驟3-A 跑1封測試(最關鍵的一步) 進Codex: codex 輸入: 請執行 auto-email-processor Skill,但這次只處理 1 封測試: 1. 開 Gmail 2. 找到「作業繳交」標籤內第一封符合條件的未讀信 3. 完整跑完 Phase 1-4 4. 跑完後回報你做了什麼(步驟列表、最後 Sheet 寫了哪一列) 整個過程請在我面前跑、不要靜默。 每動一步先告訴我「我準備做 X」,等我說 OK 才執行。 【提醒】請全程盯著螢幕看!不要去泡咖啡、不要切到別的視窗。第一次跑就是要確認「它真的有照規矩來」。 步驟3-B 盯著看的時候要確認什麼? Codex跑的時候,眼睛確認這6件事: Codex開的是正確的Gmail標籤(不是收件匣全部) 它沒有點開不該點的信(例如沒有.docx的、或寄件者不是學生的) 下載.docx時沒覆蓋你既有檔案 批改完Sheet新增一列(不是修改既有列) 信件標為「已讀」+ 加「已批改」標籤,沒刪除、沒進垃圾桶 log檔有一行新紀錄 任何一項不對 → 立刻按Esc中止(在CLI內跑則按Ctrl + C)、修SKILL.md、再跑一次測試,不要現在就往步驟4前進。 步驟3-C 第一次跑常見的「走偏」 Q1:Codex點到收件匣不是「作業繳交」標籤 回答:Gmail介面更新時,標籤位置會變動。SKILL.md改成「在左側sidebar用文字找『作業繳交』再點」,不要靠固定位置。 Q2:把作文老師個人信也當成作業處理 回答:Phase 2過濾條件不夠嚴。再加「主旨必須有作業/homework」「附件必須是.docx」雙條件。 Q3:Sheet寫到錯的工作表(同一活頁簿有多張表) 回答:Skill補上「先點底部tab確認是『本學期_作業批改』再寫」。 Q4:標完「已批改」標籤後又標「重要」 回答:Codex在學Gmail介面,可能誤點。Rules補:「只加『已批改』標籤,其他不准動」。 步驟4-A 測試OK了,跑全部未讀 同一個Codex對話內輸入: 很好,剛才測試正確。現在請執行 auto-email-processor Skill 處理「作業繳交」標籤內所有未讀信。 需求: 1. 並行數:1(順序處理,方便我看) 2. 失敗自動重試 1 次 3. 重試仍失敗的信:加標籤「需人工處理」,跳過,繼續下一封 4. 全部跑完給總結報告:成功 N 封 / 需人工 N 封 / 失敗 N 封 5. 列出需人工的信件主旨與寄件者,方便我之後處理 開始。 「並行數1」會比較慢,但安全。等你跑過3-5次都OK再考慮加到2-3並行。 步驟4-B 預期看到的總結報告 ✅ auto-email-processor 處理完成 成功批改:23 封 需人工處理:2 封 - 「期中作文.docx 附件損壞」 / 小明 <ming@...> - 「忘記附檔」 / 阿花 <hua@...> 失敗:0 封 Google Sheet 已新增 23 列 Gmail 標記已讀 + 標籤「已批改」:23 封 標籤「需人工處理」:2 封 log 寫入 ~/codex-logs/email-processor.log:25 行 數字加總 = 標籤內未讀信總數 = Sheet新增 + Gmail標記 = log行數,四個數字對得起來就是完成。 步驟4-C 抽查Sheet內容是否正確 打開「本學期_作業批改」工作表 隨機挑3列,對應到原信件 檢查欄位:日期、姓名、主題、評語、字數、評分都對 檢查AI評語有沒有亂寫(這部分是essay-feedback Skill的責任,但這次順便抽查) Gmail內隨便開一封看是否標籤「已批改」+「已讀」 看log檔最後幾行有ok:true 6項都對 = 整套流程信任度 +1。下次可以放心多並行、少盯著。 動手操作3大禁區 把這3個禁令寫在便條紙貼在螢幕上: 不操作金融帳戶:銀行、支付、券商、加密貨幣交易所,一律白名單外。不論看起來多簡單的「查餘額」也不行,因為AI沒辦法分辨「查」和「轉」之間只差一個按鈕。 不自動寄信給真人:草稿可以、儲存可以,但按下「寄出」這個動作絕對是你自己按。AI寄錯信沒辦法收回,後果你扛。 不超範圍:Skill寫了什麼就只做什麼。不要在同一個Codex對話「順便叫它做別的事」,授權邊界會模糊掉。要做別的就開新對話、重新設權限。 節錄自:博碩文化《ChatGPT × Codex全攻略:從零基礎到自動化,打造你的AI Agent工作流》/曾慶良(阿亮老師) 著
【104職場力】・AI

一頁式網站是什麼?一頁式網頁設計優缺點與費用解析

很多人的第一個網站是被一則廣告逼出來的。點進一個連結,畫面一路往下滑,商品或方案從頭講到尾,滑到底的時候旁邊跳出填寫框,人就順手把手機號碼留了下來。整個過程沒有換過頁面,也沒有點過任何選單。這種把一件事從頭講到尾的頁面,就是一頁式網站(One Page Website),也有人說一頁式網頁、單頁網站。 它聽起來像一句行銷話術,其實是很樸素的工具:把該說的資訊排成一條動線,讓人不用自己找路。下面把一頁式網站能做的事、不能做的事,以及我們實際做過的幾種型態講清楚,幫你在決定花錢之前,先想明白自己到底需不需要。 一、一頁式網站是什麼 一頁式網站的全部內容都在同一個網址裡。首頁上方有主視覺和一句主打的話,往下依序排服務介紹、案例、價格、常見問題,最後放聯絡表單。頁面頂端通常會留一個選單,點了不會跳到別的頁面,而是往下滑到這一段。這種跳法叫錨點跳轉,是長頁能讀得下去的前提。 和多頁式網站比起來,差別在資訊的位置。多頁式網站把公司介紹放在「關於我們」,產品放在「產品專區」,案例放在「案例分享」,訪客要自己點進去找;一頁式網站把這些東西排在一起,順序由你決定。訪客的差別是,前者要做出選擇,後者只要一直滑。 順帶講一個常被混用的名詞。Landing Page(著陸頁)講的是位置,也就是「訪客從廣告點進來後抵達的那一頁」;一頁式網站講的是形式,也就是「這頁總共只有一頁」。位置和形式是兩件事,一頁式網站可以當著陸頁用,你官網裡的某一個服務頁也可能是著陸頁,只是它不是單頁。 同場加映:月光創意另寫了一篇一頁式網站與 Landing Page 中文意思的完整版文章:https://www.moon-d.com/blog/one-page-website.php 一頁式網頁設計這幾個字在業界被使用得很寬鬆,實際上做的事情差很多。有的是把公司現有的簡介貼成一頁,動一下滑就到底;有的是花時間重新安排內容節奏、處理視覺階層、把表單和追蹤都接好。兩者外觀看起來都像一頁式網站,做出來能不能用,是兩回事。 二、你到底該不該做一頁式網站 在動工之前,先回答五個問題,問完大概就有答案了。 第一,你的網站要回答的問題是不是只有一個?「我們做什麼、為什麼值得信、要怎麼找我」,三句話講完就沒了,適合一頁式。如果對方會問到你沒做的部分,例如各項方案的差異、服務據點、維修收費、多年案例,那就需要多頁式。 第二,商品或服務的數量是不是收斂的?一個課程、一檔新商品、一次促銷、一項專業服務,都是好例子。整間公司二十條產品線擺進一頁,會變成一張沒人想讀的清單。 第三,你的流量從哪裡來?如果主要靠 Google 自然搜尋,建議直接跳過這個選項,理由下一節會說明。如果是投廣告、發社群、寄電子報、印在名片或 DM 上讓人掃碼,流量來源集中在一兩個地方,一頁式非常合用。 第四,內容會不會一直長下去?每月都要新增文章或案例的網站,單頁結構會很快撐不住。反過來,內容穩定、期數固定的頁面,用一頁式最省事。 第五,你要訪客做的動作是同一件事嗎?「填表預約」是,「填表之後還要選加購、加入會員、下載應用程式」就不是。一頁式的力量來自專心,如果頁面上同時有六個按鈕要人選,等於把難度還給了訪客。 五個問題裡,只要「要做 SEO」或「服務項目很多」任一成立,就該認真考慮多頁式。其餘都偏向可以使用一頁式網站。 三、一頁式網站的好處 動線短,是最實在的一項。訪客從點進來到按下送出,中間沒有換頁、沒有開新視窗、沒有回到上一頁找路。每多一個跳出點,就多一次放棄的機會,尤其是手機上。表單放在頁尾,不代表它一定被填,但它至少在視線內。 手機閱讀友善是另一個好處。現在多數人上網的動作就是滑,滑這個動作不需要學習,也不需要等頁面載入。一頁式網站的節奏本來就適合手機,設計時把手機版當主版本就好,不會出現「桌機版很好看,手機版擠成一團」的窘況。 製作快,後續修改也單純。頁面只有一個,東西要改就是改那一處,不會出現「首頁改了,內頁沒改」的情況。對只有一兩個人要維護的團隊來說,這點很實際。 還有一個比較少被講的好處:訊息會被迫一致。當你只有一個頁面可以放內容,產品文案、服務說明和價格就不容易各說各話。資訊一集中,矛盾的地方反而會自己浮出來。 四、缺點,以及最常見的三個誤區 第一個誤區是「一頁式網站也能做 SEO」。實情是它先天吃虧。所有主題共用一個網址,等於只有一個標題、一組網頁描述可以寫。你想同時被「XX 室內設計」「XX 維修」「新北 裝修推薦」找到,需要的是多個頁面各自對應一個搜尋意圖,單一長頁做不到。這不代表一頁式網站完全不會被搜尋到,而是它很難成為自然流量的主力。若網站存在的目的就是讓不認識你的人從 Google 找到你,請把預算留給多頁式。 第二個誤區是「只有一頁,所以便宜」。頁面數量不等於工作量。訪談、文案、圖片、影片授權、響應式適配、表單串接、追蹤設定、測試與上線,每一項都跟頁數無關,還常常是一頁式專案最花時間的部分。真正會讓報價拉開差距的,是這些工作有沒有被認真做。 第三個誤區是「看起來比較有規模」。這正好講反了。在金融、醫療、法律、上市上櫃這些產業,一頁式網站常被讀成小公司、沒制度、隨便做做。所以這類客戶通常會把一頁式網頁用在活動或產品募資上,正式的企業形象還是做多頁式官網。 還有幾個實際限制要知道。所有東西共用一個網址,之後想分析「哪一段的訪客最多、哪一段開始離開」,資料會比較難拆解。滑完就走的人很多,又沒有其他頁面可以逛,跳出率看起來會偏高,拿它跟多頁式官網直接相比沒有意義。頁面拉得太長也會有後果:圖片太多會拖慢載入,區塊順序亂會讓人滑到一半就放棄。一頁式能塞多少字,最後是由訪客的耐心決定,跟版面空間無關。 五、我們做過的三種一頁式網站 講完道理,換三個我們真的做過的案子,差別會比較清楚。 第一個是金融投信推出的黃金礦業 ETF 募集頁。這種頁面要在很短的時間內讓投資人相信這檔標的值得研究,所以視覺走黑金路線:深色岩質底襯出金色的光澤,標的代碼用大字級的金屬質感字型放在第一眼的位置,資訊則用比較克制的排版往下列。重點不在裝飾,而在於把「這是什麼」和「我要做什麼」分開處理。頁面右側做了懸浮的快捷工具列,申購單與銷售機構的入口一直掛在畫面上,訪客不論滑到哪一段都能立刻行動,不必回頭找。 第二個是電商通路品牌的活動頁,背景是一整檔檔的促銷套組。這種頁面最怕滑到底還是不知道要買哪一組,所以節奏比資訊更重要。做法上,讓背景的雲朵與愛心有呼吸感的微動態,商品和「立即購買」按鈕在滑入時做漸顯與微幅放大,讓「點這裡」的手感成立;影片與底部按鈕的切換也刻意調過節奏,避免看起來像被塞進去的廣告。這種頁面沒有太多字,設計的任務就是讓手指繼續往下滑。 第三個是醫療健檢中心的一頁式官網。這個型態真正的難題是信任,視覺只是外層。健檢是低頻、高單價、又牽涉身體的消費,訪客在意的是項目內容、檢查流程、院所環境、醫師陣容與預約方式。這頁的排法是照著看診的順序走:健檢項目與差別、流程說明、環境照片、醫師介紹、費用與預約入口。資訊夠完整,信任感才有地方生出來;這也是為什麼它不能只做漂亮,內容深度得跟上一頁。 三個案子擺在一起,同一種形式的側重點可以差很多。募集頁要的是權威感與行動捷徑,活動頁要的是節奏與衝動,官網要的是資訊完整與可信度。動工前先決定這一頁要說服誰,設計才有依據。 六、從想法到上線的流程 第一步,寫出一句話說明這頁要對誰說什麼。如果這一句話需要三個不同的受眾、五項服務和四種行動才能講完,問題不在頁面太短,在於任務還沒拆開。 第二步,排區塊順序。順序要照訪客的疑問走,不照公司的組織圖。訪客通常先問「這是什麼」,再問「跟你競爭的有什麼不同」,然後才問「要多少錢」「怎麼找你」。誰先誰後要想清楚。 第三步,備素材。文字、照片、影片、標誌、價格與常見問題,缺一項就會在製作階段卡住。照片建議一次備齊同尺寸,影片要先確認長度與比例。這一步沒做,後面會一直等。 第四步,決定誰做。這是整個流程裡最關鍵的一個決定,下一節會講。 第五步,驗收,而且用手機驗。檢查項目不多:首屏的主張和按鈕有沒有被蓋住、表單能不能真的收到、頁面在慢速網路下會不會卡、每張圖片有沒有替代文字、按鈕點下去有沒有被記錄。這五項沒過,不要上線。 七、自己做,還是找人做 誠實講,一頁式網站確實有免費工具能用。個人作品集、履歷、單一課程的招生頁、一次性的活動,這些用現成平台或自己動手做得又快又省錢,這點不用否定。 撐不住的情況是另一種:頁面要自己長期更新、要在上面賣東西、要能被 Google 找到、要代表一家有規模的公司、還要在手機上又快又穩。這種情況自己做的成本通常比想像中高,因為時間會卡在你根本不熟的地方,美化反而不是瓶頸。 我們(月光創意網頁設計)做的是後半段:客製化的一頁式網頁設計、響應式適配、把內容節奏重新排過、表單與系統串接、追蹤設定,以及最重要的——上線之後還可以繼續幫你改內容、追蹤數據並調整。這種頁面最好在規劃階段就把後續維護一起談掉,因為一頁式網站的內容要更新,沒有後台可以靠就會變成一份靜態文件。 八、常見問題 一頁式網站等於著陸頁嗎? 不對等。著陸頁描述的是訪客從哪裡進來,一頁式網站描述的是頁面有幾頁。前者可以有多頁,後者只有一頁。 一頁式網站能放多少商品? 沒有固定數字,判準是「滑到底還願不願意讀」。實務上把十來件、差異明確的商品放在一頁是讀得完的,數量再往上,建議改用多頁式加上分類。 做一頁式網站還需要做響應式嗎? 需要,而且建議直接以手機版為主版本再放大到桌機。絕大多數訪客是拿手機進來的,先做桌機再等比例縮小,字級和間距會一直卡住。 之後想擴充成多頁式,可以嗎? 可以,但成本不等於把頁面切開。內容重新歸類、導覽重新設計、網址與標題重新規劃都要重做。所以如果本來就預計三年內會擴充,一開始就做多頁式比較省。 九、如果還在猶豫怎麼開始 一頁式網站能不能用,取決於你的內容能不能收斂成一條線。收斂得了,它是最省力的做法;收斂不了,多花時間做也只會得到一張很長的網頁。 如果你手上的素材很多,卻不確定該排成活動頁、募集頁還是一頁式官網,可以先看月光創意整理的「一頁式網站完整指南」: https://www.moon-d.com/blog/one-page-website.php 裡面把一頁式網站的定義、與 Landing Page(著陸頁)的差別、優缺點、設計原則、報價行情與免費平台比較整理成一頁,也放了可互動的範例,建議直接存起來。 歡迎直接帶著你的需求來聊,我們會先幫你確認這一頁該不該做成一頁式。 月光創意網頁設計:https://www.moon-d.com/
月光創意・月光創意網頁設計

🔥 社群防呆包:拯救小編智商,薪水翻倍爽漲!

【 J 篇:20 個 J 開頭術語一次搞懂!】 J 字頭術語不多,但每一個都很「聚焦」, 不管是 JavaScript、JPEG 還是 Journeys, 你不懂,它們照樣搞死你! ​ 🤯「JavaScript 又壞了?那關我什麼事我只是小編!」 😅「JPEG 傳上去畫質爆掉怎麼辦?」 ​ 今天 Steven 小編就來幫你破解這些少數但常見、常踩雷的 J 字頭術語! ​ 📌 建議收藏+貼給那位還在用 800KB JPEG 當主視覺的社群菜鳥! ​ 🚩【 J 篇 】數位社群行銷術語防呆包 01. JavaScript(JS) 👉 讓網頁會動的程式語言,小編不會寫,但它壞了全案 delay。 02. JPEG(圖檔格式) 👉 壓縮後輕巧方便,壓過頭畫質像馬賽克,小編壓力也同步模糊。 03. Jargon(術語行話) 👉 老闆每句話都夾雜三個,小編只想默默 Google 翻譯。 04. Journey Mapping(用戶旅程圖) 👉 畫出使用者互動路徑,看起來超專業,但誰能幫小編畫出口? 05. JSON(JavaScript Object Notation) 👉 資料交換格式,小編永遠只會 Ctrl+C + Ctrl+V,希望別錯。 06. Jump Rate(跳離率) 👉 用戶一進網站立刻跳出=你的內容真的無法留下人。 07. Job Title Tagging(職稱標籤) 👉 廣告受眾設定時的秘技,想找 HR、CEO?靠這招! 08. Journeys(自動化流程) 👉 EDM 的自動排程邏輯設定,小編設完後就要開始祈禱。 09. Join Rate(加入率) 👉 活動或名單成長的關鍵指標,低到爆時只想裝死。 10. Jingle(品牌配樂) 👉 三秒洗腦旋律讓人記住品牌,但預算高到只能在夢裡聽。 11. Java(不是咖啡) 👉 常跟 JavaScript 搞混的程式語言,小編只想跳過它。 12. Just-In-Time Content(即時內容) 👉 熱點來就衝文,來不及想創意只好交給迷因。 13. Jump Link(錨點連結) 👉 點一下自動跳到頁面某處,操作好用,設錯位置會引起暈眩。 14. Jitter(網路延遲抖動) 👉 直播 lag 爆時小編最常被問:「是不是你 Wi-Fi 壞了?」 15. Job Scheduler(任務排程器) 👉 自動化貼文工具排程的底層技術,壞了就變成小編手動地獄。 16. Junk Traffic(無效流量) 👉 數字好看但沒轉換,老闆高興兩秒後就質疑你買假粉。 17. Jump Cut(影片剪輯跳接) 👉 小編剪片省時大法,跳得好叫節奏,跳太快像鬼片。 18. Joomla(網站內容管理系統) 👉 和 WordPress 差不多的東西,但工程師聽了都沉默。 19. Java Applet(舊世代網頁小程式) 👉 現在已經不流行了,但如果你還看到=你該更新網頁了。 20. Justification(文案合理化) 👉 客戶永遠要你解釋為什麼這樣寫,寫得太有創意反而要被審問。 ​ 💬 還有什麼 J 字頭的術語你想補充? 歡迎留言,小編幫你一起收錄進防呆包! ​ #社群防呆包 #小編智商救援計畫 #數位社群行銷術語A到Z #Steven數位社群行銷研究室
黃逸旻・Steven AI 數位社群行銷研究室

網站上的「按鈕」都一樣?用鍵盤驗收連結與動作

網站上的方框看起來都像按鈕,有的卻是前往另一頁,有的是展開視窗,有的是送出資料。只用滑鼠點得動,還不足以判斷做法正確。今天只練一件事:先分清楚「導覽」與「動作」,再用鍵盤留下可重做的驗收紀錄。 適合自己製作網站、使用 AI 產生頁面,或需要驗收外包成果的個人、工作室與中小企業。準備桌面瀏覽器、鍵盤與可編輯的本機練習頁或測試站;不需要付費工具,也不要直接拿正式付款、刪除或寄信功能練習。 【先寫行為,再選元件】 W3C 的連結模式用來參照資源,目標可以在同頁,也可以是其他頁面;按鈕模式則觸發動作,例如開啟對話框。連結通常以 Enter 啟動;按鈕取得焦點後,Enter 與空白鍵都應能啟動。外觀可以設計,行為仍要符合用途。 虛構教材有兩個控制項:「閱讀練習說明」前往另一份文件,「增加練習次數」只把目前頁面的數字加一。前者使用帶 href 的原生 a 元素,後者使用原生 button,並設定 type="button"。這不是客戶網站,也沒有真實表單送出。 【照四步做】 1. 寫兩列規格:「文字/用途/預期結果」。第一列是閱讀說明/導覽/打開目標文件;第二列是增加次數/動作/數字加一且留在目前頁。先別用顏色、圓角或是否有底線決定種類,也不要只寫「點了有反應」。 2. 在測試頁建立這兩個元件。可交給既有網站編輯器或 AI 工具處理,要求保留原生元素:連結必須有真正的目的網址,增加次數則綁定加一的動作。請不要把整個功能只做成有點擊事件的普通文字區塊,再以外觀冒充完整操作。 3. 重新載入練習頁,從頁面起點按 Tab,確認焦點能到「閱讀練習說明」,而且看得見焦點位置;按 Enter,記錄最後網址與目標頁標題。確認這是預定文件,而非空白頁、錯誤頁或只是滑鼠樣式改變。若測試站有額外導覽,Tab 次數可能不同,以實際焦點為準。 4. 回到練習頁並重新載入,把計數歸零。用 Tab 到「增加練習次數」,按一次 Enter,確認顯示 1;再按一次空白鍵,確認顯示 2。記錄是否仍在原頁、焦點是否可見、有沒有意外送出表單。每次按鍵只應觸發一次,不能跳成 2、4 後還寫通過。 【今天實際做了什麼】 2026/10/30,我建立兩份本機 HTML 文件,在本機伺服器與 Chrome 操作:Tab 能到連結,Enter 打開 target.html,頁面標題為「練習說明」;重新載入首頁後,Tab 能到按鈕,Enter 後計數為 1,空白鍵後為 2。練習檔與操作結果已保存。 這只證明這份本機範例的上述行為,沒有測正式網站、手機、不同瀏覽器、螢幕閱讀器或完整無障礙符合性,也沒有測表單收件。不要把本機通過寫成「全站已驗收」或「獲得認證」。 【交付與驗收】 交一張兩列紀錄表,填上測試日期、頁面、控制項文字、預期行為、按鍵、實際結果與待修問題。連結的成果是到達正確資源;按鈕的成果是預定動作完成。只看文字變色、游標變手指或一張成功截圖,都不能取代這兩個結果。 若你不會編輯 HTML,可以在自己的測試站找一個導覽連結與一個無破壞性的動作,照上述步驟記錄;找不到計數器就改寫成該動作的具體成果,不冒稱做過本機教材。沒有測試權限的欄位,填「未測」。 【常見錯誤與限制】 第一是用空連結假裝動作;有網址外觀,仍要檢查實際用途。第二是加 role="button" 就以為已完成:角色宣告不會自動補齊自製元件的焦點與鍵盤行為,能用原生元件時先用原生元件。第三是忘了按鈕位於表單時可能觸發提交;不負責提交的按鈕應明定 type="button",再測實際行為。 也別把連結按空白鍵沒有開啟,直接判為故障;本題連結驗收用 Enter。鍵盤走查與滑鼠走查要分開記,任何一輪未完成都保留未測。 本機教材可零額外工具費完成;網站編輯器、主機與 AI 工具的方案及額度另計,碰到限制就記未完成,不需為這次練習購買額度。今天的作業是替自己的一頁選兩個控制項,先判用途再實際走一次,交出兩列可核對的紀錄。 來源(2026-10-30 查核): https://www.w3.org/WAI/ARIA/apg/patterns/button/ https://www.w3.org/WAI/ARIA/apg/patterns/link/ 整理/配圖:客脈 AI。配圖為 AI 示意圖,非真實網站或認證。
Rayda・客脈 AI 實作筆記

ChatGPT可以轉檔JPG、Word、PDF嗎?讓AI一站式解決20種轉檔任務

想把圖片如PNG、JPG轉成其他格式,或把Word等文字檔案轉檔,或將PDF合併成報告,這些瑣碎的任務能用AI完成嗎?解析如何透過ChatGPT等AI工具,一站式完成Word、JPG、PDF、Excel等多達20種轉檔任務,無需再依賴多款軟體,節省大量時間與精力,讓AI成為你的最佳工作助手!本文節錄自《30個必學的AI行政工作術》。 文/賴彥廷 本文目錄(點擊可快速前往) 讓AI幫你轉檔!ChatGPT一站式處理轉檔工作【STEP 1】快速掌握20種ChatGPT轉檔功能問題:ChatGPT可以轉檔影片嗎?【STEP 2】設計ChatGPT轉檔指令3大重點【STEP 3】出現缺頁或文字亂碼?讓ChatGPT修正錯誤【STEP 4】下載檔案【技巧升級】快速下載多個檔案的訣竅 在工作中,你是否經常需要做各種「轉檔」工作?早已準備好多款不同的應用軟體,還是每次遇到問題才急急忙忙尋找線上工具? 轉檔是職場生活中既不起眼又耗時的繁瑣事務。舉例來說,把多份PDF檔案合併成完整報告,或是將圖片轉換為指定格式。 雖然市面上有不少線上工具可以處理這些任務,但真正的麻煩在於,我們必須適應多種軟體,才能應付五花八門的轉檔任務。 試想一下,PDF合併需要一種工具,照片格式調整用另一種,至於影片處理、錄音格式轉換,甚至將網址製作成QR Code,都需要用不同的軟體來處理。更麻煩的是,找到操作簡單、功能強大的工具往往需要花不少時間試用和篩選。 如果能有一個「一站式」工具解決大多數的轉檔工作,省去來回切換軟體的麻煩,那該有多好! 讓AI幫你轉檔!ChatGPT一站式處理轉檔工作 ChatGPT在文案寫作、圖像生成、程式碼撰寫等方面的表現令人津津樂道,但它還有一個較不為人知且相當實用的功能:「轉檔」。 ChatGPT轉換多種不同類型檔案格式的品質都很好,有了它幫忙,我們就不必在各種軟體之間疲於奔命了! 【STEP 1】快速掌握20種ChatGPT轉檔功能 轉檔工作雖然不起眼,卻幾乎無所不在。無論是將文件轉換成適當的格式備份,還是將數據轉為兼容格式以供特定軟體處理。 此外,檔案的分割與合併也是常見的行政工作。在這些瑣碎繁雜的工作項目上,ChatGPT能幫上忙的地方比我們想像中更多。 以下列出7大類、超過20種轉檔相關的任務情境,每一項ChatGPT都能迅速完善地交付成果。 ChatGPT轉檔轉檔任務情境文字檔案轉換● Word檔案(.docx、.doc)、純文字文件(.txt)以及Markdown文件(.md)相關的檔案格式轉換。數據資料檔案轉換● Excel 檔案(.xlsx、.xls)、CSV 檔案(.csv)、JSON格式以及XML格式相關的檔案類型轉換。圖片檔案轉換● JPG、PNG、BMP等圖片檔案的格式轉換。PDF檔案分割與合併● 依照特定頁數範圍分割。● 奇數頁偶數頁分別獨立存放。● 單獨提取特定頁數。● 將多份檔案合併為一份。音訊檔案轉換、分割與合併● 不同音訊檔案(.mp3、.wav、.flac)的格式轉換。● 將一份音檔按照指定的時間區段,分割為幾個獨立的檔案。● 合併多份音檔。影片檔案分割與合併● 將影片檔案(.mp4、.avi、.mov、.mkv)按照指定的時間區段,分割為數個小片段。● 按照指定的檔案大小分割。● 將多段影片拼接成一個完整的影片。其他實用功能● 將彩色圖片轉換為灰階。● 圖片尺寸縮放。● 在圖片上套用簡單的濾鏡效果,比如復古風格或是負片效果。● 在圖片上的特定位置添加浮水印或是時間戳記。● 根據指定的排列方式,將多個圖片合併為一張圖。● 壓縮圖片以降低檔案大小。● 將網址製作成QR Code。 問題:ChatGPT可以轉檔影片嗎? 看完以上五花八門的功能或許有人會好奇:ChatGPT可以圖片轉檔,音樂轉檔,但是沒辦法將影片轉檔嗎? 答案是可以,但是失敗率高,限制也多。 原因在於影片的檔案容量通常比較大,轉換過程更為複雜又耗時,在處理中常常因為時間限制或網路不穩定,導致轉檔中斷而失敗。 根據經驗,目前ChatGPT只適合處理容量小、時間短的影片轉檔工作(分割與合併功能則不在此限),但相信AI科技一日千里,未來用ChatGPT處理幾小時長的影片不會是夢。 介紹完ChatGPT擅長的轉檔工作之後,接著就要設計指令囉! 【STEP 2】設計ChatGPT轉檔指令3大重點 工作上轉檔有很多情況,對ChatGPT下的指令也會各不相同。整體來說,轉檔指令可以簡化為3個重點:「輸入什麼、設定條件、輸出什麼」。 以切分一個PDF檔案為例。 輸入什麼:這份PDF檔案。 設定條件:照著1-5頁、6-10頁、10-15頁的順序分割。 輸出什麼:3份檔案。 將這3個重點整合成一段話就是:「請將這份PDF檔案依照1-5頁、6-10頁、10-15頁的順序,分割為3份獨立的檔案。」 透過這樣的方式,我們就能快速將工作需求轉為ChatGPT可以理解的指令,不必多費心力來思考指令該怎麼寫。 值得一提的是,如果要同時處理多份檔案,例如合併好幾份PDF文件,該如何告訴ChatGPT誰在前、誰在後呢? 這裡有個實用小技巧:「將每個檔案的名稱改為數字」,就能直接用數字檔名告訴ChatGPT排列順序囉! 【STEP 3】出現缺頁或文字亂碼?讓ChatGPT修正錯誤 如果發現轉檔後的檔案出現缺頁或是文字亂碼等錯誤,只要請ChatGPT重新處理一次即可排除問題。 舉例來說,近期ChatGPT處理JSON與XML兩種資料格式時,比較容易出現中文字亂碼。這時候我們可以輸入指令:「請修正這份檔案的中文編碼問題,並確保所有資料按照正確的格式顯示」,ChatGPT就會自動修正錯誤。 【STEP 4】下載檔案 轉檔完成後,點擊ChatGPT提供的下載連結,就能儲存檔案。 唯一要注意的是,下載連結有時效性,最好立刻將檔案儲存到自己的電腦。連結若是逾期失效,轉檔成果都會付諸流水! 【技巧升級】快速下載多個檔案的訣竅 當我們連續處理了好幾個轉檔,ChatGPT生成許多不同的下載連結,如果想簡化下載步驟,我們可以告訴ChatGPT:「將所有成果打包成壓縮檔」,就不需要手動下載多個檔案,省了許多麻煩。 節錄自:商周出版《30個必學的AI行政工作術:搞定會議、行程、簡報、文書、圖表、影音、資料庫,事半功倍,準時下班!》/賴彥廷 著 更多【AI工作術】推薦給你: 4步驟學會運用AI關鍵能力!16種AI工具應用解析|行銷策略指令範例 用AI快速寫Email!ChatGPT Writer、Copilot等中英文電子郵件生成 ChatGPT一鍵生成簡報!Slides Maker讓AI幫你快速做完整簡報 會議紀錄用AI怎麼做?會議逐字稿如何整理?|AI語音轉逐字稿教學 用ChatGPT準備面試練習!AI履歷撰寫和模擬面試必學指令
【104職場力】・AI

軟體業Technical Writer工作在做什麼?技術文件為何不是由PM寫?

軟體產業的Technical Writer工作在做什麼?和PM產品經理工作有什麼差異?Technical Writer職位結合「內容寫作」和「技術寫作」的專業,可以將硬梆梆的技術內容、轉換成一般使用者也能好理解的技術+商業內容。本文作者以自身經驗分享,解答包括Technical Writer工作內容及為什麼不由PM來寫技術文件。 文/朱麒 本文目錄(點擊可快速前往) 1. Technical Writer到底要幹嘛?2. 為什麼需要Technical Writer?3. 為什麼不由PM來寫技術文件? 我曾經擔任PM將近6年的時間、在新職位—Technical Writer工作也已經快9個月的時間,這篇文章想分享關於「寫文件」這件事情。 一開始有許多朋友和我討論說「為什麼不交給PM做就好?」在親身體驗與想過之後,我發現這兩者的定位與價值是完全不同的。這篇文章分享Technical Writer在做些什麼,以及簡單比較跟「產品經理(Product Manager)」的差異。 如果你對軟體產業有興趣、正在當PM的人、或是潛在想當Technical Writer的人看(有這樣的朋友嗎),一起來看看這篇文章吧。 備註:請留意此篇文章的脈絡都是以「軟體開發」的角度來談。 1. Technical Writer到底要幹嘛? 簡單說,就是替公司的產品寫一份「攻略本」。 攻略本是電玩產業的詞,能幫助新手玩家快速學會操作方法、了解遊戲目標,接著就可以比較開心的在遊戲的世界中玩耍。 而「技術寫作(Technical Writing)」就是替公司的產品寫使用文件,用來引導消費者更好地使用公司產品。技術寫作也可以視為公司品牌、產品使用體驗的一環,能影響消費者對於公司產品的整體觀感。 這就像「攻略本」會先告訴新手玩家基本的操作方法,讓玩家在別在超大的遊戲世界中不知所措的亂跑、被怪打死而感到挫折(可能一開始連「基礎戰鬥知識」都沒有就跑出新手村)。 好的技術文件,應該能夠把公司產品複雜的功能與規格,在適當的時間點、用適當的方式告訴使用者。 2. 為什麼需要Technical Writer? 對呀,為什麼不由最熟悉產品功能與規格的程式開發者或產品經理,來寫技術文件就好了呢? 先從「軟體開發者」的角度來說。由於技術文件(例如API Documentation)是技術含量相當高的文件,最好的寫作者當然是由開發者來寫。 然而多數的開發者在寫文件的時候,容易從非常技術的角度撰寫文件—多數狀況是「只解釋程式功能,但不解釋程式對於使用者的目的」。由於程式往往有自己的商業邏輯(例如建立訂單的流程、訂單對帳與請款的方式),使用者在不清楚商業邏輯的前提下直接閱讀,往往一頭霧水。 因此Technical Writier誕生了,這個職位結合「內容寫作(Content writing)」和「技術寫作(Technical Writing)」的專業,可以將硬梆梆的技術內容、轉換成一般使用者也能好理解的技術+商業內容。 Technical writer像是一位翻譯員,要把「技術」國家的語言翻譯給「商業」國家的人理解。 3. 為什麼不由PM來寫技術文件? 行行好,放過PM吧! PM的工作包山包海,要跟業務單位/客戶對需求、花時間整理規格、跟設計師/工程師/QA/營運團隊溝通。 PM職責範圍確實也包含寫產品的規格與規劃,例如: 使用者故事(User Story): 即 As a(使用者), I want(做什麼事情), so that(得到什麼成果),讓產品團隊理解每個功能為誰而做、要做什麼、做完成果。 User Story Acceptance Criteria Test Cases:寫完User Story後,必須要進一步描述這個功能的細節,透過「Given(在什麼情況下),When(當使用者做了什麼),Then(會發生什麼事情)」才能讓工程師與QA(測試工程師)執行。 Product Roadmap:告訴C字輩的老闆接下來的產品發展,這一季要做什麼、為什麼要做、要打哪些用戶、如何衡量成效、成效好與不好的相對應措施是什麼。 可以看到,PM的寫作文件通常是「對內」,告訴團隊接下來要做些什麼、不做些什麼;但Technical Writer通常是「對外(外部使用者)」,告訴使用者產品從哪裡開始用、要完成對應的事情該怎麼做、技術細節要到哪裡去查……等。 PM和Technical Writer的技能樹不同,前者更多在溝通、後者更多在引導。更多文章分享,可至「朱騏部落格」閱讀。 (原文標題:軟體產業中的 Technical Writer 在做些什麼,為什麼「寫文件」這件事情不都交給 PM 做就好?) [joblist_plugin title='更多104【Technical Writer】工作機會' url='https://www.104.com.tw/jobs/search/?keyword=Technical%20Writer' amount='4']
【104職場力】

軟體工程師技能找工作

點擊技能可到對應的職缺工作區 PHPJavaPythonJavaScriptNode.jsHTMLCSSSassLinuxGitMySQLCC++SQLAngularRXcodeReactJSVueGolang程式語言找工作 PHP工作機會 [joblist_plugin title='【PHP】精選職缺' url='https://www.104.com.tw/jobs/search/?jobsource=blog_skill&amp;mode=s&amp;page=1&amp;keyword=PHP&amp;order=15' amount='4'] Java工作機會 [joblist_plugin title='【Java】精選職缺' url='https://www.104.com.tw/jobs/search/?jobsource=blog_skill&amp;mode=s&amp;page=1&amp;keyword=Java&amp;order=15' amount='4'] 軟體工程師薪水找工作 月薪5萬月薪6萬月薪7萬月薪8萬年薪100萬待遇面議
【104職場力】

長網址把手機版撐開?換行之外,還要驗收文字完整

頁面在電腦上看起來正常,縮窄後卻要左右拖動,才能讀完一段網址。把超出畫面的內容藏起來,雖然可能不再出現橫向捲動,讀者卻可能少看到一截。今天只練一件事:讓長字串在窄版換行,同時保留完整文字。 適合自己做網站、使用 AI 建站,或要驗收頁面的小型團隊、工作室與個人。準備桌面 Chrome、可編輯的本機練習頁或測試站,以及一段沒有私人資訊的長字串。先在測試環境操作,別直接修改正式網站。 【先分清「換行」與「刪掉」】 MDN 說明,CSS 的 overflow-wrap 可控制瀏覽器是否在原本難以斷行的字串內加入換行,避免文字溢出行框。anywhere 可作為這類長字串的處理選項;換行是版面安排,不需要把原始文字插入空白或刪短。 但一條 CSS 不會修好所有橫向溢出。固定寬度圖片、表格、容器尺寸與禁止換行的規則,都可能是別的原因。今天先把範圍限制在一段長網址,確認原因與修改結果,不宣稱全站響應式已完成。 【照四步做】 1. 在測試頁放一段虛構長網址。可用 https://example.com/ 後面接五次 abcdefghijklmnop,作為一整段純文字,不需真的開啟或建立該網址。把完整字串另存記事本,當作比對基準;不要用登入連結、重設密碼網址或私人資料。 2. 保存 A 原版,複製為 B 候選版。A 保留原本樣式,B 只在放這段文字的容器加上 overflow-wrap: anywhere;。若使用編輯器或 AI 協助,請明確要求只改這個區塊的換行規則,保留原文,不靠縮小字體、裁切內容或刪字來消除溢出。 3. 在 Chrome 開發人員工具開啟裝置工具列,選 Responsive,輸入寬度 320,再載入 A、B。看文字是否超出右邊,以及頁面是否能被左右拖動。這裡的寬度是 CSS 像素,不是手機型號,也不是把瀏覽器預覽比例調成 50%。兩版要用相同寬度、字體與內容比較。 4. 從 B 選取並複製整段文字,貼到記事本與基準核對,確認開頭、中段與結尾都在。再切回較寬視窗看一次,記下實際寬度與結果。不要因為窄版好看,就略過文字是否被截短或其他區塊受到影響。 【今天實際做的範例】 2026/11/04,我建立兩份本機 HTML,兩版都放同一段上述虛構網址。以 Chrome 自動化設定 320×700 的視窗內容尺寸,A 使用一般換行,B 加上 anywhere。這是設定瀏覽器視窗內容寬度,沒有宣稱已手動操作裝置工具列。 讀取頁面尺寸時,A 的可用寬度為 320、文件捲動寬度為 1052;B 的兩個數值都是 320。兩段原始文字逐字相同,表示這份範例中 B 消除了文件橫向溢出,同時保留文字。兩頁、截圖與量測結果已保存。 這些數字只屬於本機教材,會受字體與樣式影響,不是讀者必須重現的固定標準。今天沒有測真實手機、其他瀏覽器、螢幕閱讀器或全站版面,也沒有測網址連結能否開啟;寬版回查留作讀者練習,不能算成本日已測成果。 【怎樣算完成驗收】 交一張「版本/測試寬度/橫向溢出/文字完整性/待查問題」紀錄。預期 B 在本題窄版可讀、全文仍在;若還能左右拖動,就找出是否另有元件溢出,不直接把結論改成通過。 尺寸相等也不能單獨當完成證據。若套了 overflow: hidden,文字可能只是被藏住;若用了省略號,畫面可能只剩一部分。要同時檢查顯示、完整內容與實際可用性,不能只盯一個數字。 【常見錯誤與你的作業】 第一是把長網址手動加空白,導致複製後內容改變。第二是為了塞進畫面把字縮到難讀。第三是只試一個尺寸就說所有手機正常。Chrome 官方也提醒裝置模式只是近似模擬,重要頁面仍需安排真實裝置測試,沒有做就記未測。 若遇到表格、程式碼或需要保留排版的區塊,先確認閱讀需求,不要直接把本題做法套到每個元素。有些內容可能需要區塊內捲動或其他設計,應另訂驗收條件。 你的作業是完成 A、B 對照,再選一段自己有權使用的長字串重做。先寫預期,再記實際結果;不會編輯 CSS 時,可把原文、截圖與測試寬度交給製作者,要求說明改動位置。沒有改動權限就先交檢查紀錄,不把建議寫成已修復。 本機頁面與瀏覽器檢查可零額外工具費完成;網站編輯器、主機與委託修復可能另計。遇到登入或方案限制就記未完成,不需為這題購買額度。成果是一份能重查的窄版文字驗收,不是無障礙認證或排名承諾。 來源(2026-11-04 查核): https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap https://developer.chrome.com/docs/devtools/device-mode 整理/配圖:客脈 AI。配圖為 AI 示意圖,非真實網站或手機實測畫面。
Rayda・客脈 AI 實作筆記

ChatGPT生成Apps Script程式碼4技巧!Google Sheets自動化範例用AI加持

想把重複的Google Sheets試算表工作自動化,用ChatGPT就可以快速生出可用的Apps Script程式碼,相較於手動編寫、錄製巨集,使用生成式AI的技術門檻最低!作者分享2個範例,並提醒用AI生成Apps Script程式碼的Prompting技巧。本文節錄自《AI 加持!Google Sheets 超級工作流》。 文/杜昕 Mic Tu 本文目錄(點擊可快速前往) 撰寫Apps Script程式碼的3種方式使用生成式AI生成Apps Script程式碼▶ 範例1:資料統計▶ 範例2:生成圖表用AI生成Apps Script程式碼的Prompting技巧 Google Apps Script(以下簡稱Apps Script)是一個強大的雲端腳本語言,讓使用者能透過類似JavaScript的程式碼整合Google的試算表、文件、簡報、日曆等功能,自動化重複性的工作,完全免費且不需要安裝任何開發環境即可完成。 若要在Google Sheets中使用Apps Script,只要點選「擴充功能 → Apps Script」進入Apps Script的編輯器介面,便能開始撰寫程式。 撰寫Apps Script程式碼的3種方式 撰寫Apps Script程式碼的方式可分成手動編寫、錄製巨集、使用生成式AI 3種,優缺點分別如下: 撰寫方式優點缺點手動編寫完全根據需求客製化程度高。需要花較多的時間學習與實際撰寫。錄製巨集錄製後自動生成程式碼,只需根據需求手動調整即可。錄製的程式碼較基本,複雜的需求可能要大幅的手動調整,因此仍需具備程式基礎。使用生成式AI可直接複製貼上生成的程式碼,大幅提高撰寫效率,也能解決較複雜的案例。撰寫程式碼時會備註各程式碼的用途,可供快速學習。較冷門的需求可能會回答錯誤,若要提升生成品質則會需要訂閱。有時程式碼較冗餘,影響執行效能與可閱讀性。 雖然3種方式皆有優缺點,但使用生成式AI需要的時間、技術門檻最低,因此後續各章節主要會使用ChatGPT生成程式碼,提供輸入的Prompt及對應的輸出。 使用生成式AI生成Apps Script程式碼 本節將使用兩個範例說明如何使用ChatGPT生成程式碼,只要將程式碼複製到Apps Script中並執行函式即可,兩範例的需求、Prompt與ChatGPT (4o mini)生成程式碼如下: 本節範例使用之「會員資料檔」Google Sheets 會員資料檔範例(圖/旗標) ▶ 範例1:資料統計 需求:統計會員資料檔中的會員職業,各職業依會員數多到少排序。 問:生成Apps Script程式碼,統計工作表「會員資料檔」的 E2:E 每個值出現的次數,依次數由高到低輸出到工作表「5.4.3 使用生成式 AI 生成程式碼」的 A:B 中,並將兩欄的標題分別設為「職業」和「會員數」。 ChatGPT輸出結果(以下為作者撰寫時生成之版本,每次生成可能有些許差異,請各位讀者稍加留意): ▶ 範例2:生成圖表 需求:延續上例,將統計結果繪製成柱狀圖。 問:生成Apps Script程式碼,將工作表「5.4.3 使用生成式AI生成程式碼」的 A2:B 繪製成柱狀圖,兩欄分別為「職業」和「會員數」,並貼上至工作表的 C1 儲存格中。 ChatGPT 輸出結果: 兩範例的最終結果如下圖所示: (圖/旗標) 用AI生成Apps Script程式碼的Prompting技巧 在撰寫Prompt時要清楚描述需求,以增加生成式AI正確的機率,可以使用以下的Prompting架構增加正確輸出的機率: 問:(1) 生成Apps Script程式碼,(2) 完成以下步驟:1.&nbsp; (3) 將工作表「○○○」的 ○○:○○ 儲存格&nbsp; (4) 匯總 / 繪製圖表 / 計算...,其中 A / B / C 欄位依序為 △△△ / △△△ / △△△…。2.&nbsp; 將 …3.&nbsp; 將 …,(3) 把最終結果輸出至工作表「○○○」的 ○○ 儲存格。 (1) 在一開始就提及Apps Script,避免AI輸出其他程式語言。 (2) 若要求非常複雜時,建議化為多個步驟,或是分多次Prompt漸進式說明。 (3) 清楚說明資料來源與最終輸出的位置,提及「工作表/儲存格/範圍/欄/列」避免判斷錯誤,並建議用括號標示工作表名稱。 (4) 說明計算過程時可以說明應用場景,但要說明各欄位的名稱,避免判斷錯誤。若欄位的名稱較難判斷資料型態時,可以增加舉例說明。 節錄自:旗標《AI 加持!Google Sheets 超級工作流》/杜昕 Mic Tu 著 推薦閱讀: AI家教上線!ChatGPT和Gemini學習模式實測4招馬上用 AWS免費課程幫你打造AI「學力」證明,攻搶12萬AI職缺! 除了ChatGPT還有哪些生成式AI?16種AI工具應用解析
【104職場力】・AI

微軟推出 AI 除錯神器「Debug-gym」:會學習、會互動,開發者超有感!

近年 AI 在寫程式這塊越來越強,從 GitHub Copilot 到 ChatGPT 都能幫你補全程式碼、寫函數、跑出範例。但——寫出來不代表就能跑得動,**程式出錯才是真正考驗的開始。** 微軟最近丟出了一個開發者圈子超關注的新工具:**Debug-gym**。簡單說,這是一套「讓AI學會怎麼除錯」的訓練平台,而且跟過去被動回應式的AI工具不同,它是主動參與的! Debug-gym 是什麼? Debug-gym 不是一套傳統的「除錯工具」,而是一個給 AI 模型用的「除錯訓練場」。它會把程式執行錯誤的環境模擬出來,讓 AI 像人類一樣一步步找問題、做測試、嘗試修改,再看結果是不是改善了。 這就像你在 IDE 裡一邊下中斷點、一邊觀察變數變化,但這次主角是 AI 它自己在操作! 它能做什麼?可整合外部工具,自我優化除錯邏輯 Debug-gym 最大的亮點,就是它不只會「看懂錯誤訊息」,還會自己去呼叫外部工具(像是 Python 測試框架 `pytest`、Linter、或 IDE plugin),然後依據回傳的結果進行修正。 這代表: - AI 除錯不是亂猜,而是**根據上下文與測試結果調整建議** - 能根據開發環境不同,整合最合適的工具 - 每次錯誤處理都能成為「下一次更聰明的學習經驗」 目前支援 Python 程式語言,未來有望支援 JavaScript、C++ 等常見開發語言。 社群怎麼看這項技術? Debug-gym 在 Reddit、Hacker News 引發不少討論,而台灣與華語圈的開發者社群也已經開始關注這項技術: 🔥 社群反應熱點 - 「終於不是只能 auto-complete,AI 開始會 debug!」 - 「這會不會是下一代 Copilot 的核心?自動除錯就太強了」 - 「可以跟 CI/CD 結合嗎?每次 commit 自動測、自動建議修正?」 🧠 實用情境討論 - 新手工程師在學習除錯流程時,可以邊看 AI 如何分析錯誤訊息邏輯。 - 團隊在 code review 前,可先讓 AI 先跑一輪除錯與測試建議。 - 未來整合 GitHub Action,針對 Pull Request 自動做初步除錯建議也不是夢! 目前已有不少部落客與工程師在 YouTube 和 Medium 開始試用 Debug-gym 並做教學影片,預期會成為接下來開發圈的熱門話題。 為什麼這麼重要? 程式碼生成工具已經普及,下一步是什麼?就是**讓AI能從錯誤中學習、主動修正。** Debug-gym 讓 AI 不再只是寫程式的輔助者,而是真正能「解決問題」的夥伴。 開發者不只節省除錯時間,也能透過觀察AI的邏輯提升自己判斷能力。對企業團隊來說,更能強化開發自動化、減少人力排查成本。 結語:AI 除錯的新時代,已經悄悄來臨 如果 Copilot 是你的程式小助手,那麼 Debug-gym 就是訓練 AI 成為「除錯高手」的健身房。現在還是早期階段,但很可能會成為未來開發流程中不可或缺的一環。 無論你是初學者還是資深工程師,都值得關注 Debug-gym 的發展,說不定下次你寫的程式出現 bug,最先發現錯誤的不是你,而是那位 AI 除錯搭檔。 📌 想掌握更多AI動態,歡迎關注本教室追蹤後續更新!
104學習・AI 趨勢報-科技愛好者的產地🤖

有任何收穫或想分享的,都來和大家一起聊聊吧!