會員系統公告：FB 登入功能失效 請重新註冊

January 7, 2024, 12:10 am

≫ Next: FB 登入 API 只允許商家使用，如何讓 Google API 實現自動登入？

≪ Previous: 玩 DOSBOX 遊戲如何調整視窗大小+位置+解析度

$

0

0

本站「會員系統」在進入 2024 後，就有讀者反應無法加入會員，FB 登入時會顯示 "應用程式錯誤"，這是因為「FB 登入 API」現在已經不開放給個人使用，強制開發人員一定要完成「商家驗證」才能取得權限。這也就是說，現在只要沒開公司、取得營業登記證明，網站將不能裝 FB 登入功能。 其實我對 Facebook 的使用體驗一向不太好，開發應用程式時也常感到挫折，由於頻繁改版、權限一再變更，導致功能失效或工具不能使用，近年則是每隔一段時間就要求開發人員進行許多細節審查。而這些事在開發 Google 應用程式時則很少遇到，因此決定全面將會員系統改用 Google 登入。 只是如此一來，原本的會員資料將失效，必須重新註冊帳號，不過主要影響的僅是「加值會員」，請 WFU BLOG 舊會員注意本篇說明。

前往會員系統

(圖片出處: pixabay.com)

一、加值會員資料移轉

舊的會員註冊資料是以 Facebook 帳號資訊作為儲存依據，現在起註冊會以 Google 帳號資訊作為依據，然而兩種帳號如何轉換會是一個大問題。能作為相同資訊進行判別的只有「Email 郵件地址」，然而使用者註冊 FB 與 Google 帳號時不一定會使用相同 Email，所以也不宜貿然使用程式自動轉換新舊帳號，以免發生誤判。 「加值會員」由於在本站會員系統內儲存過點數，本站會協助轉換點數到新帳號，不過只能採人工方式處理(不宜由程式判斷)。請用 Google 帳號重新註冊後，填寫文末的「三、聯絡表單」留下這些資訊：

• 註冊帳號名稱
• 以前 FB 登入註冊使用的 Email
• 現在註冊使用的 Google 帳號 Email

填寫之後會儘速處理，若一段時間仍發現沒有移轉點數，可再與本站聯繫。

二、一般會員重新註冊

沒有儲值過點數的「一般會員」，加入會員系統的主要功能為閱讀「會員限定文章」，那麼新舊帳號資料沒有轉換並不會造成什麼問題，所以請用 Google 帳號重新註冊即可。

三、聯絡表單

加值會員使用上有任何問題，請用下面的表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

填寫表單網址：(必填)

填寫表單目的：(必填)

請詳細描述您的需求、問題或意見：(必填)

註冊帳號名稱： 以前FB登入註冊使用的Email： 現在註冊使用的Google帳號Email：

更多會員系統相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

FB 登入 API 只允許商家使用，如何讓 Google API 實現自動登入？

January 16, 2024, 3:10 am

≫ Next: Blogger 日期格式化詳解

≪ Previous: 會員系統公告：FB 登入功能失效 請重新註冊

$

0

0

2023 年底前幾個月收到 FB 給開發人員的通知，提醒「登入 API」要完成「商家驗證」，否則使用權限會受到影響。果然進入 2024 後本站的「會員系統」因為使用了 FB 登入，立刻收到讀者回應，說會顯示 "應用程式錯誤"無法進行註冊。 雖去年事先想處理此事，但看過「FB 官方文件」發現，商家驗證需要提供 "公司登記執照"、"營利事業登記證"、"政府核發的營業稅務文件"...等相關資料，沒有開公司的話根本無能為力。 查了一些資料，例如「想要串接整合 Facebook 登入/註冊功能？你得先進行 Facebook 商家驗證。」，可以確定對於 "個人"開發者而言，想使用 FB 登入 API 已是死路一條，只能研究如何用 Google API 來取代。 由於 2024 Google 登入 API 也有一些變革，要做到跟 FB 一樣能自動登入也不是那麼容易的事，請見本篇的心得整理與實作範例。 (圖片出處: pixabay.com)

一、Google 登入 API 說明

1. 2023 Google 登入去年 Google 登入功能有一次重大變革，通知開發人員 API 必須由原本的「Google Sign-In 移轉為 Google Identity Services(GIS)」。因為操作方式及語法變化很大，已將實作範例程式碼整理到這篇「2023 新版 Google 登入 API」。 2. 2024 Google 登入今年 2024 有使用 Google 登入功能(GIS)的開發人員，都會收到這個「不使用第三方 cookie」的通知，對於操作 API 有稍微的變更，簡單摘要如下：

• 為了改善使用者隱私，Chrome 瀏覽器會逐步不使用第三方 cookie
• 登入時瀏覽器會顯示使用者提示
• 參照「遷移網頁應用程式」這部份的內容，程式碼中有些方法會受到影響，例如 isDisplayMoment()、isDisplayed()、isNotDisplayed()、getNotDisplayedReason()、getSkippedReason()...

由於不使用第三方 Cookie，代表不一定能紀錄上次登入的是哪個帳號，較難實現以往使用「FB 登入 API」的自動登入效果。 3. 無痕模式的處理實測 Google 登入功能(GIS)在無痕模式下的效果：

• 使用官方預設按鈕，點擊後可彈出登入視窗
• 使用自訂按鈕，也許是不能使用 cookie 的關係，無法正常執行、彈出登入視窗

如果想兼容瀏覽器無痕模式，或是開發的程式比較簡單，或許使用官方預設登入按鈕即可。 但官方登入按鈕彈性較小，開發起來較不方便，我個人還是習慣用官方 Javascript API 操作自訂按鈕，所以用程式碼偵測到無痕模式時，跳出警告訊息提醒訪客不要用無痕模式。

二、Google API 如何自動登入

Google 登入功能(GIS)預設不使用「自動登入」效果，然而各大網站的會員都能自動登入，若本站讓會員每次都要手動點個幾下才能登入，著實是非常不友善的設計。為了實現以往使用「FB 登入 API」的自動登入效果，得詳細研究 Google 官方操作文件。 1. 為何 Google 無法自動登入經過我的實測，使用官方預設按鈕登入，而且啟動「自動登入」的設定，但發現重整頁面後，仍然不會記憶我上次登入的帳號，這讓我十分納悶。 後來找到官方「自動登入及登出」的說明：

自動登入必須符合下列條件...使用者必須先登入自己的 Google 帳戶...同意與您的應用程式分享帳戶設定檔...如果使用者有多個 Google 帳戶，而且造訪您的網站，就必須先登入單一 Google 帳戶，並提供該帳戶的同意聲明。

終於找到原因了，原來我的瀏覽器有多個 Google 帳號，可能現在 Google 決定不使用第三方 cookie，導致無法記憶上一次登入的帳號，那麼當我有多個 Google 帳號時，就無法自動登入了。除非我把 Google 帳號登出到只剩一個帳號，這樣才能實現「自動登入」... 對於這樣的結果我當然無法接受，哪有辦法告訴所有會員，必須先登出其他 Google 帳號才能自動登入，因此繼續研究解決方案。 2. 研究官方文件根據官網文件「使用 Google JavaScript API 登入」，可用來實作自動登入的參數有這些：

• auto_select: 設定為 true 可以啟用自動選取功能 → 前面有提到，當使用者有多個 Google 帳號時，登入功能依然無法判定如何自動選取
• login_hint: 如果設定了特定數值，例如 Google 帳號 email，就能自動選取該帳號執行登入

有了以上這兩個參數，就能組合起來實現自動登入。既然 API 不使用第三方 cookie 來儲存上次登入的帳號，我們可以自行儲存在 localStorage，然後利用 login_hint 讀取，轉個彎完成自動登入的效果。

三、實作範例

1. 準備動作操作 API 之前需要先建立 Google API 專案，如果還沒建立過的話，請完成以下流程：

• 「取得 Google API 金鑰流程」→「一、建立專案」
• 「處理 OAuth 憑證」→「二、建立 OAuth 憑證」→「三、設定 OAuth 同意畫面」

2. 範例程式碼以下用「Bootstrap 按鈕 + jQuery」製作範例程式碼： <!--jQuery--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!--Bootstrap--> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <!--登入、登出按鈕--> <div id="GOOGLE_login"><button class="btn btn-large btn-primary">GOOGLE 登入</button></div> <div id="GOOGLE_logout"><button class="btn btn-large btn-warning">GOOGLE 登出</button></div> 目前狀態： <div id="GOOGLE_status"></div> <script> let autoLoginGoogleAccount = localStorage.autoLoginGoogleAccount || ""; // 自動登入儲存的帳號 let $status = $("#GOOGLE_status"); function init() { $.getScript("https://accounts.google.com/gsi/client", function () { // 進行登入程序 startLogin(); }); } // 進行登入程序 function startLogin() { google.accounts.id.initialize({ client_id: "5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com", callback: onLogin, prompt_parent_id: "GOOGLE_login", // 設定登入視窗的位置, 若不設定此參數則預設出現在網頁右上角 auto_select: true, // 自動登入 login_hint: autoLoginGoogleAccount // 自動登入儲存的帳號 }); google.accounts.id.prompt((notification) => { // 處理登入失敗 loginFail(notification); }); } // 處理登入取得的資訊 function onLogin(response) { var credential = response.credential, profile = JSON.parse(decodeURIComponent(encodeURIComponent(window.atob(credential.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))))), html = ""; // 儲存登入帳號 localStorage.autoLoginGoogleAccount = profile.email; html += "ID: " + profile.sub + "<br/>"; html += "會員暱稱： " + profile.name + "<br/>"; html += "會員頭像：" + profile.picture + "<br/>"; html += "會員 email：" + profile.email + "<br/>"; $status.html(html); } // 處理登入失敗 function loginFail(notification) { /*notification.g 數值 → display: 登入中, skipped: 取消登入, dismissed: 登入成功*/ if (notification.g == "skipped") { // 取消登入時 $status.html("取消登入 Google 帳號，請稍後再試"); } if (notification.g == "display"&& notification.h == false) { // 無痕模式無法登入 $status.html("無法登入 Google 帳號，請離開無痕模式或使用 Chrome 瀏覽器登入。"); } } // 進行登出 function logout() { // 刪除自動登入儲存的帳號 localStorage.autoLoginGoogleAccount = ""; // 登出 google.accounts.id.disableAutoSelect(); $status.html("已登出"); } init(); // 點擊登入 $("#GOOGLE_login").click(function() { // 進行登入程序 startLogin(); }); // 點擊登出 $("#GOOGLE_logout").click(function() { // 進行登出 logout(); }); </script>

• 紅色字串請置換為前面「處理 OAuth 憑證」流程取得的「用戶端 ID」
• 程式碼請放在前面「處理 OAuth 憑證」流程設定的網站

3. 範例效果下面按鈕為範例效果，可進行操作並注意對應狀態的文字。 首次登入完畢後，重整頁面即可看到自動登入的效果。

GOOGLE 登入

GOOGLE 登出

目前狀態：

更多 Google 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 日期格式化詳解

January 31, 2024, 2:54 pm

≫ Next: Google Drive 外連圖片無法顯示的解決方法

≪ Previous: FB 登入 API 只允許商家使用，如何讓 Google API 實現自動登入？

$

0

0

Blogger 如果想調整日期格式的話，後台就有許多排列組合可選，照理說總能找到一個滿意的。只不過 Blogger 是外國人設計的產品，日期格式主要按照西式的排列習慣，還真不一定能符合所有人喜好。 雖然 Blogger 官方並沒公開關於日期格式化的說明，不過網路上倒有一些資料可循，本篇會詳細說明如何將日期改成自己想要的格式，中英文都可以。 (圖片出處: unsplash.com)

一、注意事項

1. 參考資料本篇所有修改語法的資料來源為這兩篇：

• Format Post Date and Add Class
• blogger-snippets-Date

從發布時間來看，都是至少 4 年(2020)之前的資訊，代表 4 年以前按照這些資料來修改 Blogger 範本是沒問題的，那麼現在呢？ 2. 官方 RWD 範本經實測後，官方 RWD 範本例如 Contempo、Soho、Emporio、Notable、Essential，如果想要搜尋範本中跟日期相關的語法，會發現已經找不到能修改的地方了，代表過去幾年 Blogger 官方 RWD 範本又做了不小的變更，不讓使用者修改的地方又更多了。 這個狀況我一點都不意外，因為當初 2017 年「Blogger 推出官方 RWD 範本」時，我就做了這樣的結論：

官方的設計明顯希望站長們不要動這個 RWD 範本，預設的效果就放手去接受它吧

所以對於官方 RWD 範本的使用者，如果你是熟練的老手，才建議參考本篇的資料，自行在範本中找合適的地方進行改。如果是新手的話，建議要嘛接受預設效果，要嘛改用「官方非 RWD 範本」 3. 官方非 RWD 範本怕新手不知道什麼是「官方非 RWD 範本」，所以多說明一些，例如 Simple、Picture Window、Awesome、Watermark、Ethereal、Travel。 本篇的語法建議使用在以上這些範本，比較不會有挫折感。

二、首頁每篇文章都顯示日期(新版)

1. 修改方式多年前寫過一篇「讓 Blogger 首頁每篇文章都能顯示日期」，剛好本篇參考資料的語法，可以讓這件事變得簡單，所以提供新版的作法。 在範本中搜尋以下字串： <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if>改成以下字串即可： <h2 class='date-header'><span><data:post.date/></span></h2>2. 原理說明 Blogger 語法現在多了 <data:post.date/>日期資料，不必再像以前須判斷是否為該日期的第一篇文章，改用 <data:post.date/>後就能每篇文章都顯示日期。

三、自訂日期格式

1. 日期格式化語法根據參考資料，Blogger 日期格式化語法如下： <b:eval expr='data:post.date format "YYYY-MM-dd"'/>

• YYYY: 年份 4位數
• MM: 月份 2位數(自動補0)
• dd: 日期 2位數(自動補0)

由於我們使用了分隔符號 "-"，在網頁上顯示的效果如下： 2024-01-252. 修改技巧可任意使用中文字串，就便成了中文日期，例如： <b:eval expr='data:post.date format "YYYY年M月d日"'/>顯示效果如下，不會自動補 0： 2024年1月25日3. 修改範本接著以「官方非 RWD 範本」為例，說明如何修改日期格式。範本中代表日期資料的有這些標記： <data:post.dateHeader/> <data:post.timestamp/> <data:post.date/>在想要修改日期格式的地方，將以上這幾個 Blogger 標記語法改成前述的日期格式化語法即可。

四、日期格式化參數

前面提到的參考資料「blogger-snippets-Date」整理了許多日期格式化參數，建議修改時可以參考，以下列出一些實用的修改方式，請注意大小寫有分：

• 月份：MMM → 顯示三個字英文縮寫，例如 Jan, Nov
• 月份：MMMM → 顯示完整英文，例如 January, November
• 星期：ww → 顯示兩位數
• 天：EEE → 顯示三個字英文縮寫，例如 Mon, Tue
• 天：EEEE → 顯示完整縮寫，例如 Monday, Tuesday
• 上下午：aaaa → 例如 AM, PM
• 小時：hh → 顯示12小時制，兩位數
• 小時：HH → 顯示24小時制，兩位數
• 分鐘：mm → 顯示兩位數

更多「Blogger 語法」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Google Drive 外連圖片無法顯示的解決方法

February 14, 2024, 10:42 pm

≫ Next: Blogger 如何自訂縮圖、封面圖尺寸

≪ Previous: Blogger 日期格式化詳解

$

0

0

最近有客戶表示擺放在 Google Drive 的圖片，在網頁上都無法顯示了，但如果把圖片網址貼在瀏覽器網址列，這張圖片外連其實還是能顯示。而且進入雲端硬碟帳號檢視，圖片並沒有不見，也都能叫出來顯示，不曉得發生什麼情況。 查了一下國外論壇討論串，發生災情的時間點大致是上個月初(2024年1月)，有人提到這件事跟「Google 雲端硬碟中的第三方 Cookie」有關，而這個第三方 cookie 的變革在前陣子的的文章「如何讓 Google API 實現自動登入？ 」→「一、Google 登入 API 說明」→「2. 2024 Google 登入」也有提到，代表今年 2024 因為 Google 逐步移除第三方 cookie 造成了不少影響。

<< 請注意！本篇文章含會員加值文章內容 >>

(圖片出處: pixabay.com)

一、Google Drive 圖片測試

測試了一下 Google Drive 圖片，根據我之前寫的「Google Drive 外連產生器 V2」，來看看各種情況。 這是一個分享連結範例：

• https://drive.google.com/file/d/1-2QjOJf8OpAw-mor_CINhKCCjQ-27tGA/view

這是上圖的 Google Drive 外連範例：

• https://drive.google.com/uc?id=1-2QjOJf8OpAw-mor_CINhKCCjQ-27tGA

以上連結點開後都能看到圖片，但如果使用 html 圖片語法的話： <img src="https://drive.google.com/uc?id=1-2QjOJf8OpAw-mor_CINhKCCjQ-27tGA"/>下面就可以看到，這張外連圖片無法顯示了：

二、替代作法

國外網友提出了一些替代作法，我自己也發現了密招可以顯示圖片，但後來想想，如果 Google Drive 本意就是不想讓圖片被外連，那麼網路上流通的任何方法，Google 遲早都會封鎖起來，所以公開這些技巧一點好處都沒有。 所以跟「用 Github 存取網頁 JS/CSS 外連」一樣，我決定有必要設下一點障礙。如果已經是本站的「加值會員」，可兌換本文的隱藏內容；如果是本站的客戶請與我聯繫，會開通閱覽權限，可看到以下這四種技巧。

更多 Google Drive 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Blogger 如何自訂縮圖、封面圖尺寸

April 5, 2024, 6:47 am

≫ Next: Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧

≪ Previous: Google Drive 外連圖片無法顯示的解決方法

$

0

0

很久以前曾寫過「Blogger 封面圖+縮圖 各種呈現方式」，說明如何在首頁顯示文章縮圖，在文章頁顯示封面圖。現在 Blogger 範本提供了非常實用的語法，可直接對縮圖、封面圖進行裁切，調整為任意長寬比例，本篇就來看看如何實作。 不過奇特的是，這麼重要且強大的功能，跟上一篇「Blogger 日期格式化詳解」一樣，Blogger 官方沒有釋出任何公告或說明文件，只有網路流傳的資訊。我猜測原因是，自從 2017 年「Blogger 推出官方 RWD 範本」後，就不希望使用者亂改範本了吧？畢竟許多不熟語法的新手，按著網路水準參差不齊的文章亂改範本，所造成的各種奇怪問題與客訴，責任並不在官方。所以 Blogger 自此不公開重要語法說明文件，也是為自己節省麻煩吧！ 所以，本站長久以來的原則都是，請「官方 RWD 範本」使用者接受預設效果，沒事別動範本內容。本篇的教學，除非特別註明適用於「官方 RWD 範本」，否則一律以「官方 "非RWD"範本」為主。同時，請具備基本的 HTML 基本語法知識後，再來閱讀本文。沒有任何語法基礎的使用者，建議交由專業人士處理。 (圖片出處: unsplash.com)

一、參考資料

1. resizeImage Blogger 新增 resizeImage 這個工具函數，可對圖片調整比例、裁切，完整使用語法及參數可參考這篇文章：

• Blogger resizeImage Operator

簡單說明一下操作方式： <img expr:src='resizeImage(data:post.firstImageUrl, 800, "5:3")'/>

• data:post.firstImageUrl → 這是文章的首圖網址
• 800 → 代表設定成 800px 寬
• 5:3 → 代表圖片會裁切成這個長寬比例
• 最重要的一點，經實測結果發現，寬度數值及比例這兩個參數前面，一定要有空格，否則語法無法執行

2. 自訂背景圖如果將圖片用於背景圖，那麼裁切圖片尺寸的 CSS 語法可參考這個討論串：

• resizeImage parameters

使用以下的 CSS 語法： {background-image:url(<b:eval expr='resizeImage(data:post.firstImageUrl, 800, "5:3")'/>)}

二、改首頁縮圖尺寸

製作首頁文章縮圖的操作可參考「Blogger 封面圖+縮圖 各種呈現方式」→「三、首頁縮圖+文摘」。修改縮圖尺寸之前是利用 CSS 設定，實際上瀏覽器還是要載入原圖尺寸，所以載入時間較久。 現在直接裁切縮圖尺寸的方法為，從原本語法中找到以下字串： <img expr:src='data:post.firstImageUrl'/>改成下面的語法： <img expr:src='resizeImage(data:post.firstImageUrl, 300, "1:1")'/>參數修改請參考「一、參考資料」→「1. resizeImage」即可，同時 CSS 也不需再另外設定圖片尺寸了。

三、改文章封面圖尺寸

製作文章頁面封面圖的操作可參考「Blogger 封面圖+縮圖 各種呈現方式」→「二、文章標題前後擺封面圖」。修改縮圖尺寸之前是利用 CSS 設定，實際上瀏覽器還是要載入原圖尺寸，所以載入時間較久。 現在直接裁切縮圖尺寸的方法為，從原本語法中找到以下字串： <img expr:src='data:post.firstImageUrl'/>改成下面的語法： <img expr:src='resizeImage(data:post.firstImageUrl, 1000, "16:9")'/>參數修改請參考「一、參考資料」→「1. resizeImage」即可，同時 CSS 也不需再另外設定圖片尺寸了。

四、改熱門文章小工具縮圖尺寸

以前 Blogger 範本中，熱門文章小工具的縮圖標記語法是 data:post.thumbnail，產生的縮圖網址無法被 resizeImage 這個新的語法工具支援。如果你使用的是 Blogger 官方舊範本，建議可以先移除原本的熱門文章小工具，從後台重新新增一個熱門文章小工具，就會產生新的縮圖資料標記 data:post.featuredImage，這樣就能確保成功修改縮圖尺寸。 產生完新的熱門文章小工具後，在範本中找到以下程式碼區間： <b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts'> ... ~ ... </b:widget>在這個區間中，可找到縮圖相關語法如下： <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>

• 預設縮圖寬度為 72px，改為自己想要的寬度即可
• 預設縮圖長寬比例為 1:1，改為自己想要的比例即可

五、官方 RWD 範本

以上的說明都是針對「官方非 RWD 範本」，如果使用官方 RWD 範本想要調整縮圖尺寸，可直接參考以下兩篇文章：

• Blogger 縮略圖攻略
• 調整熱門文章的縮圖大小

六、處理 RWD 圖片

最後，開頭的參考資料語法中，還有一個工具 sourceSet 可以處理 RWD 圖片，不過我認為意義不大，因為真正的大尺寸圖片、需要 RWD 的圖片都在文章中。而 sourceSet 無法處理網頁上最多、最需要自適應，也就是文章中的圖片，所以不去瞭解這個工具也沒什麼關係。 關於 RWD 圖片我曾寫過「製作 RWD 自適應圖片 讓手機自動載入小圖」可瞭解基本概念，而想要讓 Blogger 文章中的圖片都能改用自適應圖片語法，可直接使用我開發的這個工具即可：

• 自適應 RWD 圖片語法產生器

更多「Blogger 語法」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧

April 10, 2024, 7:26 pm

≫ Next: 提供網址重新導向的免費服務﹍redirect.pizza

≪ Previous: Blogger 如何自訂縮圖、封面圖尺寸

$

0

0

去年(2023)11月收到 Adsense 後台通知，需要提交「新加坡稅務資訊」，沒想到前前後後搞了 2 個月以上才塵埃落定。一方面這件事真的很麻煩，一方面這也是 Adsense 自己的鍋，沒事趕在年底要使用者做這件事，搞得積極先處理的人通通做白工，到了 2024 年又得重新申請。 去年底申請完文件並提交 Adsense 的那一刻，後台畫面立刻自動秀出有效期限為 2023.12.31，這不是在搞事嗎？其實也差沒幾天，Adsense 何不 2024 年 1 月再提醒使用者就好？ 總之「新加坡稅務資訊」的效期只有一年，且固定每年 12 月 31 日失效，所以我們只要每年年初申請就好，此證明文件不需要費用。為了將來作業方便，以下為我研究並紀錄最簡便的申請流程，以及跟國稅局經辦人員溝通後的處理技巧。

一、如何申請證明文件

1. 別上傳身份證根據 Adsense 專家 Alice 的說明「如何在Google AdSense後台加入稅務資訊」，Adsense 需要的證明文件是「稅務居住地證明」，那麼上傳身份證是不夠的，因為身份證無法證明稅務。 正確的作法是跟國稅局申請「稅務居住地證明」，正式的文件名稱為「居住者證明」。 2. 申請管道親赴國稅局申請除了花時間，也不見得每個人都方便前往國稅局，那麼線上申請會是比較快的管道。 不過線上申請需要通過身份驗證，有兩種管道：

• 以自然人憑證申請：財政部自然人登入
• 以健保卡申請：財政部健保卡登入

請依照財政網頁的提示，來搞定憑證、讀卡機並成功登入。 3. 申請核發居住者證明身份驗證都沒問題後，最後可經由「我的E政府」這個網頁來進行線上申請流程：

• 申請核發居住者證明

點擊「我要線上申辦」進入申請頁面。

二、如何填寫「居住者證明」表單

上圖為申請頁面，開始填寫之前，最好先檢查 Adsense 後台資料，確保填寫的內容一致。 先叫出 Adsense 留下的付款資訊，記下自己的英文姓名、及英文地址資料。 開始填寫表單：

• 第一部分的 1~6 填入基本資訊，英文的部份請對照 Adsense 留下的資料
• 第 8 點有兩個選項，如果直接選擇第一列並選「新加坡」的話，就必須填寫許多額外第二部份、第三部份的內容，不但麻煩，而且幾乎都是不知道怎麼填寫的項目。
• 後來跟國稅局經辦人員通過電話，她建議我第 8 點填寫第二列，並填入「中華民國與新加坡租稅協定」，這樣的內容跟第一列一模一樣，但就不必填寫第二部份、及大多數第三部份的內容了

第一部分第 8 點選第二列的話，這裡第三部份只需要勾選「申請年度」就好，上圖是我去年底(2023)申請的畫面。 然而年初申請的話，我第二次有問國稅局經辦人員，是否要等到 2 月才能申請 2024 年度，還是 1 月就能申請？她是回答我網頁上如果 1 月時能勾選就代表可以，不行的話就等 2 月。 接下來的畫面要先驗證信箱才能繼續。 還需要上傳身份證正反面圖檔。 最後須按「新增資料」，然後按「我要申辦」送出資料，至此完成線上申請流程。

三、「居住者證明」文件

送出表單不久後就會收到郵件通知，內容大致是預計完成日(約 2 個禮拜)、受理機關、受理人員、聯絡電話等等，有問題的話可以打給經辦人員。 作業完成後證明文件會以掛號寄出，上圖為我 2024 第二次申請的文件，重點為紅框標示的年份「2024」，今年才能申請通過。 將上面這份文件完整拍下後，接下來要提供給 Adsense。

四、提交新加坡稅務資訊

進入 Adsense 後台 → 付款 → 設定 → 管理稅務資訊 → 新加坡稅務資訊： 一般如果是部落客的話，按照以上內容填寫即可，上傳自己的「居住者證明」文件後提交，大約一個星期後就可通過了。

更多 Adsense 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

提供網址重新導向的免費服務﹍redirect.pizza

February 29, 2024, 7:54 pm

≫ Next: 取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧

≪ Previous: Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧

$

0

0

如果有買網址的話，網址商後台都會有轉址服務，有時管理的子網域一多，可能需要變動一下網址，以配合不同需求。例如原本部落格放在 www.自訂網域.com，後來業務變多以後，想將部落格挪到 blog.自訂網域.com，這時就可設定「網址重新導向」，將 www 子網域用 301 轉址導向 blog 子網域。 但要這麼做還得另外確認一件事，也就是網址商是否提供「路徑轉址」的功能。我的網址商是 Google Domains，下圖為轉址設定畫面： 可看到 Google Domains 提供了：

• 301、302 轉址
• 路徑轉址
• SSL 轉址

後來從客戶那才發現，很多網址商都沒有「路徑轉址」的功能，例如知名的 Godaddy 沒有，更不用說台灣的小網址商了。 還好在網路上找到幾個免費的轉址服務，不必搬到 Google Domains 也能進行轉址。經測試後，功能最強的是 redirect.pizza，請見本篇的介紹與操作說明。

一、redirect.pizza 介紹

• 官網：redirect.pizza

進入「價格頁面」後，可看到免費版功能如下：

• 可使用 5 筆轉址紀錄：如果 www 與裸網域都轉到同一網址的話，就會用掉 2 筆紀錄
• 每月轉址使用量 10 萬次：如果日轉址流量超過 3333 次的話，就得使用付費版了
• 支援 HTTPS：這很重要，不是每個免費轉址服務都有

從免費版的限制來看，如果每月轉址次數太多，付費版的費用不便宜，可以考慮網址商改用 Google Domains 比較划算。

二、操作說明

1. 註冊帳號進入「redirect.pizza」後，點擊右上角「Get Started」進行註冊，可選擇 Google 帳號登入。 2. 新增轉址進入轉址頁面：

• Redirects

點擊右上角「Create redirect」來新增轉址。 上圖的範例，是將 wfublog.com與 www.wfublog.com這兩個網址，同時都跳轉到 service.wfublog.com，屬於 2 對 1 轉址。(大部分情形會是 1 對 1 轉址)

• Source URL(s)：填入所有要轉址的來源
• Destination URL：填入轉址的目的地
• Redirect type：如果是永久性轉址選 301(移轉 SEO 權重)；如果是暫時性轉址選 302(不移轉 SEO 權重)
• Path forwarding：此為「路徑轉址」功能，務必要啟用
• Tracking：免費版勾選了也看不到紀錄，此選項無所謂

完成後按左下角「Create redirect」。 3. 修改網址商 DNS轉址建立好後，會出現類似上圖訊息。注意每個網址需要進行的動作，後面都有對應的說明，範例如下：

• wfublog.com：注意這一行粗體的提示字串為紅色底線處的 "A"，需要到網址商後台修改 DNS 的方式為，新增(或修改) A 紀錄為 "@"，指向圖中 REQUIRED 欄位的 89.106.200.1(改成自己看到的 IP 位址)
• www.wfublog.com：注意這一行粗體的提示字串為紅色底線處的 "CNAME"，需要到網址商後台修改 DNS的方式為，修改 CNAME 紀錄中的 "www"，指向圖中 REQUIRED 欄位的 edge.redirect.pizza(改成自己看到的字串)

網址商 DNS 還沒修改好前，上圖 DNS 欄位會看到旋轉中。 修改好後，也許等一段時間回來，看到上圖 DNS 欄位顯示綠色打勾，DETECTED 欄位也有資訊，就代表轉址成功了。

更多網路線上工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧

May 1, 2024, 5:36 am

≫ Next: Blogger 網誌被刪除的救援處理紀錄+預防措施+未來規劃

≪ Previous: 提供網址重新導向的免費服務﹍redirect.pizza

$

0

0

Evernote 曾是滿足我所有需求的筆記軟體，無論是工作、客戶管理、寫程式等都離不開他，也付費支持了好多年。然而不知何時開始，Evernote 費用不斷調漲，功能是越加越多沒錯，但其實我都不需要啊！即便用的是付費版，但每月上傳量根本連免費版 60MB 的 1/4 都不到(內容主要是文字)，所以後來又用回免費版了，覺得錢花得沒那個價值。 如果 Evernote 有提供輕量版功能的話，我還是願意付費的，基本上舊版 Legacy 就符合我三大需求：

• 筆記軟體基本功能，執行快速、操作方便
• 搜尋功能快速準確
• 筆記能有效分類、整理

2023 年 Evernote 被收購後，聽說新版本 V10 是由新團隊開發的，原本的開發人員大多被裁了，難怪越做越沒人想用，軟體最初的精神已經失去，新團隊只著眼收割獲利。那時就開始注意替代品的社群討論，滿多試用者推薦 UpNote 是最接近原始 Evernote 精神的軟體，我也準備有空就來研究。 前幾天 Legacy 版突然不給登入(這篇文章寫於 2024 年初)，我想這應該就是告別的時候了，Evernote 曾宣佈 Legacy 只能使用到 2024 某個日期。此時再次想起 UpNote，但實在沒閒暇研究，只好先下載 V10 擋著用，結果體驗相當差、難用、速度又慢，而且還跳出通知免費版只能有 50 個筆記！現在的 V10 根本天價，是我以前付費的 2 倍價格以上... 誰會想付更貴的價格，來使用更差的產品呢？所以硬著頭皮開始試用 UpNote、及其他筆記軟體，果然大家的看法是正確的，UpNote 的確是最符合我三大需求的類 Evernote 軟體。雖然有一些缺點，但優點似乎更多，幾天測試下來相當滿意，能成功脫離 Evernote 新團隊的綁架也讓內心舒坦不少，以下就來分享從 Evernote 轉換到 UpNote 的流程與心得技巧。

一、軟體操作說明與介紹

1. 官網說明以下列出開始之前，需要知道的重要相關連結：

• 官網下載：UpNote
• 使用說明：UpNote user guide(Chrome 可翻譯為中文來閱讀)
• 快速鍵一覽：Keyboard shortcuts(Chrome 可翻譯為中文來閱讀)

2. 軟體介紹本篇的內容純粹根據我個人使用的角度，主要專注在基本的筆記功能，不會對 UpNote 進行詳細的功能介紹。因此想要全方位了解此工具的話，可參考這篇網路教學：

• UpNote 教學：輕快版 Evernote 雲端筆記

3. 軟體費用根據官網說明「Pricing」(Chrome 可翻譯為中文來閱讀)，免費版最多只有 50 個筆記，但這個軟體收費相當便宜：

• 一個月只要美金 1 元，相當於台幣 30 元
• 如果一次付清可終身使用，我在 iPhone 可用 NT. 690 買斷
• iOS, Mac, Android, Windows, Linux 這些裝置都能同步使用

二、匯出與匯入技巧

1. 匯入 Evernote 必須先付費「匯入 Evernote」這個功能免費版無法使用，所以一開始我必須先花 1 美金買一個月來測試，不過用了幾天確定沒什麼大問題後，就立刻果斷付費買下終身版，這個金額甚至比當初我買 Evertnote 一年的費用還便宜。 2. 匯出 Evernote 技巧匯出 Evernote 所有筆記是一件麻煩的事，Evernote 不想讓人跳槽所以匯出功能絕對不會寫得方便。還好網路有國外網友寫了工具讓這件事變得簡單，可參考這篇文章的教學：

• Evernote 搬家

請跳到大標題「方法二：第三方工具 evernote-backup」，下載這個工具：

• evernote-backup

然後依照文章的說明叫出 powershell，然後執行 3 道指令，完成後即可快速匯出所有 Evernote 筆記。 需要注意的是，過程中需要輸入 Evernote 帳號密碼，如果有設定兩階段驗證的話，還需要接著輸入驗證碼。 3. 匯入 Evernote 技巧叫出 UpNote 設定後，選擇「從 Evernote 匯入」 點擊「選擇 .enex 檔案」，可選擇多個筆記本檔案一次大量匯入。 也可注意一下圖中的限制說明，例如大於 20MB 的附件不會匯入。

三、優缺點比較

以下是我用了幾天之後，跟 Evernote 相比之下的優缺點項目，以及解決方法。不過這些都只是我會需要用到的功能，不代表全面性的評測。 1. 不如 Evernote 之處先說說不方便的地方：

• 截圖：顯而易見的是截圖功能，雖然把這算缺點有點冤枉，畢竟非筆記工具的必要功能 → 由於長年都是使用 Evernote 內建工具截圖後進行簡單圖片編修，現在必須另外找順手的截圖及簡易編修軟體代替。(最後找到 Greenshot 這個輕量軟體使用)
• 捷徑：Upnote 沒有捷徑功能，用來替代的功能為「快速存取」，但只能設定單則筆記可出現在「快速存取」，不像 Evernote 也可把整個筆記本放在捷徑 → 還好 Upnote 發現一個驚喜，筆記本可以設定巢狀結構，不像 Evernote 只能設定兩層，所以我把筆記本的巢狀結構設定完善後，要前往特定筆記本也快速許多，不像 Evernote 要往下捲很久才能找到某筆記本
• 刪除：刪除筆記較麻煩，不像 Evernote 按 del就能刪除筆記 → UpNote 必須按拗手的組合鍵 Ctrl+Backspace才能刪除，也許是怕誤刪的設計吧
• 快速鍵：Upnote 快速鍵較少，例如關閉視窗沒有快速鍵，不像 Evernote 按 Ctrl-W可關閉 → Upnote 畢竟還很年輕，我有寫信建議增加快速建，未來越成熟後應該會改善。目前的話所有需要快速鍵的功能，或是需要改用更好按的按鍵組合，我都另外用快速鍵軟體自行設定，方便日常作業操作。
• 滑鼠：拖曳功能還不太行，例如無法像 Evernote 將某記事拖曳到另一個記事本 → 總之 Upnote 還年輕，也不斷在更新，希望之後能逐步改善細部的使用者操作體驗。

2. 比 Evernote 更好之處 UpNote 輸 Evernote 的部份大多是在小地方、小細節，也就是操作的便利性，這些是大公司的強項。不過幾天用下來，發現 UpNote 很多 Evernote 沒有的功能真的很強、很方便，這也體現小公司的創新能力：

• 巢狀結構：Evernote 一直以來只能使用兩層記事本，導致我的記事本列得一長串。UpNote 可使用真正的無限巢狀結構，終於能有系統的組織記事本
• 目錄功能：這是 UpNote 的創新功能，在筆記內所設定的任何大標題(H1~H6)都能自動成為目錄，在側邊筆記資訊欄位看到，點擊後能快速前往，方便在內容較長的筆記內找資料，超級實用！
• 折疊功能：這是 UpNote 近期新增的功能，同樣非常實用，可以設定將一大段內容摺疊起來，讓較長的筆記內容看起來比較不雜亂。
• 開啟速度：UpNote 開啟筆記、顯示筆記內容都是瞬開，Evernote 舊版 Legacy 沒任何問題，新版 V10 開啟筆記的速度只有災難可以形容。
• 版面編排：UpNote 的排版、文字、圖示等等，比 Evernote 看起來寬敞不少，眼睛很舒服
• 筆記圖案：所有 UpNote 的筆記、筆記本都可自訂圖案，比較美觀
• 圖片尺寸：將圖片貼入 UpNote 時，可選擇顯示「大、中、小」尺寸，方便快速調成適合版面的大小，不用拖拉半天
• Markdown：UpNote 支援 Markdown 語法，可大幅加快文字輸入、編輯速度。雖然目前我很少用 Markdown，不過既然內建了這個功能，哪天有空就會來研究
• 筆記本：Evernote 一個筆記只能隸屬於一個筆記本，而 UpNote 可以為一個筆記設定多個筆記本，如此就不用複製一樣的內容到其他筆記本
• 編輯選單：這是 UpNote 近期新增的功能，在筆記內輸入斜線 "/"就能叫出所有常用編輯功能，實在太方便且實用，熟練後完全可以不必動到滑鼠。
• YT 影片：Evernote 支援看 YouTube 影片的功能，但無法放大全螢幕。在 UpNote 內嵌 YouTube 影片後，全螢幕沒問題，原本的快速鍵也都適用。

四、操作優化(快速鍵)

UpNote 有許多快速鍵須同時按 Ctrl + Shift，不是很方便操作，所以我另外用快速鍵軟體「Hotkeyz」改成比較順手的按法，以下列出我比較常用的修改：

• 搜尋全部筆記：預設 Ctrl+Alt+G→ 我改成 Alt+1
• 複製到 UpNote：預設 Ctrl+Shift+Alt+V→ 我改成 Win+A，類似以前 Evernote 的用法
• 視窗放大：沒有預設快速鍵，此為我常用的功能，所以有另外設定
• 專注模式：預設 Ctrl+Shift+F→ 我改成 Alt+3
• 關閉視窗：沒有預設快速鍵，此為我常用的功能，所以有另外設定
• 切換資訊面板：預設 Ctrl+Shift+I→ 我改成 Ctrl+I
• 內嵌 YT 影片：預設 Ctrl+Shift+Y→ 我改成 Ctrl+Y

五、實用技巧

以下簡單介紹幾個實用的技巧，可以增加工作效率： 1. 目錄功能筆記內容很長、且不確定要搜尋什麼字串時，找資料常常要捲很久，在這種情況下可為每個段落設定大標題，操作方法為按快速鍵 Ctrl+1 ~ Ctrl+6，就能分別設定 H1 ~ H6 大標題，而這些大標題，會自動成為該筆記的目錄。 如上圖，兩個紅框的大標題都是按了 Ctrl+2設定成 H2，然後按 Ctrl+Shift+I開啟資訊面板，右手邊即可看到對應的目錄，要找的資料一目了然，點擊後就可立刻跳到該段落。 2. 折疊功能除了前面使用目錄的技巧，還可利用設定「折疊區塊」的技巧，將整個段落收合起來，這樣筆記內容就變得簡潔了。 如上圖，選取整個要折疊的區塊，包含標題，選擇「折疊區段」的功能，或是按快速鍵 Ctrl+.效果如上圖，隨時可以開合此區塊，右邊的選項圖示點進去還有底色等設定。 3. 斜線選單斜線選單是 UpNote 最近新增的超實用功能，只要按下斜線 "/"就能建立各種物件及編輯功能，例如大標題、表格、清單、日期...等等，詳細操作說明請見官網文件「Slash menu」(Chrome 可翻譯為中文來閱讀)。 如上圖，在筆記內輸入斜線後，會自動出現選單，對照一下就知道這選單的順序就是下方工具欄位的順序。如果輸入的是 "/h2"就會設定 H2 標題。 如果輸入的是 "/ta"，系統會預期我們要輸入的是 table，便會出現表格選項讓我們選擇。所以如果常常使用某個功能的話，不妨記一下對應的英文，使用斜線選單就能快速建立相關物件。 4. Markdown Markdown 是能讓輸入速度翻倍的語法，詳細說明書可參考官網文件「How to Use Markdown with UpNote」(Chrome 可翻譯為中文來閱讀)。 5. 儲存搜尋如果常常使用某個搜尋結果的話，可以將之儲存起來，日後可直接取用，不必重複搜尋。 例如在上圖的搜尋結果旁，有個「儲存搜尋」的圖示，按下後即可儲存。 這個搜尋結果會出現在「所有筆記」這裡，展開就可看到，將來點此處就不用重新搜尋了。

六、補充

UpNote 是個 2 人團隊，我相信這兩人其實就是開發人員，同樣身為開發人員我很清楚，產品開發早期會很希望得到各種面向的回饋，所以看到 UpNote 設定頁面有意見反應的聯絡 Email，我很快就把這段期間的使用建議傳送過去，沒想到隔一個小時就收到回覆。 所以我相信任何建設性的意見，研發團隊都會列入更新的考量。如果你也喜歡 UpNote 的話，可花點時間提供回饋，只要某些相同需求的數量夠多，相信將來會看到實現的一天。

更多 Windows 軟體心得：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

Blogger 網誌被刪除的救援處理紀錄+預防措施+未來規劃

May 6, 2024, 7:02 am

≫ Next: 部落格定時自動備份服務

≪ Previous: 取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧

$

0

0

多年前曾寫過「Blogger 刪了你的網站怎麼辦？」，是因為知名網站「阿榮福利味」一度被 Blogger 刪除，結果前陣子我也遭遇類似狀況，發生了網站無預警被刪除的事件，而且牽連甚廣。當然我的狀況跟阿榮不太一樣，不過既然都是正當合法在經營網站，不會有違法違規的行為，自然申訴一段時間後 Google 也就恢復了網站。 前面那篇文章有提到一段話：「若是資金充足的話，商業性網站可以自架站，避免還要處理模糊地帶的事情。」，而這次出事的網站正是 "將來"預備商業化的網站。這樣的網站即使現在還未商業化，也早早會面對商業競爭及各種攻防。就算問心無愧沒有侵權行為、也沒有任何模糊地帶的事需要處理，依舊未能承受住這一波的攻擊。舉個常見的例子，許多無辜的 FB 粉絲團正是在網軍刻意的瘋狂檢舉之下，被官方給停了權，即便是不斷申訴抗爭及透過關係處理，也得好幾個月後才能恢復權限。 所以現在網站雖然恢復了，但我可不想同樣的事情再度發生，本篇除了紀錄我的救援流程，也會對預防措施及進行自架站的策略方針進行規劃。

一、申訴過程

1. 先確保沒有違規想要救回被刪除的 Blogger 網址，先決條件為 100% 確定沒有違反 Blogger 使用條款，否則神仙難救。如果你自知已經違反規定的話，也許先做好救不回網誌的心裡準備，可以跳過這個章節，直接看「二、救援網誌文章」及接續內容，準備建立新的網誌或搬到其他平台。 不確定有沒有違反規定的話，可參考「Blogger 網站突然消失了怎麼辦」→「一、網址被刪除的情形及原因」，詳細檢查「Blogger 政策」，逐條逐字詳細檢視並比對自己的狀況。 目前看到能恢復 Blogger 網站的案例，例如「阿榮福利味」、「Penny's House」、以及我的網站，都是因為沒有違規(也代表很倒楣)，所以須再強調一次，想救回被刪除的 Blogger 網站，請先確保沒有違反 Blogger 使用條款。 2. 申訴過程能確定沒有違反規定後，接下來就是走申訴流程。基本上 email 都會收到網誌移除通知，按照說明及郵件內的連結進行就是了。 由於每個案例的狀況都不一樣，所以不會有統一的制式流程能參考，按照官方要求的申訴流程進行後，接下來能做的就是等待而已，直到恢復的時間點到來。 Penny 的案例花了 3 個月，阿榮福利味感覺好一陣子才恢復，我的網站費時一個月以上，這些時間點供參考。 3. Google 窗口遇到這種事會讓人比較洩氣的是，不會有 Google 窗口對接，導致有些動作你進行了也不知道有沒有效，如果能找到 Google 窗口的話至少能確定方向是否正確。 Penny 的案例她有找到一個 Google 窗口，雖然事後來看還是要走完申訴流程，但至少讓 Penny 回到正軌。而我的案例則是有人給我 Google 窗口提供的相關資訊，事後來看那些資訊並沒有超出我在「Blogger 政策」頁面逐字檢視所看到的內容，也就是說靠著我自身的理解仍是可完成申訴流程，不過至少能讓我確定做的是對的。 那麼此事我能提供的經驗會是，若人脈廣能找到 Google 窗口自然是最好，如若不然，詳讀「Blogger 政策」的每個字，也是能獲得所有必要資訊來完成申訴流程。

二、救援網誌文章

1. 是否定期備份網站網誌被刪除通常是無預警的，絕大多數站長不會有定期備份網站的習慣，倉促之間會煩惱過去多年的心血如何救回。 手動備份不太符合人性，總會有忘記執行的時候。過去寫過「部落格文章如何全自動備份」，如果有建立起自己的備份機制，發生意外時就不會手足無措。 若沒有任何備份的話，請參考接下來的管道，設法盡可能救回大部份的文章。 2. 從 Wayback Machine 找回備份可參考「忘了備份要如何救回部落格網站文章」，利用「Wayback Machine」來爬回所有文章備份。 如果網誌被刪除無法恢復，必須重新建立網站的話，那麼得從 Wayback Machine 取得以下完整資訊才行：

• 文章 HTML 內容
• 標籤
• 留言
• 靜態網頁(/p/xxxx.html) → 如果網站有建立這類頁面的話

3. 從 Bing 快取找回備份 Wayback Machine 除了不一定會備份到所有網頁，也可能備份速度沒那麼快，只能抓到三個月前發布的文章。畢竟世界上有那麼多網站且數量越來越多，我們無法強求非營利組織的伺服器能運作地那麼快。 那麼三個月內的文章要如何找到備份呢？瀏覽器快取頁面是一個選擇，然而 Google 前陣子已經宣佈「不再提供"網頁庫存"服務」，目前我找到的方法是是利用 Bing 瀏覽器，方法如下：

1. 利用 site 指令找出網站的文章
2. 按「工具」→ 設定日期區間，例如最近的三個月
3. 篩選出來的文章中，看看網址後方有沒有「下三角」圖示，點擊後若有「快取版」，就能取得備份文章頁面了

三、網址重新導向

網站被刪除後，Blogger 同時也會封鎖原網址，在封鎖期間不允許使用原網址。如果網站用途是提供線上服務的話，這麼一來會很麻煩，因為服務會面臨中斷的危機，該服務的使用者及新訪客會找不到網站。 解決方式有兩個途徑：

• 暫時搬到別的平台 → 就可繼續使用原網址
• 建立新的網站，使用臨時網址 → 然後設定網址重新導向，將原網址設定 301 或 302 轉到臨時網址

如果要設定「網址重新導向」，還有一點必須注意，除了首頁要轉址，所有文章頁面也必須轉址，這代表網址商要能提供「路徑轉址」的功能。 發生此次事件後才發現知名的 Godaddy 沒有「路徑轉址」功能，台灣的小網址商也沒有，還好後來找到一個完美的免費線上服務「redirect.pizza」，完整的使用心得與說明可參考「提供網址重新導向的免費服務﹍redirect.pizza」。

四、備份機制

前面提到的自動備份機制，可以複製網站文章內容，缺點是網站若被刪除的話，無法復原所有的留言資料，而有些站長恰恰是很珍惜所有訪客的留言。 為此我開發了一個自動備份工具，可以自訂備份週期，自動備份以下內容：

• 文章 HTML 內容
• 標籤
• 靜態網頁(/p/xxxx.html)
• 所有留言

有了以上資料後，可據以製作 Blogger 匯入檔(xml 格式)，隨時可以恢復或重建網站內容。如果有站長需要這樣的工具，會另外寫一篇說明。

五、自架站考量

文章開頭有提到，那個將來會商業化的網站，為了應對商業攻防，必須搬到自架站才能避免再發生如同此次的意外，而這也是過去一兩個月我在研究的事。 詳細的考量過程及解決各種難題有太多主題需要紀錄，後續也會逐一發佈相關文章，這裡簡單說明最終做出的決定：

• WP 是最知名的自架站平台，但後端需要投入時間熟悉 php 語言，還需要煩惱主機、流量等各種問題，費用也昂貴，無法列入優先選擇。
• 利用 GitHub Pages 自架站，沒有 WP 需要煩惱的各種後端、主機、流量問題，也不需要費用。
• 使用 Hexo 架站工具，同樣是熟悉的 JS 環境，不須額外學習新的語言。
• 搭配 Cloudflare 可以讓 GitHub Pages 不必公開，可免費創建無限網站、無限流量

那麼對於 GitHub Pages + Hexo + Cloudflare 自架站有興趣的讀者，可再關注我後續的心得分享。

更多 Blogger 相關主題文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

部落格定時自動備份服務

March 9, 2024, 11:30 pm

≫ Next: 網站救援服務﹍復原被刪除的部落格文章

≪ Previous: Blogger 網誌被刪除的救援處理紀錄+預防措施+未來規劃

$

0

0

之前經歷「Blogger 網誌被刪除」事件，為了防止日後再發生意外，開發了部落格定時自動備份工具，如此隨時可將備份資料移轉到新的網站、或是新的平台，沒有任何後顧之憂。 由於處理了相當多網站，此工具已可作為一項服務，有需要自動備份網站的話請用文末聯絡表單與本站聯繫。 (圖片出處: pxhere.com)

一、備份方式

1. API 工具根據不同部落格平台，操作對應的 API 取得文章、留言等相關資料。以本站為例，會操作 Blogger API 取得以下資料：

• 文章 HTML 內容
• 標籤
• 靜態網頁(/p/xxxx.html)
• 所有留言

2. Google 試算表所有取得資料會存放在 Google 試算表： 上圖工作表儲存了「文章」相關備份資料 上圖工作表儲存了「留言」相關備份資料 上圖工作表儲存了「靜態網頁」相關備份資料 3. 定期執行根據文章更新頻率，可以自訂備份工具的執行週期，例如每日、一週、一個月等。

二、製作部落格匯入檔

在 Google 試算表儲存的所有備份資料，剛來有需要時，可依照不同平台的需求，來製作匯入檔，例如：

• Blogger
• WordPress

如有其他平台的需求，請提供匯入檔範例，來判斷匯入檔格式，以製作對應的匯入檔。

三、聯絡表單

如您需要部落格自動備份功能的話，請填寫下面的表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

填寫表單網址：(必填)

填寫表單目的：(必填)

請詳細描述您的需求、問題或意見：(必填)

您的網址： 需求：

更多本站相關服務：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

網站救援服務﹍復原被刪除的部落格文章

March 29, 2024, 8:03 pm

≫ Next: FB 按 Enter 換行分段技巧揭密，不必靠轉換器工具也不需複製空白字元

≪ Previous: 部落格定時自動備份服務

$

0

0

之前經歷「Blogger 網誌被刪除」事件，為了救回被刪除的一列相關網站，開發了網站救援工具，可以從網路現存的備份頁面，爬取文章相關內容。 由於處理了相當多網站，此工具已可作為一項服務，有需要網站救援的話請用文末聯絡表單與本站聯繫。 (圖片出處: unsplash.com)

一、救援管道

網站救援跟硬碟救援的概念有點像又不太一樣，硬碟資料不見了，必須用工具從硬碟磁區想辦法將檔案碎片拼湊回來。而網站若是被刪除，想要救回所有文章的話，得想辦法從整個浩瀚的網路上，看看是否有哪些地方曾經備份過你的文章資料。 如果網站很冷門，沒有任何其他網站想要收集，那麼在沒有任何網路備份的情況下，將沒有任何救援的機會。這也就是說，除非網路上能找到曾蒐集你文章的蛛絲馬跡，才能把各處的文章碎片收集起來，盡可能恢復原本的網站內容。 過去我們痛恨某些抄襲網站直接複製貼上我們的文章內容，但此時反而要感謝他們幫我們進行異地備份。以下列舉一些能找回文章碎片的管道：

• Wayback Machine：最主要的網路備份服務
• RSS 閱讀器：有人曾訂閱網站的話就能找到備份
• 瀏覽器快取：從瀏覽器快取有機會找到近期的快取頁面內容
• 瀏覽器搜尋：搜尋自己的文章標題或內容，或許能從抄襲網站找到內容

二、Wayback Machine

「Wayback Machine」( 網站時光機)這個網路服務備份了世界上多數網站的內容，也是主要的救援管道。如果你的網站越熱門，這個服務備份的內容也會越頻繁、越多，可以說是目前最強的網頁救援武器。 但他並非營利網站，所以伺服器的運作會有優先工作排程，不可能即時備份所有網站的文章，這也就是說可能會有時間差，例如以目前 2024 這個時間點，他最多只能備份到 3 個月前的文章。將來網站更多、伺服器更累的情況，能備份到什麼程度誰也說不准。 總之這是個佛心也是最強的網站備份服務，然而終究無法備份所有的內容。但我多次需要靠此服務救援客戶文章，所以已經 donate 多次，未來如果有需要本站協助救援的話，費用的一部分也會包含對此網站的捐獻。

三、RSS 閱讀器及瀏覽器

1. RSS 閱讀器如果網站夠熱門的話，在許多 RSS 閱讀器可能會有讀者訂閱，那麼就能找到完整的文章備份，例如「Feedly RSS 閱讀器」。 那麼跟「Wayback Machine」相比，「RSS 閱讀器」可能是唯一能夠找回所有文章的管道。但若是沒有任何讀者訂閱的話，RSS 閱讀器也將找不到半篇文章的蹤跡。 2. 瀏覽器快取由於 Google 已經宣佈「不再提供"網頁庫存"服務」，那麼只能從其他瀏覽器的快取試著尋找蛛絲馬跡了，例如在這些瀏覽器輸入 site:網址：

• Bing
• Yahoo
• Yandex

然後試著從搜尋結果，看看有沒有提供快取頁面了。

四、救援工具說明

1. Wayback Machine本站救援工具主要會爬 Wayback Machine 的資料，並儲存以下內容：

• 文章 HTML 內容
• 標籤
• 留言

爬完的資料會儲存在 Google 試算表，上圖為文章相關資料。 上圖為爬取留言的紀錄 2. RSS 閱讀器及瀏覽器如果能在 RSS 閱讀器找到訂閱備份的話，本站也有工具可以爬取所有文章內容。 不過 RSS 閱讀器的缺點為，無法紀錄標籤及留言，所以經由此管道的話，只能備份文章內容。 3. 瀏覽器快取如果要從瀏覽器快取取的文章備份，缺點是必須每個頁面逐一手動複製內容，這件事沒辦法程式化。 如果能在瀏覽器快取找到備份頁面，本站可提供工具，簡化手動複製的時間，快速一鍵取得相關內容。 4. 製作部落格匯入檔在 Google 試算表儲存的所有備份資料，可以依照不同平台的需求，來製作匯入檔，例如：

• Blogger
• WordPress

如有其他平台的需求，請提供匯入檔範例，來判斷匯入檔格式，以製作對應的匯入檔。

五、聯絡表單

如您需要網站救援的話，請填寫下面的表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

填寫表單網址：(必填)

填寫表單目的：(必填)

請詳細描述您的需求、問題或意見：(必填)

原本的網址： 需求：

更多「資訊安全」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

FB 按 Enter 換行分段技巧揭密，不必靠轉換器工具也不需複製空白字元

March 31, 2023, 11:32 pm

≫ Next: Xuite 搬家到 Blogger 紀錄 + 問題解決

≪ Previous: 網站救援服務﹍復原被刪除的部落格文章

$

0

0

很久以前 FB 按 Enter 是可以換行的，但某一年開始拿掉了這個功能，在 FB 發文、留言時版面會變得十分彆扭。當時花了點時間研究，測試出「全形空白」字元這個秘技，要分隔段落的那一行輸入全形空白，就能產生很好的分段效果。 然而近幾年不知道什麼時候開始，「全形空白」的效果失去作用，不但如此，FB 幾乎讓大部分的「空白字元」都失去功效，導致文字看不出明顯的分段效果。 最近開始研究這個問題，希望有一個方便的解決方案。本篇記錄了尋找答案的過程，想直接看研究成果請見「四、ALT + 173」，同時讀者也可先記住這個神秘數字── 173，這個數字可以幫助我們在 FB 快速換行。 (圖片出處: pixabay.com)

一、轉換工具

1. 換行工具一開始搜尋到的解法是線上換行轉換工具，例如這個：

• 臉書貼文分段者

把文章貼上後會自動加入換行用的空白字元，複製後貼到 FB 即可發佈。作者有把程式原始碼發佈在 Github，不過上面的網址從 JS 原始碼也可看到運作原理，會自動將「換行符號」至換為某些特殊的「全形空白字元」。 2. 空白 emoji 符號根據這篇「必學FaceBook臉書空白換行小技巧」，作者認為線上換行轉換工具不好用，因為「#HASHTAG」或是「@標記」會失效，這個功能都是要手動輸入符號 "#"、"@"才能生效。 他找到的解決方案為輸入「空白 Emoji 符號」取代 Enter 換行，實測是有效的，看起來也是不錯的方法。 3. 不方便之處雖然以上兩個工具都有效，但對我而言還不夠實用，因為使用 FB 貼文或留言並不那麼頻繁，每次要換行都得從書籤中找到轉換工具網址，加上複製、貼上、切換網頁的操作時間，其實還滿浪費時間的。 如果能不切換網頁、留在 FB 畫面完成 Enter 換行任務，就完全不浪費時間了，因此我再繼續尋找是否有更好的解法。

二、FB 按 Enter 換行實驗

FB 留言會把 Enter視為「送出」，此時就無法作為換行之用，必須改按 Alt + Enter來實現換行。以下利用一系列實驗，來測試換行效果。 1. FB 社團上圖是 FB 社團發文的實驗，測試方法與效果可以看的很清楚，歸納如下：

• Enter 按1次跟按無數次的效果一模一樣，只能看到 "一丁點"的段落分隔效果
• 多按一次 Alt + Enter可產生一個空白行，造成很好的段落分隔效果。
• 可根據按 Alt + Enter的次數來調整版面。

正當以為找到解答時，才發現這只是幻象，因為 Alt + Enter的技巧除了 FB 社團發文，其他地方都不適用！ 2. FB 貼文 + 留言上圖是 FB 粉絲頁、以及個人頁的發文實驗，歸納如下：

• 只按一次 Eneter 已經無法產生段落分隔效果
• 必須按 Enter 兩次以上，才能產生 "一丁點"的段落分隔效果
• 全形、半形的空白字元都會被 FB 無視，沒有實際效果
• Alt + Enter失效，按幾次都一樣，無法產生如同 FB 社團發文一般的空白行

3. FB 留言上圖是 FB 留言實驗，歸納如下：

• 無法按 Eneter 所以只能按 Alt + Enter換行，但無法產生段落分隔效果
• 必須按 Alt + Enter兩次以上，才能產生 "一丁點"的段落分隔效果
• 其他效果同前

根據以上所有實驗結果，Alt + Enter並非換行的萬用絕招，必須另外找尋 FB 一體適用的換行方法。

三、輸入空白字元

從我前面的實驗結果，以及線上換行轉換工具的概念可以知道，FB 雖然消除了大部分空白字元(空格、換行、TAB、全形空白...)的作用，但仍有少數空白字元可以運作，我如果能找出有用的空白字元，便能實現換行效果。 如果是工程師，應該都會知道先按 Alt再按數字，可輸入 ASCII 字元，例如 Alt + 169可產生版權符號 "©"，所以我決定從這個方向進行測試。 1. 如何輸入 ASCII/UNICODE 字元根據微軟官網「插入 ASCII 符號和字元」，操作方法如下：

若要插入 ASCII 字元，請按住 ALT，同時輸入字元代碼。 例如，若要插入 º，請按住 ALT，同時在數位鍵台輸入 0176。

這個頁面也可看到一些 ASCII 字元的列表及範例。 根據維基「Unicode輸入法」，說明了如何輸入 Unicode：

使用者可透過於註冊表登錄器中，搜尋HKEY_CURRENT_USER\Control Panel\Input Method目錄並添加名為EnableHexNumpad的字串（REG_SZ）值，將數值設為1即可啟用十六進制Unicode輸入法...功能啟用後，使用者可透過先按下Alt，並於數字鍵盤鍵入+，再輸入十六進制代碼（透過數字鍵盤輸入0-9及／或字母鍵輸入A-F），最後釋放Alt鍵即可輸入Unicode代碼。以此方法輸入五位長的十六進制代碼（如U+1F937）可能失效。

Unicode 可用來輸入全形符號，但從以上說明可知道，操作方法太麻煩(需要修改註冊表檔案)，且輸入的字串太長，本篇將以輸入 ASCII 字元為主，Unicode 的操作僅供參考。 2. ASCII 空白字元測試1根據這張表「ASCII Character Codes Table & Cheat Sheet」，可看到以上紅框標示的都是空白字元：

• 9 是 Tab 字元，10 是換行字元，但經過實測，ASCII 30 以前的字元都被 FB 封鎖了，完全無法輸入
• 32 可輸入空格，但之前的 FB 實驗可看到，空格字元無論全形半形都被移除了
• 129、141、143、144 這幾個可以輸入

來看看實驗結果，結果全部失敗，FB 無法顯示這些空白字元，會出現問號圖案。 3. ASCII 空白字元測試2上圖最後還剩幾個 ASCII 空白字元：157、160、173，繼續把實驗做完，終於測試到最後一個 Alt + 173時...

四、ALT + 173

上圖為 FB 留言的實驗結果：

• 按照圖中文字操作，就能產生紅框處的一行空白、或是兩行空白。
• 想要產生的段落之間，依序輸入 Alt + Enter、Alt + 173(請使用鍵盤右邊的數字鍵)、Alt + Enter，可產生一行空白行
• 想要產生多行空白行，則重複 Alt + 173、Alt + Enter多次即可

簡單說明一下，按下 Alt + 173會產生一個看不見的空白字元，且這個字元沒被 FB 移除，因此能實現空白行的效果。其他 ASCII 空白字元的效果都沒有 Alt + 173來得好，可參照本文之前的實驗畫面。 而 FB 留言是排版難度最高的區塊，能成功換行的話，自然能套用到 FB 粉絲頁發文、FB 社團發文等情況。

五、總結

簡單為 FB 換行技巧做個總結：

• 使用轉換器工具會讓「#hashtag」及「@標記」功能失效
• FB 社團發文：操作最簡單，按 Alt + Enter兩次就能產生一行空白，來分隔段落
• FB 其他地方：依序輸入 Alt + Enter、Alt + 173、Alt + Enter，可產生一行空白
• 輸入 Alt + 173只需要 1 秒鐘，是最簡單快速的 FB 換行技巧

更多 Facebook 相關技巧：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

Xuite 搬家到 Blogger 紀錄 + 問題解決

October 20, 2023, 6:07 am

≫ Next: GA4 如何將自訂事件數據報表，匯入 Google 試算表成為資料庫

≪ Previous: FB 按 Enter 換行分段技巧揭密，不必靠轉換器工具也不需複製空白字元

$

0

0

這個月初「Xuite 隨意窩公告平台服務中止」，陸續有 Xuite 站長找上本站，請求協助搬家到 Blogger。雖然過去已有豐富的「協助 Pixnet 搬家到 Blogger」經驗，但這件事實際上非常困難，原因大致是這樣：

• 過去開發的 Pixnet 搬家工具無法直接套用，需要重新開發新的工具
• Xuite 雖然官方也有 API，但接到委託後一研究才發現，Xuite API 早已關閉，有些資料不知道要如何爬取。這一點真不知道官方在想什麼，不能等到平台服務中止後才關閉 API 嗎，這樣子你的使用者要怎麼委託搬家呢？
• 開發新的整套工具要花很多時間，在委託數不多的情況下，讓委託人分攤昂貴的開發費用會造成很大負擔

然而咬牙還是需要想辦法解決問題，而且真願意花錢搬家的站長，多是不希望累積大量回憶的相簿就此消失。 還好過沒幾天，「開發費用」這個負擔就減輕了許多，因為陸續有好多位 Xuite 站長找上本站，即便我沒有宣傳過 Xuite 搬家到 Blogger 這件事。如此一來協助搬 Xuite 就有了經濟效益，算是能夠得以自行吸收開發費用，如果你也有 Xuite 搬家需求的話，請務必在 2023/8/31 之前完成，本站的收費可以維持跟 Pixnet 搬家一樣。

一、搬家流程

1. 大致流程

• 從 Xuite 後台匯出文章
• 利用「Blogtrans」將匯出檔轉換成 Blogger 可匯入的 XML 格式
• 將檔案匯入 Blogger
• 將圖片上傳到 Blogger，並將舊圖片連結置換為新圖片連結
• 將文章中所有原 Xuite 文章連結，置換為 Blogger 文章連結
• 將 Xuite 的人氣搬到 Blogger

2. 需要提供的帳號

• Xuite：如果可以自行匯入文章到 Blogger 就不用提供帳號
• Google：上傳圖片之用
• Google Analytics：如果要搬人氣的話，由於 Blogger 沒有顯示文章人氣的功能，只能利用 GA 來當作瀏覽數，那麼還需要額外在 GA 後台設定，授權給本站處理 GA 數據。

二、匯出、匯入文章

1. Xuite 匯出文章經手處理後發現，Xuite 後台、介面長得跟 Pixnet 差不多，讓我懷疑這兩家部落格根本是同一家...。所以這部分也不用再重寫了，請直接參考「」→「二、痞客邦匯出文章」的流程即可。 2. Blogger 匯入文章這部分的內容也是一樣，參考前一篇痞客邦搬家 →「三、Blogger 匯入文章」即可。 需要補充的是：

• 在 Xuite 後台沒有看到「繼續閱讀」的功能，我看 Xuite 站長好像也不太知道這個功能，所以文章搬到 Blogger 後，只能手動一篇篇將所有文章加入「繼續閱讀」，否則首頁會有很多文章都看不到，詳情可參考「Blogger 首頁文章怎麼消失了」。
• Blogger 匯入文章仍有很多原因會失敗，例如網路連線因素、檔案太大、匯入次數限制，以及最難解決的「字元編碼」問題，Xuite 站長若找不出匯入失敗的原因，還是儘速找本站處理為佳。

三、搬圖片的問題

搬圖片的過程，遇到兩種狀況記錄一下： 1. 圖片無法正常顯示其中一位 Xuite 站長，文章匯入 Blogger 後，立刻發現有大量的圖片無法正常顯示，但很奇怪的是，那些圖片在 Xuite 是可以正常顯示的。 於是對有問題的圖片進行解析，發現那些圖片的網址結構都長得一樣，類似這樣： https://xx.share.photo.xuite.net/xxxxx/xxxxx/xxxxx/?????????_o.jpg也就是說，網址參數有 "_o"的圖片，都會有這個狀況。 而 Xuite 圖片網址參數有很多種型態，例如 "_m"、"_l"、"_s"、"_x"...等等，這些都可以正常顯示，唯獨只有 "_o"在 Xuite 以外的網站，會無法正常顯示。 所以只要將網址參數有 "_o"的圖片，改成其他參數就可以讀取了。 2. 圖片不存在另一位 Xuite 站長的狀況則是，搬家程式跑的過程才發現，有部分圖片是無法讀取的，會返回 403 錯誤，代表圖片根本不存在。 經過交叉分析後才發現，原來那些圖片只有使用 Xuite 站長身份登入後才看得到，其他人都看不到，當然程式也無法讀取。這個狀況代表某些相簿被設定了讀取權限，只有本人才能看得到。 所以確定要搬的圖片，得先將相關相簿的權限打開，否則是無法搬的。

四、本站處理項目

痞客邦搬家項目中，「網站搬家畫面」這一項，因為 Xuite 只剩 3~4 個月可以搬，導致「網站搬家畫面」已經沒有意義(而且 Xuite 關閉 API 也無法處理此項了)。除了此項之外，以下說明其他搬家項目的重要性：

• 搬圖片：如果文章中的圖沿用 Xuite 圖床的話，2023/8/31 以後就看不到了。重要性 → 最高，其他項目可以不處理，但這一項需交給本站處理。
• 處理新舊文章連結：將文章中所有原 Xuite 連結，置換為 Blogger 文章連結；如果沒做這個動作的話，讀者點擊連結，又會跑回 Xuite 的。重要性 → 視文章數而定，如果文章少，可以自行手動改。如果文章多，需交給本站處理。
• 搬 Xuite 人氣：將 Xuite 人氣搬到 Blogger，與 GA 數據結合。重要性 → 不高

五、聯絡表單

本站可處理的搬家項目有這些：

• 搬文章
• 搬圖片
• 處理新舊文章連結
• 搬痞客邦人氣(還需另外安裝單篇文章計數器)

需要協助搬家請告知：

• 網址
• 文章篇數
• 需要處理的搬家項目

參考費用如下：

• 搬文章 (800 ~ 1500)
• 搬圖片 (1 篇文章 x 2 元, 最少 NT. 1600) (若圖片總數太多，則每 20 張圖片 3 元)
• 處理新舊文章連結 (1 篇文章 x 1 元, 最少 800)
• 搬痞客邦人氣 (還需另外安裝單篇文章計數器 1k) (1 篇文章 x 1 元, 最少 800)
• 網站搬家畫面 (1 篇文章 x 1 元, 最少 800)

請用以下表單與我聯繫：

稱呼：(必填)

電子郵件：(必填)

您的網址或提問的相關網址：(必填)

簡單自介、如何找到本站：(必填)

請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填)

更多部落格搬家相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

GA4 如何將自訂事件數據報表，匯入 Google 試算表成為資料庫

April 13, 2023, 4:31 am

≫ Next: 使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫

≪ Previous: Xuite 搬家到 Blogger 紀錄 + 問題解決

$

0

0

前幾年寫過「從 GA 點擊事件數據報表，儲存於 Google 試算表」，而現在通用 Google Analytics(以下簡稱 GA)將於 2023/7/1 停用，必須提前瞭解 GA4 如何將數據資料匯入 Google 試算表的流程。 經搜尋後，Google 試算表提供的外掛中，已經有一些現成的 GA4 工具，不過都是英文介面，且目前的時間點也沒什麼合適的教學可以參考，來瞭解所有對應的英文參數名詞及概念。 經一番摸索後，總算找到可行的操作流程，請見本篇的分享整理。

一、瞭解 GA4自訂事件報表

由於 Google 試算表的 GA4 外掛都是英文介面，本篇雖然提供了實作範例，但如果你的需求跟本篇不完全一樣，勢必要操作與設定不同的參數。如果不瞭解背後運作的原理，看到不熟悉的英文名詞絕對是一頭霧水。 所以在開始之前，務必先詳讀上一篇「GA4 如何追蹤自訂事件的成效及建立報表」，有了 GA4 自訂事件的運作概念後，自然可以理解及看懂本篇的操作流程，並進行舉一反三。

二、GA4 外掛

進入 Google 試算表後，從選單「擴充功能」→「外掛程式」→「取得外掛程式」，可以搜尋現成的 GA4 工具。 上圖為搜尋 "ga4"的結果，找到不少工具，但其實專為 GA4 量身定做、符合需求、且免費的很少：

• GA4 Migrator for Google Analytics：這是 GA 官方提供的工具，但用途並非匯入 GA 數據資料
• Reporting for Google Analytics 4：這個工具滿不錯的，可免費試用14天，之後便需要付費
• Google Analytics connector by SyncWith：這個工具也不錯，操作 UI 有些地方不太直覺。根據官網「Pricing」頁面，免費使用的話一個月可更新資料 35 次，如果使用量不大可以考慮安裝。
• GA4 Magic Reports：唯一可免費使用、沒有任何限制的 GA4 專用工具，本篇將以這個工具進行示範。

三、GA4 Magic Reports 設定流程

安裝完 GA4 Magic Reports 後，本篇跟上一篇「GA4 如何追蹤自訂事件的成效及建立報表」同樣，以「線上看電視」進行舉例： 選單「擴充功能」→「GA4 Magic Reports」→「Create new report」 工作表右側會出現上圖這塊設定區域，按照 A~F 順序：

• A：設定「產生報表」的工作表名稱
• B：選擇來源網站
• C：選擇對應的 GA4 資源
• D：設定數據起始日
• E：設定數據結束日
• F：選擇 Event Count，統計事件次數

往下捲繼續設定：

• G：選擇在 GA4 中自訂事件所建立的「自訂維度」名稱，這裡我設定的是中文名稱，如果當初用英文命名的話，大致是 event_value。此處若自行操作過上一篇的流程，會比較容易理解。
• H：選擇 Event name，代表「事件名稱」
• I：選擇 Exact，代表完全符合字串
• J：填入自訂事件的「事件參數」名稱，此處若自行操作過上一篇的流程，會比較容易理解。
• 最後按「Create Report」

設定完成後，可看到自動建立了工作表「GA4 Reports Configuration」，列出剛剛所有的設定內容。紅框是將來比較常會修改的參數：

• Start Date & End Date：可自行修改起迄日期
• Limit：可限定讀取的資料筆數上限

Start Date 及 End Date 之後有個星號 "*"，滑鼠移過去會出現上圖的參數修改說明，不一定要填入 YYYY-MM-DD 這樣的日期格式。比較常用的有：

• N 天之前：例如填入 7daysAgo 代表 7 天前
• today：代表今日
• yesterday：代表昨日

四、產生自訂事件報表

選單「擴充功能」→「GA4 Magic Reports」→「Run Reports」，可產生自訂事件報表。如上圖，會自動產生我命名的「收視率一覽」工作表，大紅框的內容就是我需要的報表，讀者可以比對一下上一篇從 GA4 後台看到的報表圖片，數據算是吻合的。 功能都運作無誤後，可以設定排程每日自動更新數據，操作方式為：選單「擴充功能」→「GA4 Magic Reports」→「Schedule Reports」，會跳出上圖視窗。 勾選「Enable reports to run automatically」，選擇自動執行的週期、時間，按「Save」即可。 雖然這個外掛允許最短每兩小時更新，畢竟 Google 佛心地提供免費服務，如非必要還是不要讓 Google 伺服器太忙碌比較好，而且根據我的經驗，勾選每天更新比較不會報錯，否則 Google 伺服器太忙碌有時就不執行了。

五、存取資料庫

資料庫的數據採集完畢後，便可供網頁前端取用，而如何存取 Google 試算表的資料，過去我已經寫了一系列文章，請直接參考即可：

• 用 Google Apps Script 操作試算表 (1)製作資料庫 + 寫入資料
• 用 Google Apps Script 操作試算表 (2)搜尋、讀取資料庫
• 用 Google Apps Script 操作試算表 (3)延遲寫入資料庫 + 使用族群

Google Analytics 4 系列文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫

April 22, 2023, 12:21 am

≫ Next: 如何使用 Node.js 播放 mp3 聲音檔(作為提醒音效)?

≪ Previous: GA4 如何將自訂事件數據報表，匯入 Google 試算表成為資料庫

$

0

0

過去一向使用 Google Apps Script(簡稱GAS) 存取 Google 試算表，可參考系列文章「用 GAS 操作試算表」，且「操作 Google Sheets API 讀取 Google 試算表」也說明過， Sheets API 無法對資料進行篩選、搜尋，所以不推薦使用。 而 GAS 雖然各種指令操作試算表都比 Sheets API 好用太多，而且不必解決麻煩的 oAuth 身份驗證問題，不過也還是有一些先天上的缺陷，例如有單日、單次執行的時間配額上限，另外一個硬傷就是 doGet、doPost 不容易 dubug，為了除錯必須在後台反覆重新發佈新版本，非常浪費時間缺乏效率。為了比較友善的程式碼開發環境，Sheets API 重新成為選項。 於是開始研究在本機 Windows 下，使用 Node.js 操作 Sheets API 存取 Google 試算表的方法。簡單說結論，如果只是簡單、重複性的 "寫入"試算表資料庫，沒有太複雜的試算表操作，Sheets API 會比 GAS 方便。而試算表 "寫入"以外的動作(包含 "讀取")，操作 GAS 內建的函數會方便且直覺很多。 本篇開發環境以「Sublime Text 3」(簡稱 ST3)舉例，說明如何以 Node.js 操作 Sheet API 對 Google 試算表進行讀取、寫入的實例操作。 (圖片出處: pxhere.com)

一、準備動作

從這個章節的準備動作開始，一直到「四、讀取試算表資料庫範例」之前的所有內容，都是 GAS 不需要的，用 Node.js 操作 Sheet API 的前置作業非常龐大，需要有一些心理準備。 1. Node.js如果對 Node.js 不熟悉的話，可參考這篇「Node.js 爬蟲開發新手技巧﹍GAS 替代品」，先把開發環境架構起來。 2. 啟用 Sheets API根據官網文件「Node.js quickstart」，說明了如何完整的操作流程，但全英文不容易理解，可直接閱讀以下的中文流程。 請參考這篇「取得 Google API 金鑰 流程」的流程：

• 一、建立專案：還沒建立過專案的話，執行這個章節
• 二、啟用 Google API 服務：搜尋 Sheets API，並「啟用」

二、oAuth 憑證

1. 下載憑證接續前面的流程，啟用完 Sheets API 後，按上圖左側的「憑證」→ 上方「建立憑證」→ 選擇「oAuth 用戶端 ID」 本篇 Node.js 是在本機 Windows 執行，因此上圖請選擇「電腦版應用程式」，名稱隨意填寫，按下「建立」 出現上圖畫面，不必記錄這些資料，只需按「下載 JSON」存檔即可，但務必記住檔案名稱，之後程式碼會用到，本篇檔名以「credentials.json」作為範例。 2. 安裝 API接下來為 Node.js 安裝 Google API 與本機 auth 驗證，使用 Windows 命令字元 DOS 視窗，輸入以下指令進行安裝： npm i googleapis@105 @google-cloud/local-auth@2.1.0 --save -g到這裡終於完成準備動作，可以開始寫程式了

三、oAuth 程式碼範例

以下程式碼範例來自官網，進行微調： const fs = require("fs").promises; const path = require("path"); const process = require("process"); const {authenticate} = require("@google-cloud/local-auth"); const {google} = require("googleapis"); const SCOPES = ["https://www.googleapis.com/auth/spreadsheets"]; const TOKEN_PATH = path.join(process.cwd(), "token.json"); // 存放 refresh token const CREDENTIALS_PATH = path.join(process.cwd(), "credentials.json"); // 下載的憑證檔案 // 檢查是否有 refresh token async function loadSavedCredentialsIfExist() { try { const content = await fs.readFile(TOKEN_PATH); const credentials = JSON.parse(content); return google.auth.fromJSON(credentials); } catch (err) { return null; } } async function saveCredentials(client) { const content = await fs.readFile(CREDENTIALS_PATH); const keys = JSON.parse(content); const key = keys.installed || keys.web; const payload = JSON.stringify({ type: "authorized_user", client_id: key.client_id, client_secret: key.client_secret, refresh_token: client.credentials.refresh_token, }); await fs.writeFile(TOKEN_PATH, payload); } // 如果首次執行先取得 refresh token, 非首次則直接根據 refresh token 產生 access token async function authorize() { let client = await loadSavedCredentialsIfExist(); if (client) { return client; } client = await authenticate({ scopes: SCOPES, keyfilePath: CREDENTIALS_PATH, }); if (client.credentials) { await saveCredentials(client); } return client; }

• "credentials.json"即為前面「二、oAuth 憑證」下載的檔案，可改為自訂檔名，但務必跟執行的 .js 檔放在同一路徑
• "token.json"是程式自動產生的檔案，用來存放 refesh token，將來每次執行時用來產生 access token
• 執行 authorize() 會開始進行身份驗證流程，首次執行時會自動開啟瀏覽器，請按畫面指示開放權限即可。
• 首次執行完畢後會產生 refesh token，以後就不必再進行身份驗證
• 所以需好好保存這個 "token.json"，當執行的 .js 檔放在別處時，最好也一併複製過去

四、讀取試算表資料庫範例

本篇範例一樣使用這個試算表作為舉例：

• https://docs.google.com/spreadsheets/d/106tP9D89pnEgvZTuM3_ahMJRPjCSD3qthth-GEhGMIE/edit#gid=0

根據官網文件「Method: spreadsheets.values.get」，以下提供修改後的範例，這部分的程式碼，請接續在「三、oAuth 程式碼範例」的程式碼之後執行： const spreadsheetId = "106tP9D89pnEgvZTuM3_ahMJRPjCSD3qthth-GEhGMIE"; // 填入試算表 ID const range = "sheet1!B1:D3"; // 填入的格式為 "工作表名稱!範圍" async function readSheet(auth) { const sheets = google.sheets({ version: "v4", auth }); const res = await sheets.spreadsheets.values.get({ spreadsheetId: spreadsheetId, range: range, }); const rows = res.data.values; if (!rows || rows.length === 0) { console.log("No data found."); return; } else { console.log(JSON.stringify(rows)); } } authorize().then(readSheet).catch(console.error);

• spreadsheetId 請改為自己的試算表 ID，也就是試算表網址 "/d/ ~ /edit"之間的字串
• range 字串的格式為 "工作表名稱!範圍"，參數如何修改可參考官網文件「Google Sheets API 總覽」

在 ST3 中按 Ctrl + B可執行程式碼，成功的話執行結果如下： [["稱謂","性別","註解"],["Wayne","male","測試寫入功能"],["Mary","female","成功！"]]

五、寫入試算表資料庫範例

根據官網文件「Method: spreadsheets.values.update」，以下提供修改後的範例，這部分的程式碼，請接續在「三、oAuth 程式碼範例」的程式碼之後執行： const spreadsheetId = "填入試算表 ID"; const range = "填入工作表範圍"; const valueInputOption = "RAW"; // 儲存格資料格式 const values = [ // 寫入儲存格的資料 ["稱謂", "性別", "註解"], ["Wayne", "male", "測試寫入功能"], ["Mary", "female", "成功！"] ]; async function saveSheet(auth) { const sheets = google.sheets({ version: "v4", auth }); sheets.spreadsheets.values.update({ spreadsheetId: spreadsheetId, range: range, valueInputOption: valueInputOption, requestBody: { values: values }, }, (err, res) => { if (err) return console.log(`The API returned an error: ${err}`); console.log(res.data); }); } authorize().then(saveSheet).catch(console.error);

• spreadsheetId 與 range 請參照「四、讀取試算表資料庫範例」的說明修改
• valueInputOption 參數修改可參考官網文件「ValueInputOption」，"RAW"為原始型態，"USER_ENTERED"系統會自動調整
• values 陣列填入所有儲存格內容，請注意每一列、每一欄的數量，必須符合 range 的設定，只要數目不吻合就會報錯，導致無法寫入試算表。

更多 Node.js 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

---

如何使用 Node.js 播放 mp3 聲音檔(作為提醒音效)?

May 15, 2023, 8:31 pm

≫ Next: AI 生成圖庫精選﹍CC0 免費圖庫的新選擇

≪ Previous: 使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫

$

0

0

原本認為 Node.js 播放 mp3 音效是很簡單的一件事，畢竟在瀏覽器連寫 js 都不需要，HTML5 內建的 Audio 就能播放各種音檔。然而安裝了一大堆 Node.js 模組後卻都不成功，不知道問題出在哪。 Google 找答案的過程發現，很多人無法理解為何有這樣的需求，認為 Node.js 在伺服器端執行，播放音樂給伺服器聽要做什麼？ 其實我用 Node.js 是運作在 Windows 本地端，執行長時間的作業。而同時一邊進行文書處理、或是離開座位時，並沒有一個好的機制，可以提醒自己 Node.js 程式出錯了，或是執行結束了。如果要不斷手動切換檢查，會十分缺乏效率。 所以 Node.js 捕捉到錯誤事件時自動播放 mp3 音檔，無論當下是否在電腦前都能立即處理，不至於發生過了一整天才發現程式早就卡住這樣的事。 那麼接下來就分享在 Node.js 環境下，要怎麼做才能成功播放 mp3 音效。 (圖片出處: pxhere.com)

一、為何 Node.js 模組無法播放聲音檔

例如我裝了以下模組，但播放後都聽不到聲音：

• sound-play
• play-sound

看了許多網上的討論後才知道，這類模組不能自行播放檔案，而是需要呼叫播放程式來播放。例如上面的「play-sound」，其官網頁面有說明，支援列出的 audio player，例如「mplayer」、「aplay」，或是 Windows 系統程式「powershell」。 若使用者的 Windows 系統沒有安裝這些程式，或是沒把這些程式的執行檔設為全域變數，就無法正確呼叫對應的執行檔，自然無法成功播放聲音檔。 而 Node.js 若是仔細尋找，也是可以找到真正能播放聲音檔的模組，但因為只是要播放提醒音效這樣的小事，不太願意另外裝個肥大的模組，想再找找有沒有更簡便的解決方案。

二、DOS 命令如何播放聲音檔

Node.js 有辦法執行 DOS 命令，所以接下來只要瞭解 DOS 如何播放聲音檔就沒問題了。 根據這篇「dos命令發出聲音圖文教程」，DOS 指令播放聲音檔真是超乎意料的簡單，只需直接輸入檔案路徑就好。簡單舉例，播放 D 槽下的 "wfu.mp3"，只要輸入以下指令即可： D:\wfu.mp3 Windows 會自動跳出播放音檔的預設程式，例如 Windows Media Player，並播放這個檔案。

三、Node.js 如何呼叫 DOS 指令

根據這篇「Node.js 多進程」，載入 child_process模組後，有兩種方法可以執行 DOS 指令：

• spawn
• exec

以下分別舉例這兩種操作方式： const {exec} = require("child_process"); exec("cmd.exe /c wfu.mp3"); const {spawn } = require("child_process"); spawn("cmd.exe", ["/c wfu.mp3"]);任選一組來執行即可，這會是 Node.js 播放聲音檔最簡單的方式，不需安裝外掛模組，直接呼叫內建 child_process 模組即可。

更多 Node.js 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

AI 生成圖庫精選﹍CC0 免費圖庫的新選擇

May 17, 2023, 4:42 am

≫ Next: 2023 免費素材圖庫整理

≪ Previous: 如何使用 Node.js 播放 mp3 聲音檔(作為提醒音效)?

$

0

0

今年「ChatGPT」蔚為風潮，讓 AI 技術受到世人關注，同時 AI 發展也進入了科技奇異點的突破程度。其中 AI 生成圖片的進展讓人驚艷到無以附加，幾乎無法用肉眼分辨真假。只要對 AI 引擎稍加訓練，下出精確的指令，就能讓 AI 做出大師風格的超高質圖像作品。 而這些 AI 生成的圖片，很重要的一點是其著作權歸屬，在法律上可能被視為機器創作，從而不受著作權保護。那麼在有辦法明確訂立相關法律條文之前，AI 圖片其實非常接近 CC0 圖片規範。且就算將來 AI 圖片能界定著作權，最多也只能限定在特定藝術家風格的作品，決大多數九成以上仍會類似 CC0 圖片。 本篇整理了幾個著名的 AI 生成圖庫，並收錄在「CC0 免費圖庫搜尋引擎」，方便使用者在同一個網站，就能同時搜尋這些圖庫的圖片。

一、AI 圖庫介紹

1. OpenArt

• 官方網站：OpenArt
• 收藏量超過 1000 萬，最大的 AI 生成圖庫，以英文搜尋為主，AI 引擎主要為 Stable Diffusion、DALL·E 2。
• 圖片由用戶直接上傳，網站也提供多項服務，讓使用者線上製作 AI 圖片、訓練 AI 引擎，並能編輯圖片
• CC0 免費圖庫搜尋引擎：OpenArt

2. Lexica

• 官方網站：Lexica
• 收藏量極大的 AI 生成圖庫，以英文搜尋為主，AI 引擎主要為 Lexica Aperture、Stable Diffusion。
• 除了搜尋的現成 AI 生成圖片，使用者也能線上製作 AI 圖片。但未付費的話，有一些限制，例如每月圖片限量、圖片只能個人使用。
• 如要商用的話請注意，此網站必須付費，圖片才能商用
• 更多此圖庫的介紹可參考這篇「Lexica 人工智慧圖片搜尋引擎」。
• CC0 免費圖庫搜尋引擎：Lexica

3. PromptHero

• 官方網站：PromptHero
• 索引量中等的 CC0 圖庫，以英文搜尋為主。
• 可以針對不同的 AI 圖片生成引擎進行搜尋，例如「Stable Diffusion」、「Midjourney」、「DALL-E」
• 此圖庫的導覽選單也針對不同類型的圖片進行分類，例如 Portraits、Photography、Anime、Fashion...等風格。
• 目前唯一有中文版本的 AI 圖庫，請前往官網搜尋：Prompt Heroes
• CC0 免費圖庫搜尋引擎：PromptHero

4. ArtHub

• 官方網站：ArtHub.ai
• 索引量中等的 CC0 圖庫，以英文搜尋為主。
• 主要由頂尖藝術家和設計師風格所生成的 AI 圖片。
• CC0 免費圖庫搜尋引擎：ArtHub

二、AI 圖庫收錄條件

1. 能被 Google 索引其實 AI 圖庫還有很多，不只以上這幾個，然而要能被「CC0 免費圖庫搜尋引擎」收錄的話，必要條件為，圖片需要能被 Google 索引，然後才能呼叫 Google 相關的 API 進行搜尋。 本篇介紹的 AI 圖庫，都是 Google 索引狀態良好，足以做成線上搜尋引擎來使用。其他的 AI 圖庫，將來若被 Google 索引數量達一定水準，也會再收錄進來。 2. 其他 AI 圖庫以下列出一些不錯的 AI 圖庫，雖然 Google 索引狀況不佳，但可直接前往官網進行搜尋：

• Stock AI
• PromptBase
• Prompt Sea
• AI Background Generator
• DALL·E 2 image database
• visualise.ai

三、商用注意事項

CC0 圖片雖然允許商業使用，但並非所有情況都能商用，詳細原因請參考這篇「CC0 圖片商業使用注意事項」。 本篇介紹的 AI 圖庫中，只有「Lexica」明確指出，付費使用者才能進行商用，其他圖庫都沒有提到相關限制。 然而 AI 生成圖片跟 CC0 的狀況一樣，即便能商用，也不代表可以無限制、任何情境都直接拿去商業獲利。因此除了詳讀「CC0 圖片商業使用注意事項」這篇文章，最重要的還是重申這幾點：

• 既然要商用，代表有獲利，那麼必須撥一部份預算聘請法務人員、或諮詢法律專家。
• 如果覺得聘請或諮詢法務的費用太高，那我會建議直接付費購買圖庫，除了費用比較少，也可省下溝通法律事務的時間。

更多「免費圖庫」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

2023 免費素材圖庫整理

June 25, 2023, 9:29 pm

≫ Next: FB 社團爬蟲實作範例﹍使用 Node.js 操作 Puppeteer

≪ Previous: AI 生成圖庫精選﹍CC0 免費圖庫的新選擇

$

0

0

「ICON 免費素材搜尋引擎」今年 2023 進行大改版，同時也去蕪存菁，重新整理所有熱門免費素材圖庫，本篇會依照類別，重點介紹收錄的圖庫。

一、CC0 素材

1. Pixabay

• 官方網站：Pixabay 向量素材、Pixabay 插畫素材
• 收藏量巨大的 CC0 素材圖庫，可以搜尋中文，也有中文語系操作介面。
• 可搜尋向量、插畫素材，也可搜尋英文，下載圖片可選擇尺寸。
• 免費素材搜尋引擎：Pixabay

2. PublicDomainVectors

• 官方網站：PublicDomainVectors
• 收藏量巨大的 CC0 素材圖庫(public domain)，可搜尋向量素材，英文介面。
• 可依副檔名搜尋，有線上編輯圖片功能。
• 免費素材搜尋引擎：PublicDomainVectors

3. IllustAC

• 官方網站：IllustAC
• 收藏量大的 CC0 素材圖庫，有中文語系操作介面。可搜尋向量、插畫素材。
• 提供以圖搜圖功能，進階搜尋選項豐富，下載需要註冊。
• 免費素材搜尋引擎：IllustAC

4. SilhouetteAC

• 官方網站：SilhouetteAC
• 收藏量普通的 CC0 素材圖庫，有中文語系操作介面，可搜尋插畫素材。
• 提供以圖搜圖功能，有進階搜尋選項，下載需要註冊。
• 免費素材搜尋引擎：SilhouetteAC

5. OpenClipart

• 官方網站：OpenClipart
• 收藏量中等的 CC0 素材圖庫，英文介面，可搜尋向量素材。
• 免費素材搜尋引擎：OpenClipart

二、圖示

1. FlatIcon

• 官方網站：FlatIcon
• 收藏量巨大的素材圖庫，可搜尋圖示素材，英文介面。
• 下載時可選擇尺寸，需要註冊。
• 免費素材搜尋引擎：FlatIcon

2. IconArchive

• 官方網站：IconArchive
• 收藏量大的素材圖庫，可搜尋圖示、透明圖素材，英文介面。
• 下載時可選擇尺寸、圖檔格式、不同平台。
• 免費素材搜尋引擎：IconArchive

3. EasyIcon

• 官方網站：EasyIcon
• 有中文語系操作介面，可搜尋圖示素材。
• 進階搜尋選項豐富(依熱門程度、顏色、尺寸等)。
• 免費素材搜尋引擎：EasyIcon

4. Icons8

• 官方網站：Icons8 圖示、Icons8 插畫
• 收藏量大的素材圖庫，可搜尋圖示、插畫素材，英文介面。
• 可線上編輯圖片。
• 免費素材搜尋引擎：Icons8

5. IconFinder

• 官方網站：IconFinder
• 可搜尋圖示、插畫素材，英文介面。
• 此圖庫混合收費圖片，所以搜尋時必須勾選「Free」來篩選免費圖片
• 免費素材搜尋引擎：IconFinder

6. IconScout

• 官方網站：IconScout 圖示、IconScout 插畫
• 收藏量巨大的素材圖庫，可搜尋圖示、插畫素材，英文介面。
• 此圖庫混合收費圖片，所以搜尋時必須勾選「Free」來篩選免費圖片
• 免費素材搜尋引擎：IconScout

三、向量

1. FreePik

• 官方網站：FreePik 圖示、FreePik 向量
• 收藏量巨大的素材圖庫，可搜尋圖示、向量素材，英文介面。
• 進階搜尋選項豐富(依類別、顏色、圖片方向等)。
• 免費素材搜尋引擎：FreePik

2. Vector4Free

• 官方網站：Vector4Free
• 收藏量中等的素材圖庫，可搜尋向量素材，英文介面。
• 免費素材搜尋引擎：Vector4Free

3. VectorPortal

• 官方網站：VectorPortal
• 收藏量中等的素材圖庫，可搜尋向量、插畫素材，英文介面。
• 免費素材搜尋引擎：VectorPortal

4. FreeImages

• 官方網站：FreeImages 圖示、FreeImages 向量、FreeImages 插畫
• 收藏量巨大的素材圖庫，可搜尋圖示、向量、插畫素材，英文介面。
• 進階搜尋選項豐富(依副檔名、顏色、圖片類型等)。
• 免費素材搜尋引擎：FreeImages

5. Vecteezy

• 官方網站：Vecteezy
• 可搜尋向量、透明圖素材，英文介面。
• 免費素材搜尋引擎：Vecteezy

四、透明圖

1. PngTree

• 官方網站：PngTree
• 收藏量巨大的素材圖庫，有中文語系操作介面，可搜尋透明圖、插畫、背景圖素材。
• 下載時需加入會員(FB、Google、Line)。
• 免費素材搜尋引擎：

2. Png Mart

• 官方網站：Png Mart
• 收藏量大的素材圖庫，可搜尋透明圖素材，英文介面。
• 免費素材搜尋引擎：Png Mart

3. StickPng

• 官方網站：StickPng
• 收藏量大的素材圖庫，可搜尋透明圖素材，英文介面。
• 免費素材搜尋引擎：StickPng

4. PngImg

• 官方網站：PngImg
• 收藏量大的素材圖庫，可搜尋透明圖素材，英文介面。
• 圖片可依英文字母A~Z分類。
• 免費素材搜尋引擎：PngImg

五、免費素材使用條款

「免費素材圖庫」跟「CC0 圖庫」的使用方式、條款截然不同，「CC0 圖庫」可以任意使用、甚至商用，但「免費素材圖庫」則有所限制，例如：

• 有的限制只能個人使用，不得商業使用
• 有的必須在圖片、或網站上署名作者或圖庫
• 有的直接標示 CC 授權，需以相同方式分享
• 但也有的允許商業使用

所以下載免費素材圖片之前，除了 CC0 圖片之外，請務必在下載頁面的圖片描述找找，看看授權使用條款如何規範，以免不小心侵權。

更多「免費圖庫」相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

FB 社團爬蟲實作範例﹍使用 Node.js 操作 Puppeteer

June 30, 2023, 9:04 pm

≫ Next: 排程自動抓台幣美元匯率成交量資料﹍Google Apps Script

≪ Previous: 2023 免費素材圖庫整理

$

0

0

過去取得 Facebook 社團貼文的方法為「訂閱FB社團通知郵件」，然後利用 Gmail 設定關鍵字篩選，挑出真正需要的貼文內容，整個優化流程記錄在「操作 Google Apps Script 定時過濾 FB 社團郵件通知」。 不過這套流程最近碰了壁，不知為何 Facebook 不再寄出郵件通知，持續了好一段時間，而且只有某個 FB 帳號收不到郵件通知，我的 FB 主帳號仍可收到社團貼文通知。合理推測為，可能那個 FB 帳號有太多社團郵件通知(主帳號不多)，FB 郵件伺服器覺得耗費太多資源，決定封鎖該帳號的郵件通知功能。 既然 Facebook 自己提供的功能也靠不住，只好自己研究寫爬蟲抓 FB 社團貼文的方法。本篇會分享利用 Node.js 操作 Puppeteer，模擬 Chrome 瀏覽器開啟 FB 社團網頁並爬文的範例筆記，以及相關的注意要點。 (圖片出處: piqsels.com)

一、FB 爬蟲注意事項

1. FB 適合爬蟲的網址對於新手而言，FB 網頁版(www.facebook.com)由於常常改版，寫好的爬蟲程式可能過陣子就不能用了。根據這個「FB 爬蟲討論串」，推薦的 FB 爬蟲網址如下：

• m.facebook.com：此為 FB 行動版網址
• mbasic.facebook.com：此為 FB 簡易版網址，頁面沒有 Javascript，環境非常單純，是爬蟲程式首選

2. 面對反爬蟲機制 FB 爬蟲登入帳號、或是存取頁面太過頻繁，很快就會被封鎖帳號，所以需要注意以下：

• 不要使用主帳號作為爬蟲
• 頁面存取要設定間隔一段時間，例如隨機 5~10 秒以上，避免被 FB 偵測到固定行動模式
• 別做看似浪費 FB 資源的事

3. 排序問題 FB 社團貼文預設排序方式，並非顯示最新貼文。要解決貼文排序問題的話，可參考以下：

• FB 網頁版：社團網址加上參數 "?sorting_setting=CHRONOLOGICAL"即可依照貼文發佈時間排序
• FB 行動版：點擊右上角選單圖示(三條橫線) → 最新動態 → 社團，就可看到所有社團貼文依照發佈時間排序
• FB 簡易版：沒有提供排序的方法

二、Node.js 準備動作

1. Node.js 環境設定使用 Node.js 的初始環境建構，可參考以下：

• 「Node.js 爬蟲開發新手技巧」：瞭解 Node.js 基礎知識、開發工具
• 「使用 Node.js 爬蟲定期抓網頁資料」→「一、安裝 Axios、Cheerio 模組」：安裝 Cheerio 操作 DOM 比較方便
• 同一篇的「四、Windows 自動執行程式」可設定排程執行爬蟲程式

2. Puppeteer使用 Puppeteer 作為 FB 社團爬蟲程式有以下優點，是一般簡易爬蟲程式做不到的：

• 能模擬 Chrome 瀏覽器的操作，讀取 JS 載入後的頁面 HTML 內容
• 能模擬 FB 輸入帳號密碼的動作，解決帳號登入、網頁讀取 cookie 的問題

更多 Puppeteer 的介紹、安裝、操作，可參考這篇「爬蟲好工具 - Puppeteer」，API 說明書可參考「Puppeteer」。 3. 寫入資料庫爬完的資料，如果想寫入 Google 試算表作為資料庫，可參考「使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫 」。

三、範例程式碼

以下為簡易的 FB 社團爬蟲範例程式碼，以「Blogger 經營學習資源分享」這個社團作例子，抓 10 篇貼文的內容及貼文網址。 程式碼代表的含意請參考註解文字，並請修改前幾個參數的數值(及帳號密碼等)，因為只是能正常執行的簡單範例，需要更多功能請自行修改程式碼： const fbGroupId = "blogger.skill", // FB 社團 ID(為網址上的一串數字), 或社團自訂網址字串 fbHomeUrl = "https://mbasic.facebook.com", // FB 簡易版網址 fbUsername = "xxx@gmail.com", // FB 帳號 fbPassword = "xxxxx", // FB 密碼 maxPosts = 10, // 最多抓幾篇文章 cheerio = require("cheerio"), puppeteer = require("puppeteer"); (async function() { let fbPostsArrays = []; // 存放所有 FB 社團貼文 let browser, page; // FB 初步動作 await fbInit(); // 抓 FB 社團貼文 await getFbGroupPosts(); console.log(fbPostsArrays); // 顯示爬文資料 // 關閉瀏覽器 await browser.close(); // FB 初步動作 async function fbInit() { // 開啟瀏覽器 browser = await puppeteer.launch(); page = await browser.newPage(); // 載入 FB 首頁 await page.goto(fbHomeUrl); // 登入 FB await loginFB(page, fbUsername, fbPassword); } // 登入 FB async function loginFB(page, username, password) { await page.waitForSelector("#m_login_email"); await page.type("#m_login_email", username); await page.waitForSelector("#password_input_with_placeholder"); await page.type("#password_input_with_placeholder input", password); await page.waitForSelector("#login_form"); await page.click("#login_form input[name=login]"); } // 抓 FB 社團貼文 async function getFbGroupPosts() { let fbGroupUrl = fbHomeUrl + "/groups/" + fbGroupId; let postCount = 0; // 已抓取的貼文數量 // 載入 FB 社團首頁 await page.goto(fbGroupUrl); // 取得單一頁面貼文 await getSinglePagePosts(); // 取得單一頁面貼文 async function getSinglePagePosts() { let nextPageUrl; // 下一頁連結 // 取得單一頁面所有貼文 await getSinglePagePosts(); // 貼文數量不到 maxPosts 則持續爬取 while (maxPosts > postCount) { // 休息 10 秒 sleep(10); // 前往下一頁 await page.goto(nextPageUrl); // 繼續抓下一頁 await getSinglePagePosts(); } // 取得單一頁面所有貼文 async function getSinglePagePosts() { // 等待頁面載入 #m_group_stories_container await page.waitForSelector("#m_group_stories_container"); //把網頁的body抓出來 let body = await page.content(); //丟給cheerio去處理 let $ = cheerio.load(body); let $section = $("#m_group_stories_container section"); let $posts = $section.children("article"); let $nextPage = $section.next().children("a"); nextPageUrl = fbHomeUrl + $nextPage.attr("href"); // 下一頁連結 // loop 所有貼文 loopAllPosts(); function loopAllPosts() { // 取得網址 內容 $posts.each(function() { // 檢查貼文數量是否已達到 maxPosts if (maxPosts < postCount){ return false; } let $this = $(this); let $header = $this.find("header:eq(0)"); let $footer = $this.children("footer"); let postUrl = getPostUrl($footer); // 取得貼文連結 let body = $header.next().text(); // 取得貼文內容 fbPostsArrays.push([postUrl, body]); postCount++; // 紀錄已爬取貼文數 }); } // 取得貼文連結 function getPostUrl($footer) { let postUrl; $footer.find("a").each(function() { let $this = $(this); if ($this.text() == "完整動態") { postUrl = $this.attr("href").split("?")[0]; postUrl = postUrl.replace("mbasic.", ""); return false; // 中止 loop } }); return postUrl; } } } } // 休息 n 秒 function sleep(sec) { var sharedArrayBuffer = new SharedArrayBuffer(4), sharedArray = new Int32Array(sharedArrayBuffer); Atomics.wait(sharedArray, 0, 0, sec * 1000); } })();執行後的結果如下： [ [ 'https://facebook.com/groups/blogger.skill/permalink/1289039078370664/', '［標籤選擇的問題］ 因為 blogger 沒有把分類跟標籤拆開，撰文上原本把標籤當分類用，但因為覺得多一點標籤可以有利SEO(?)，所以就標了一堆，但回到前台後就變得凌亂。 想說是有什麼方式可以指定只呈現要的標籤即可？' ], [ 'https://facebook.com/groups/blogger.skill/permalink/1291575704783668/', '上面的圖是我找到的模板，但YT嵌入碼貼上後，高度被限制到很窄，同樣的YT預設的嵌入碼，在下面的圖中觀賞上比較舒適，HTML裡面找了很多但還是無解，因此來請教高手求解方' ], [ 'https://facebook.com/groups/blogger.skill/permalink/1290236434917595/', '製作網頁如果需要用到一些素材、插圖時，可以使用「免費素材搜尋引擎」，一站直接搜尋所有熱門圖庫：https://icon.wfublog.com/ ­ 同時本篇也介紹這些免費素材圖庫，依照CC0、圖示、向量、透明圖等類別進行重點說明：https://www.wfublog.com/2023/06/free-icon-vector-image-stock.html' ], [ 'https://facebook.com/groups/blogger.skill/permalink/1258260454781860/', '最近因為要在文章裡插入表格，研究了一下方法，想將測試的結果回饋給社團，就把過程整理成文章，若有誤還請各位高手指點，謝謝。' ], ... ]

更多 NodeJs 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！

排程自動抓台幣美元匯率成交量資料﹍Google Apps Script

August 2, 2023, 1:44 am

≫ Next: 協助 WordPress.org 搬家到 Blogger 紀錄﹍如何繞過 WP 主機商

≪ Previous: FB 社團爬蟲實作範例﹍使用 Node.js 操作 Puppeteer

$

0

0

上一篇說明「如何排程抓證交所台股交易資料」，本篇同樣利用 Google 試算表作為資料庫，使用 Google Apps Script(以下簡稱 GAS)進行排程及寫程式，來抓取「美元/台幣」匯率交易資料，用以觀察長期趨勢，尋找合適的買賣點。 (圖片出處: pexels.com)

一、公開資訊來源

1. 臺灣期貨交易所 API這是期交所 API 網址：

• 官網：https://openapi.taifex.com.tw/

往下找到「每日外幣參考匯率」即可看到 API 呼叫網址：

• https://openapi.taifex.com.tw/v1/DailyForeignExchangeRates

操作的方式可參考上一篇「如何排程抓證交所台股交易資料」→「一、證交所 API」→「1. 新版 API」，有圖解範例說明。 2. 台北外匯市場發展基金會「台北外匯市場發展基金會」提供了 1990 年以來的每日外匯成交資料，且包含「成交量」紀錄，這是前面「期交所 API」無法提供的。 進入以下頁面後，可下載每一年的 csv 檔紀錄：

• 新台幣匯率

如果不需要成交量的話，可以使用「期交所 API」；如果需要成交量，就得瞭解如何抓 csv 檔後進行解析。

二、GAS 解析 CSV 檔

1. 官方工具參考 GAS 官網說明書「parseCsv」，使用以下工具可解析 CSV 檔內容： Utilities.parseCsv("csv 檔內容")以上指令會將 csv 檔內容解析並回傳二維陣列資料，例如原本的 csv 內容為： 名稱, 性別, 編號 Wayne, Male, 001解析後回傳： [ [名稱, 性別, 編號], [Wayne, Male, 001], ]2. 操作範例這篇「How to fetch and parse a CSV in Google Apps Script」提供了實作範例： function myFunc(){ var res = UrlFetchApp.fetch('http://www.example.com/my.csv') var csvraw = res.getContentText() var csv = Utilities.parseCsv(csvraw) } csv 即為回傳的二維陣列內容。

三、取得歷史外匯資料範例

以下為 GAS 範例程式碼： var ss = SpreadsheetApp.getActiveSpreadsheet(), fx_sheet = ss.getSheetByName("匯率"); // 取得匯率歷史價量資料 function getFxHistory() { var startYear = 1989, endYear = 2023, apiUrl = "https://www.tpefx.com.tw/uploads/service/tw/", // api 呼叫網址 fetchUrl, i, j, response, data, date, rate, volume, rowData, lastRow; // loop 年份 for (i = startYear; i < endYear; i++) { fetchUrl = apiUrl + i + "nt.csv"; // 組合 api 參數 response = UrlFetchApp.fetch(fetchUrl).getContentText(); data = Utilities.parseCsv(response); // 去除 row 1 「欄位名稱」資料 data.shift(); rowData = []; // loop 所有資料 for (j in data) { date = data[j][0]; // 沒有日期不處理 if (!date) { continue; } rate = data[j][2]; // 匯率 volume = data[j][5]; // 成交量 rowData.push([date, rate, volume]); } // 寫入試算表 lastRow = fx_sheet.getLastRow(); fx_sheet.getRange(lastRow + 1, 1, rowData.length, 3).setValues(rowData); // 休息 Utilities.sleep(5000); } }

四、取得每日外匯資料範例

1. GAS 範例想要每日取得最新外匯成交資料的話，由於收盤時間為 16:00，最好 17:00 以後再設定排程執行程式。 以下為操作「期交所 API」的範例程式碼： var ss = SpreadsheetApp.getActiveSpreadsheet(), fx_sheet = ss.getSheetByName("匯率"), today = new Date(), todayFormat = Utilities.formatDate(today, "GMT+8", "yyyyMMdd"); // 格式化今天日期 // 取得匯率歷史價量資料 function getFxToday() { var apiUrl = "https://openapi.taifex.com.tw/v1/DailyForeignExchangeRates", // api 呼叫網址 response = UrlFetchApp.fetch(apiUrl).getContentText(), data = JSON.parse(response), i, j, rowData, date, rate; // loop data for (i in data) { rowData = data[i]; // loop 每日資料 for (j in rowData) { date = rowData[j]["Date"]; // 今日才處理 if (date == todayFormat) { rate = rowData[j]["USD/NTD"]; // 美元台幣匯率 fx_sheet.appendRow([date, rate]); } } } }2. 注意事項奇怪的是，「期交所 API」我在 GAS 執行時，總是回傳 404 錯誤，不曉得是否有人頻繁用 GAS 呼叫「期交所 API」，導致 GAS 伺服器 IP 被期交所伺服器封鎖。 然而我改用 Node.js 呼叫「期交所 API」就沒有任何問題，所以如果以上程式碼你也遇上 404 錯誤的話，可以參考「使用 Node.js 爬蟲定期抓網頁資料，結合 Google 試算表作為資料庫」，改用 Node.js 的環境來修改程式碼，進行爬蟲排程抓資料。

五、補充

本篇操作寫得比較簡略，如有疑問可先閱讀上一篇「如何排程抓證交所台股交易資料」的內容，來瞭解以下如何操作：

• Google 試算表察看資料
• GAS 設定排程
• 自動寄信通知

更多 Google Apps Script 相關文章：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！