自我簡介 (現居 / 過去學 / 經歷等)

現居新竹。若能加入工作室的 Web Camp，7月中旬可以搬回高雄，每日通勤往返工作室。

工作經歷

• 2012: 台灣大學生物環境系統工程學系畢
• 2013-2015: 台灣大學氣候天氣災害研究中心助理
• 2016-2017: 外貿協會半年期國際貿易陪訓班，自學 Python, Android 開發
• 2017-2022: 任職究心公益科技，公司以地理資訊系統產品為主，開發防災相關軟體。 在職期間業務主要集中在 Android 開發和地理資料處理
• 2022-至今: 在「台灣劇烈天氣實驗預報產品」計畫¹ 擔任約聘顧問， 協助定期預報資料的處理流程及前端頁面的建罝與維護。

社群經歷

• 2015-至今: 加入磐石救難協會，依消防單位需要不定期出勤，協助山難搜救任務
• 2017-至今: 加入 Outdoor Safty Lab²，無償協助開發山域使用的資訊產品，包括：
  • 魯地圖
  • 台灣大地羅盤
• 2017-至今: 定期參與開放街圖台灣社群/台灣維基媒體協會活動，包括
  • 維護/同步圖資
  • 台北每月定期聚會
  • 協助有意願的團體辦理地圖松活動
  • COSCUP 相關議程軌工作人員/講者
    • 2018「台灣登山向量圖磚」
    • 2019「自幹向量圖磚」
    • 2020「沒有60萬？試試架設不花錢的地圖服務吧」
    • 2022「帶著360相機拍街景」
  • 用360相機拍攝街景，並上傳至開放資料集
• 2021-至今: 加入新竹縣救難協會，協助會員資訊、網站維護業務， 依消防單位需要不定期出勤，協助山難搜救任務

開源專案

曾開發或對以下專案進行貢獻，所有在 GitHub 的專案貢獻可見詳細列表:

1. 地理資訊相關: 如魯地圖, tilemaker
2. 中文化文件: 如MDN, Rust 中文社群
3. LLM 相關: 如利用 OPANAI API 進行電子書翻譯³
4. CLI 工具: 如 Arch User Repository 中的 [gist lite]

描述你過去近期的一週日常生活 (一至日)

近期嘗試參與開源專案 Maplibre 的賞金項目⁴，透過解決該組織專案的 Issue 賺取報酬。 目前已完成的項目大多為說明文件的修訂，相關列表可見此連結

過去幾週正在解決前端頁面中，3D 地型啟用後的攝影機視角問題⁵。 由於我對網頁前端算是新手，加上專案的規模稍大，目前有點陷入苦戰。

日常生活大致是往返咖啡店/圖書館和住處，使用筆腦、筆電處理以上問題。

大約每週會前往位在台大約聘的辦公室一次，了解其它助理是否有需要協助。

有時也會和登山社的朋友上山下溪，例如上週日(6/25)和朋友到東北角溯半屏溪。

描述你過去深入研究的主題（不限課業、興趣或是與朋友討論而進一步研究都可以）

將政府開放資料大量匯入開放街圖(OpenStreetMap)

由於一些政府公開資料不一定完全符合社群需要，在匯入開放資料集前，需要進行不少前處理。 我自己較為擅長用基本的 CLI 工具處理資料，並根據相關 API 批次匯入。

這些案件中，有些是公務員請託，有些是登山的圈子需要。 因此前處理的操作上，都需要依各種需求撰寫邏輯，並且和社群成員反覆確認可行性。算是同時需要大量溝通的作業。

相關程式碼和細節可以參考：

• 臺中市門牌點位資料
• 台電電桿點位資料

為圖資回報 APP 加入 3D 動畫

StreetComplete 是 OSM 生態系中，屬一屬二優秀的圖資改善工具。其開源專案由德國政府和其它組織資助。

由於在市區中，圖資會顯示建物的 3D 物件，在高樓林立的地區不利用使用者精確指定回報位置。 因此「在回報時臨時取消 3D 物件，並不要讓使用者感覺突兀」的 issue 被提出。

我在當時主動研究背後使用框架 Tangram 的 shader 操作方法，並成功製作出建物緩慢下降的動畫。 雖然相關的程式碼只有數行，但當時仍花了不少時間了解背後知識。

雖然最後因性能問題，動畫的部分沒有被採用，但相關的 PR 還是有被合併， PR 可見: https://github.com/streetcomplete/StreetComplete/pull/1607

是否曾經有過任何活動的工作人員經驗？解決過什麼問題？

近兩年因 OSM 社群有機會和維基媒體基金會申請專案經費，因此規劃了一系列的街景拍攝活動。 通常流程是：

1. 選定開放資料中，街景較少或人文背景較濃厚的路段作為活動路線
2. 使用車頂的360相機沿路拍攝全景照片
3. 將全景照片的地理資訊加入 EXIF，上傳至 Wikidata, Mapillary, Kartaview 等支援 OSM 編輯使用的街景平台

在活動中，我通常擔任車輛駕駛，以及照片的後處理。

由於我們使用的 insta 360 相機，其官方後期處理軟體僅只支援 Windows 和 Mac， 同時因為一般使用情境下，廠商通常傾向針對影片進行處理而非單張照片， 因此在批次處理上，定位資訊的準確性需要其它方法來補救。

所以我針對活動的需要，使用 docker, shell script 等工具，結合各項開源專案撰寫相關工作流程。

程式碼及使用方法可以參考我的 gist 頁面

回憶過去，感恩與生氣的經驗各描述一件事

2016年在自學程式時，曾參與由 Vicotr 主持的高雄 Python 定期聚會。 那算是我第一次參加程式相關的社群活動，一邊驚訝於各主持人的熱情分享，也實在感受到在開源社群在推廣上的韌性。 在此之後我漸漸了解到由 GNU 和其它組織開始的各種開源推廣歷史，這些資源也實實在在地助我成長至今。 因此我對於實體活動的主辦人、社群規則的維護者，或者網路上的心得分享文章都抱持感恩和敬意。

近幾年對於新聞媒體的各種亂象感到生氣。 例如在疫情期間，不時有各種區解、造謠的報導，導致民眾接種疫苗意願低落，並失去對政府和從業人員的信任。 大部分生氣的成因在於，指揮中心明明堅持每日公開資訊並主動進行溝通， 但總會有媒體昧著良心散播謠言，心中為背後努力的這些人感到不值。

是什麼契機讓你萌生學習前端的想法？

主要是自己的 side project 需要相關知識。

目前我想要做的東西有兩樣:

1. 台灣登山地圖的相關產品，包括利用 MVT 格式的向量圖磚進行更多視覺上的操作，以及健行者在戶外的回報機制
2. 我的專案 mapclay 主要是想通過類似 mermaid, revealjs 等撰寫簡易語法的方式， 讓使用者快速產生可用的地圖相關元素，或者是更進一步的 story map。

再來是目前參與的一些開源專案對於前端背景有一定要求，我需要更有系統性的學習各種框架、測試等知識。

想來好想的 Web Camp training 的主要原因？

雖然至今為止通過自學，我的確能如願從事軟體相關的工作，並在我一直感興趣的 GIS 領域持續解決相關問題。

但由於是一路上都是自學，在加上之前公司規模較小，因此幾乎沒有 mentor 和同儕可以細細討論技術細節， 在開發上始終擺脫不掉閉門造車的感覺。

近期在 side project 中總覺得不斷碰上瓶頸，剛巧就想到好想工作室這個學習環境， 我希望可以換個環境，在有指導的情況下有系統的學習前端知識，並能持續和同儕討論交流。

再來，因為我一直都想嘗試遠距/接案工作。因此希望能更直接接觸到有相關經驗的工作者。

另外一點則是因為一直待在開放資料相關的社群(OSM, Wikidata)，使得我也想在有其它開發者的場合多多宣傳。 若能有機會待在工作室，我會希望為大家深入講解這些開放資料的生態環境，以及如何在開發中使用它們。

描述你未來想工作的城市？為什麼想在這個城市工作？

我對於工作地點目前沒有特殊想法。不過既然唸書和工作在北部待了10年左右，我也想回到南部老家附近換個環境生活。

長期來看，雖然我並不排斥進辦公室與人當面交流，但還是希望自己具備遠端工作能力。 只要能讓自己隨意選擇居住地點，不論國內外的工作機會都想嘗試看看(希望是能方便進行戶外活動的地方)。

獲得消息來源（朋友介紹、Dcard、Facebook 或 PTT 等）。

以前就有在媒體上知曉台南有好想工作室這個單位，以聚落型式針對軟體人才進行培訓。 (應該是在疫情剛開始，大家有在製作口罩地圖的階段)

有時我會想，要是 2017 年就有機會加入學習，是不是職涯會有很大的不同…

請閱讀下方的 研究小題目，回答問題且附上研究過程，並且敘述研究問題遇到困難時，心態如何調整以及解決？

在前端方面，雖然我還是菜鳥，但也自學了一段時間，通過 MDN 和其它資源，對於基礎知識有一定掌握。 所以這邊我還是介紹一下自己目前開發中的前端專案 mapclay 會比較合適：

緣起

現代 Web Map 並沒有統一標準，各家公司/組織各自推出相關的開發框架。 因此若需要深入製作地圖產品，開發者需要足夠的前端知識並深入鑽研某一特定框架。

我希望能夠透過簡單的自訂語法，在這些框架之上加入抽象層，讓開發者可以快速調用相關的 API， 並利用它快速開發能讓終端使用者製作地圖的產品。

使用方式

最簡單的使用方法是在 html 中加入以下內容：

<div class="map"></div>
<script type="module" src="https://unpkg.com/mapclay@latest/js/mapclay.js"></script>

mapclay 模組會自動識別帶有特定 CSS selector 的元素(預設是class=map)，並根據內容和預設值進行渲染。 若像上面不指定任何內容，地圖元素預設顯示在台灣：

隨著內容變化，渲染結果也會改變，例如：

<pre class="map">
use: maplibre
width: 40vw
height: 300px
center: [142.73, 43.83]
</pre>
<div class="map"></div>
<script type="module" src="https://unpkg.com/mapclay@{VERSION}/js/mapclay.js"></script>

以上使用<pre>多加了一個地圖元素。配合 yaml ，可以指定地圖大小、使用的框架和地圖中心，渲染結果如下：

與其它前端工具配合的進階用法可以參考Integration一節

使用技術

mapclay.js工作原理僅有：

1. 使用 CSS selector 獲取有關地圖渲染的元素。
2. 解析每個元素的內容，預設使用 YAML 格式。
3. use 屬性用於決定渲染方式，預設值使用 openlayers。
4. 對於每個渲染方式都有對應的 Renderer JS class，它們使用 renderMap() 將渲染地圖。 開發者需要針對自己需求撰寫 Renderer，maplclay.js 預設提供三種 Renderer，分別是：
   • BasicLeafletRenderer.js
   • BasicMaplibreRenderer.js
   • BasicOpenlayersRenderer.js 分別對應到目前最大眾的開源地圖框架 Openlayers, Leaflet 和 Maplibre。

詳細工作流程可見維基頁面