2025年10月29日 星期三

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

2025年10月29日 星期三

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

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

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

▋ HTML5 FUN 筆順練習新功能

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

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

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

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

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , , ,

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到底是哪一個字？在影片清單中沒有這一集。為了找出少了什麼影片，花了點時間，但功力又增加了不少 ^_^ 。

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


▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年10月22日 星期三

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

2025年10月22日 星期三

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

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

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

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

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

▋ 開始使用

想立即玩玩看，就按一下紅色按鈕啟動：


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

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

▋ Ｑ＆Ａ

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

▋ 錯誤回報

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

▋ 版權聲明

▋ 相關連結

▋ 更新記錄

  • 2025.10.21 v1 發布。
閱讀全文
By at 沒有留言:
標籤: , ,

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 爿 的筆順需調整為豎撇,豎橫折,橫,豎撇。

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年9月23日 星期二

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

2025年9月23日 星期二

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

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

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

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

總之，壞掉的地方修好了，如果是使用試算表的，只要重新建立範例試算表的副本，就又能開心使用了。
閱讀全文
By at 沒有留言:
標籤: , ,

2025年9月20日 星期六

Life:百香果醃蘿蔔

2025年9月20日 星期六

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

簡單的流程記錄一下：

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

哈！看起來怎麼那麼白～～但是有百香果就給讚！冰冰涼涼又香氣撲鼻，中午吃鍋貼，這百香果醃蘿蔔解膩又爽口，真是絕配。
閱讀全文
By at 沒有留言:
標籤:

2025年9月14日 星期日

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

2025年9月14日 星期日

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

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

▋ 行動載具可玩的版本

哭哭～在 MacOS / Linux 還有模擬器可以執行 Windows 的 .exe，這樣子不就不能在行動載具上玩了？！

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

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

▋ 版權聲明

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年9月2日 星期二

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

2025年9月2日 星期二

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

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

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

▋ 使用方法

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

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

▋ 開始使用

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

        

OK

 

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

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

▋ 相關連結

▋ 更新記錄

  • 2025.09.23 Google Drive 更動了共享資料夾頁面的內容，改由其它參數中找到圖片的相關資訊。
閱讀全文
By at 沒有留言:
標籤: , , , ,

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 的字幕了！

▋ 相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

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 發布


已複製到剪貼簿！
閱讀全文
By at 沒有留言:
標籤: , ,

2025年8月6日 星期三

HTML5 : 大數的讀與寫小工具

2025年8月6日 星期三

國小中年級數學會改到眼花的作業，認識大數的單元一定是前三名，盯著一排排的數字，看半天，真的會老眼昏花！今天在 HTML5 FUN 上架了一個大數讀寫的小工具，它有五種玩法，五個範圍，可以當教具，也可以讓學生拿來複習大數的讀與寫。這一則文就來簡單地介紹一下。想立即玩玩看，就按一下紅色按鈕啟動：


▋ 功能簡介

大數的讀與寫小工具分為五種模式：

  1. 看數字猜中文：這個模式先顯示每一位的阿拉伯數字的卡片，中文卡片有三種狀態，按一下卡片就可以在後兩種間切換：
    • 問號
    • 中文數字
    • 幾個單位
  2. 看中文猜數字：這個模式先顯示中文數字，阿拉伯數字的卡片按了以後才會顯；中文卡片按了則可以顯示幾個單位。
  3. 輸入中文：題目在阿拉伯數字卡片上，以手寫輸入在空白的中文卡片上，一張張寫出對應的中文字。如果按下方的筆形按鈕，則是以手寫或是鍵盤輸入數字完整的「讀法」才能過關。
  4. 輸入數字：題目在中文數字卡片上，以手寫直接在空白的阿拉伯數字卡片上，一張張寫出對應的數字，如果按下方的筆形按鈕，則是以手寫或是鍵盤輸入完整的數字。
  5. 輸入讀法：題目在阿拉伯數字上片上，以手寫的方式在方格中，一格一個字寫出完整的讀法。
    [小技巧] 方格只要由左往右，由上往下使用，可以分行寫，例如一億以上的大數，可以分為三行來寫，第一行寫到億，第二行寫到萬，剩下的寫到第三行，這樣更有結構，好看又好更改。

每一種模式都可以選擇數字的位數包括：

  • 一百以內
  • 一千以內
  • 一萬以內
  • 一億以內
  • 一億以上

模式1、模式2 在位值表右上角有 [翻開全部] 的按鈕，可以一次將卡片翻面，按過以後會變成 [全部重罝] ，按下後恢復為蓋牌的狀態。

如果想出新的題目，可以按位值表右上角的 [下一題] 鈕，或是上方的功能鈕。

在畫面下方的 [讀作] 鈕除了可以看文字，也會以 TTS 合成語音的方式讀出數字。

▋ Q & A

  • Q : 模式1和模式2中，卡片上方的鎖頭按鈕是做什麼的？
    • A : 按下鎖頭按鈕，該位置的數字就會被鎖住，按 [下一題] 按鈕後，只會針對未上鎖的位置重出題目，方便教學應用。
  • Q : 模式1和模式2中，卡片下方的加、減號是做什麼的？
    • A : 加、減號按鈕可以用來調整該位置的數字，方便教學應用。

▋ 相關連結

▋ 更新記錄

  • 2025.08.11 v1.1 模式3,4 的下方手寫區加上方格，改為寫一個字就辨識，以提高辨識率，並可以按一下格子右上角的垃圾桶圖示，或是在格子內長按約一秒，來清除該格子的字；模式1,2的第一格改為可以接受手動調為 0；模式4修改為出題後會出現阿拉伯數字，中文的部份只有問號，然後會自動以合成語音讀出數，並出現讀法，使用者要在格子內寫出數字；手寫的字因座標非整數而模糊，座標改以四捨五入取整數。
  • 2025.08.07 修正 TailwindCSS 缺漏的色碼；手寫辨識如果是在卡片上或是方格中者，只取辨識完的第一個字，以免因為不小心誤畫的字被辨識到，造成使用者除錯時的困擾，所以如果在卡片中寫「五萬」只會取「五」，模式3,4下方的手寫區才會取多個字的辨識結果。
  • 2025.08.06 發布。
  • 2025.07.30 v1.0
閱讀全文
By at 沒有留言:
標籤: , ,

2025年7月26日 星期六

Doodle Petals : DD Petals 花瓣字

2025年7月26日 星期六

▋ 花瓣與手寫交織的遊戲

最近 HTML5 FUN 發展了一系列的 Doodle 小工具與遊戲，其實是由尚未公開的 DD Board 起的頭。DD Board 有一個花瓣字的元件，玩著玩著，就不小心和 Google 的手寫辨識擦出火花，讓 DD PETALS 變成單獨的遊戲先在這裡分享了。

▋ DD PETALS 的玩法

DD PETALS 畫面中會有一朵花，花的上方會有提示，而中央會有題目；目前的遊戲有三種模式，看國字造詞、看部件填部件，或是看數字填算式。

  • 手寫填答：作答時，將答案寫在花瓣上，經過一會會兒，如果答對，會出現一顆星星。
  • 大橡皮擦：想擦掉某一片花瓣上的字，就在該花瓣上長按一秒後放開。
  • 造詞模式：例如題目「雄」，就在花瓣上寫「英」、「心」、「偉」......等，讓它成詞。咦～那可以寫「國」變成「國雄」嗎？ ^_^
  • 部件模式：例如題目「口」，就在上方花瓣上寫「木」變「杏」，右側花瓣寫「丁」變「叮」......等。
  • 數學模式：例如題目「6」，就在花瓣上寫「2x3」、「24÷4」、「5+1」、「8-2」......等，讓計算結果是題目的大小。

在「筆順練習」第三版練習時的上方選單有一個「花瓣造詞」，按下去即可玩所有字的造詞。

另外，目前提供三個遊戲範例，請按底下的按鈕啟動。



▋ 自製遊戲

DD PETALS 的可以讀取 Google 試算表中的題庫，如果想自製遊戲，可以：

  • 先開啟底下的 Google 試算表：
    【範例檔案】👉 按這裡開啟試算表檔案 👈(請自行建立副本)

  • 建立副本。
  • 設定試算表的「共用」為「知道連結的任何人」。
  • 在自己的副本中，選取要製作的工作表(造詞或是數學)，並修改題目內容。
  • 在瀏覽器的網址列複製工作表的網址。

✅ 將試算表網址轉為遊戲網址：

✅ 不想使用試算表，也可以即時輸入國字(不能指定花瓣數量)或數字來取得遊戲網址：


▋ FAQ

  • 為什麼答案核對感覺有一點頓？
    • A : DD Petals 為了避免字還沒寫完就進行辨識，等約一秒鐘，確定未寫字後，才會進行手寫辨識；如果是造詞的題目，還多了一個查詢線上字典的程序，因此可能會稍候一下下才能確認對錯。不過，寫完一個答案，可以繼續在別的花瓣上寫下一個答案，如果錯了，再回頭去清除並修改即可。
  • 為什麼明明寫的答案對了，卻沒有出現星星？
    • A : 因為字跡需要先手寫辨識才能檢核答案，如果確定答案沒錯，建議清除再重寫看看；字的順序也很重要，辨識時是從左到右、由上到下。此外，如果是造詞的題型，也有可能是線上字典未收錄該語詞，建議換個語詞試試看。
  • 寫錯了，怎麼擦掉所寫的字？
    • A : 想擦掉哪一個花瓣上的字跡，就對準該花瓣按著不住，約一秒鐘後再放開，應該就能清除該花瓣上的字跡了。
  • 咦～好像可以兩個人一起寫字吔！
    • A : 是的， Doodle Petals 支援多點觸控，所以如果電腦或載具有支援多點觸控，是可以多個人同時寫字的，兩個人一起在電子白板或是平板上拼速度，應該也滿有意思的。
  • 造詞的答案是怎麼來的？
    • A : 造詞的題型，會先比對試算表中的參考答案欄位，如果沒有找到，會再跟「萌典」查詢，所以如果兩處都沒有收錄者，就會判定為回答錯誤。
  • 可以自訂答案嗎？
    • A: 在題庫的試算表中，D 欄起可以自行輸入要優先查核的自訂答案，數量不居。
  • 國語的題目有支援看題目的部件，寫出部件組成字的模式嗎？
    • A : 目前受限於 Google 的手寫辨識不是每個部件都可以辨識得出來，所以目前不支援部件組字的題目。未來有計畫加入已有的獨體部件字來當題目。(2025.07.29起支援部件模式[兩個部件組字])。
  • 數學的題目有支援分數的題型嗎？
    • A : 因為手寫辨識似乎沒有支援分數的辨識，目前只能使用整數或是小數，但是答案可以接受未使用括號的四則混合計算。
  • 匯出圖片的功能可以匯出所有題目的嗎？
    • A : 目前只能匯出畫面上的那一題為 PNG 圖片，匯出所有做過的題目為圖片的功能，未來應該會加入。
  • 回答不出來時，可以跳題嗎？
    • A : 只有使用網址 words 參數和 parts 參數命題的造詞、部件題型才有提供未填完花瓣，按「下一題」跳關的功能，使用試算表及數學題型請自行篩選會卡關的題目。
  • Doodle Petals 是用什麼開發的？
    • A : Doodle Petals 除了我自己一個個字敲出的程式碼，另外使用一些外部的函式庫或 API :

▋ 相關連結

▋ 更新記錄

  • 2025.07.30 v.1.3 部件模式支援八片花瓣，如果是用參數 parts 的的方命題，會自動計算要使用八片花瓣或是四片花瓣，沒有答案的花瓣會自動上鎖。
  • 2025.07.29 v1.2 利用全字庫 CNS IDS 來查表，新增部件模式，除了使用試算表，也可以在網址中使用參數 parts 來指定部件的題庫。
  • 2025.07.27 v1.1 造詞的題型會自動擷取中研院大腦與語言實驗室分享的「生字表字詞資料庫」當候選的答案，提高使用者的答對率；可透過網址中的參數 words 來指定造詞的題庫(類似筆順練習)，參數 numbers 則可以指定數學的題庫；透過 words 來命題時，「下一題」的按鈕只要通過一個答案，就開放跳到下一題，以免卡關，但是用試算表命題者，不能跳題，請自行過濾答案太少的字。
  • 2025.07.20 v1.0


已複製到剪貼簿！
閱讀全文
By at 沒有留言:
標籤: , ,

2025年7月16日 星期三

拼湊了「粄」的筆順

2025年7月16日 星期三

上週程式玩到煩了，決定來做一下苦活兒，調劑一下。大概是距離新學期開學還有一段時日，之前能抓到國小課本生字清單的來源，都還沒有更新，只好到三大出版社的線上資源去找了。

翰版已在線上的大補帖光碟中提供各冊生字清單在一個檔案中，而且格式跟我需要的一模一樣，算是最佛心的了。康版雖有大補帖為名的生字清單，只有一年級的，其它年級的，得由格式很不同的 MS Word 檔中去挖(不懂，為什麼要用直式表格)；研究出康版的格式有兩種規則，最後寫了個可以全選、複製、貼上的轉換小工具，哈！下回就可以直接用了！南版的則只能由一冊冊生字清單的 PDF 中挖掘，它國字的部份是圖片，只能複製到注音的「國字」，哇！很不好玩，很多都是利用同音的國字來標注音的，所以複製到的國字，當然就降低可用度，還要手動輸入，並核對、校正的地方很多，不過幸好有早發現字根本錯字一堆，不然上線就丟臉丟大了；一陣敲敲打打，也是修正完畢。花了大半天，把 114學年度上學期的生字筆順都建置完畢。（註：苦活兒做完沒幾天，三個版本的線上資源也都完整上線了，哈！白忙一場？還是有不少收獲的）

有善心人士看到上週新上線的生字清單中有誤，我查了一下線上電子教科書，確認生字清單有誤，改清單不太花時間，倒是有一個我十幾年前教中年級就遇到過的「缺字」比較麻煩。是的，教育部的筆順網並不是每個國字都有建置筆順資料，哪些字有筆順資料，可以到教育部筆順網的 FAQ 頁面中查到：

引自常見問題集「有關內容 Ｑ1」，目前 (2025.07.16) 是：

共收錄個6,063國字筆順動畫，另附有37個注音符號的筆順動畫。

翰版中有個生字「粄」，並不在這 6063 個國字內，教育部筆順網查詢結果的網址:

我以前教中年級國語也遇過這個字，正因為這樣，在 HTML5 FUN 中才會有一個「筆順編輯器」，可以讀取現有的國字筆順，自己來重組缺的字。以前因為筆順的資料都是直接讀取教育部筆順網的資料，但是自從筆順網 2025年1月改版以後，已經無法簡單地直接讀取筆順資料，所以改用他法自立救濟了。也正因為如此，我順手東拼西湊，將「粄」加入非官方的資料庫，讓它可以在 HTML5 FUN 的筆順練習中出現了。


[圖1] 粄的筆順組合

參考一下 [圖1] ，應該看得出來「粄」這個字是如何開始暫時被支援的吧！它已經可以在 HTML5 FUN 的筆順練習中使用，但是只支援筆順練習，語音的部分只能等教育部什麼時間建置好了。

不過，年初時有發現許久沒用的 HTML5 FUN 筆順編輯器有臭蟲，無法由網路下載字的筆順資料而卡住，只是一來，用得人很多，二來，想用新一點的技術來改寫，也就放著沒動它了。如果想用，小技巧就是，先使用筆順練習將要拿來拼湊新字的國字先下載過筆順資料，再開啟筆順編輯器，臭蟲就不會跑出來搗蛋。

▋　相關連結
閱讀全文
By at 沒有留言:
標籤: , ,

2025年7月8日 星期二

Doodle Car : DD Car : 嘟嘟車

2025年7月8日 星期二

 Doodle Car (簡稱 DD Car 或嘟嘟車) 是 HTML5 FUN 2025年7月新增的遊戲，不但可以挑戰題庫範例，還有遊戲地圖編輯器，可以設計遊戲給別人玩。由於過關的方法不見得只有一種，如果能夠再加上討論，交流心得，應該會更有趣。


Doodle Car 嘟嘟車
DD Car嘟嘟車地圖編輯器

玩法很簡單，每一關都會有一部嘟嘟車和終點，只要在畫面中手繪線條(馬路)，並按「開始」或是「增加」鈕，讓嘟嘟車能碰到終點，就算過關。按啟動鈕來動動腦，挑戰一下吧！


▋ 小秘訣

  • 嘟嘟車有重量，下方沒有東西支撐時，是會往下墜落的。
  • 目前車子沒有是沒有動力的，必須靠斜坡，或是碰撞才能動；而畫面中的磚牆是障礙物，球會滾動，箭頭則可以讓嘟嘟車加速或是跳躍。

▋ Q&A

  • Q: 可以自己設計遊戲關卡嗎？
    • A: DD Car 有遊戲地圖編輯器，可以使用拖曳圖示的方法來設計自己的遊戲，還能直接分享遊戲連結。
  • Q: 遊戲關卡設定可以儲存嗎？
    • A: DD Car 可以由遊戲網址中讀取遊戲，也可以由 Google 試算表中讀取遊戲資料，所以保留遊戲地圖編輯器製作的網址、資料，或是將關卡資料儲存在 Google 試算表均可。
  • Q: 如何在 Google 試算表中儲存遊戲設定？
    • A: 先開啟底下的 Google 試算表，並建立自己的副本，然後利用 DD Car 的地圖編輯器設計好各關的地圖，按 [複製] 鈕後，再貼到自己的試算表。
    • 【範例檔案】👉 按這裡開啟試算表檔案 👈(請自行建立副本)
  • Q: 如何將 Google 試算表的網址變成嘟嘟車的遊戲網址？
    • A: 先將 Google 試算表「共用」給「知道連結的任何人」，然後複製試算表的網址(不見得要使用第一個工作表，想用哪一個，就切到那個工作表，再複製網址；所以一個試算表文件中可以使用多個工作表來儲存，變成不同的遊戲)。
    • 👉 按這裡進行試算表網址轉遊戲網址 👈
  • Q: 最多可以設計幾關？
    • A: 程式並沒有限制，端看用什麼方式存取資料；如果關數很多，會比較建議使用 Google 試算表來儲存資料。
  • Q: 遊戲地圖編輯器打開的遊戲網址，為什麼無法製作 QR code？
    • A: 如果設計的遊戲地圖有很多關，而且關卡都很複雜，會讓編輯器製作的網址變很長，而一般的 QR code 產生器可能會有網址長度的限制，就會無法生成 QR code。怎麼辦呢？建議在遊戲編輯器的工具區中，找到「複製」鈕，將設定資料複製到剪貼簿後，再貼到 Google 試算表中；以試算表來當遊戲的資料庫。
  • Q: DD Car 是用什麼開發的？
    • A: DD Car 主要是使用 Phaser 的遊戲框架，再加上 Planck.js 的物理模擬。遊戲地圖編輯器則未使用任何框架。

▋　相關連結

▋　更新記錄

  • 2025.07.01 Map Editor v1.0
  • 2025.06.25 Doodle Car v1.0


已複製到剪貼簿！
閱讀全文
By at 沒有留言:
標籤: , ,
訂閱： 意見 (Atom)
 
雄::gsyan © 2009. Design by Pocket