HTML5 FUN 中，很多遊戲都有支援「語文高手格式」的題庫，語文高手格式其實是2009年我的一個投籃 Flash 遊戲和足球 Flash 遊戲所用的題庫格式，主要是支援多音字、形近字或同音字的題型，並且可以加上注音的格式，後來甚至有製作題庫的國字加注音產生器(詳見「雄:HTML5:語文高手題庫&國字加注音產生器」)。以前每學期都會建置「語文高手」的題庫讓學生可以複習、挑戰；本文中可以自行選擇要挑戰的內容及遊戲模式，目前提供 HTML5 FUN 的投籃高手、足球高手、兩人PK和四人PK的遊戲模式，來挑戰自己的字音字形能力吧！
▋ 遊戲選單
請按一下按鈕開啟選單，並選擇要玩哪一課的語文高手題目：
▋ 相關連結
▋ 更新記錄
Windows 7 撐了很久，去年底才接上新的 SSD 安裝十月被 MS 終止服務的 Windows 10，滿好笑的，人家終止服務了，我才開始全時使用。現在電腦中完全沒有安裝 MS Office，後來為了能在本機讀取 MS Office Word 的檔案(實在不懂，為什麼教科書出版社提供的備課檔案，居然連很簡單的生字清單，也要放到 Word 表格？)，安裝了 LibreOffice。不過 Word 的表格實在是大魔王，無論是在 LibreOffice 或是 Google 文件中，亂就算了，連要將表格中的文字複製出來，很多都還是極不正常；為了撈出 HTML5 FUN Partdle 用的生詞和筆順練習用的生字清單，耗費了我很多時間。
▋ 不安裝 MS Office 要怎麼讀 Word 檔案？
想要在不安裝 MS Office 的情形下讀取 Word 檔案的內容，除了 LibeOffice 和 Google 文件，MS 很久以前的 Word Viewer 或許是一個解方，雖然它對表格還是不見得百分之百的重現（很奇妙！連自家工具都解不了的表格）。
看一下維基百科中有關 Word Viewer 的說明：
▋ 哪裡下載 Word Viewer
MS 已經不提供 Word Viewer 下載了，怎麼辦？在維基百科的「網站參考」(上標的小數字) 中，其實都有提供 Wayback Machine (https://web.archive.org/) 幫忙備份的頁面，找舊物，找它就對了！(順手找了幫學校建置在市師的網頁 1997年10月版本)
底下將找到的 Word Viewer 中文版頁面整理供參考：
依序下載三個檔案，並安裝，就可以在沒有安裝 MS Office 的機器上讀取 .doc、.docx 的 Word 檔案了。
有了 Word Viewer 就可以讀取出版社提供的備課資料並複製來用，至於怎麼從看似很亂的資料中去蕪存菁，撈出想要的標的則又是另一個課題了，心得是會一點小技巧，效率就能提高很多，以前爬資料培養出來的能力，還是有用的。
HTML5 FUN 的 DD Petals 花瓣字，在中文字上的應用，除了可以玩「寫字造詞」，也可以看部件「寫部件湊成字」。「寫部件湊成字」出題跟回答都用部件，寫的部件還需要寫對花瓣(結構)，才算答對，無論是出題或回答，難度相對高一點。因此最近新增了一個新的玩法：看部件「寫形近字」；這個遊戲模式，出題跟回答都是用完整的國字，題目以完整的國字來出題，程式會自動解析出當問題的部件，答案要寫出帶有題目指定部件的完整形近字。
▋ 中文部件字型的問題
中文的部件有一些在電腦或是行動載具的系統字型中，是沒有造字的，所以用純文字來顯示時，就會變成一個「方框」或是「方框叉叉」(如圖1) ......；看不出題目是什麼，自然無法回答案了！數位發展部的「全字庫」網站，有一個「字形即時顯示」，可以產生字的「圖片」；所以只要我們的程式能夠偵測出一個字是字型「不支援」的字碼，再利用全字庫「字形即時顯示」產生圖片，取代「方框」的位置，這樣子就可以重現字的樣子了。
例如：「鳥」、「島」和「裊」有共同的部件「」，哈！是不是看不出什麼字形！它的 Unicode 碼是「F61B5」，可以到「全字庫」「字形即時顯示」中，將字或是字碼，填入表單的「Unicode 碼」欄位，試著讓它即時生出圖片來看，網址如下：
 |
| [圖1] 中央的方框叉叉是未正確顯示的部件 |
▋ 偵測未支援字的方法
怎麼樣偵測字是看不出內容的「方框叉叉」「方框..」呢？以下是一個偵測的小程序：
/**
* 偵測字型是否支援該字
* @param {string} ch
* @param {string} font
* @return {boolean}
*/
function isGlyphSupported(ch, font) {
let probe = document.getElementById("fontProbe");
if (!probe) {
probe = document.createElement('div');
probe.id = 'fontProbe';
probe.setAttribute('style', 'font-size:32px; visibility:hidden; position:absolute;');
document.body.appendChild(probe);
}
probe.style.fontFamily = (font ? font + ', ' : '') + "monospace";
probe.textContent = ch;
const w1 = probe.offsetWidth;
probe.style.fontFamily = "monospace";
probe.textContent = ch;
const w2 = probe.offsetWidth;
return (w1 == w2 && w1 != 0 );
}
當我呼叫「isGlyphSupported("雄", "Arial")」它以比較設定字型 Arial 前後的「offsetWidth」是否一樣 (注意：早期的 iOS 10.3.4 中，不支援的字都會為 0)，來判斷該字是否被字型支援。「花瓣字」出部件的題型時，預設會在花的中央放部件的文字，如果「isGlyphSupported」回傳為 false，就將原來的文字隱藏，改載入全字庫的「即時顯示圖片」代替。用圖片有什麼缺點呢？載入時間需牽就全字庫網站，較難控制，而且字看起來有鋸齒是難免的。為了怕載入圖片的時間較長時，使用者以為程式當掉了，所以我加上了轉圈圈的載入動畫。底下 [圖2] 是修正完的結果：
 |
| ［圖2] 正常顯示部件畫面 |
▋ 哪裡玩花瓣字「看部件，寫形近字」
DD Petals 花瓣字「看部件，寫形近字」和「寫字造詞」都是以完整國字來出題，題目可以共用，花瓣字的側欄選單中 (按遊戲畫面左上角三條線的圖示可以打開側欄選單)，有提供切換遊戲模式的選項及按鈕。所以由「雄筆順」的「花瓣字」選單進入 DD Petals 花瓣字的人，一個遊戲會有兩種模式可以玩。
三大出版社(南一、康軒、翰林)國語課本各冊、各課的生字筆順練習可以按這裡：
▋ 卡關了怎麼瓣
個人的經驗，花瓣字一開始玩，造詞會比組字容易很多，組字明明有的字很常在用的，一時之間反而想不出來。當然，花瓣字當初的設計初衷就是希望能好玩、多寫，所以滿建議用 open book 的概念，可以邊查，邊動腦。部件怎麼查呢？全字庫 (https://www.cns11643.gov.tw/) 是一個很好用的資源，它的「字碼查詢」選單中的「IDS查詢」和「部件查詢」，都可以用部件來找字。
另外，花瓣字的題目如果是部件相關的，可以按上方「關卡:?」，會有小驚喜哦！哈～我是覺得這樣子滿好笑的：「卡關」了，就按「關卡」！
▋ 相關連結
前兩天在測試新遊戲 HTML5 FUN Make 10 時，發現在 iPad 4 的 iOS 10.3.4 居然不能玩！研究半天，找到讓程式卡住的地方是監聽畫面動態的「ResizeObserver」，iOS 10.3.4 不支援，只好多加幾行，讓它改用傳統監聽「resize」事件的方法。以為從此就可以過著幸福快樂的日子了嗎？
來看看 Make 10 正常的畫面應該像 [圖1] 這樣：
 |
| [圖1] 正常排列的 Make 10 按鈕 |
結果在 iOS 10.3.4 中是 [圖2] 這樣，全部疊成一排：
 |
| [圖2] iOS 10.3.4 中全部疊在一起 |
Make 10 中的數字方塊使用了 grid 來配置按鈕棋盤：
.board-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 1%;
width: 100%;
height: 100%;
}
設計的是 8 x 6 的棋盤，在 iOS 10.3.4 中，8欄有正常分配了，6 排卻疊成一排。本來以為 iOS 10.3.4 不支援 repeat function，但實際用 getComputedStyle 取得 grid-template-rows 的值，它有執行 repeat(6, 1fr) ，只是回傳的值是「0px 0px 0px 0px 0px 0px」，分成六份了，但每一份都是 0px。
原來關鍵在 iOS 10.3.4 的 repeat 在計算寬度時，有正確解讀「width: 100%」，而在計算高度時，「height: 100%」使用了百分比，並沒有被正確解讀。如果換成別的單位，例如「height: 100vh」，就不會疊成一排了。
找到原因了，在 resize 的監聽程序中，加入程式計算高度即可，取得棋盤容器的總高，扣掉不能使用的空間，再將「height: 100%」最後用 px 的單位來設定。
不過，怎麼知道哪一個人用了像 iOS 10.3.4 這樣， repeat 有缺陷的瀏覽器呢？
本來是用前面提到的「0px 0px 0px 0px 0px 0px」，以按鈕的高度為 0 來判斷，但是這樣的方法只能在一進入遊戲時用，如果使用者旋轉了裝置或是讓視窗尺寸有所改變時，就無法再重新自動設定格子大小了。後來發現「gap: 1%;」這個也是個線索，因為 iOS 10.3.4 並不支援「gap」，所以用 getComputedStyle 取得的 gap 會是 undefined ，這個特性剛好可以用判斷是否為 iOS 10.3.4。
來看一下修改過後的畫面：
 |
| ［圖3] 不使用 % 設定高度後的棋盤 |
套上修正方法後的 [圖3] ，和原始設計的 [圖1] 比較，可以看到 [圖3] 格子與格子沒有間隔，所以格線看不出來；不過修正過後，至少在 iOS 10.3.4 中可以玩 Make 10 了！
▋ 完美修正
還是不能接受「gap: 1%;」沒被 iOS 10.3.4 處理到，那怎麼辦？
把 1% 到底是多少算出來，然後將所有格子找出來設定它們的 width 和 height 為 calc(100% - gap) 就可以有 1% 的間隔了，底下是實作的程序：
function gridRepeatFix() {
const boardGrid = document.querySelector('.board-grid');
if (boardGrid) {
if (typeof getComputedStyle(boardGrid)['gap'] == 'undefined') {
const style = getComputedStyle(boardGrid.parentElement);
let height = parseFloat(style.height);
height -= parseFloat(style.paddingTop);
height -= parseFloat(style.paddingBottom);
const gap = Math.floor(height * 0.01);
boardGrid.style.height = Math.floor(height) + 'px';
Array.from(boardGrid.children).forEach(cell => {
cell.style.width = `calc(100% - ${gap}px)`;
cell.style.height = `calc(100% - ${gap}px)`;
});
}
}
}
▋ 補記 DD Car Map Editor 中用的方法
在 DD Car Map Editor 中用了另一個方法，當 CSS 遇到不支援的 gap 時, 利用 margin-left 來補救，例如：
.main-content {
display: flex;
flex: 1;
overflow: hidden;
gap: 0.5rem;
}
就在後面多加判斷及補救
@supports not (gap: 0.5rem) {
.main-content > * + * {
margin-left: 0.5rem; /* LTR 預設 */
}
}
之前花了好多時間在程式裡除錯，原來只是 CSS 的問題，有了這個經驗，以後應該可以縮短卡關的時間了。
▋ 相關連結
以前在 iPad 上很喜歡挑戰一個 Make 10 的數學遊戲，玩法很簡單，就是由畫面下方的一堆數字方塊中，找到能和畫面上方的數字湊成 10 ，如果答對，方塊會消掉，答錯的話，方塊會往上堆；另外，在還沒過關之前，間隔一段時間，底部也會被插入一排新的方塊，如果方塊被推到頂部，或是計時器終了，遊戲就結束。除了湊成 10，遊戲也提供自訂要挑戰湊成其它數字。
這麼好玩的遊戲，當然也要寫一個可以跨平台玩的，現在 HTML5 FUN 中新增了 Make 10 湊10 的小遊戲。
▋ 啟動 Make 10
按一下底下的圖示，或是紅色的按鈕，就可以玩 Make 10：
▋ Q&A
▋ 相關連結
▋ 更新記錄
前兩天重寫了 HTML5 FUN Doodle Petals 花瓣字的花朵模組，完成後，順手弄了個「花朵產生器」，使用者可以自訂控制參數，產生自己的花朵圖案，並匯出為 SVG 或是 PNG 圖形檔。
▋ 啟動花朵產生器
按一下底下的圖示，或是紅色的按鈕，就可以開啟花朵產生器：
▋ 功能簡介
 |
| HTML5 FUN 花朵產生器截圖 |
上圖是 HTML5 FUN 花朵產生器的截圖。在夠寬的螢幕中，左側是參數設定區，參數改變，右側預覽的花朵也會立即更新；改到滿意了，設定區的最下方有「匯出 SVG」和「匯出 PNG」兩個按鈕，可以將花朵儲存到檔案中。
參數設定的部份，基本上是在設定區中，由上而下，一項項去設定，玩玩看，應該就可以上手了。幾個特別在此簡單說明：
▋ 相關連結
▋ 更新記錄
教育部國語辭典可以在《教育部國語辭典公眾授權網》中下載匯出的文字資料，而且有提供試算表格式，只要上載到 Google 雲端硬碟，另存為 Google 試算格式，就可以使用 JSONP 的方式，將試算表當資料庫查詢。
在 HTML5 FUN 中，筆順練習、Partdle 和花瓣字均有使用到查詢字典的功能，《國語小字典》和《國語辭典簡編本》1140925版有 45194筆資料， 因為資料筆數較少，查詢的等待時間算可以接受，但是《重編國語辭典修訂本》1140923版有 163907筆資料，從十幾萬筆資料中撈出要用的，會明顯的感受到「等」！如果想將《重編本》的工作表複製到別的試算表，甚至會出現錯誤訊息而無法完成。
▋ 輕鬆建立小而美的工作表
昨天做了一個小實驗，原本在《重編本》的檔案中只有一個名稱為「1140923辭典匯出」的工作表，新增一個工作表，命名為「short」，並利用參照工作表「1140923辭典匯出」的方式來建立資料，把我想查詢的「字詞名」(A 欄)和「注音一式」(I 欄)，用以下程序建立：
公式如果正確，顯示的內容應該就跟「1140923辭典匯出」A1 與 I1 中的一樣了。
 |
| [圖1] Google 試算表表的參照與自動填滿 |
因為 Google 試算表的新工作表預設只會有 1000 列，而「1140923辭典匯出」中有的資料遠遠超過 1000 列，所以要先查一下要參照的工作表「1140923辭典匯出」有多少列資料，如前面提過的，這個版本有163907筆資料，所以 163907 - 1000 = 162907，需要在工作表「short」的最底部再新增 16290 列，努力的捲到底部，就可以看到輸入框了 [圖2]，在裡面填入需要新增的列數。
 |
| [圖2] Google 試看表在底部新增多列 |
新增完所需要的列數，接下來可以準備使用魔法的快速按鍵「Ctrl + Enter」，幫我們自動填入資料了：
成功的話，等一下下，Ａ欄中應該就會將資料都自動填入空格了。
繼續「自動填滿」B 欄：
成功的話，B 欄的所有空格應該也自動填入資料了。
▋ 比比看誰快
新建立的工作表「short」只有兩個欄位，來和完整版的工作表比較一下查詢所花費的時間，底下在四個不同帳號，分別在兩個工作表查詢 A 欄帶有「山」這個字的，並回傳國字、注音兩欄所花的時間(單位為千分之一秒)：
✅ 工作表「short」(共2欄, 回傳 2欄, 找到 1038筆)
時間: 1691 , 筆數: 1038
時間: 1436 , 筆數: 1038
時間: 1264 , 筆數: 1038
時間: 1398 , 筆數: 1038
✅ 工作表「1140923辭典匯出」(共18欄, 回傳 2欄, 找到 1038筆)
時間: 4993 , 筆數: 1038
時間: 5137 , 筆數: 1038
時間: 4522 , 筆數: 1038
時間: 3584 , 筆數: 1038
只有兩欄的「short」很明顯地快多了。
來看看資料量較少的《簡編本》如何呢？
✅ 工作表「short」(共2欄, 回傳 2欄, 找到 137筆)
時間: 473 , 筆數: 137
時間: 624 , 筆數: 137
時間: 750 , 筆數: 137
時間: 525 , 筆數: 137
✅ 工作表「辭典匯出_1140925」(共15欄, 回傳 2欄, 找到 137筆)
時間: 1071 , 筆數: 137
時間: 1297 , 筆數: 137
時間: 1371 , 筆數: 137
時間: 1367 , 筆數: 137
《簡編本》如果查詢只有兩個欄位的「short」工作表，也可以比原來快很多。
實際應用在 HTML5 FUN 筆順練習和花瓣字中，可以讓程式更靈活了。哈！雖然使用者原來不見得感覺有在等待，畢竟程式在背景載入資料時，大伙兒都忙著操作別的呢！
▋ 相關連結
HTML5 FUN 的 DD Petals 花瓣字，可以拿來玩造詞、玩部件，或是玩數學 ，但是都要用手寫的方式來輸入答案。原本限制只辨識中文字與數字，注音符號則未完全支援；這幾天認真地研究如何克服注音符號手寫辨的問題，詳見「雄:注音符號手寫輸入提升辨識率」，有了大進展。看一下底下這張截圖 [圖1]：
 |
| [圖1] 花瓣字國字注音混合手寫 |
現在花瓣造詞如果是「低年級」課本生字的題目，就會自動啟用手寫注音的辨識功能(中、高年級要乖乖寫國字，不會就查字典啦！)。而且可以國字、注音混合使用哦！不過，寫字時要注意一些小技巧才會用得順手。
▋ 手寫注音小祕訣
花瓣造詞可以由 HTML5 FUN 筆順練習中直接啟動。為了提高注音符號的辨識度，以下幾點供手寫時參考：
 |
| [圖2] 注音符號不可以黏在同一個框框內 |
▋ 相關連結
Google 輸入工具的手寫輸入，中文的辨識率滿高的，當然也包括注音符號。但是如果將多個注音符號寫在一起，例如「ㄒㄩㄥˊ」，那大概就會失望了；直寫會被辨識為國字，橫寫可能變別的文字。一次一個注音符號可以正確辨識，多個就亂掉。山不轉路轉，路不轉人轉，轉個念，就可以讓 Google 輸入工具應用在手寫注音辨識了！
關鍵就在「一次一個」注音符號，所以如果在傳送筆跡座標時，一次只送出一個注音符號的，這樣就能發揮它的高辨識率了，底下可以測試一下成果。
▋ 手寫注音測試
小秘訣：
▋增強了什麼
為了提升手寫注符號的辨識率，利用程序做了一些調整：
▋已知問題
先列出一些待解決的問題：
▋應用發展
HTML5 FUN 花瓣字目前的版本有開放低年級的生字造詞，寫一個注音符號啟用虛擬鍵盤，接下來可以將本篇的技術應用在全注音手寫的方式輸入答案(註: 已於2025.12.09 整合完成)。另外，或許可以開發一個看圖、看國字，或是聽語音，手寫注音的注音高手。
▋ 相關連結
之前在測試「ㄅㄆㄇ西遊記」時，主要是在 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」了。這樣子，新載具、舊載具都能玩，皆大歡喜！
▋ 相關連結
幾年前，桃園縣政府教育局 (是的，沒看錯，看到「縣」，就知道有一些時日了) 有一個「ㄅㄆㄇ西遊記」的教育光碟，在瀏覽器還支援 Flash 時，可以在線上玩。
「ㄅㄆㄇ西遊記」可以用 Ruffle 載入後，在網頁瀏覽器，甚至行動載具中玩嗎？
可不可以玩？按一下紅色按鈕，就能知道結果！
▋ 載具中如何使用方向鍵
測試過了，只要使用 Ruffle 載入，就能在電腦或是行動載具的瀏覽器中玩「ㄅㄆㄇ西遊記」。「ㄅㄆㄇ西遊記」中有教學，也有遊戲，但是遊戲主要用鍵盤的方向鍵來操作，電腦上操作沒什麼問題，行動載具沒有實體鍵盤，要怎麼操作呢？這倒是一個大問題！
Ruffle 有內建虛擬鍵盤嗎？在只能使用觸控方式輸入的環境下，如果是在可輸入文字的元件中，Ruffle 會幫我們叫出系統的虛擬鍵盤，但是在玩遊戲需要使用鍵盤操作時，因為並非操作輸入文字的元件，目前就得自立救濟了！
 |
| ㄅㄆㄇ西遊記在 Ruffle 中的截圖 |
為了能在 iPad / Android 中玩「ㄅㄆㄇ西遊記」中的遊戲，我幫 SWF 遊戲啟動器加上了虛擬按鍵，需要按方向鍵時，可以按右下角半透明的虛擬按鍵即可送出相關的指令給 Ruffle ，效果和按實體按鍵一樣。
▋ 版權聲明
▋ 相關連結
《漢字說故事》是《中華文化總會》放在《中華語文知識庫 YouTube 頻道》中，有關中文字的動畫影片，兩期總共有180個字的精美動畫，每一部兩分鐘的影片中，除了介紹主題的字，還會有幾個衍生的字，應用在國字的學習相當不錯。影片在 YouTube 頻道中都可以找到，也有兩個相關的播放清單：
為了方便使用，我設計了一個「漢字說故事 YouTube 影片播放器」，有以下的功能：
▋ 開始使用
想立即試試看，就按一下紅色按鈕啟動：
▋ QA
▋ 版權聲明
本工具「漢字說故事 YouTube 影片播放器」只是一個自訂的 YouTube 影片播放器，僅用來搜尋及載入《中華語文知識庫 YouTube 頻道》中的公開影片的影片及其縮圖。版權均屬《中華語文知識庫》及《中華文化總會》。
▋ 相關連結
▋ 更新記錄
教育部筆順網收錄的國字有六千多個字，裡面有多少個多音字呢？
底下 516 個字都是(按一下可以在教育百科查該字)：
上不且中乘乾了予些亟亡亨什仇仔任佛估伽伺作伯供便俟倆倒們倔倡個倘倭偺假傍傀傳僮兒六共其冒冠分切刨削剌副創劃勒勞勝勦勾化匙匹區午卒南卡占卷參可召叨只句吐合吃吭否吧告呀呵呱和呢咎咳哇咽哄哈咯咱咻哩員哪哦啦啞啊喝喪喔單嗎嗾嘛嘔嘩噴噱噢嚇嚼囉囪囤圈圳地坊埋埤培塞壘夏大夫奇奄契女好妻委姊姥娜娩婁嫖子孫宛家宿寧射尉將少尺屏屬屯嵌差帖并幹幾底度弄弟強彈彷待得從徵怔思恫悖惡悶應戲扁扇扎扒扛把折抓拂抹拓拈拗括拾挑捎掖掃掄掙排提搶撇摟撈撕撒擔擰放教敦散數文斜於施旁旋晃景暈暖暴曲更曾會有期朝朴枕枝查枸柞校桔柴棹棲棋楞榜樂橫檻歙正歪歸殷殺比氏氓汗沒泌泥法泄沮泡洞洗涼混湛渦湯渴渾溺滑溜漂漲漯漿澄潦澎澹濟濺瀾為炸炮烙無煞熨燉燕燥爪父率王甚畜番當疋百的盛監省相看瞑瞭瞿矇矜知石磅磨祇祕禁禪秤稟種稱稽空答簸粥紅累結絡給綸繆繃縫縱繁繫署罷羊羋翟翹聽肚胖背脈脯膀臭與興舍般艮色艾茄若苔茲莎莞莘莫荷荼華菴著菲葷落葉葛蓋蔓蕃薄藏藉蘋虎處號虫蛇蚵蛤蛾蝦螞蠡行衝衣衰被裳裨褶要覃見親覺觀角解語說請調論識讀谷豁貉賁賈質趣足跑躂身車軋載輾轂轉轍辟逢逮過遠遲遺還邪那都酊重量釐釘鈷鋪鋼鏑鐺鑽長間閤阿降陸陶雋難雨露青靡靦革頓頡頸頭風食飲養馮馱骨鬲魄鮮鱖鵠麗麼齊龜乜亢俛偈勺喁囝圜垛宓峒崗彊徠徼忪慊摽撣攢杓栖榦欸洒洩漚澠瀧畬秘繳臊芾菟蓼薺藷虺蜚裼謾趿踉踦蹌邋酢鎬鏹閼闕頦駘鶻
▋ HTML5 FUN 筆順練習新功能
花了兩天的時間，用程式分析了【教育部國語辭典簡編本】蒐集的字，找出多音者後，再將五百多個字，以我印象中常用的讀音，好好地檢視了一番，調整了 HTML5 FUN 筆順練習部份的預設語音檔，資料庫中加入了注音清單的欄位，也新增了一項功能：
 |
| HTML5 FUN 筆順練習可自選多音字要播放的語音 |
現在使用 HTML5 FUN 筆順練習時，在「筆順示範」的功能頁面中，右側會出現注音的按鈕，想聽哪一個音的語音解說，就按下吧！
不過美中不足的是仍有部份讀音似乎沒有錄製解說的語音，像「們」這個字就只有「ㄇㄣˊ」的語音檔，「ㄇㄣ˙」就只能自己心中默念了。
▋ 相關連結
文總有一個《中華語文知識庫》，其中漢字影音有《漢字說故事動畫》，影片放在 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 網址，按個複製鈕就好了！
小工具的製作原理很簡單：
但是利用 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到底是哪一個字？在影片清單中沒有這一集。為了找出少了什麼影片，花了點時間，但功力又增加了不少 ^_^ 。
▋ 漢字說故事動畫搜尋小工具
建議再試試底下更新的方式，用這個小工具來搜尋、播放：
▋ 相關連結
上一則文「HTML5 FUN 筆順部件及 CNS 部件校正」中提到花了不少時間校對了 HTML5 FUN 的部件，也建立好筆畫清單，第一個應用的小工具「國字基本筆畫練習」來囉！
國字基本筆順練習小工具參考教育部《國字標準字體教師手冊》中的「國字筆畫名稱表」，提供28個基本筆畫及其例字的筆順示範與練習。
✅ 加碼製作28個基本筆畫的筆順資料及筆畫語音。
✅ 有六個筆畫示範時，會隨機出現動畫加強印象。
✅ 示範及練習會念出筆畫名稱。
▋ 開始使用
想立即玩玩看，就按一下紅色按鈕啟動：
在 HTML5 FUN 筆順練習中已加上啟動基本筆畫練習小工具的按鈕，按下去即可切換 :
 |
| 筆順練習中啟動基本筆畫練習小工具 |
▋ Ｑ＆Ａ
▋ 錯誤回報
❕❔ 資料初建立，難免有誤，如果發現任何問題或是錯誤，可以在底下留言區告訴我；有時間，一定會盡快處理。感恩～～
▋ 版權聲明
▋ 相關連結
▋ 更新記錄
發表文章
所有留言
《語文高手》選擇版本課別
