發表文章

Ubuntu 24.04.2 安裝繁體中文語系與中文輸入法

圖片
這週協助安裝24.04桌面版發現繁體中文語系又得要紀錄一下了。以前在Ubuntu 22.04.3時也有紀錄一下只是被自己遺忘,這裡補紀錄  Ubuntu 22.04.3 新酷音中文輸入法安裝紀錄   以下以快速筆記方式進行 1. 安裝Ubuntu 24.04.2桌面版 這裡就掠過安裝過程,請大家自行完成。依照慣例會是以英文安裝,以避免目錄預設變成以中文命名。 建議先執行軟體升版再繼續 sudo apt update sudo apt upgrade 2. 安裝並設定繁體中文語系 安裝繁體中文語系套件 sudo apt install language-pack-zh-hant 產生語系資料 sudo locale-gen zh_TW.UTF-8 啟用 繁體中文語系 sudo localectl set-locale LANG=zh_TW.UTF-8 完成後,請重新啟動電腦! 3. 重啟電腦並選擇保留命名 然後果看到系統顯示下面這張圖,請選擇 '保留舊名稱' ,不然以英文安裝的心血就白費了!!!! 4. 安裝中文輸入法 安裝酷音輸入法 sudo apt install ibus-chewing 5. 設定系統要使用輸入法 點擊螢幕左下角的環狀圖示,找到' 設定' 並點擊,等待設定頁App啟動 左列選單找到' 鍵盤 '並點擊→在輸入來源這區塊,找到' 加入輸入來源 '並點擊 點擊' 中文(臺灣) '→點擊' 中文(新酷音)' →右上角點擊' 加入 '按鈕 這樣就設定完可以用中文輸入法了。

在Ubuntu 22.04中更新成VirtualBox 7.1並啟用NVMe

圖片
使用Docker開發後很少開VirtualBox,不知不覺VirtualBox已經到了7.1版,之前建立的一些虛擬機器也因為Ubuntu升級無法正常啟動了,今天就來一併解決。 1. 將Ubuntu 22.04中的VirtualBox更新成7.1 從官方網站下載deb安裝檔 https://www.virtualbox.org/wiki/Linux_Downloads 我的OS是22.04.5 LTS (Jammy Jellyfish),可從 `cat /etc/os-release` 得知 VirtualBox新版本deb檔案是virtualbox-7.1_7.1.6-167084~Ubuntu~jammy_amd64.deb 對應的extpack檔案是 Oracle_VirtualBox_Extension_Pack-7.1.6.vbox-extpack 1.1 移除舊版Virtualbox sudo apt-get remove -y virtualbox sudo apt-get remove -y virtualbox-dkms 1.2 安裝新版本 首先安裝相依套件 sudo apt install libxcb-cursor0 安裝主套件 sudo dpkg -i ./virtualbox-7.1_7.1.6-167084~Ubuntu~jammy_amd64.deb 確認已安裝版本為7.1.6r167084 vboxmanage -v 1.3 安裝extpack sudo vboxmanage extpack install ./Oracle_VirtualBox_Extension_Pack-7.1.6.vbox-extpack 確認已安裝的extpack vboxmanage list extpacks 2. 啟用NVMe功能 為了讓VM能夠正確的抓取NVMe裝作為開機碟,請在一般分頁下方的系統部份,將主機板子分頁中EIF功能勾選,以便OS能正常存取磁碟。 存儲裝置分頁中,將硬碟控制器的類型改變成NVMe即可。 在VM管理員中的狀態會顯示成下面這樣 然後就可以啟動VM,再去裝你想要的作業系統囉!

[Node.js]計算檔案雜湊用來比對Cloud Storage的md5Hash

圖片
由於Cloud Storage返回的Metadata的md5Hash值是BASE64編碼過得資料,如下附圖,要比對是否相同需要生成相同的值。 這篇裡面會分別給予BASH指令和Node.js程式如何作用來比對GCS檔案的md5雜湊值

[Node.js]讀取JPEG相片EXIF資訊中的GPS和時間戳記

圖片
一些網站,如google photo,上傳相片後,會抓取偵測你的相片中的EXIF(Exchangeable image file format),自動得使用時間戳記資訊並歸類到合適的位置。 以前我是使用exiv2指令操作或複製exif資訊 ,這篇整理使用Node.js程式取出EXIF的GPS與時間戳記,時間戳記還會轉換有時區資訊的Date物件。 安裝套件 npm install exif 程式碼 import exif from 'exif' ; const ARGS = process . argv . slice ( 2 ); if ( ARGS . length < 1 ) { console . error ( `given 1 arg, usage: node ${ process . argv [ 1 ] } <input-image-path>` ) process . exit ( 1 ); } // 從第一個參數取的照片檔案路徑 const photoPath = ARGS [ 0 ]; // 從指定路徑取得exif資訊, 這是一個async函數 function readExifFromPathAsync ( image ) { return new Promise (( resolve , reject ) => { new exif . ExifImage ({ image }, ( error , exifData ) => { error ? reject ( error ) : resolve ( exifData ); }) }) } // 將timestamp字串轉換成Date function exifTS2Date ( timestamp , timezone ) { // 時間戳記字串格式是 YYYY:MM:DD HH:MM:SS const regex = / ^ ( \d {4} ) : ( \d {2} ) : ( \d {2} )[ T ]( \d {2} :\d {2} :\d {2} ) $ / ; // ...

[Next.js][App router]在LINE內瀏覽器內多選檔案/圖檔觸發onchange事件的問題

圖片
因為遭遇了在Android手機LINE瀏覽器內使用網頁時,當設定input type="file"容許多選,在onchange事件取不到多選的檔案。 *我實測若點了界面上的...按鈕,選其他資料夾內的檔案,則不會取不到多選檔案,初步判定是LINE瀏覽器與Android系統之間的溝通問題* 因為暫時還沒有好的方式,所以就在網頁上顯示提示,然後請不能接受的使用者移動到外部瀏覽器來觀看。 下圖是LINE瀏覽器的user agent字串於三星s22手機上

解決Firebase部屬失敗HTTP Error: 401, Request had invalid authentication credentials.

圖片
這幾天寫了好幾個功能,今天想要部屬到Firebase時發生了401部屬錯誤,完整訊息如下: Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. 該怎麼處理呢? 

[Next.js][App router]使用Route Handler處理檔案上傳(Firebase hosting/Cloud functions)

一個會員網站提供上傳個人圖檔是一個很基本的應用。現在如AI解析及互動上也會需要用到圖檔、聲音,甚至是影片來提供服務,所以上傳檔案是一件稀鬆平常的事情。 當然,firebase中,可以透過使用Firebase storage的前端套件來快速的完成這件事情,不需要額外思考檔案上傳背後的問題。然而,當你沒有使用Firebase Auth來作會員登入系統,你馬上就面臨資料隱私的兩難問題。 你的Firebase storage存取規則無法檢驗存取的是否為用戶,且無法依照會員角色來區分存取權限。直到最後你只能妥協,將storage存取權限完全開放,使得上傳功能與用戶資料完全裸奔在網際網路上。在App router中透過Route Handler,我們可以管控會員是否有上傳與存取的權利。

[Next.js][App router]使用Server Action操作MongoDB基礎方式

圖片
這篇簡要的彙整成6個步驟,演示如何以以Server Action在Next.js中操作MongoDB,輸入新的資料。 演示成果可 點擊這裡進入[輸入時顯示候選清單]

解決zip解壓縮檔案名稱亂碼問題windows&ubuntu

圖片
久久遇到一次的老問題,安裝其他解壓縮軟體就能無痛處理。

[Next.js][App router]分享使用自幹auth模組的元件及Server Action

圖片
因為NextAuth無法直接在Firebase hosting上使用所以開始自幹一個auth模組,這篇分享一些關於模組週邊使用的5項程式碼。 分享以下5類程式碼 AuthSessionProvider.tsx layout.tsx middleware.tsx Server Actions Components