筆記
前後端的實作心得，相關資訊技術研究筆記。從大學時期的 Java 作業一路到 Google Maps、GPS 系統與 AWS，也記下幾個接案專案的做法。
- 52
EC2 被鎖住不能使用 SSH 登入 怎麼辦？ 改 sshd_config 時手殘把 Match User 註解掉，結果全站只剩 SFTP、連 root 都上不去。記下嘗試過的幾條死路，以及最後把 Volume 卸下來掛到另一台 EC2 修好再掛回去的完整步驟。 - 51
自己做自己的 CocoaPods 把自己常用的 Lib 包成 pod 套件。從 pod lib create 的每一個提問怎麼答、podspec 要改哪些欄位，到寫範例、打 tag 部署到 trunk、在別的專案取用，最後連怎麼刪除都記下來。 - 50 CocoaPods 筆記 每次都會忘記的 CocoaPods 指令：安裝、查版本、pod init、在 Podfile 加套件、pod install，以及裝完之後要改開 .xcworkspace 而不是 .xcodeproj。
- 49
2017 macOS High Sierra 安裝 PHP Apache 筆記 系統更新後內建 PHP 變成 7、imagick 一直裝不起來。用 Homebrew 換掉原生的 Apache 與 PHP，並裝上 sphp 指令來切換版本，順手記下新的設定檔位置。 - 48
LINE TW TechPulse 2017 抽中 LINE 年度開發者大會的整日筆記。從 Messaging API 新功能、LINE Things 物聯網平台、In-App Web Framework 到 LINE TODAY 的高流量架構與 QA 測試，逐場記錄重點。 - 47
聊天地圖 LiveMaps 純前端的即時地圖聊天室，靠 Firebase 的 Realtime Database 與 Hosting 撐起來。也記下用 watchPosition 搭配 enableHighAccuracy 取得瀏覽器定位時遇到的誤差問題。 - 46
Google Maps 標記叢集 Marker Clustering Marker 太多時視角一拉遠就擠成一團。市面上的套件都試過，最後還是自己刻一套可自訂的叢集工具，並比較 moveRun 與 runAll 兩種演算型態在初始速度與閃爍上的取捨。 - 45
Google 試算表當資料庫並取得 API 把 Google 試算表發佈到網路，就能當成免費的唯讀 API 來用。逐步截圖說明怎麼取得文件 key，以及 cells 與 list 兩種回傳格式的差別。 - 44
Pokémon Go 補給站地圖 進化後 CP 的推測工具，加上網友回報累積的全台巢穴與補給站分佈圖。巢穴資料放在 Google 試算表，前端用 AJAX 取回再畫到地圖上，查詢全在瀏覽器端完成。 - 43
實作台北 • 藝文活動 接新北市文化局的藝文活動開放資料，用 PHP 編成靜態 HTML 丟上 S3。上傳時比對 md5_file 做差異化更新，排程每天早上六點抓一次最新資料。 - 42
2016 新北兒藝節 新北市兒童藝術節活動官網的前端。這年把動畫從 jQuery Animate 全面換成 CSS3 Animation，靠時間差依序控制，畫面比前一年流暢許多。 - 41
數字翻轉計數器 用 SCSS 的 for 迴圈搭配 calc 排出 0 到 9 的位置，再用 class 切換 top 做出翻轉效果。整篇逐步配圖，從疊在一起的初始狀態一路做到 overflow 隱藏與 transition。 - 40
瀏覽器 Console 上畫 QR Code 寫給會打開 DevTools 的人看的彩蛋。用二維陣列表示 QR Code 的黑白點，console.log 搭配 CSS 印出來，並用 text-shadow 蓋掉換行造成的行距空白。 - 39
2016 六房媽祖過爐 GPS 系統 與神之路關團隊合作的六房媽過爐定位，首次跟 ASP.NET 後端串接。採前後端分離，這次負責前端版型與 JavaScript，並加上可檢視路關、切換 GPS 點的下拉選單。 - 38
2016 北港迎媽祖 為家鄉做的非官方網站，設計、前端、後端、系統、攝影到上稿都一個人完成。談 Material Design 的版面取捨、遶境動線的地圖動畫，以及活動當天的流量與 GPS 回報架構。 - 37
2016 大庄媽 GPS 系統 與大庄媽交流協會合作的進香定位。這次改用 Google 試算表當路徑儲存空間，Android App 用 Sheets API 寫入、前端再取回畫成路線，不必架資料庫也減少 AJAX 衝擊。 - 36
嘉豪光學 宙思設計的官網專案，前端刻板、後端資料庫到系統架設都獨立完成。框架用 OACI 4.1，前端搭 Compass 管理，後台上稿沿用宙思官網的 Layout 再加需要的功能。 - 35
VG 鉅臣 純前端的外包案。網頁檔名刻意用中文，一來增強 SEO，二來方便素材人員對應。相似的畫面交給 jQuery Render，版型要換時就不必逐支 HTML 改。 - 34
實作 jQuery ScrollView 套件 想讓手機上水平瀏覽圖片更像 App，於是用 jQuery UI 的 Draggable 固定水平軸，再靠 Touch-Punch 補上手機失效的問題，包成一個 jQuery extend function。 - 33
宙思設計 長期配合的設計公司官網，分兩期。第一期用 CodeIgniter 架在主機代管，第二期考量作品區的大量圖片流量，整套搬上 AWS EC2 搭配 S3，後端也換成 OACI 4.0。 - 32
雙北市行政區域範圍座標 Google Maps API 拿不到行政區的範圍座標，只好自己把雙北市畫完，再放上 GitHub 讓大家能 fork、發 PR 一起補齊其他縣市。 - 31
億進建築經理 只負責前端切版的外包案，用自己的 OAF2E 1.8 框架，Compass 編譯 SCSS，首頁 Banner 輪播由 jQuery 搭配 CSS 完成。 - 30
全景相簿 Theta S 360 入手 RICOH Theta S 之後做的 360 度全景相簿。當時官方播放器還是 Flash，索性用 JavaScript 自己寫一個，並刻意拆成純前端與純後端兩個專案來練前後分離。 - 29
在 Google Maps 內多邊形取點 Point in Polygon 在地圖上畫一個不規則多邊形，撈出範圍內的座標點。前端先算出東北與西南的邊界一起送給後端，後端分兩步：先用矩形範圍進 MySQL 粗篩，再逐點判斷是否落在多邊形內。 - 28
實作 Google Maps 右鍵選單 在地圖上規劃路線並匯出經緯度的工具。難點是右鍵插入節點：要把地圖座標換算成畫面的 left 與 top，還得把 Polyline 拆成 Marker 之間的一段段才能各自監聽事件。 - 27
PHP 實作 ElasticSearch PDO 物件 架在 Elastica 之上的一層工具，把 ElasticSearch 的增查改刪包成類別方法，並把查出來的每一筆封裝成物件，各自帶著可繼承的修改與刪除方法。 - 26
天氣地圖 Weather Maps 用中央氣象局的資料做的天氣地圖，可查各地預報與逐時溫度，關注清單存在 localStorage。改版時把後端出 API 的架構換成 PHP 編成靜態 HTML 上 S3，順便把整理好的 Json 也公開成 API。 - 25
OAHUD 自己做一個 iOS 的 HUD。一開始學 MBProgressHUD 加在 view 底下，結果 NavBar 與 TabBar 都蓋不到，改用 UIWindow 才解決。也記下中間那圈彩色轉圈是怎麼用兩層 view 疊出來的。 - 24
CatMap 第一個比較完整的 iOS App，拍照上傳、分享與地圖都有。用客製 TableViewCell 做動態訊息頁，地圖的叢集改造自 REMarkerClusterer，前後端與 API 都自己來。 - 23
實作 Instagram Maps 相片地圖 仿 Instagram 的地圖照片模式。移動地圖時先算出東北與西南的範圍座標送去後端撈點，回傳後用 MarkerWithLabel 顯示照片，縮小時再交給 MarkerClusterer 併成一個。 - 22
Google Maps 大富翁 拿 Google Maps 的 Marker 與 Polyline 當棋盤，做出路線、節點、角色與蓋房。這版加了電腦對戰，也解掉兩個角色落在同一點時要錯開位置的問題。 - 21
歐芙娜 OFNA 前端、後端到系統部署都包的外包案，框架用 OACI 1.7。多國語系刻意共用同一組網址，靠 Session 與 Cookie 記住選擇，框架載入 Controller 時再決定要吐哪個 View。 - 20
寬堂空間設計 第一次接視差滾動的案子，只做了兩層所以差距不算顯著，但捲動時背景仍看得出位移。後端沒用框架，單純用 PHP 處理留言寄信。 - 19
實作 Flickr API 搜尋器 輸入關鍵字就撈 Flickr 熱門照片的純前端小工具，用 Flickr Tag API 取資料，再用 Masonry 排成瀑布流。多組關鍵字可以用空白或逗號隔開。 - 18
用 jQuery 實作 Youtube 播放器 練習 Youtube API 的操作，用 Local Storage 記住播放清單，再靠按鍵事件做出可循環播放的簡易清單。作者自己也說這功能有點多此一舉。 - 17
用 GitHub 架設 Blog 不用 octopress 那類現成工具，改用 PHP 加命令列自己刻一套。build.php 把 Markdown 編成靜態 HTML 推上 gh-pages，順便產出 sitemap 與 robots.txt。 - 16
實作 Material Web Design 參考 Material UI 風格做的一套前端元件，用 Gulp 與 Compass 建置，架在自己的 OAF2E 之上。lib 內同時附 SCSS 與 CSS 兩種用法。 - 15
實作 jQuery Navbar 套件 一個 jQuery extend function，樣式靠 SCSS 變數與 Extend Options 調整，開發者可以自行換掉外觀。 - 14
用 jQuery 做迷宮遊戲 基於 jQuery 的迷宮遊戲，手機上可以用重力感測器搖著玩。附一支地圖產生器可以自訂路線，另外 3D 分支還藏了一個用 CSS transform 疊出六個面的立體視角。 - 13
奇拓室內裝修設計 與宙思設計合作的第一個外包案，只做後端與系統，前端刻板由對方負責。後端是上稿系統的基本增查改刪，用 PHP 5.6 搭 CodeIgniter 2.1.4。 - 12
實作 jQuery scrollSliderView 套件 一個支援 RWD 的 jQuery extend function，架構在 jQuery 之上。 - 11
實作 jQuery imgLiquid 套件 處理圖片置中的 jQuery extend function。參考了 imgLiquid 但做法不同：不把 img 藏起來改設父層背景，而是讓 img 走 absolute 定位再靠父層 overflow 裁切。 - 10
2014 OACI 以 CodeIgniter 2.1.4 為底自己長出來的 PHP 框架，加了 PHP ActiveRecord 與 OrmUploader，整併 Compass 與 Gulp，並參考 RubyGems 補上建立、刪除、Migration 這些命令列管理指令。 - 09
用C語言寫漫畫下載器 用 C 語言在終端機畫出模擬 BBS 的版面，配合 wget 把線上漫畫抓下來。介面走自訂的檔案規格再由程式格式化輸出，等於自己刻了一套簡單的 View 層。 - 08
用 PHP 實作雲端空間與部落格 大四作品，接續相簿系統再往社群方向長：上傳檔案、部落格、隱私權限與好友管理。權限模式參考無名小站，版面刻意模仿當時的 Facebook，檔案管理介面則參考 phpMyAdmin。 - 07
用 jQuery 做一套遊戲 大學時期的練習作，全站效果都由 jQuery 完成，圖示與視覺自己用小畫家與 PhotoImpact 畫。原本構想過商城與地圖劇情，最後沒有做完。 - 06
用 PHP 實作網路相簿 大三課餘寫的相簿系統，PHP 5.4。當時還不知道框架是什麼，索性自己刻一套，做出登入、上傳、編輯與線上人數，版型也一個人包辦。 - 05
Arduino 新銳展翅創意競賽 大三專題，用 Arduino UNO 接上多種感測器，彼此以 XBee 無線通訊，把收集到的車況資訊回報給騎乘者，做成一台基本版的智慧型腳踏車。 - 04
用 Java 實作 Assembler 大二系統程式課的作業，把 SIC XE Literal 的組合語言編譯成機械語言。選 Java 是因為 GUI 比較容易做出理想的操作介面。 - 03
用 Java 實作 Plurker 大三時用噗浪官方 API 做的 Java GUI 社群管理程式，有多角色登入、發訊息、回覆，還有一個自動回覆機器人。名字就是 Plurk 加上 er。 - 02
用 Java 實作 MSN 學 Java 時發現 Socket 可以走 UDT 與 TCP，就拿它配上 Java GUI 做了一套主從式架構的通訊軟體，由伺服器幫客戶端牽線，再以自訂格式模擬 P2P 的溝通。 - 01
用 Java 實作小畫家 大一下高等程式設計的學期作業。做完之後對封裝、繼承與多型這些物件導向特性熟悉不少，也第一次能把成品包成 .jar 分享給朋友。