web app 遇到 android 手機時的除錯方式

因為平台限定/java語言/複雜開發環境等等因素， 我一直不想學寫手機 app。 近年來我自己最常自寫自用的， 是 web app， 尤其是 scatplot 資料視覺化。 可是偶爾會遇到電腦瀏覽器可以正常閱覽， 手機瀏覽器卻出錯的狀況。 很討厭的是： 手機上的瀏覽器沒辦法開啟開發者 console 來除錯。 以下筆記三個不完美的 「手機/平板瀏覽器看 web app」 除錯方案， 用一部 Galaxy Tab A7 lite / SM-T220 測試。

scatplot: 一張試算表， 散點圖畫到飽

大選過後， 一直想畫 「X黨 vs Y黨在各縣市得票比例對照圖」。 過年時節在家躲疫情， 終於有時間完成了一個小專案放到 github 上： scatplot 。 也請參考舊文 「三種方式產生 scatter plot / bubble chart」。 不只是程式宅， 我相信政黨智囊團、 財報型股民、 社會科學家、 自然科學家.. 任何需要以視覺化方式理解數值資料的朋友們也會喜歡這幾個 demo 網頁： 希臘式優格比較表、 揪出手機上的腫脹軟體、 LLM 比較表 br26、 LLM 比較表 aa25、 全球各國電價比較表、 陳時中團隊的 covid 19 防疫成績、 資料視覺化破解源自黃珊珊的假消息、 股票財報指標圖、 新聞頻道轉台運動、 2018 兩政黨各縣市得票比例對照圖、 太陽系天然衛星軌道常數、 [2022/12 後續有再補充與更新較新的圖片與文章連結]。

DataTables 的固定表頭、 排名、 置中

先前寫的小程式 jesp 可以拿來把好幾個 csv 檔 join 在一起， 並且方便按照任何欄位排序。 其中表格資料好用的互動排序功能， 靠的就是 jQuery 的 DataTables 外掛。 兩年多前曾在 「jQuery 無痛讀檔」 裡初次使用； 現在重學一次， 並且選用幾個好用的效果。

在手機上開啟本地的 html 跟 svg 檔

Android 作業系統的自由度遠遠不及 GNU/Linux。 例如瀏覽器的功能明明就可以開啟 html 檔或 svg 檔， 但若這個檔案在本地而不在雲端， android 手機就是不提供 「以瀏覽器開啟」 的選項。 我覺得這是 google 的陰謀 -- 就像 chrome 的禁讀令 一樣， 它希望你把一切都移到雲端去， 或是一定要逼你打開一個特定的 app， 總之就是不讓你很方便地用通用的瀏覽器做事。 不管是不是陰謀， 總之這個沒有意義的限制其實是可以繞過去的： Svg 圖檔 (含 sozi 簡報) 及 html (在某些情況下， 甚至包括內含 javascript 的 webapps) 也都可以透過 「open in browser」 這個 app 搭配適當的瀏覽器來開啟。

三種方式產生 scatter plot / bubble chart

資料視覺化的 常用圖形類別 當中， 我最喜歡用 scatter plot (散點圖) 以及它的變形 bubble chart (氣泡圖)， 因為 scatter plot 能用位置 (X-Y 座標) 及顏色把一張試算表的兩個數值欄位及一個類別欄位同時呈現在一張圖上； 而 bubble chart 則再補上 「圓圈大小」， 較 scatter plot 更多展現出一個數值欄位。 為了畫 bubble chart， 暑假我繞了好多遠路。 最後找到最簡單的方法， 把一些重點提示摘要在這篇裡。 從這篇快速起步之後， 每一種方法當然都還有更多本文未提及的參數可以調整， 請自行搜尋/查手冊。 程式碼及資料檔 (satellites.csv) 放在 github 的 ckhung/scatplot； 範例圖的物理意義請見 重新發現克卜勒第三定律。

令人愛恨交織的 javascript， 開發者觀點篇

javascript 令程式設計師又愛又恨。

令人愛恨交織的 javascript， 用戶觀點篇

javascript 令網頁訪客又愛又恨。

用 jQuery 無痛讀檔、顯示

我初學 javascript 時， 萬萬沒想到最困擾的竟會是 「讀檔」 這個單純/重要/基本的工作， 更沒想到讀本地的檔案竟然比讀遠方的檔案更困難! 現在摸出門路了， 快用 jquery 所提供的 $.get()) 跟 promise 機制寫一個 一次讀多個檔案的簡單範例 readfile-jq.js 跟 readfile.html， 幫你省下當初我不斷撞牆的辛酸路。 因為程式太短了， 就再加碼順便示範如何用 DataTables 跟 jqTree 把 .csv 跟 .json 兩類資料結構清楚地呈現在 html 頁面上， 以便 (訪客) 不必開 console 就能略微 (幫你) 除錯。

既輕鬆上手又無限擴充的跨平臺文字編輯器 geany

如標題， geany 是一個跨平臺文字編輯器。 就連電腦麻瓜也可以不必學、 直接拿它來當好用版的記事本。 但若學一下設定， 它也可以很變得很強。 如果你想成為高手， 還是建議 學 vim； 但如果你 （被老師要求 哈哈） 要能夠在 windows 跟 linux 底下工作， 又想快速上手， 那就學 geany 吧。 學習自由軟體很有利於 長線投資的電腦學習： 第一， 跨平臺的特性讓你可以學一次、 到處用、 用很久； 第二， 跟別的軟體可以發揮相乘的效果而不是相加或替代的效果。 所以這篇介紹也就以 「美化排版 html/xml/json 檔」 跟 「javascript 程式碼片段自動補完」 為例來解釋如何讓外部程式幫 geany 擴充功能。 Windows 用戶可以考慮下載 可攜版。

抄程式學 d3.js

需要將大量的數據變成會說故事的圖案嗎? 可以用 javascript 函式庫 d3.js 來實現。 想學嗎? 那就抄我的程式吧。 「以 D3.js 製作的臺灣人口互動統計圖及統計地圖」 是我自己學習 d3.js 的練習作業。 假設你己經思考過 「令開發者愛恨交織的 javascript」 裡面所提的問題， 覺得還是可以學 js。 那麼就從零開始， 逐步增加功能， 一小段一小段抄 我的程式。 每次請只抄看得懂的部分， 並且順手改一下 css 等等外觀版面設計。 配合以下的說明， 應該很快就可以進步到比完全新手還要再高兩級的程度 (大約是中二的概念)。 文中有一些官方文件的連結， 搭配著能動的範例程式來讀比較易懂。 而且先前我卡關的地方， 文中都已列出 (大量搜尋爬文後篩選出來的) 參考文件了， 你可以省下很多摸索的時間。 當然， 這篇文章的步調也會比較快、 省略很多 (你自己必須填入的) 細節。 所以我們先從預備閱讀開始。

javascript 程式撰寫/編碼風格

程式碼保持乾淨一致的風格很重要。 整齊好讀才容易除錯； 別人看得懂才有機會參與你的專案。 最近比較認真學 javascript， 對於 「變數不必宣告就能用」 感到很困擾 -- 這很容易出錯， 太不科學了啊! 還好有工具可以幫忙， 不必等 (最好不要等) 你熟悉 js， 從今天起就開始善用囉嗦龜毛的 jshint 與 jscs， 即使是像我這樣的新手也很容易被調教寫出 (至少形式上看起來) 漂亮整齊的程式碼。

用向量圖磚 (vector tiles) 自製陽春離線地圖

受到 臺中公車達人 的刺激， 我一直想要寫一個離線版的臺中公車地圖。 最好可以放在手機上。 我只需要大致的街道圖跟街道名稱， 不需要縮放 (zoom) 很多等級， 所以並不需要完整龐大 [而且超出我的人腦跟電腦能力範圍] 的 OSM 的圖資。 後來發現 mapzen vector tile service 提供各種向量圖磚， 完全符合我的需要。 把一二十塊圖磚抓回來之後， 就可以用 d3.js 自製陽春地圖了! (這篇並不需要寫程式也可以操作一下感受成果； 但最終還是對程式設計師比較有用。)

用 cordova 的 file plugin 苦讀 sdcard 最精簡的完整示範

如何用 cordova 的 file plugin 讀取 /sdcard 的內容? 請到 cordova-examples 下載、 解壓縮我寫的 cordova 範例程式。 然後建立你自己的 cordova project 並且把其中的 ls-sdcard 子目錄拷貝過去、 編譯、 執行：

json 轉檔萬用瑞士刀 jq

"jq 是一個輕巧又靈活的命令列 json 處理器。" jq 之於 json， 就像 regexp 之於純文字檔， 或像是 QueryPath 之於 html/xml 檔， 可以擷取/過濾/篩選/批次編輯 json 檔。。 它的學習難度介於下指令跟寫程式之間。

[2026/9/16] 寫了另一篇更簡潔的 jq 練習： (geo)json 轉檔成 csv

OSM 混搭很簡單：製作你自己的分店/行事曆/造勢活動總覽/... 「網頁內嵌互動地圖」

[2015/3/18： 改推薦 我的私房地圖， OSM 版， 直接滑鼠編輯， 連程式碼都不用寫！]

你的社群/公司/市政府/... 有沒有一些值得用互動地圖呈現的公開資料， 但是以前一直覺得程式設計門檻太高？

1. 本連鎖店在哪些地方有分店？
2. 本市各個腳踏車租借點還剩幾部車、 幾個空位？
3. 哪位參選人或哪個政黨的所有候選人何時在哪裡有官方辦的或支持者辦的造勢活動？
4. Cosplay 社群近期將在哪些地方舉辦活動？
5. 全臺灣有哪些學校在電腦教室內安裝 linux？
6. ...

jOrgChart: 在網頁上展示可以收起/展開的樹狀結構資料

有 「機關組織架構圖」、 「演化樹」、 「某國行政區域表」、 「某學科流派分析」、 「Linux 版本衍生圖」、 ... 之類的資料， 想要用 （可以展開收起的） 樹狀結構呈現在網頁上嗎？ 可以安裝 jOrgChart 這個外掛， 然後就可以用層層相疊的簡單 <ul> ... </ul> 在網頁上呈現你的資料了。 我當初則是因為想寫 英文語法分析講義 （<== 每個單元都有許多範例）， 需要一個 「可以縮放樹狀結構」 的工具， 所以搜尋到這個套件。 詳見 jOrgChart 簡介。

[後來才發現 「tree jquery」 或 「tree js」 可以找到更多其他更熱門的 jquery 套件或 js 函式庫！ 對岸整理出好幾份清單： 1， 2， 3； 也有 英文清單]

Cross Domain AJAX 抓網頁撈過界, 以及如何整合兩個部落格的標籤

前一陣子我的 「觀點部落格」 從 OFSET 所架設的 DotClear 搬到了 google 的 blogger。 為了把舊部落格的人氣帶到新的部落格, 又為了讓新的讀者也能看見我的舊文章, 除了用靜態連結互指之外, 還希望將兩邊的標籤整合起來。 例如查看舊部落格 所有貼有 「新聞」 標籤的文章 時, 能不能同時也順便列出新的部落格裡 貼有相同標籤的所有文章 呢? 反之亦然。

...

閱讀全文

Javascript 學習筆記

呵呵年紀大了, 難得寫程式, 更難得學新的程式語言。 不過這個年代似乎有一種語言是躲不掉的 -- javascript。 最近總是因為各種需求而遇到想用 js 解決問題的情境。 前一陣子趁著學校辦 「企業校園徵才」, 請我學生木瓜去攤位發問卷, 調查企業使用 office 的狀況 (請見五樓附檔 office-usage.ods)。 不想用傳統數字方法分析, 想用 jquery 的 svg 套件畫圖, 於是又再胡亂學了一下 javascript。 完成一篇講義: 新手急上手的 javascript/jQuery 教學 和一篇失敗的實驗報告 (失敗的) 網頁混搭筆記 (help!)。 好吧, jquery svg 改天再試吧...

貴哥不用 PowerPoint -- 我的簡報在雲端

[2012/11/28 更新: 現在我改用 sozi 做簡報, 因為 inkscape + sozi = prezi + 自由開放, 而且 sozi 更加輕薄短小, 超讚!]

簡報的目的, 在於傳遞資訊。 網路, 是最低成本的資訊傳遞工具。 扣除商業機密等等 「外人不宜」 的簡報之外, 一般的簡報 -- 尤其是學術、 教學、 產品行銷等等類型的簡報, 放在網路上的效果, 當然比放在自己電腦裡的效果要好。 尤其如果貴單位正在考慮導入雲端技術, 請記得一件事: 雲端上沒有隱私可言。 如果說有什麼資料值得放到雲端上面, 簡報當然是首選之一。 有些單位連學術簡報或產品行銷簡報都不敢放上雲端, 卻又想把重要的公司機密放到 「掌握在他人手中的公有雲」 上面, 這是一件很不合邏輯的事。