2025年12月9日 星期二

DD Petals 花瓣造詞注音手寫

2025年12月9日 星期二

HTML5 FUN 的 DD Petals 花瓣字,可以拿來玩造詞、玩部件,或是玩數學 ,但是都要用手寫的方式來輸入答案。原本限制只辨識中文字與數字,注音符號則未完全支援;這幾天認真地研究如何克服注音符號手寫辨的問題,詳見「雄:注音符號手寫輸入提升辨識率」,有了大進展。看一下底下這張截圖 [圖1]:

[圖1] 花瓣字國字注音混合手寫

現在花瓣造詞如果是「低年級」課本生字的題目,就會自動啟用手寫注音的辨識功能(中、高年級要乖乖寫國字,不會就查字典啦!)。而且可以國字、注音混合使用哦!不過,寫字時要注意一些小技巧才會用得順手。

▋ 手寫注音小祕訣

花瓣造詞可以由 HTML5 FUN 筆順練習中直接啟動。為了提高注音符號的辨識度,以下幾點供手寫時參考:

  • ✅ 注音符號之間,保持距離,不能黏在同一個框。參考 [圖2]。
  • ✅ 調號寫大一點比較好辨識。
  • ✅ 寫完,如果一秒沒動作,會自動辨識,出現紅色虛線框,可用來檢視注音符號或是國字是不重疊了,重疊就只能按復原鈕,或是「長按一秒」擦掉重寫。
  • ✅ 「ㄥ」、「ㄐ」比較容易誤判,寫完要特別注意是否正確。
  • ✅ 國字、注音混用時,「國字」的各部件要「同框」;注音符號「不能同框」。
注意 [圖1] 中「山高水長」的「水」,和「山頂洞人」的「頂」,如果「水」和「頂」的各部件沒有同框,國字就可能被誤判。(我有秘招:在「丁」「頁」之間按一、兩個點,就會「縫合」為「頂」了)

[圖2] 注音符號不可以黏在同一個框框內

▋ 相關連結


2025年12月6日 星期六

注音符號手寫輸入提升辨識率

2025年12月6日 星期六

Google 輸入工具的手寫輸入,中文的辨識率滿高的,當然也包括注音符號。但是如果將多個注音符號寫在一起,例如「ㄒㄩㄥˊ」,那大概就會失望了;直寫會被辨識為國字,橫寫可能變別的文字。一次一個注音符號可以正確辨識,多個就亂掉。山不轉路轉,路不轉人轉,轉個念,就可以讓 Google 輸入工具應用在手寫注音辨識了!

關鍵就在「一次一個」注音符號,所以如果在傳送筆跡座標時,一次只送出一個注音符號的,這樣就能發揮它的高辨識率了,底下可以測試一下成果。

▋ 手寫注音測試

小秘訣:

  • ✅ 手寫時會有虛線框,一個框一個符號。
  • ✅ 聲調符號不要寫太小。
  • ✅ 寫完,如果一秒沒動作,會自動辨識。


▋增強了什麼

為了提升手寫注符號的辨識率,利用程序做了一些調整:

  • ✅ 以手寫字跡佔最大矩形是否有重疊,將重疊的視為同一符號來辨識。
  • ✅ ㄥ容易被辨識為ㄑ,但是ㄑ正確率很高,所以辨識結果兩者都有,而且ㄥ順序在較低時,視為是ㄥ。
  • ✅ 調號較不容易辨識正確,所以用最常被認錯的符號來修正為正確的。
  • ✅ 以虛線框為單位,一次辨識一個虛線框的筆跡;所有筆跡都辨識完以後,分析出注音符號與非注音符號,再依注音符的拼音原則,將字的注音切割。

▋已知問題

先列出一些待解決的問題:

  • 「ㄗㄨㄟˋ」 目前解析為「ㄗㄨㄟˋ」,但它也可能是「ㄗ」「ㄨㄟˋ」;「ㄗ」「ㄨ」到底是不是屬同一個字的注音,可能還需要參考筆跡的位置才行。
  • 提升調號的辨識率。

▋應用發展

HTML5 FUN 花瓣字目前的版本有開放低年級的生字造詞,寫一個注音符號啟用虛擬鍵盤,接下來可以將本篇的技術應用在全注音手寫的方式輸入答案(註: 已於2025.12.09 整合完成)。另外,或許可以開發一個看圖、看國字,或是聽語音,手寫注音的注音高手。

▋ 相關連結


2025年11月10日 星期一

Ruffle : 選取最適用的版本

2025年11月10日 星期一
之前在測試「ㄅㄆㄇ西遊記」時,主要是在 Windows 7 的 Chrome 跟 Firefox 測試,Android 手機中的 Chrome 也沒問題,但是在 iPad Air 2 (iOS 15.8.5) 的 Safari 中則是會快速載入兩次後 Ruffle 以後就出現錯誤訊息。記得幾個月前不會有這樣狀況的,手上沒有更新的 iOS 裝置可測了,不確定是不是 Safari 版本太舊的問題。

不過,回想了一下,可能是之前為了解決無法載入任意字型的問題,將 Ruffle 更新為 2025.09.21 的版本,才讓 iPad Air 2 無法正常使用 Ruffle。畢竟 Ruffle 還在快速發展中,問題可能會被解決,也可能會產生新的問題。

怎麼解決我的 iPad 無法使用 Ruffle 的問題呢?只好一個個版本去試,找到最佳可用的版本。

往回推,先改用 2024.12 的 Ruffle ,確定運作正常,再利用這兩個時間點,以二分搜尋法來測試。運氣不錯,總共試了五個版本,最後確定我的 iPad Air 2 (iOS 15.8.5) 只能用到「Nightly 2025-02-22」這個版本。

Ruffle Nightly 2025-02-22 的截圖

雖然這個版本無法載入所有字型檔,但是使用檔案大小相對小的芫荽字體是沒問題的,所以並無影響。

軟體與工具用得順手比較重要,真的沒有必要一直追最新的版本,最新的版本,玩玩就好。所以我將網站中的 Ruffle 降級為「Nightly 2025-02-22」了。這樣子,新載具、舊載具都能玩,皆大歡喜!

▋ 相關連結


2025年11月9日 星期日

幫「ㄅㄆㄇ西遊記」加上 Ruffle 虛擬按鍵外掛

2025年11月9日 星期日

幾年前,桃園縣政府教育局 (是的,沒看錯,看到「縣」,就知道有一些時日了) 有一個「ㄅㄆㄇ西遊記」的教育光碟,在瀏覽器還支援 Flash 時,可以在線上玩。

  • 原始網址: https://www.tyc.edu.tw/files/west/index.htm (已失效)。

「ㄅㄆㄇ西遊記」可以用 Ruffle 載入後,在網頁瀏覽器,甚至行動載具中玩嗎?

可不可以玩?按一下紅色按鈕,就能知道結果!

▋ 載具中如何使用方向鍵

測試過了,只要使用 Ruffle 載入,就能在電腦或是行動載具的瀏覽器中玩「ㄅㄆㄇ西遊記」。「ㄅㄆㄇ西遊記」中有教學,也有遊戲,但是遊戲主要用鍵盤的方向鍵來操作,電腦上操作沒什麼問題,行動載具沒有實體鍵盤,要怎麼操作呢?這倒是一個大問題!

Ruffle 有內建虛擬鍵盤嗎?在只能使用觸控方式輸入的環境下,如果是在可輸入文字的元件中,Ruffle 會幫我們叫出系統的虛擬鍵盤,但是在玩遊戲需要使用鍵盤操作時,因為並非操作輸入文字的元件,目前就得自立救濟了!

ㄅㄆㄇ西遊記在 Ruffle 中的截圖

為了能在 iPad / Android 中玩「ㄅㄆㄇ西遊記」中的遊戲,我幫 SWF 遊戲啟動器加上了虛擬按鍵,需要按方向鍵時,可以按右下角半透明的虛擬按鍵即可送出相關的指令給 Ruffle ,效果和按實體按鍵一樣。

▋ 版權聲明

  • 「ㄅㄆㄇ西遊記」下載自桃園縣政府教育局網站,版權屬桃園市政府教育局所有。

▋ 相關連結


2025年11月1日 星期六

漢字說故事 YouTube 影片播放器

2025年11月1日 星期六

《漢字說故事》是《中華文化總會》放在《中華語文知識庫 YouTube 頻道》中,有關中文字的動畫影片,兩期總共有180個字的精美動畫,每一部兩分鐘的影片中,除了介紹主題的字,還會有幾個衍生的字,應用在國字的學習相當不錯。影片在 YouTube 頻道中都可以找到,也有兩個相關的播放清單:

為了方便使用,我設計了一個「漢字說故事 YouTube 影片播放器」,有以下的功能:

  • ✅ 可以一次搜尋多個字的影片,並變成一個自訂的播放清單。
  • ✅ 可以產生自訂播放清單 QR code 或是網址,方便重覆使用。
  • ✅ 解決「漢字說故事」動畫 Ⅰ  的影片片長加倍,後段卻無聲的問題 (跳過無聲的部份)。

▋ 開始使用

想立即試試看,就按一下紅色按鈕啟動:


▋ QA

  • Q : 查完的字,播放清單如何保存?
    • A : 在漢字說故事影片播放器的輸入區右側有一個 QR Code 的圖示,按下去會出現 QR code 及網址,按一下網址即可將影片播放清單的網址複製到剪貼簿。
  • Q : 為什麼在輸入區打了很多字,都沒有出現影片?
    • A : 漢字說故事只有 180 個字有影片,可能剛好輸入的字都不在清單內。
  • Q : 到底有哪 180 個字有影片呢?
    • A : 請按右邊這個 [ 🔍查詢清單 ] ,稍候就會列出現有的影片是哪個字為主題。
  • Q : 如何讓影片是全螢幕的?
    • A : 播放影片以後,影片的操作就像一般 YouTube 影片一樣,在右下角控制區中有全螢幕或離開全螢幕的小圖示按鈕。
  • Q : 如何暫停或繼續播放?
    • A : 播放影片以後,影片的操作就像一般 YouTube 影片一樣,在影片下方的有各種的播放控制鈕可以使用。
  • Q : 播放影片後,如何重新找其它影片?
    • A : 在影片下方和縮圖選單之間的訊息欄右側,有一個紅色的  [重新搜尋] 鈕,按一下即可出現搜尋輸入區。
  • Q : 還有其它影片嗎?

▋ 版權聲明

本工具「漢字說故事 YouTube 影片播放器」只是一個自訂的 YouTube 影片播放器,僅用來搜尋及載入《中華語文知識庫 YouTube 頻道》中的公開影片的影片及其縮圖。版權均屬《中華語文知識庫》及《中華文化總會》。

▋ 相關連結

▋ 更新記錄

  •  2025.10.31 v1.0


2025年10月29日 星期三

HTML5 FUN 筆順練習注音顯示及多音播放鈕

2025年10月29日 星期三

教育部筆順網收錄的國字有六千多個字,裡面有多少個多音字呢?

底下 516 個字都是(按一下可以在教育百科查該字):

上不且中乘乾了予些亟亡亨什仇仔任佛估伽伺作伯供便俟倆倒們倔倡個倘倭偺假傍傀傳僮兒六共其冒冠分切刨削剌副創劃勒勞勝勦勾化匙匹區午卒南卡占卷參可召叨只句吐合吃吭否吧告呀呵呱和呢咎咳哇咽哄哈咯咱咻哩員哪哦啦啞啊喝喪喔單嗎嗾嘛嘔嘩噴噱噢嚇嚼囉囪囤圈圳地坊埋埤培塞壘夏大夫奇奄契女好妻委姊姥娜娩婁嫖子孫宛家宿寧射尉將少尺屏屬屯嵌差帖并幹幾底度弄弟強彈彷待得從徵怔思恫悖惡悶應戲扁扇扎扒扛把折抓拂抹拓拈拗括拾挑捎掖掃掄掙排提搶撇摟撈撕撒擔擰放教敦散數文斜於施旁旋晃景暈暖暴曲更曾會有期朝朴枕枝查枸柞校桔柴棹棲棋楞榜樂橫檻歙正歪歸殷殺比氏氓汗沒泌泥法泄沮泡洞洗涼混湛渦湯渴渾溺滑溜漂漲漯漿澄潦澎澹濟濺瀾為炸炮烙無煞熨燉燕燥爪父率王甚畜番當疋百的盛監省相看瞑瞭瞿矇矜知石磅磨祇祕禁禪秤稟種稱稽空答簸粥紅累結絡給綸繆繃縫縱繁繫署罷羊羋翟翹聽肚胖背脈脯膀臭與興舍般艮色艾茄若苔茲莎莞莘莫荷荼華菴著菲葷落葉葛蓋蔓蕃薄藏藉蘋虎處號虫蛇蚵蛤蛾蝦螞蠡行衝衣衰被裳裨褶要覃見親覺觀角解語說請調論識讀谷豁貉賁賈質趣足跑躂身車軋載輾轂轉轍辟逢逮過遠遲遺還邪那都酊重量釐釘鈷鋪鋼鏑鐺鑽長間閤阿降陸陶雋難雨露青靡靦革頓頡頸頭風食飲養馮馱骨鬲魄鮮鱖鵠麗麼齊龜乜亢俛偈勺喁囝圜垛宓峒崗彊徠徼忪慊摽撣攢杓栖榦欸洒洩漚澠瀧畬秘繳臊芾菟蓼薺藷虺蜚裼謾趿踉踦蹌邋酢鎬鏹閼闕頦駘鶻

▋ HTML5 FUN 筆順練習新功能

花了兩天的時間,用程式分析了【教育部國語辭典簡編本】蒐集的字,找出多音者後,再將五百多個字,以我印象中常用的讀音,好好地檢視了一番,調整了 HTML5 FUN 筆順練習部份的預設語音檔,資料庫中加入了注音清單的欄位,也新增了一項功能:

HTML5 FUN 筆順練習可自選多音字要播放的語音

現在使用 HTML5 FUN 筆順練習時,在「筆順示範」的功能頁面中,右側會出現注音的按鈕,想聽哪一個音的語音解說,就按下吧!

不過美中不足的是仍有部份讀音似乎沒有錄製解說的語音,像「們」這個字就只有「ㄇㄣˊ」的語音檔,「ㄇㄣ˙」就只能自己心中默念了。

▋ 相關連結



2025年10月24日 星期五

YouTube channel id 或 RSS 網址如何找?

2025年10月24日 星期五

文總有一個《中華語文知識庫》,其中漢字影音有《漢字說故事動畫》,影片放在 YouTube 中,頻道的網址如下:

註:文末有一個小工具可以輸入國字列出找到的影片。🔍🔍

原本想利用 RSS 來解析出影片的清單,頁面上找不到 RSS 的連結,網路上有人說,由頻道網址找到 channel id 再加到「https://www.youtube.com/feeds/videos.xml?channel_id=」後面就可以了。可是現在的網址是用小老鼠(@)的好記格式了,無法直接複製貼上了,怎麼辦?

如果知道怎麼看頻道頁面的原始碼,那就在原始碼中搜尋:

 "canonical" 

找到後,再往後看 href 裡的網址,就是該頻道的標準網址,最尾巴的就是 channel id。

而想找 RSS 的連結,就在原始碼中搜尋:

title="RSS"

找到後,一樣的,取 href 中的網址,就是該頻道的 RSS 網址。會使用 Console 就下這樣的指令:

document.querySelector('link[rel="alternate"][type="application/rss+xml"]')?.href

哈!總是會想,有沒有更簡單的方法?可不可以我貼上 YouTube 頻道的網址,就直接出現 channel id 跟 RSS 網址,按個複製鈕就好了!

小工具的製作原理很簡單:

  • 下載 YouTube 頻道頁面原始碼。
  • 解析原始碼,找到關鍵的標籤並擷取網址。
  • 輸出資料。

但是利用 JavaScript 實作時遇到了一個大問題,YouTube 伺服器會進行「機器人驗證」,然後就抓不到頻道頁面的原始碼了!

幸好之前在解決 HTML5 FUN Audio Player 抓不到 YT 字幕時,也遇過類似的問題 (詳見「利用 iframe 解決因為 CORS 而抓不到YT字幕的問題」),可以利用在「iframe」進行下載與解析的步驟來避免被要求「機器人驗證」的問題。

▋ YouTube 頻道 channel id , RSS 網址解析小工具

以下是一個簡單的 YouTube 頁面解析小工具,只要輸入 YouTube 的網址,可試著抓出一些資料,試試看吧!


▋ 所有影片的播放清單網址

上面的小工具最後提供了一個「所有影片的播放清單」的連結是什麼?一般頻道主會提供他自定的播放清單,那有沒有沒可以播放該頻道所有影片的播放清單呢?看到有高手提到,只要能找到頻道的 channel id,將它的前兩個字母 UC (User Channel) 置換為 UU (User Uploaded),變成一個新的播放清單 id, 再加到底下這個播放清單用的網址後面:

https://www.youtube.com/playlist?list=

就可以用來播放該頻道所有公開的影片了。

▋ 播放清單 JSON 格式資料

本以為有了前面的網址,這下子可以抓到自己要的影片資料了吧?想得美!YouTube 的 RSS 只能抓到最新的 15 部影片資料;播放清單的頁面沒有特別處理,只能由原始碼中找到 100 部影片的資料 ...... ,要花很多時間再研究。

有一個工具根本可以輕鬆拿到所有影片或播放清單中的所有影片資料,而且可以直接輸出為 JSON 格式,「yd-dlp」這個開源的超級小幫手還是最強的!

如果電腦中有 yt-dlp,只要這樣的指令:

yt-dlp --flat-playlist --dump-single-json  "想抓網址" > playlist.json

就可以將該網址的影片資訊輸出到名為 playlist.json 的檔案中。

不過,裡面如果有非英數的文字與符號,都會以 \u???? 的 Unicode 碼呈現。以下的小工具可以將被編碼過的文字還原。

🔮 將編碼過的內容貼進來解碼:


透過 yt-dlp 的助力,我將中華語文知識庫 YouTube 的《漢字說故事動畫 Ⅰ》和《漢字說故事動畫Ⅱ》兩個播放清單資料彙整了一下,95 + 80 = 175 部影片的資料,哈!發現一件有意思的事,「中華語文知識庫」網站有自己的資料動態生成選單,裡面的記錄是 151 筆,和 YouTube 清單加起來的 175 部有一點點差異;另外,在漢字說故事動畫Ⅱ 中的影片標題有兩個「不乖」,「18萬」的數字用的是全形數字,跟其它的不同,還有一部影片沒有標題,看起來應該是「27我」;在漢字說故事動畫Ⅰ 最後一集是100,但是影片播放清單卻只有95部,比對了一下,少了「5口, 19文, 33犬, 42生, 81」,81到底是哪一個字?在影片清單中沒有這一集。為了找出少了什麼影片,花了點時間,但功力又增加了不少 ^_^ 。

▋ 漢字說故事動畫搜尋小工具


建議再試試底下更新的方式,用這個小工具來搜尋、播放:

🔮 漢字說故事 YouTube 影片播放器


▋ 相關連結


2025年10月22日 星期三

HTML5 FUN : 國字基本筆畫練習小工具

2025年10月22日 星期三

上一則文「HTML5 FUN 筆順部件及 CNS 部件校正」中提到花了不少時間校對了 HTML5 FUN 的部件,也建立好筆畫清單,第一個應用的小工具「國字基本筆畫練習」來囉!

國字基本筆順練習小工具參考教育部《國字標準字體教師手冊》中的「國字筆畫名稱表」,提供28個基本筆畫及其例字的筆順示範與練習。

✅ 加碼製作28個基本筆畫的筆順資料及筆畫語音。

✅ 有六個筆畫示範時,會隨機出現動畫加強印象。

✅ 示範及練習會念出筆畫名稱。

▋ 開始使用

想立即玩玩看,就按一下紅色按鈕啟動:


在 HTML5 FUN 筆順練習中已加上啟動基本筆畫練習小工具的按鈕,按下去即可切換 :

筆順練習中啟動基本筆畫練習小工具

▋ Q&A

  • Q : 筆畫的例字可以自訂嗎?
    • A : 範例選單字可以透過設定來控制,但目前尚未開放自訂。
  • Q : 筆畫的語音可以自訂嗎?
    • A : 筆畫語音是由一個音檔、分段設定檔及程式所控制,目前是使用我自己錄製的語音,其實尚有製作人工合成的語音(TTS),但目前未開放自訂使用。
  • Q : 字的筆晝參考來源為何?
  • Q : 筆畫的動畫是哪裡來的?
  • Q : 為什麼沒有幫 28 個筆畫都加上動畫?
    • A : 哈!啊~就找不到其它合用的嘛!很多東西都是要緣份的。有緣再慢慢補上。

▋ 錯誤回報

❕❔ 資料初建立,難免有誤,如果發現任何問題或是錯誤,可以在底下留言區告訴我;有時間,一定會盡快處理。感恩~~

▋ 版權聲明

▋ 相關連結

▋ 更新記錄

  • 2025.10.21 v1 發布。


2025年10月15日 星期三

HTML5 FUN 筆順部件及 CNS 部件校正

2025年10月15日 星期三

最近想製作國字的筆畫序資料庫,基於 2024年五月已經把 HTML5 FUN 的部件改使用 CNS 的部件定義,所以先幫 CNS 517個部件一個個建立了完整的筆順序。原本的計畫是接下來就可以輕鬆用 517 個部件的基礎,推算出任何字的筆順序;果然是想得太簡單了,國字有很多「例外」啊!參考教育部的《常用國字標準字體筆順手冊》:

裡面有筆順基本法則,以「國」這個字來說,它的部件是「囗戈口一」,第一個部件「囗」最後一筆的橫畫,要留在其它筆畫寫完才能加上;「國」算單純的,像「鄙」,到底什麼時候要加上橫畫,得好好的計算與判斷了。在「挖掘」的過程中,發現 HTML5 FUN 筆順練習的部件設定有諸多錯誤,而 CNS 的部件設定也有很多沒有按照《常用國字標準字體筆順手冊》中的原則來設定,修正的記錄附在本文的後段。此外,新發現教育部筆順網有兩個字寫正確了反而會過不了關的:

  • 「寓」12畫,卻有13筆資料,第6畫要重寫一次才能過關。
  • 「製」14畫,卻有15筆資料,最後面多了一筆第13畫的。

筆順網其它可能會過不了關的字,請參考「雄:教育部筆順學習網這些字的過關秘訣」這一則舊文中的說明。

▋ 整合 HTML5 FUN 部件設定與 CNS 部件筆順序

HTML5 FUN 部件設定及對應的CNS部件設定有誤的地方修正好了,乾脆偷懶,將對應的主客互換,先產生 CNS 部件的筆順序,再以部件對應到 HTML5 FUN 的筆畫序,這樣子就可以知道部件中每一個筆畫的名稱,重新按筆畫序列出,完全不用複雜的判斷就是我要的結果了。但是由產生出的結果交互比對,找出了更多的錯誤 XDDD

經過將近一週的努力,至少教育部筆順網的六千多個字,都能有完整的筆順序了。花了大半天,把國小國語課本三個版本中最近兩學期使用到的生字(二千九百多個字),以一個小工具,人工檢查的方式再次確認,並以程式調整了以下的字:

  • 寫法與部件有異:竊(vs禸)、虜(vs毌)、亟極殛(筆畫要多1)、歿沒別捌(vs方)。
  • 筆順與部件有異:升昇陞呏、臧藏臟贓。
  • 一字不二捺,捺改頓點或長頓點:潑返閣額雒擱篷縫蓬逢逄皴逡蹩釐犛邀遨瓤還遠退腿褪螁隧毅豬櫫瀦燹豢遯逐遂燧遽邃劇裹歉。

筆順校對與測試小工具截圖

目前校對部件、筆順清單已大致完成,也測試了念出筆順的功能,測試的過程還解決了一個在 iOS / Android 播放指定區段聲音一直存在的臭蟲,一個星期的研究沒有白費。接下來應該可以先弄一個「🚀 國字基本筆畫練習」的小工具(註:2025.10.21上線了),測試一下資料庫與語音的功能。

▋  CNS 部件調整記錄

依據教育部《常用國字標準字體筆順手冊》筆順基本法則,調整 CNS 部件順序

✅ 「凡字的上半或下方,左右包中,且兩邊相稱或相同的結構,通常先寫中間,再寫左右。」

54,54,395,72,162

36,4,395,1,49,62,45

41,1,21,395,72,185,185,105,250

54,54,185,185,105,291

54,54,185,185,105,218

54,54,185,185,106

442,250,250,84

276,394,305

36,4,395,1,49

36,4,395,1,48,97

121,36,4,395,1,49

41,1,119,395,1,49

54,54,395,72,432

220,54,54,395,72,432

36,4,395,1,48,442

41,1,21,395,72,425,48,81

輿 419,395,1,49

185,36,4,395,1,48,97

384,185,185,72,399,80,25,128

353,185,185,257

250,331,169,169,186

331,65,73,55

67,15,119,155,382,137

277,67,15,119,155,382,137

67,15,119,406,382,137

67,15,119,434,382,137 (除順序,原「238『月』」修正為 382)

✅ 「凡以筆順基本原則-廴部筆形、筆順基本原則-辶部筆形為偏旁結體之字,通常筆順基本原則-廴部筆形、筆順基本原則-辶部筆形最後寫。」

辶(253)廴(157)後寫:

96,253

154,253

13,20,253

42,8,253

170,253

65,75,253

22,84,253

232,253

5,99,157

✅ 「卂」相關的字

20,13,253 (第一筆在十20的豎畫, 調整為 20,13)

277,20,13

250,250,72,20,13

✅ 「鄉」相關的字部件由左而右

167,6,413,166,339,209

167,6,413,166,483

204,167,6,413,166

✅ 沱跎陀 「它」的下方應該是 27

277,139,27

119,208,139,27

166,139,27

208,24,19 「此」右為 24, 「些」應相同

✅ 統一「可」的組合全部改用「32,119」,以下修正:

119,32,119

100,32,119

✅ 其它

70,425,106,166

3,205,95

252,45,382

338,252,45,382

119,208,252,45,382

252,47,382,438,251

277,121,230,230,1,119,141,99,88,305 (修正第二碼為山121)

220,47,47,99

70,3

81,6,257

45,1,119,119,47,47

391,45,1,119,119,47,47

46,45,1,119,119,47,47

47,1,119,119,47,47,82

220,45,1,119,119,47,47

47,1,119,119,47,47,221

185,45,1,119,119,47,47

195,45,1,119,119,47,47

382,45,1,119,119,47,47

166,45,1,119,119,47,47

489,45,1,119,119,47,47

38,120,399,45,1,119,119,47,47

277,47,1,119,119,47,47,221

470,47,47,99

17,278,80

277,17,278,80

204,17,278,80

417,369,131

46,3,221,63,301,251

248,1,114,208

314,49,123,49

220,423,70 (這個字的柬和其它的順序不同, 修正為423,70)

277,295,1,250 (火改用 250 末筆才是長頓點)

28,42,106,58,85,425 又應該要用長頓點第二畫的 85,而不是 84。

22,209,382,193,483 一字不二捺, 犬改用 193 的。

✅ 部件與寫法有異者

372, 273,83  原第2部件為 213 應該是錯的, 應為273「毌」ㄍㄨㄢˋ (4畫),但寫法不同「豎,橫折,豎,橫,橫」(5畫)。參「異體字字典-虜」。

竊的右下其實為「禸」,只是寫法有異,最後一個部件像 厶88 (2畫),但寫法應為3畫「豎,挑,點」。參「異體字字典-竊」。

「臧藏臟贓」應修正以戈優先,然後 266 爿 的筆順需調整為豎撇,豎橫折,橫,豎撇。

▋ 相關連結


2025年9月23日 星期二

你變我也變:解析雲端硬碟圖片縮圖網址更新

2025年9月23日 星期二

有人反應無法用「以雲端硬碟資料夾的圖片製作注音高手」影片中的方法出題;研究了半天,終於抓到問題點,看起來是 Google Drive 共用資料夾頁面的內容有異動,導致用來找出圖片縮圖網址的程序失效了。這麼一來,就影響了以下幾篇中的小工具:

哈!有問題才有好玩的。「你變我也變」,只要找到關鍵的片段,去掉工程師故意加入的「雜質」,再加上看似被遺漏的符號,就能以 JSON.parse 將變數還原,最後擷取要的欄位,問題就可以解決了。簡單記錄幾個關鍵:

  • 有用的資訊: data-p
  • 雜質: %.@.
  • 需還原: "
  • 最前面少了一個 [

當初花了不少時間研究還是有差,現在愈來愈會拆彈了。

總之,壞掉的地方修好了,如果是使用試算表的,只要重新建立範例試算表的副本,就又能開心使用了。


2025年9月20日 星期六

Life:百香果醃蘿蔔

2025年9月20日 星期六

前幾天買了條白蘿蔔煮排骨湯,看到家裡的百香果,就留了一點中段的,試做百香果醃蘿蔔,第一次做,但想馬上嘗鮮,沒放過夜就吃光光了,想當然爾,一定不夠入味,所以昨天買菜又買了一條專做醃蘿蔔的。

簡單的流程記錄一下:

  • 蘿蔔削皮洗淨後切薄片。
  • 加入鹽巴拌勻後靜置15分鐘脫水殺青。
  • 擠水後再用白開水沖洗一次。
  • 加入少許的冰糖及百香果汁。
  • 冰箱靜置一晚。

哈!看起來怎麼那麼白~~但是有百香果就給讚!冰冰涼涼又香氣撲鼻,中午吃鍋貼,這百香果醃蘿蔔解膩又爽口,真是絕配。


2025年9月14日 星期日

特教教材資料庫中的「創意ㄅㄆㄇ整合版」

2025年9月14日 星期日

昨天偶然看到一則貼文中,有人想以圖找學注音的軟體;對那個畫面有一點印象,曾經玩過,也下載過,趕緊到自己的下載區找找,證驗一下自己的記憶。年初在研究有關注音教學的相關工具時,特別建立了一個注音專用的資料夾,果然提升了搜尋的效率,一下子就找到該截圖是楊妮曼老師所分享的「拼音對對碰」。不過民國九十幾年時的 Flash 程式,在網路中找到的連結,應該大多失效了。用楊老師的另一個作品名稱「創意ㄅㄆㄇ」,可能會好找一些。後來才發現,其實楊老師的「創意ㄅㄆㄇ」+「拼音對對碰」,在教育部「優質特教發展網絡系統暨教學支援平台」的特教教材資料庫中有一個「創意ㄅㄆㄇ整合版」,網址如下:

打開後會有說明及檔案下載的連結。檔案是 RAR 的壓縮檔,解壓縮以後,裡面的「bpm.exe」可以在 Windows 中打開來玩。

▋ 行動載具可玩的版本

哭哭~在 MacOS / Linux 還有模擬器可以執行 Windows 的 .exe,這樣子不就不能在行動載具上玩了?!

沒關係,試了一下,由 bpm.exe 中解離出 .swf 就可以利用 Ruffle 在網頁瀏覽器中載入,按底下的紅色按鈕,就可以立即啟動楊妮曼老師所分享的「創意ㄅㄆㄇ整合版」,電腦或是平板都能玩:

註:Ruffle 載入的和在本機直接玩相比,字型會有所不同,瀏覽器版中使用的是芫荽字型,注音符號的調號會稍小、位置稍偏移。

▋ 版權聲明

▋ 相關連結


2025年9月2日 星期二

擷取 Google 雲端硬碟圖片縮圖網址

2025年9月2日 星期二

製作網頁遊戲時,可以使用放在 Google 雲端硬碟中的圖片嗎?一般來說,在瀏覽器中會因為 CORS 的跨域讀取限制,無法直接應用 Google 雲端硬碟的圖片在網頁遊戲裡,但如果是雲端硬碟圖片的縮圖,則不會受限制。所以如何取得圖片縮圖的網址就是關鍵。

▋ 擷取 Google 雲端硬碟圖片縮圖

這個小工具可以解析出已共用為「知道連結的任何人」 Google 雲端硬碟「資料夾」中,所有圖片的縮圖網址,大小為 640x480,雖然解析度不高,但應用於一般的遊戲中的插圖,算還不錯。

▋ 使用方法

程式會在已公開共用的雲端硬碟資料夾頁面中,找出所有圖片的清單,解析出檔名及其縮圖的網址,能輸出「主檔名」和「圖片網址」兩個欄位,欄位分隔符號使用跳格的符號,所以複製輸出結果後,可以直接貼到試算表中使用。操作程序如下:

  • ✅ 在 Google 雲端硬碟建立資料夾。
  • ✅ 設定共用為「知道連結的任何人」「檢視」。
  • ✅ 將要使用的圖片上載到雲端硬碟資料夾中。
  • ✅ 確認圖片的檔名(如果要輸出檔名為題目欄位)。
  • ✅ 複製共用的連結。
  • ✅ 在本文的工具中貼上連結,按 [開始解析] 鈕。
如果順利,最後可以按 [複製到剪貼簿] 鈕,將資料複製後應用。

▋ 開始使用

目標:解析雲端硬碟「資料夾」中圖片的縮圖網址

        

OK

 

複製到剪貼簿的資料可以直接貼到試算表中,會自動分欄、分行,貼在試算表的儲存格中。

這個解析出縮圖網址的工具已經內建在 HTML5 FUN 的烘焙機中,另外,也可以在 Google 試算表中的自訂公式來進行解析應用,可以參考三月的舊文「雄:以雲端硬碟資料夾的圖片製作注音高手

▋ 相關連結

▋ 更新記錄

  • 2025.09.23 Google Drive 更動了共享資料夾頁面的內容,改由其它參數中找到圖片的相關資訊。



2025年8月26日 星期二

利用 iframe 解決因為 CORS 而抓不到YT字幕的問題

2025年8月26日 星期二

前兩天發現 HTML5 FUN Audio Player 怎麼樣都抓不到 YouTube 字幕;查了一下,看來多變的 YouTube 又出招了,讓原本由影片頁面原始碼中擷取到的字幕網址失效了,只能抓到空白的內容。研究了大半天,找到了另一個方法 (有興趣可以參考 jdepoix 的 youtube-transcript-api ),主要就是先由影片的頁面原始碼中找到「INNERTUBE_API_KEY」,然後再利用 YouTube 的 API ,以 POST 的方式取得影片資訊,如果成功,就能拿到影片字幕軌資料的網址。

以 JavaScript 使用新方法來擷取影片資訊的第一關會是在 POST 時的 CORS 問題,如果透過 CORS proxy 當然是可行的方法,一般來說,利用 Google Apps Script 也能寫出 CORS proxy,不過 YouTube 的 API 有在擋 bot,Google Apps Script 直接就被封殺了,網路上其它 CORS proxy 服務也沒好到哪裡去,多玩個幾次,就只能得到這樣的訊息了:

status: 'LOGIN_REQUIRED',
reason: 'Sign in to confirm you’re not a bot'

想要的資料當然就撈不到了。

後來發現,原來在瀏覽器中用 fetch ,不透過 CORS proxy 來 POST  ,就能使用 YouTube API 了,倒是有個小地方要注意,不然就會一直出現:

Access to fetch at 'https://.......' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

裡面最重要的關鍵字是「preflight」,當 Content-Type 是 application/json 時,瀏覽器在未傳送資料給遠端前,會先自我審查是否違反 CORS,難怪我一直看不到 YouTube API 的回應。要怎麼改呢?

只要在 fetch 參數中的 headers 指定 Content-Type 為 text/plain ,它就會使用 simple header ,然後可以避免 preflight,加入:

headers: {
  'Content-Type': 'text/plain', 
}

不透過 CORS proxy 來呼叫 YouTube API 的好處是,比較不會動不動就被 YouTube 判定為 bot 而抓不到資料,是不是很棒?!

不過,當我很開心地將改良過的程式應用到 Blogger 中的 Audio Player 時,居然還是出現違反 CORS 的訊息,為什麼?

底下兩張截圖來探討原因,關鍵已經用箭頭標示出來了:

[圖1] origin 為 blog 的網域

[圖2] origin 為 null

如 [圖1] 所示,當程式在 Blogger 中執行時,origin 被設定為 Blogger 所在的網域,瀏覽器送給 YouTube API ,因為兩者在不同的網域,這樣一來,就會因為 CORS 的問題,無法抓到資料了。同樣的程式碼,由本機載入並執行時,會像 [圖2] 一樣,origin 被設定為 null,YouTube API 接受了,會回傳資料 (這不知道是故意的,還是 API 的 bug,哈!但是我喜歡它現在的狀況)。

本來在研究 YouTube embed 時的 iframe 結構,看看能不能從中挖出字幕,一份資料中提到如果使用 base64 編碼後的 data URI 當 iframe 的 src ,會導致 origin 被設定為 null,就會讓它變成與頁面不同源,而無法存取頁面中的資料 (這一點其實是可以利用 postMessage 來交換資料) ......。

綜合前面看起來像問題的點,因為一個關鍵字「null」,讓我兜出了一個可行的方案。

如果產生一個只用來透過 YouTube API 抓影片資訊的 iframe,而且程式碼用 base64 編碼以後,設定為 iframe 的 src,利用 postMessage 傳影片的 id 與 api key 給 iframe, iframe 收到後,執行抓資料的程序,再使用 postMessage 回傳影片資料給 Audio Player。

哈!就這樣子,Audio Player 又能順利抓到 YouTube 的字幕了!

▋ 相關連結




2025年8月15日 星期五

HTML5 : 位值小教具

2025年8月15日 星期五

位值小教具將數字的每一位數拆解以後,放在類似長形便利貼的箭頭底框中,初始狀態會疊在一起,使用者可以拖曳分解,或是按底下工具列中的按鈕來展開/收合。如果不是拖曳而是按一下,數字會變成中文、中文會變成數字。工具的功能請參考 [圖1] 中的註解。

[圖1] 位值小教具樣式與工具說明

▋ 啟動小教具

想立即玩玩看,就按一下紅色按鈕啟動:


▋ Q & A

  • Q : 可以指定預設出現指定的數字嗎?
    • A : 位值小教具可以在網址後面以 n 的參數來指定要帶入什麼數字,例如想要帶入 5815 這個數字,就在網址後面加上 ?n=5815,像這樣子:
      https://gsyan888.blogspot.com/p/place-value.html?n=5815
      以這個格式的網址開啟後會出現指定的數字。
  • Q : 如何讓學生掃瞄 QR Code 後,出現的是指定數字?

▋ 相關連結

▋ 更新記錄

  • 2025.08.15 v1.0 發布


已複製到剪貼簿!
 
雄::gsyan © 2009. Design by Pocket