Quantcast
Channel: WFU BLOG
Viewing all 784 articles
Browse latest View live

調整愛奇藝 WeTV 芒果tv Bilibili 字幕大小,看陸劇更方便﹍書籤工具

$
0
0
製作「線上看電視」後,基本上都是使用瀏覽器在 TV 大螢幕收看節目,包含 OTT 平台也是。但 OTT 平台的字幕,在電視上看起來有時會太小、眼睛很吃力,有的平台可調整字幕設定,但多數平台是無法調整的。 於是自己製作了瀏覽器調整字幕尺寸的小工具,本篇針對各大陸劇平台而設計:
  • 愛奇藝:可調整(台灣版 iq.com)
  • WeTV:可調整(此為騰訊台灣版)
  • MGTV:可調整(就是芒果tv)
  • Bilibili:可調整
  • 優酷:不可調整(因為字幕內嵌在影片)
  • 搜狐:不可調整(因為字幕內嵌在影片)
(圖片出處: WeTV)

一、安裝說明

陸劇字幕調整大小
  • 請將以上這個按鈕,用滑鼠拖曳到瀏覽器的書籤列,即可當作書籤使用。
  • 要放大字幕時,點擊書籤即可看到效果
  • 書籤字串可自行修改

二、使用說明

以下說明這個工具的設計概念,以及操作方式:
  • 在文章開頭標示「可調整」的 OTT 平台,播放影片後點擊書籤,即可放大字幕
  • 每點擊一次會放大 4px 這樣的尺寸
  • 最多放大 5 次(共 20px)
  • 到了第 6 次,會回到原始尺寸,反覆循環
  • 關閉瀏覽器前會記錄最後一次的字幕尺寸,將來重新播放影片時,點擊書籤會自動載入最後一次的字幕尺寸,不必從最小尺寸開始累積
  • 若使用無痕模式觀看影片,將無法記錄字串尺寸

三、補充

  • 使用上有任何問題、意見,歡迎在本篇留言提出。
  • 若版本有更新會在本篇說明,屆時請重新拉書籤。
更多「線上影音」相關文章:

如何看 YouTube 影片不被廣告中斷﹍書籤工具(免下載、免安裝軟體或APP)

$
0
0
阻擋 YouTube 影片廣告的軟體或外掛有不少,但我個人沒想過要使用,原因大致如下:
  • 這些軟體或外掛存在合法性的疑慮,在法律上屬於灰色地帶
  • 若是內含惡意程式碼我們也無從得知,風險很大
  • 讓 YouTube 頻道主獲得合理收入才能鼓勵創作,可以有源源不斷的原創作品觀賞
而且檔了 Google 財路,大公司多的是資源或方法來對付,可參考以下相關資訊: YouTube 廣告主要分兩種:影片下方的懸浮廣告(不中斷影片)、強制性廣告(會中斷影片)。其中「強制性廣告」因為需要手動按「略過廣告」才能繼續影片播放,相當影響觀影體驗。 不過「強制性廣告」存在一種機制可以合法屏蔽,原來 Google 為了鼓勵開發 YouTube 周邊相關工具及功能,利用 YouTube API 研發的工具在播放影片時,將不會出現「強制性廣告」,這也是本站開發「線上看電視」的好處,在本站收看 YouTube 電視節目影片不會被「強制性廣告」干擾。 由於常在 YouTube 上看推薦影片,但現在 YouTube「強制性廣告」的頻率越來越誇張,我開始思考如何解決這件事。想到可以利用「線上看電視」的介面來播放 YouTube 影片,於是寫了本篇的書籤小工具。以下先介紹製作此工具的動機及用途,想直接安裝可跳至「二、安裝說明」。 (圖片出處: pixabay.com)

一、為何製作此工具

1. 強制性廣告的缺點以前的 YouTube 沒那麼誇張,但最近看影片時,強制性廣告真的有比較超過:
  • 出現的頻率越來越高,常常影片開始前有,影片中也會有,結束也可能有
  • 有比較小的機率是,自動播完廣告後,會自動播放影片,那這種的還可以接受,省去手動操作的麻煩
  • 但更高的機率是,播放完廣告還是會出現「略過廣告」才能回到影片,相當麻煩
  • 而且最近覺得疑似詐騙的廣告越來越多,常常出現「股票」、「錢很好賺」...這類的影片廣告,如果能將詐騙廣告屏蔽才是功德一件吧
2. 此工具用途我觀看時間較長的影片,通常是做運動、不想用眼睛、聽音樂等等需要背景聲音的情境,此時最不喜歡的就是出現無法自動關閉的「強制性廣告」,因為騰不出手來按關閉。 既然屏蔽「強制性廣告」是 YouTube API 官方提供的功能,那麼使用本篇提供的工具,改由「線上看電視」的介面來播放影片,進行以上這些情境的活動時,就不用擔心影片被打斷了。

二、安裝說明

YT擋強制廣告
  • 請將以上這個按鈕,用滑鼠拖曳到瀏覽器的書籤列,即可當作書籤使用(可自行修改書籤字串)。
  • 手機版若要使用書籤,建議先在 Chrome 瀏覽器加入書籤,然後手機 Chrome 瀏覽器使用同樣的 Google 帳號同步,即可使用網頁版設定好的書籤。

三、操作說明

操作書籤工具的方式很簡單:
  • 先進入 YouTube 網址,無論是首頁或是影片網址都可以
  • 然後點擊書籤即可看到效果
1. 改用「線上看電視」播放影片線上看電視 群組分類如果是進入 YouTube 影片網址,例如上圖的頁面為「U18青棒錦標賽 美國vs臺灣」:
  • 從網址列紅色底線可看出是 YouTube 影片頁面
  • 點擊紅框處剛剛拉到書籤列的書籤即可
線上看電視 群組分類點擊書籤後,可看到頁面自動跳到「線上看電視」網站,會使用本站的介面來播放「無強制性廣告」的影片。 2. 點擊影片連結線上看電視 群組分類如果是進入 YouTube 首頁,一樣請點擊書籤後可看到效果,所有影片連結會被程式自動調整。。 例如上圖滑鼠移到中間紅框處的影片連結「古人夏天到底哪來的「冰塊」? 」,可看到圖片下方紅框標示的網址連結,變成了「線上看電視」網址連結參數: https://tv.wfuapp.com/?id=OK8S72SgA-0&title=古人夏天到底哪來的「冰塊」?%20原來古代冰塊是這樣做的!&group=新聞線上看電視 群組分類點擊該連結後,會另開視窗前往「線上看電視」該影片的播放頁面。 如果看得懂網址參數的邏輯,也可以自行修改影片 id、title 等參數,在本站播放「無強制性廣告」的 YouTube 影片(不過應該沒有比直接使用書籤工具來得方便)。3. 點擊播放清單連結線上看電視 群組分類如果在 YouTube 搜尋播放清單,如上圖是「俗女養成記」的搜尋結果,點擊紅框處的播放清單連結,也能以清單的形式播放。 線上看電視 群組分類如上圖,點擊連結後另開視窗前往「線上看電視」的播放頁面,可看到有清單可以選擇集數。 順帶一提,戲劇節目也可直接在「線上看電視」進行搜尋,若已有該節目的頁面,播放有清單的影片,操作介面會比較方便。

四、觀看音樂影片

聽音樂也是收看 YouTube 影片的大宗,播放音樂影片時若不想被「強制性廣告」中斷,則不一定要使用書籤工具、或是利用「線上看電視」來播放,因為我已經開發了更方便的工具: 無論是收看各種性質的直播音樂頻道,或是自製音樂播放清單,或是搜尋音樂影片,都非常方便,操作上有問題可參考「使用說明」即可。

五、常見 FAQ

日後若有常見問題,會持續補充在此。 Q1: 滑鼠移到 YouTube 縮圖,會自動放大播放預覽影片,此時點擊影片無法前往「線上看電視」?Ans: 是的,在這個狀況下程式無法修改影片連結。請在縮圖自動放大之前點擊,或是點擊影片標題文字,都可前往「線上看電視」播放影片請一一檢視是否完成以下動作:

六、補充

如果你也常看時間較長的影片,相信本篇提供的工具會有很大幫助。對於這個書籤工具,操作上有任何問題、功能上有任何建議,或是萬一某天 YouTube 網頁改版而導致功能需要調整,都歡迎在此留言反應,謝謝!
更多YouTube相關文章:

三國志文字版策略遊戲﹍「英雄黃昏」介紹

$
0
0
三國志文字版策略遊戲﹍「英雄黃昏」介紹「英雄黃昏」是一款文字版三國策略遊戲,可扮演三國時代的一名虛構武將,類似 KOEI 三國志前幾代的武將制,但不能扮演史實武將。大致不同之處為,並非只能以統一天下為目標,隨著玩家的趣向,例如把以下成就當成目標,都可以完成遊戲:
  • 成為富豪:例如賺到 30000 金(要花不少時間,此為個人所得,非城池收入)
  • 人際成就:例如獲得配偶x1 + 子女x3 + 義兄弟x5
  • 王佐之才:輔佐某陣營統一天下(非自己作為君主統一)
  • 摸金校衛:例如成功盜墓挖寶x20
  • 暗殺刺客:例如成功刺殺武將x30
除了以上還有一些其他目標可選,算是耐完度、樂趣不少。不過玩這個遊戲有個限制──只有簡體字版(作者來自中國),目前在 Steam 以免費遊戲發行: 作者是三國迷,自學程式寫出這個免費作品,也因如此缺乏美術、影像技術層面的支援,只能以文字呈現他的構思與設計。但這不影響此作品的遊戲性,在 Steam 上已獲得一千多則壓倒性好評,我玩沒多久便入了坑,宛如另一個精神時光屋。雖然這遊戲沒有華麗的畫面,但卻是符合我磁場的策略遊戲。 (圖片出處:steam)

一、操作說明

1. 創建人物三國志文字版策略遊戲﹍「英雄黃昏」介紹遊戲一開始需建立人物,參考上圖: 簡單說的話,自創屬性最重要的是「魅力」、再來是「統帥」。此遊戲核心為結交朋友,與義兄弟、配偶一起打拼,自然是「魅力」高才交得到朋友囉。2. 攻略說明書三國志文字版策略遊戲﹍「英雄黃昏」介紹進入遊戲後,會發現約有 10 個主區塊,首次遊玩可能會覺得資訊量過大,茫然不知如何下手。所以作者提供了一份「遊戲攻略」可隨時查閱,如上圖,左下角區塊點選「貨物」欄位,使用「遊戲攻略」即可三國志文字版策略遊戲﹍「英雄黃昏」介紹文件分成七個部分,有最需要的「攻略」、「入門」,也有按鍵及關鍵遊戲要素的操作技巧。例如如何賺錢、賭場提高勝率的作法,如何結婚、生子等等。 3. 環境設定三國志文字版策略遊戲﹍「英雄黃昏」介紹右下角的「設置」可以進行許多重要設定,附帶一提,設定畫面還提供上圖紅框處的「修改器」,雖然我不太需要就是了。 提幾處我認為對操作比較方便的設定,上圖「存檔」的部分,最好勾選不要自動存檔,因為這個遊戲的特點是,「一個開局只會有一個存檔」,在同個開局不能保存多個進度之下,最好自己選擇要存檔的時機點,免得發生一些意外時卻被自動存檔。 這樣的設計或許有的玩家不適應,也許是作者為了防止玩家利用 S/L 從賭場、某些場合來進行交叉測試、或不當得利吧。不過「不能保存多個進度」也未嘗不是好事,玩家做決定之前必須更謹慎、考慮更周全,更能為自己的決策負責,玩起來會更貼近真實的「策略」遊戲。 三國志文字版策略遊戲﹍「英雄黃昏」介紹另一個重要設定是「暫停」時機,最好把大部分暫停時機都勾選(也不一定要全勾選,待上手後可自行斟酌),免得時間快速前進時,很多訊息都是一閃而過,重要資訊會漏掉沒看到,失去了進行重要行動的時機。例如一進入遊戲沒設定暫停,時間就直接過去好幾天;或是某些名將、女武將在野了,有設定暫停就能快速前往挖角4. 掛機但是這個遊戲的一個強大設計,就是可以「掛機」,如果你能完美設定所有選項,就能拍拍屁股離開螢幕,讓遊戲自動跑流程。那麼在這個情況下,就必須取消所有的暫停時機設定了。 所以如果覺得遊戲初期做政務、累積功績名望很累,可以研究一下所有的設定配置,找出最適合自己的掛機設定,讓遊戲跑幾個小時後再來接手,說不定就已經口袋滿滿,不用從頭練等了。

二、金錢

1. 金錢來源遊戲上手後,會瞭解最重要的資源就是「金錢」。有錢什麼都能買,除了裝備、道具,連五維屬性都可以買。 獲得金錢的途徑,遊戲攻略已經說明得很清楚,主要的有:
  • 領取官職俸祿、政績獎金
  • 完成年度軍令狀
  • 文鬥會、武鬥會比賽押注
  • 賭坊
  • 經商
攻略沒提到的是「家書」,初期沒錢的時候,每年可以跟老家索取 800 金,比以上任何收入都還多。 而這些途徑最重要的是「經商」,此遊戲設計了市場交易系統,操作得當可以全自動獲取穩定收益、甚至暴利,以下簡單介紹。 2. 市場交易三國志文字版策略遊戲﹍「英雄黃昏」介紹
  • A:從右上角「市場」點擊
  • B:出現「市場交易」視窗,可直接進行買入賣出
  • C:點擊「買賣託管」可設定自動化交易
  • D:此為設定選項
上圖設定的數值並非標準答案,而是需要根據現存資金多寡進行調整,有機會再另發一篇分享。

三、人際關係

前面提過遊戲核心為「結交朋友」,以下簡單介紹如何提升人際關係。 1. 拜訪從不同的場所分別可以叫出對應的武將列表,這裡以系統功能進行示範,點擊右下角「情報」→「全武將」 三國志文字版策略遊戲﹍「英雄黃昏」介紹上圖為依「武力」篩選武將的結果:
  • A:點擊武將名稱,會出現武將簡介、傳記資訊
  • B:點擊「拜訪」會出現可進行的動作,依照不同的行為有對應的成功機率,成功後會提升各自不同的交往程度
  • C:點擊「標記」可將武將加入最愛清單,這是很棒的設計,將來可縮短很多操作時間,所以盡量將高武、高智的強力武將都標記起來
2. 密切程度三國志文字版策略遊戲﹍「英雄黃昏」介紹武將標記完後,右邊選「標記武將」可顯示列表 → 接著上方欄位依「關係」篩選 → 點擊「趙雲」可看到關係為「密切」,遊戲中的關係數值為 333
  • 為何遊戲進行沒多久就跟趙雲這麼交好,可能是以他為模版的關係
  • 數值超過 300 後,進行拜訪,選擇結交義兄弟的話,成功率應該會超過 30%,可以開始試試看
  • 超過 500 的話,對方可能就會主動要求結交義兄弟了
  • 跟女武將也可以結交「義兄弟」,但「結婚」應該是更好的選項才是(如果有「內助」技能,雙方都可以增加屬性)
3. 酒館利用「拜訪」提升關係比較慢,雖然贈送物品也能提升,但初期畢竟沒錢不太可能,那麼 CP 值最高的就是「喝酒」了。 前往有「酒館」的城市,就可邀請武將喝酒,一次最多 3 位。 三國志文字版策略遊戲﹍「英雄黃昏」介紹三國志文字版策略遊戲﹍「英雄黃昏」介紹酒後可能發生各種事件,有時武將會傳授技能,關係親密的武將也可能會贈送物品,甚至跟異性武將有可能會發生一夜情... 4. 異性武將異性武將的攻略應該是最多玩家有興趣的,跟其他遊戲相比,這個遊戲的限制幾乎是最低的:
  • 在別的遊戲,已婚武將都是不能碰的,但這個遊戲已婚武將照樣可以結交、喝酒,關係到頂後甚至還會拋棄原配、主動要求結婚...
  • 如果難度選「普通」,配偶、義兄弟的數量都沒有限制,那麼要開人妻後宮完全沒有問題...
  • 生下子女後,如果有奇怪的想法,據說還是有辦法可以做到...
  • 順帶一提,如果覺得攻略異性武將很累,可以乾脆寫家書請老家直接介紹老婆~~
  • 或是乾脆整天泡青樓,久了也是會發生「贖身」事件

四、技能

1. 「技能書」概念這個遊戲的武將「技能」概念跟三國志不太一樣,是可以隨時插卡、拔卡的切換概念。前面看到的武將傳授技能事件,其實是送「技能書」給我們,將「技能書」裝備在身上就可使用該技能。 2. 取得管道根據官方攻略,以下簡單介紹技能書可取得的管道:
  • 喝酒:自己領悟或別人傳授
  • 藏經閣
  • 進行政務、戰鬥,有可能領悟
  • 拜訪武將請求傳授
  • 三個同等級的技能書,可合成一本更高段的技能書(會產生什麼技能有可能隨機)
  • 分解最高等級的技能書,可獲得技能書碎片。累積 5 個神級技能書碎片,可合成 1 個神級自選技能
3. 強力技能這篇「英雄黃昏心得」介紹了許多強力技能,可以參考看看。不過要注意的是,一些破壞遊戲平衡的技能已經被作者修改掉(例如各種「外族兵」技能)

五、道具裝備屬性

1. 裝備欄位三國志文字版策略遊戲﹍「英雄黃昏」介紹
  • 上圖左為「裝備」欄位,可放 3 組裝備(1組6個),記得把初始裝備都放上去,可以增加各種屬性,別學許褚裸衣上戰場
  • 上圖右為「技能」欄位,可放 3 組技能書(1組6個),記得書裝備上去才能學會技能
  • 按左、右箭頭即可切換 3 組欄位
因為道具、技能書最多都可存放 50 個,所以可依照需求擺不同組合。例如平常做政務時放一組「政務」相關的技能,而作戰的時候切換到另一組「戰鬥」相關的技能2. 特殊設施以下列出在各種不同的特殊設施,可以得到哪些道具裝備:
  • 書院:獲得書籍,放到「裝備」欄位可提升屬性。
  • 狩獵場:若得到肉食,食用後可恢復「體力」。
  • 釣魚台:可獲得魚肉,食用後可恢復「氣力」。
  • 鑄劍谷:打造武器/副手的地方
  • 馴馬場:馴服馬匹的地方(不同等級的馬,恢復的體力、氣力不同)
  • 軍需處:買裝備的地方
  • 藏經閣:獲得技能書的地方
3. 名望商店道具三國志文字版策略遊戲﹍「英雄黃昏」介紹點擊上方的「名望」可進入名望商店,購買各種道具。依照目前的「名望」數值,能購買的道具會受到限制。
  • 如果想要懷孕,必須買提高受孕機率的補品
  • 絕義書:如果不想被仇視的話,必須買絕義書將仇恨值歸零(通常是搶了別人老婆之後...)
  • 七星燈、還魂丹:讓武將活得久一些
  • 丹書鐵卷:就是免死金牌的意思
  • 各種套裝:可以增加不同屬性,但所費不貲,因為裝備隨機出現,要靠運氣才能買到欠缺的裝備
  • 一些破壞遊戲平衡的道具,例如「神兵符」,在難度「困難」以上無法買到
4. 命理三國志文字版策略遊戲﹍「英雄黃昏」介紹點擊右下的「命理」可提升屬性,最多可提升 20 點,但初期沒什麼錢不建議購買。如果「偉業」選「富可敵國」會送 1500 金,此時可拿一些來點「體力」、「氣力」。

六、戰鬥

相對之下,戰鬥是最輕鬆的環節,把統武高、技能強的將領通通派上場,會自動依照發動技能的機率跑完結果。 三國志文字版策略遊戲﹍「英雄黃昏」介紹曹操宛城派了 5 萬兵進攻,劉備新野率約 5 萬兵迎擊,以下欣賞雙方武將技能展示。 三國志文字版策略遊戲﹍「英雄黃昏」介紹三國志文字版策略遊戲﹍「英雄黃昏」介紹最後曹操 5 萬兵全軍覆沒,劉備軍還剩 1.5 萬。可以大致這樣總結:
  • 癱瘓、防癱瘓的技能威力最大:例如趙雲單騎(自己無敵)、突刺(麻痺敵軍多位將領),諸葛亮遁甲(閃避攻擊)、空城(麻痺敵全軍),徐庶莫言(沈默敵軍多位將領)、識破(使單一敵將無法發動技能),曹操混亂(混亂兼損兵),法正誘敵(降士氣+無法發動技能),呂蒙緩兵(降體力+麻痺),蔣濟鎮靜(全體免疫麻痺)、偽報(敵軍全部回家),程昱暗算(敵將體力歸零無法作戰)
  • 大範圍攻擊技傷害可觀:例如諸葛亮元戎弩兵,關羽水淹,周瑜火神
  • 個人強力技有機率爆擊:例如呂布秒殺(就是字面的意思)、貪狼(6倍傷害),孫策連擊(連續3次),太史慈連射(全體敵軍1~4次)
  • 扣除特殊技能傷害後,剩下來才是比拼將領的統武、兵力、士氣等戰力數值
這次戰役的結果很合理,曹操二線將領對上劉備全明星算是死傷慘重。如果雙方都是全明星,比拼的就是技能發動機率了,尤其司馬懿自帶超強的「深謀」技能(己方全體武將主動技機率提升80%),很可能劉備軍會先一步被癱瘓。

七、小地圖

這遊戲的「小地圖」功能是我最欣賞的,所有城池的重要資訊都能在地圖上一覽無遺,雖然美術效果較差,但絕對是工程師思維才會做出來的強大功能。 1. 一般狀態三國志文字版策略遊戲﹍「英雄黃昏」介紹正常情況下的小地圖畫面如上,會看到城池上標示各種文字、不同顏色的外框等等,這些都是有含意的,點擊上圖紅框的「驚嘆號」圖示會顯示詳細說明,例如:
  • 「政」代表連續3個月政績良好,「斐」代表連續6個月政績斐然,「蝗」代表蝗災
  • 紅色外框代表敵對勢力(曹操),藍色外框代表同盟勢力(劉表、馬騰)
  • 目前新野交戰中(曹操宛城進攻劉備)
2. 城市資訊三國志文字版策略遊戲﹍「英雄黃昏」介紹如果按小地圖右下角的「外出」或「遷移」,會看到小地圖上方及右方,如紅框多出一排選項,用以提示玩家切換不同資訊顯示。 三國志文字版策略遊戲﹍「英雄黃昏」介紹例如點選「兵」可顯示兵力,劉備新野周圍鄰近城池的兵力配置一目了然。 3. 特殊設施三國志文字版策略遊戲﹍「英雄黃昏」介紹小地圖右側的選項用來提示特殊設施的城池所在地,如上圖,先點選上方的「城」顯示城市名,再點選右方的「酒」,就會顯示所有酒館的所在地。 從圖中可以很清楚的看出,離新野最近的酒館為藍框標示的「宛城」、「江夏」這兩座城。 有了這個小地圖,不必翻閱攻略說明,也能立即查到所有特殊設施的位置了。

八、補充

最後說一點對這個遊戲的看法,他的遊戲性是好的、有足夠潛力,但礙於資金目前還無法處理美術的部分。做不到的部分暫且略過,先提出可以加強的點。 1. 可以加強之處
  • 整體介面:因為我已經熟悉整個介面及操作,上手後自然覺得操作順手。不過對於剛接觸的玩家,由於全部都是文字,一開始望向偌大的螢幕,容易會有茫然不知所以的感覺。如果能用美術解決最好,而若美術無法解決介面的茫然感,或許作者需要想想如何簡化介面。提供入門玩家太多選擇,常會不知如何選擇。
  • 教學關卡:如不改動介面又能讓玩家熟悉介面,最簡單的方法為提供教學模式。就像「三國志」系列提供的教學關卡,可以一步步引導玩家熟悉主要設計及操作。(附帶一提,這遊戲我第一次玩的時候,其實是有顯示教學提示的,就在「軍令狀」的區塊。然而遊戲時間過了一年多我才發現,原來那些佔用了「軍令狀」區塊的文字是教學提示,而我整個遊戲所有選項四處都翻遍了,就是找不到「軍令狀」功能,因為教學提示沒有跑完流程是不會出現「軍令狀」的...這就是畫面資訊量太大的設計缺點~~)
  • 元件設計:看得出作者花很多心思設計每個區塊,幾乎畫面上所有欄位、名詞都能點擊,可執行對應的功能。但對於入門玩家而言,不一定知道哪裡可以點擊、隱藏了什麼功能可以執行。這個部分就需要作者加強元件的設計,想辦法讓玩家不用思考,一眼就看出「這裡可以點擊喔」,以及能夠分辨「哪裡可以點、哪裡點了不會有作用」。
  • 鍵鼠操作:彈出的視窗不容易關閉,直覺會按「ESC」來關閉,但「ESC」熱鍵已被指定為離開遊戲使用。熱鍵應該以常用功能為優先,如把不常用的功能指向常按的熱鍵就比較可惜。這導致彈出視窗必須花費額外時間移動滑鼠來點擊關閉,偏偏遊戲過程常需要察看彈出視窗的內容(例如逐一拜訪武將時),建議作者可以加強這部分的使用者操作體驗。
2. 關於作者另外幫作者說點話,這遊戲已經發佈滿一年,從更新紀錄可看到作者幾乎是夙夜匪懈,極度頻繁地在更新這個遊戲(通常1~2天就有一次更新),不斷修正 bug、調整平衡性、增添新功能。一方面希望作者顧一下身體別累垮了,一方面看到如此用心地對待自己的作品,除了心有戚戚焉,我相信這遊戲將來一定可以修正成非常完善的成品。
更多「英雄黃昏」相關文章:

英雄黃昏入門上手技巧

$
0
0
英雄黃昏入門上手技巧上一篇「介紹英雄黃昏」這款文字版三國策略遊戲,有提到介面資訊量不少,新手可能會不知道如何開始。本篇把開局初期流程跑一次,可以充當示範教學之用,相信看過後就容易上手了。

一、董卓亂政劇本

開局選這個劇本是因為對新手比較友善,只要陣營屬於「反董卓聯盟」,彼此同盟不會戰爭,開局比較沒有壓力。 英雄黃昏入門上手技巧自訂武將以司馬懿模版為例,開局會投入汝南孔伷陣營,旗下只有兩位武將,且潛在的在野人才多,日後要當太守或篡位都容易。遊戲初期的目標只需記得這兩件事:巴結老闆、當上主管。取得主控權後執行政令比較不會綁手綁腳。

二、日常事務

進入遊戲後的環境設定,請參考「上一篇」→「一、操作說明」→「3. 環境設定」,操作會比較順暢。 1. 偉業英雄黃昏入門上手技巧點擊螢幕上方紅框的「偉業」,可以設定遊戲目標。第一次玩的話,建議選「富可敵國」,可以獲得額外 1500 金,及「富豪」技能,會比較輕鬆。 想瞭解其他目標的話,可按右下角「技巧」看詳細說明。 2. 政務如前面所提,一開始的目標是當上主管(太守),這個遊戲會內定「功績」最高的武將為太守,所以遊戲初期主要就是累積功績及名望,根據名望高低可以在「名望商店」買到不同等級的道具。 英雄黃昏入門上手技巧而累積功績主要的途徑為執行政務,如上圖,可從右方紅框的「政務府」、「軍事府」來接任務,左方可看到執行項目,挑一個進行即可。 雖然「外交府」一樣可執行政務,但可能會失敗(與智力有關),為了避免浪費時間可以盡量不接外交任務。 而「政務府」中的「搜尋」、「登庸」都可能失敗,請自行評估或是只好不斷 S/L 了,不想那麼累的話可以接「軍事府」任務為主。 英雄黃昏入門上手技巧做了 20 天完成這次任務後,點上圖紅框「官職」,可看到功績增加了、薪水也漲了。只要不斷接單,遲早功績可以勝過其他武將。 同時孔伷武將少,沒人跟我們搶工作,這個月剩 10 天,還有多餘時間可以搶其他任務做、累積功績呢。 3. 裝備與市場「裝備」與「市場」這部分的操作與注意事項,請參考「上一篇」→「二、金錢」→「2. 市場交易」,以及「五、道具裝備屬性」→「1. 裝備欄位」

三、陳情

「日常事務中」的「陳情」可以獨立一個章節來講。 英雄黃昏入門上手技巧點擊右方紅框城池名稱(汝南)後,會出現:
  • 城市重要資訊
  • 陳情項目細節,如圖中 A 與 B
陳情主要分三類:訴訟、急缺、請求。 1. 訴訟上圖 A 為民眾訴訟,協助處理可以增加功績或名望(或兩者),所以遊戲初期務必每月要檢查並處理。 英雄黃昏入門上手技巧訴訟都是二選一,真的猜不出來可以 S/L。 2. 急缺上圖 B 為武將急缺,協助處理可以拉近關係。視要求的物品或武將是否重要,並不一定都要處理。 英雄黃昏入門上手技巧比如說要求的物品若是「肉類」或「魚類」,肉類可恢復體力,魚類可恢復氣力,這兩者都是買不到的,我會傾向不給。除非是我想提升關係的武將,才會考慮給肉跟魚。例如這次許靖想吃牛肉,我會決定不理。 英雄黃昏入門上手技巧而我想拉關係的孔伷(老闆),偏偏他想要的麻鞋我身上沒有,上圖顯示紅字「剩餘44天未完成」,點擊紅字後會出現提示文字,告知哪裡有賣,按「前往」就會自動跳到最近的城市,即可進行購買。 如果到了「軍需處」,如果身上有錢可以買一些負擔得起的低價品囤起來,將來有武將陳情就能以雙倍價格賣出。 3. 請求第三類陳情為「請求」,有可能是要求到各種特殊設施進行事務,例如到「論政台」舌戰、到「賭館」幫忙贏錢等等,可以再自行評估是否參加。

四、軍令狀

英雄黃昏入門上手技巧每年二月,上圖紅框的區塊會出現軍令狀,完成後可增加名望及得到獎金,細節可按上圖「驚嘆號」瞭解。 最高七星軍令狀,完成可得 50 名望 + 500 金。 英雄黃昏入門上手技巧按上圖紅框「刷星」按鈕,會隨機增加或減少星等,以及改變任務內容:
  • 「外交」有失敗的可能性,所以盡量刷出沒有外交的任務
  • 每個月都可以刷九次,所以不一定要每個月都 S/L。真的運氣都很差,可等年底再 S/L 刷出沒有外交的任務
  • 可以找一個關係「密切」的武將拜訪,一起做軍令狀可快速達標

五、人際關係

這部分「上一篇」→「三、人際關係」已經說了不少,可先參考之前的內容,以下繼續補充一些。 1. 社團之前沒有介紹社團,這裡特別說明加入社團對於人際關係的好處,點擊遊戲上方區塊的「社團」即可跳出社團一覽畫面。 英雄黃昏入門上手技巧點擊右邊的「申請」即可申請加入社團,大約要等幾個月才能通過。不過也可能沒通過,要隨時注意即時資訊。 社團要如何挑選呢?我認為以「強將」數量多的社團優先,因為申請成功後,會與所有社團成員關係大幅提升。 要查閱社團成員,可點擊上圖紅框處的成員數量。 英雄黃昏入門上手技巧以「桃園結義」社團為例,可看到成員有關、張、趙等猛將,加入這個社團的 CP 值是非常高的。 英雄黃昏入門上手技巧加入「桃園結義」後可看到,與劉、關、張、趙的關係從「陌生」直接跳到「交好」,省下許多交際的時間。 2. 喝酒喝酒在上一篇已經介紹過,這裡補充一些技巧:
  • 邀請喝酒的重點目標:君主、標記武將、配偶(有內助技能的武將)
  • 在賓館休息可恢復體力、氣力,還能恢復酒量
  • 在名望商店也可買「醒酒湯」恢復酒量
  • 提高酒量可以買到具裝備,例如晉陽、柴桑可能會有「九龍杯」(酒量+200),但也許每次開局不一樣
英雄黃昏入門上手技巧

六、特殊設施

簡單補充一下特殊設施:
  • 賭坊:由於會花費很多氣力,長期待賭坊或 S/L 的 CP 值都不划算。遊戲提供的攻略有建議,可先拜訪會占卜的武將,獲得運氣「大吉大利」後再去賭坊。
  • 書院:要花很長時間才能獲得書籍,不建議初期進行。
  • 狩獵場:要花不少時間,且不一定得到肉,多數情況下我會傾向把肉留著自己用。
  • 釣魚台:要花不少時間,且每次得到的魚數量不一,多數情況下我會傾向把魚留著自己用。
  • 論政台:建議可以不用去,除了花很長時間還可能輸,政治經驗的作用也不高
  • 鑄劍谷:不建議初期進行,因為關係好的武將常常會送武器/副手。
  • 馴馬場:不建議初期進行,因為關係好的武將也可能會馬匹。
  • 藏經閣:遊戲提供的攻略有建議,可先拜訪會占卜的武將,獲得運氣「大吉大利」後再去,對領悟進度有大幅加成。

七、太守

累積功績夠多時(大於同陣營其他武將),待在非君主的城市會自動成為太守,執行事務時可以擺脫許多限制,不像開局時綁手綁腳。例如 AI 君主常龜縮好幾年就是不進攻,但我們當上太守後,就能自主進行攻擊。 1. 制訂國策如能獲得「制訂國策」的權力,對於進攻他國會比較方便。前面提示過,開局後需與君主打好關係。 英雄黃昏入門上手技巧隨著關係上升,拜訪君主「制訂國策」的成功率很高時,便可提出要求。 英雄黃昏入門上手技巧英雄黃昏入門上手技巧英雄黃昏入門上手技巧成功後,點擊遊戲上方區塊的「國策」即可,可自由選擇要進攻的城池(按右邊的「選目標」選擇城市)。下個月初的會議,多數武將會依照國策進行表決。 2. 分配政務成為太守有不少好處:
  • 每月政務、軍務可指定武將執行
  • 連續 3 個月以上政績斐然,可增加名望、獲得獎金(連續 6 個月會收到「萬民傘」,可增加名望)
  • 政績斐然的定義為:政令執行率超過 80%,或是至少執行 5 個政令
  • 可以對該城市進行調兵遣將、調動該城市資源
  • 每月開會太守可直接指定該月目標
3. 調兵遣將英雄黃昏入門上手技巧說明一下太守如何調兵遣將,上圖孔伷打下空白城市新野後,WFU 因功績較高自動成為太守:
  • A:點擊城市會出現左側城市資訊
  • B:太守會多出「召」按鈕,如果本城將領數比較少的話,可以召集其他城市的武將過來。
  • C:太守會多出「調兵遣將」按鈕,點擊後出現左側 D 區塊
  • D:如果本城是後方補給郡,可以設定本城保留的資源、留守的武將數,超出時自動運往前線城市
  • E:如果要從本城運送資源到別的城市,可按此處的「本城手動」,選擇運送多少金、糧、士兵、兵裝等
  • F:如果要從本城派遣武將別的城市,可按此處的「本城手動」,選擇派遣的武將

八、作戰

英雄黃昏入門上手技巧介紹一下出戰的操作,月初開會決定戰爭後,便可以正式出戰,操作流程參考上圖:
  • A:點擊「軍事府」
  • B:會出現此區塊作戰選項
  • C:只有一個進攻目標時,進攻目標會以黑色顯示。如有一個以上進攻目標,此處的進攻城市會以「藍色」顯示,點擊後可選擇其他城市
  • D:點擊「點將」選擇出戰將領
英雄黃昏入門上手技巧
  • 每個武將都有「戰力」數值,把戰力最高的幾個排上去就對了
  • 軍師選擇智力高、能舌戰的,最好是能夠放輔助技能。除非軍師戰力很強,不然給 500 兵就可以了,免得浪費兵力
  • 戰力高的武將給多一點兵
  • 戰力不高但有輔助技能的武將都可派上場,給個 500 兵放技能都很好用

九、家書

每年年底都會收到家書,這個功能滿有趣的,最後特別介紹一下。 英雄黃昏入門上手技巧 12月1日注意看訊息,千萬別漏了「家書」,忘了處理可是損失很大的。到左側「貨物」就能看到,點開來使用即可,勾選以後「自動回信」比較方便。 英雄黃昏入門上手技巧上圖是回信畫面,可以要求明年老家幫忙的事項,如果要錢的話可以得到 800 金,缺老婆也可請家人介紹,但 CP 值最高的應該是索取「技能書」。 英雄黃昏入門上手技巧 WFU 第一年的運氣不錯,什麼都沒講老家就直接塞個老婆來了~~ 英雄黃昏入門上手技巧英雄黃昏入門上手技巧沒想到老婆簡直是不世出的英才,五維除了統帥少一丁點,其他四維全部屌打 WFU... 更誇張的是老婆還可以直接任職,並非只是路人無名武將,比在野武將挑半天還好用呢~ 以上就是跑了一年的遊戲示範流程,相信入門玩家至此應該對遊戲主要功能都很熟悉了,還有問題可再提出討論。
更多「英雄黃昏」相關文章:

Adsense 電匯如何避免昂貴手續費+中轉費用﹍最佳作法解析

$
0
0
Adsense 電匯如何避免昂貴手續費+中轉費用﹍最佳作法解析從 2022/9/1 起,Google Adsense 正式停止使用「西聯匯款」支付廣告費,剩下的選項只能是「電匯」(使用「支票」的成本太高,在此略過)。由於跟「西聯匯款」相比,「電匯」的成本相當高,除了台灣端收款銀行會有一筆手續費,海外端付款銀行與台灣之間必須透過中介銀行,會收一筆更昂貴的中轉費用,結匯時從 Adsense 付款金額中逕自扣除。 由於收款成本大幅提高,不能再像以往一般,設定達 USD 100 就無腦收款,否則會面臨高達 10%~20% 的鉅額手續費。此外還有一直都存在的匯損成本,也就是收款銀行將美金換成台幣的匯率損失。 本篇會精打細算,詳細說明怎麼做,才能讓所有額外手續費、匯損降到最低,至少要保持跟「西聯匯款」時代相同的水準。 (圖片出處: pexels.com)

一、西聯匯款成本

原本 Adsense 使用「西聯匯款」收款不需任何額外費用,不過隨著時間變遷,支援「西聯匯款」的台灣銀行從一開始的 4 家,最終僅剩京城銀行。也因為京城銀行一家獨大,從 2020 年 3 月開始京城宣布,使用「西聯匯款」收款時不再免手續費。 此事件可參考 Adsense 官方社群討論串「京城銀行西聯匯款匯差手續費」,原來京城銀行曾針對「西聯匯入外幣帳戶」提供「免收匯差手續費」的服務,而從 2020 年 3 月開始取消了這項優惠。 經過我多個月的實測計算後,結論如下:
  • 京城銀行「匯差手續費」並非固定金額,大致為接近收款金額的 0.6%
  • 所以若當月 Adsense 廣告費金額較小,領款也不會有損失
  • 不需累積較大的金額再一次領取,因為不會比較划算
瞭解這個成本之後,本篇我們需要考量的是,「電匯」收款要怎麼做,可以讓所有費用,達到跟「西聯匯款」差不多的 0.6% 水準。

二、開美金帳戶的重要性

相信不少站長 Adsense 收款會直接換成台幣,而非開設「美金帳戶」用 USD 收款。一方面要找時間開戶當然是麻煩的,而且以短期來看差別也不大。但另一方面若將時間拉長為 5 年、10年、甚至 20 年,匯率損失將會非常巨大。 這個網頁有「美元台幣歷史匯率走勢圖」,時間設成「月線」就能看到 2000 年以來的數據。其實也不用看那麼遠,從 2010 年以來可以看到,美元台幣匯率在 30 以上及以下,就波動了 3~4 次循環。 如果 Adsense 廣告費總是用台幣收款,代表從 2010 年以來,至少有 3 個時間區段,會因為匯率而損失約 10%~20% 的收益。簡單說,所有匯率在 30 以下的那些年份,用台幣收款都會賠很多。讀者可自行看看,從 2010 年以來,有多少個匯率損失的年份。 所以我之前寫的「領取 Adsense 西聯匯款最優惠的方法」→「三、如何獲得最佳匯率」,可以了解開外幣帳戶的重要性:
  • 如果當下判斷不適合換匯,認為將來有較佳的換匯時機點,那麼可以將資金停泊在外幣帳戶,視金額多寡進行定存
  • 比較簡單的判斷方式可以利用「美元台幣匯率」30 為分界點,30 以上就換成台幣,30 以下就保留美金(進行定存),絕對不會吃虧
  • 那麼 25~30 區間保留的美元,在 30~35 區間換成台幣,獲利 10%~20% 不成問題(加上定存可獲利更高)
瞭解以上說明後,接下來本篇會假設站長們都有開設外幣帳戶(美金),以此為基準進行討論。

三、電匯成本計算

如前所述,「電匯」收款主要有兩筆成本:手續費+中轉銀行費用。 1. 手續費可參考這篇「2022 adsense取款方式」→「電匯手續費一覽表」,這裡整理了台灣所有銀行收取的電匯手續費:
  • 手續費 0 元:
    • 匯豐:卓越理財帳戶、運籌理財帳戶
    • 星展:豐盛理財戶
  • 其餘大部分銀行多是按匯款金額 0.05% 收手續費,最低 200 元
  • 京城:每筆按 0.05% 收;最低 220
  • 剩下這些都比較貴:
    • 合庫:每筆按 0.025% 收;最低USD 10
    • 農業金庫:每筆 300
    • 王道、永豐、中信:每筆 400
2. 中轉費用中轉銀行的費用並非固定金額,每家付款銀行除了配合的中轉銀行不一樣,也不一定每次都絕對是同一家,所以中轉費用難以列表整理及預估。 以下試著從網路上查找案例,列出 Adsense 電匯實際產生的中轉費用: 從以上實例歸納出,電匯中轉費用可能落在「USD 10 ~ USD 15」3. 總共費用
  • 電匯手續費:
    • 本篇的狀況計算成本以中位數為基準較為恰當,去除極端狀況後,最多數的銀行手續費為 NT. 200。
    • 本篇以外幣帳戶來進行討論,幣別以美金計算比較容易
    • 台幣外匯取長期平均值 30 左右算是合理
    • 那麼長期來看 Adsense 銀行收款的電匯手續費為 USD 6.66 左右
  • 電匯中轉費用:
    • 一樣從案例中取中位數計算,中轉費用以 USD 12 計算
  • 電匯加總成本:長期來看落在 USD 18.66

四、最佳作法

依照以上田野調查獲得的資料,依照幾個不同情況討論最佳作法,如何讓電匯產生的全部費用維持在「西聯匯款」的 0.6% 水準: 1. 理財帳戶前面可看到不少銀行的「理財帳戶」,提供「電匯免手續費」服務,看起來是站長們 Adsense 領款的首選,實際上不一定每個人都有辦法開辦這類帳戶,必須先說明一下: 總之如果財力夠開「理財帳戶」的話,最佳作法如下:
  • Adsense 電匯手續費的成本大致為 USD 12(中轉費用)
  • USD 12 / 0.6% = USD 2000
  • 「理財帳戶」建議廣告費累積到 USD 2000 後再領取,費用成本為 0.6%
2. 一般銀行
  • 選擇手續費為 NT. 200 的多數銀行開設外幣帳戶
  • USD 18.66 / 0.6% = USD 3110
  • 「一般銀行」建議廣告費累積到約 USD 3000 後再領取,總費用成本可接近 0.6%
3. 急需台幣也許不是每個站長都有能耐累積達 USD 2000~3000 才領取,不但 Adsense 廣告費少,而且還希望趕快換成台幣使用。在這樣的情況下,該怎麼做比較好呢?
  • 首先既然累積的廣告費不多,那麼建議匯率 30 以下就先別領了,留著放美金定存就好
  • 匯率 30 以上時,因為匯率比較好,就當作已經賺到 10% 的匯差
  • 容忍 10% 的手續費:USD 18.66 / 10% = USD 186.6
  • 「急需台幣」且匯率 30 以上時,建議廣告費累積到接近 USD 200 就可以換成台幣變現
以目前 2022 年底的美元台幣匯率(已經突破 32),Adsense 廣告費只要有將近 USD 200,變現都是不吃虧的(當然,還是累積越多越划算)。

五、額外資訊

1. 玉山銀行這篇「Google adsense電匯手續費|實際收款證明」,作者提到玉山銀行「若手動線上結匯,手續費為 NT. 100」。 這是令人震驚的資訊,因為網路上其他任何文章都未提到此事。查到這個玉山官網頁面「外幣匯入匯款」,感覺這是限定期間的優惠(2022/07/01~2022/12/31),期限到了之後也不知道是否會延長。 提供此資訊僅供參考,長期來看還是參照前面的「四、最佳作法」進行就好。 2. 何時免收中轉費用這篇「Google AdSense領款簡單教學」對於中轉費用提供了自身經驗,以及不少實務上的說明,摘要一下重點:
  • Adsense 後台付款設定,關於「電匯」的部分,一定要填中轉銀行帳號
  • Google 匯款銀行,如果走「指定的中轉銀行」(代表跟收款銀行平常業務有往來),就能省下中轉費用
  • 但不一定每次 Google 匯款,都會經由指定的中轉銀行,此時就會產生中轉費用
  • 所以有填中轉銀行帳號,就有機會免中轉手續費,而沒填一定沒機會
  • 作者台灣收款使用玉山銀行,有時沒有中轉手續費,但最多的一次被收了超過 USD 30,浮動範圍非常可怕
根據以上的經驗,Adsense 領款金額還是累積越多越好。 3. 免收中轉費用案例在網路上找看看是否 Adsense 收款有免收中轉費用的案例,但不容易找到,除了上面那篇案例以外,另外還有這篇(只收了 NT. 200 手續費): 為了實際瞭解中轉費用,我在累積金額不多的情況下,也實測了京城銀行看看會收多少: Adsense 電匯如何避免昂貴手續費+中轉費用﹍最佳作法解析Adsense 電匯如何避免昂貴手續費+中轉費用﹍最佳作法解析
  • 10/17 Adsense 付款金額為 USD 424.3
  • 10/19 京城銀行入帳 USD 417.41
  • 根據當日美元台幣匯率,差額 USD 6.89 就是京城的電匯手續費 NT. 220
  • 代表此筆入帳並沒有被收取中轉銀行費用!
因為無法確定之後京城銀行收款是否也能免中轉費用,基本上成本計算還是依照「四、最佳作法」判斷為佳。而如果能長期免中轉費用的話,那麼 USD 6.89 / 0.6% = USD 1148,代表累積 USD 1000 左右就能取款了。

六、總結

1. 重點摘要本篇所有重點摘要如下:
  • 「西聯匯款」手續費比例約為 0.6%,Adsense 電匯所有手續費加總最好能接近此比例,才不致吃虧
  • Adsense 廣告費收款,務必開設「外幣帳戶」,收取美元 USD,觀察匯率伺機換成台幣
  • 開設「理財帳戶」可免電匯手續費 → 建議廣告費累積到 USD 2000 後再領取,費用成本約 0.6%
  • 一般銀行帳戶需負擔成本「電匯手續費」+「中轉費用」→ 建議廣告費累積到 USD 3000 後再領取,費用成本約 0.6%
  • 「急需台幣」且匯率 30 以上時,建議廣告費累積到接近 USD 200 就可以換成台幣變現
2. 補充資訊補充一些相關資訊:
  • Adsense 收款改電匯之操作:京城銀行ADSENSE西聯匯款改電匯完整步驟
  • Adsense 收款完全免手續費Adsense支票存入嘉信帳戶免手續費
    • 這篇文章的標題看起來很划算,但「嘉信帳戶」是國外券商開立,用途為投資國外股市
    • 將來想換成台幣時,若是匯美金回台灣的銀行,手續費加起來更高,並不划算
    • 這篇「Adsense 收款含嘉信理財支票入金心得」提到:「這家有一張可以全世界提領證券戶的錢還免手續的金融卡」→ 因為我沒有辦「嘉信帳戶」,是否真的有辦法隨時提領錢、將美金換成台幣,或是需要滿足哪些硬性需求才能享有此優惠,就留給讀者研究了
    • 若是使用「支票」收款 +「嘉信帳戶」,雖然真的有可能零成本,但個人覺得除了時間慢,手續也麻煩,我想還是會選擇簡便省事的「電匯」,以及本文的處理方式,可以節省時間成本及精力。
更多 Adsense 相關技巧:

排程抓證交所台股交易資料+自動寄信通知

$
0
0
排程抓證交所台股交易資料+自動寄信通知今年 2022 年初台股從高點一萬八崩盤,時至今日跌了近一年,差不多可以觀察買點。 每天打開看盤軟體、股市網頁,主動梳理資訊需花費大量時間精力。如果需要的資訊、數字,使用程式自動寄 email 通知,被動接收精準資訊花費的時間很少,有需要時再進入資料庫查閱所有紀錄過的資訊。 本篇說明如何使用排程,從證交所官方 API 抓資料,儲存於 Google 試算表資料庫,並每日自動寄通知給自己。 (圖片出處: pixabay.com)

一、證交所 API

1. 新版 API這是證交所最新版本 API 網址: 排程抓證交所台股交易資料+自動寄信通知例如想要取得「每日收盤行情-大盤統計資訊」時,如上圖,展開此項 API 內容後,點擊「Try it out」→「Execute」,可看到紅線處的 API 呼叫網址為: https://openapi.twse.com.tw/v1/exchangeReport/MI_INDEX排程抓證交所台股交易資料+自動寄信通知呼叫 API 返回的資料格式如上圖,在「Responses」區塊點擊「Model」可看到中文說明,以下為部分 json 格式的資料範例: [ {"指數":"發行量加權股價指數","收盤指數":"12946","漲跌":"-","漲跌點數":"30.66","漲跌百分比":"-0.24","特殊處理註記":""}, {"指數":"臺灣50指數","收盤指數":"9739","漲跌":"+","漲跌點數":"8.99","漲跌百分比":"0.09","特殊處理註記":""}, {"指數":"臺灣中型100指數","收盤指數":"11551","漲跌":"-","漲跌點數":"56.17","漲跌百分比":"-0.48","特殊處理註記":""}, {"指數":"未含金融指數","收盤指數":"11089","漲跌":"-","漲跌點數":"28.06","漲跌百分比":"-0.25","特殊處理註記":""}, {"指數":"未含電子指數","收盤指數":"15597","漲跌":"-","漲跌點數":"97.67","漲跌百分比":"-0.62","特殊處理註記":""}, ]2. 舊版 API以前舊的 API 有兩種呼叫網址:
  • https://mis.twse.com.tw/stock/api/
  • https://www.twse.com.tw/exchangeReport/
使用舊版 API 的缺點在於:
  • 沒有官方說明書
  • 有可能某個參數忽然不能用了
  • 有可能無預警失效
也因為沒有說明書,所以只能仰賴網路現存的網友心得分享,可參考這兩篇: 3. 最佳 API證交所最新版 API 其實不太好用,不給設定參數,強制撈回一大串資料,增加整理資料的心力。 後來發現這篇「股市API」整理的內容中,這個版本的 API「www.twse.com.tw」非常好用,根據其提供的範例「上市個股月成交資訊」,說明如下:
  • 新版 API 呼叫網址為 https://openapi.twse.com.tw/v1/exchangeReport/FMSRFK_ALL → 會撈回所有股票
  • 舊版 API 可這麼使用 https://www.twse.com.tw/exchangeReport/FMSRFK?date=20220901&stockNo=2330
    • 可加入日期參數、股票代號
    • 此網址可撈到台積電今年(2022)1~9月的月成交資訊
那麼只要 www.twse.com.tw 這個 api 還能運作,將會是爬台股資訊的最佳工具,根據以上範例就能排除大量無用資料,撈到想要的數據。

二、資料庫與寄信

使用 API 抓回資料後,需要儲存在資料庫,本篇會以「Google 試算表作為資料庫」,需使用 Google Apps Script(以下簡稱GAS)讀寫資料庫,可參考「用 Google Apps Script 操作 Google 試算表」系列文章。 使用排程抓資料的技巧、流程,可參考之前寫的「使用 Node.js 爬蟲定期抓網頁資料,結合 Google 試算表作為資料庫」,如果習慣使用 NodeJs 可參考該篇。 本篇提供的範例程式碼以 GAS 環境為主,資料存入 Google試算表後,再整理成需要的資訊格式。利用 GAS 操作 Gmail API,寄出郵件給自己,就完成了整個流程。

三、抓大盤資料範例

1. Google 試算表排程抓證交所台股交易資料+自動寄信通知首先從「Google 雲端硬碟」開個新的 Google 試算表,設定好工作表名稱、欄位名稱。 接著從選單「擴充功能」→「Apps Script」,可開始寫程式碼。 2. 程式碼範例排程抓證交所台股交易資料+自動寄信通知在 GAS 頁面的選單「編輯器」可撰寫程式,以下為「抓大盤資料」的範例: var ss = SpreadsheetApp.getActiveSpreadsheet(), index_sheet = ss.getSheetByName("大盤"), // 填入自己設定的工作表名稱 email = "xxxxx@gmail.com"; // 填入要收到通知的 email // 取得大盤成交資訊 function getIndexData() { var apiUrl = "https://www.twse.com.tw/exchangeReport/FMTQIK", // api 呼叫網址 dailyRow = [], today = new Date(), todayFormate = Utilities.formatDate(today, "GMT+8", "yyyyMMdd"), // 格式化今天日期 twYear = today.getFullYear() - 1911, // 中華民國年份 todayTwFormat = Utilities.formatDate(today, "GMT+8", twYear + "/MM/dd"), // 中華民國日期格式 todayEmailFormat = Utilities.formatDate(today, "GMT+8", "yyyy-MM-dd"), // 郵件日期格式化 fetchUrl, response, json, i, data, closeIndex, variation, volume; // 組合 api 參數, 加上今天日期 fetchUrl = apiUrl + "?date=" + todayFormate; // 呼叫 api 取得大盤成交資訊 response = UrlFetchApp.fetch(fetchUrl).getContentText(); json = JSON.parse(response); data = json.data; for (i in data) { // 只取今日資料 if (data[i][0] == todayTwFormat) { closeIndex = removeComma(data[i][4]); // 收盤指數 數字格式化 variation = removeComma(data[i][5]); // 漲跌點數 數字格式化 volume = removeComma(data[i][2]); // 成交量 數字格式化 // 整理成交量格式為(億) volume = parseInt(volume / 100000000); dailyRow = [todayEmailFormat, closeIndex, variation, volume]; } } // 如果有今日資料 if (dailyRow.length) { // 工作表增加一列資料 index_sheet.appendRow(dailyRow); // 寄信通知 sendMailIndex(dailyRow); } // 數字格式化 function removeComma(number) { return number.replace(/,/g, ""); } } // 寄信通知 function sendMailIndex(dailyRow) { var subject = "每日大盤成交資訊" + " " + dailyRow[0], // 信件標題 htmlBody = ""; // 組合信件內容 htmlBody += "日期:" + dailyRow[0] + "<br/>"; htmlBody += "收盤指數:" + dailyRow[1] + "<br/>"; htmlBody += "漲跌點數:" + dailyRow[2] + "<br/>"; htmlBody += "成交量(億):" + dailyRow[3] + "<br/>"; MailApp.sendEmail({ to: email, subject: subject, htmlBody: htmlBody }); }
  • 可參考註解文字修改參數,填入自己的 email
  • 可試著執行主程式 getIndexData()
  • 第一次執行 GAS 會要求授權,按畫面指示提供權限即可
3. 郵件通知排程抓證交所台股交易資料+自動寄信通知成功的話,會立刻收到郵件通知,效果如上圖。

四、抓個股資料範例

1. 範例程式碼以下為 GAS「抓個股資料」(台積電 2330)的範例: var ss = SpreadsheetApp.getActiveSpreadsheet(), stockNo = "2330", // 填入個股代號 index_sheet = ss.getSheetByName("2330"), // 填入自己設定的工作表名稱 email = "xxxxx@gmail.com"; // 填入要收到通知的 email // 取得個股成交資訊 function getStockData() { var apiUrl = "https://www.twse.com.tw/exchangeReport/STOCK_DAY", // api 呼叫網址 dailyRow = [], today = new Date(), todayFormate = Utilities.formatDate(today, "GMT+8", "yyyyMMdd"), // 格式化今天日期 twYear = today.getFullYear() - 1911, // 中華民國年份 todayTwFormat = Utilities.formatDate(today, "GMT+8", twYear + "/MM/dd"), // 中華民國日期格式 todayEmailFormat = Utilities.formatDate(today, "GMT+8", "yyyy-MM-dd"), // 郵件日期格式化 fetchUrl, response, json, i, data, closePrice, variation, volume; // 組合 api 參數, 加上今天日期、股票代號 fetchUrl = apiUrl + "?date=" + todayFormate + "&stockNo=" + stockNo; // 呼叫 api 取得大盤成交資訊 response = UrlFetchApp.fetch(fetchUrl).getContentText(); json = JSON.parse(response); data = json.data; for (i in data) { // 只取今日資料 if (data[i][0] == todayTwFormat) { closePrice = removeComma(data[i][6]); // 收盤指數 數字格式化 variation = removeComma(data[i][7]); // 漲跌點數 數字格式化 volume = removeComma(data[i][2]); // 成交量 數字格式化 // 整理成交量格式為(億) volume = parseInt(volume / 100000000); dailyRow = [todayEmailFormat, closePrice, variation, volume]; } } // 如果有今日資料 if (dailyRow.length) { // 工作表增加一列資料 index_sheet.appendRow(dailyRow); // 寄信通知 sendMailStock(dailyRow); } // 數字格式化 function removeComma(number) { return number.replace(/,/g, ""); } } // 寄信通知 function sendMailStock(dailyRow) { var subject = "每日 " + stockNo + " 成交資訊" + " " + dailyRow[0], // 信件標題 htmlBody = ""; // 組合信件內容 htmlBody += "日期:" + dailyRow[0] + "<br/>"; htmlBody += "收盤價:" + dailyRow[1] + "<br/>"; htmlBody += "漲跌價差:" + dailyRow[2] + "<br/>"; htmlBody += "成交金額(億):" + dailyRow[3] + "<br/>"; MailApp.sendEmail({ to: email, subject: subject, htmlBody: htmlBody }); }一樣參考註解文字修改參數即可。 2. 查詢資料庫排程抓證交所台股交易資料+自動寄信通知每天收到郵件通知可瞭解當日行情,而進入試算表頁面,即可查詢歷史資料。

五、設定排程

最後一個步驟為設定排程,讓 GAS 能每日定時執行程式。 排程抓證交所台股交易資料+自動寄信通知進入 GAS 頁面,按照上圖順序設定:
  • A:點擊左側「觸發條件」圖示
  • B:按右下角「新增觸發條件」按鈕
  • C:選擇觸發的函數名稱
  • D:選擇「時間驅動」
  • E:選擇「日計時器」
  • F:選擇觸發時間,選擇 13:30 收盤以後的時間比較恰當
  • 最後按「儲存」即可
設定完成後,每日觸發時間一到,GAS 會立即執行程式,寄發郵件通知給自己。
更多 Google Apps Script 相關文章:

讓 Chrome 能自訂快速鍵(Shortkeys)﹍執行書籤、外掛、程式碼、瀏覽器操作

$
0
0
讓 Chrome 能自訂快速鍵(Shortkeys )﹍執行書籤、外掛、程式碼、瀏覽器操作過去作了不少書籤工具,例如「看 YouTube 影片不被廣告中斷」、「調整 OTT 平台字幕大小」,都是個人使用頻率高的工具。相對於滑鼠點擊書籤的操作,如果能夠按快速鍵(熱鍵)就執行書籤工具,既方便又節省操作時間。 當書籤可以自訂快速鍵後,每天會開啟多次的網頁例如「線上看電視」、PTT 等,只要熱鍵就能開啟真是太方便了。 本篇介紹的 Chrome 套件「Shortkeys 」非常強大,不但能自訂快速鍵執行書籤,幾乎想得到的瀏覽器操作行為也都能執行,甚至會寫 Javascript 的話還能一鍵跑一段程式。

一、Shortkeys 介紹

1. 官網以下為 Shortkeys 幾個重要的相關官網網址: 以上說明文件全都是英文,以下用中文提供一個簡單範例。 2. 操作說明讓 Chrome 能自訂快速鍵(Shortkeys )﹍執行書籤、外掛、程式碼、瀏覽器操作將 Shortkeys 安裝到 Chrome 後,開啟此套件的選項設定。如上圖,點擊 Shortkeys 套件圖示 → 選項 讓 Chrome 能自訂快速鍵(Shortkeys )﹍執行書籤、外掛、程式碼、瀏覽器操作依照上圖 A~E 順序新增新的快速鍵:
  • A:點擊 Add shortcut
  • B:輸入熱鍵組合,例如 ctrl+shift+s這樣的形式
  • C:Label 可自訂此熱鍵的名稱
  • D:Behavior 選擇要執行的功能,例如上圖選擇的是 Capture current viewport screenshot,代表按下快速鍵後,會對該頁面進行截圖
  • E:按 Save shortcuts 儲存即可

二、書籤設定

第一次設定書籤時忙了半天均無法生效,原來是這個套件的介面設計不夠直覺,因此有必要特別說明一下,以下提供 A、B 兩個範例。 讓 Chrome 能自訂快速鍵(Shortkeys )﹍執行書籤、外掛、程式碼、瀏覽器操作A. 執行書籤工具 首先點擊「A」下方的倒三角圖示,可展開額外設定區塊:
  • 如上圖設定好 Shortcut 快速鍵、Label 名稱
  • 執行書籤工具必須作用在同一個頁面,因此 Behavior 必須選擇「Open bookmark/bookmarklet in current tab」
  • 下方設定區塊的 Bookmark 選擇要執行的「書籤」
B. 開啟書籤網址
  • 點擊「B」下方的倒三角圖示,可展開額外設定區塊
  • 書籤網址如果想要另開視窗的話,Behavior 必須選擇「Open bookmark/bookmarklet in new tab」

三、進階說明

1. 功能整理這個套件能執行的功能非常多,設定選項下拉選單 Behavior 有這些選擇:
  • Scrolling:有各種頁面捲動的方式,例如捲到上方、下方,按 Page Down、Up 等等
  • Location:頁面切換相關功能,例如上一頁、下一頁,重整頁面、複製網址、搜尋選擇的字串等等
  • Bookmarks:書籤相關功能,可自訂書籤要開啟在哪種頁面
  • Tabs:頁籤切換功能,例如開啟、關閉、移動那個頁籤,將某個頁籤靜音等等
  • Windows:視窗相關功能,例如開啟何種視窗、全螢幕切換等等
  • Zooming:放大縮小功能
  • Miscellaneous:雜項功能,例如執行程式碼、檢視網頁原始碼、列印、截圖等等
2. 快速鍵組合如果有些組合鍵試不出來的話,不妨看看官網說明書「How To Use Shortkeys」,以下整理一些重點:
  • 可設定連續按鍵,例如熱鍵「w f」代表依序按 wf會觸發
  • 「Window」鍵在 PC 可設定字串「command」,在 Mac 可設定符號「⌘」
  • 這些是比較特殊的按鍵字串:「backspace」、「tab」、「enter」、「esc」、「space」、「up」、「home」、「pageup」...其餘可參考說明書
3. 補充說明讓 Chrome 能自訂快速鍵(Shortkeys )﹍執行書籤、外掛、程式碼、瀏覽器操作借用前面的畫面說明:
  • 如果希望在 input 輸入框也能執行熱鍵,在套件選項畫面,展開額外設定區塊後,開啟「Activation settings」
  • 如果希望熱鍵在特定網址才執行,在套件選項畫面,展開額外設定區塊後,點擊「Activation settings」下方的下拉選單進行設定
4. 執行 Javascript讓 Chrome 能自訂快速鍵(Shortkeys )﹍執行書籤、外掛、程式碼、瀏覽器操作如果會寫程式的話,上圖為範例,Behavior 選擇「Run Javascript」,展開額外設定區塊後,下方區塊 Javascript code 填入程式碼即可。

四、Chrome 套件自訂熱鍵

Chrome 套件之中,我會常常手動執行的有「倒數計時」這樣的小工具。如果想要用快速鍵啟動 Chrome 套件的話,可開啟以下頁面進行設定: 讓 Chrome 能自訂快速鍵(Shortkeys )﹍執行書籤、外掛、程式碼、瀏覽器操作如上圖,在「啟用擴充功能」處,按右邊的編輯圖示,即可設定快速鍵,將來我只要按 Ctrl + T就能執行倒數計時,不必再操作滑鼠囉。
更多 Chrome 相關套件:

輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)

$
0
0
輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)為了避免誤解,首先對標題「駭客」一詞進行說明,這裡指的是「hacker」一詞,可參考「維基關於駭客的定義」:
  • 駭客(英語:Hacker)是指對設計、程式設計和電腦科學方面具高度理解的人
  • 在業餘電腦DIY方面,「駭客」是指研究如何修改電腦相關產品的業餘愛好者。
  • 中文音譯「駭」字總使人對駭客有所誤解,真實的駭客主要是指技術高超的程式設計師,而「劊客」(Cracker)才是專指對電腦系統及網路進行惡意破壞的人。
本篇的意思當然是指「網站 hacker」,針對某些網頁進行修改、微調、優化,而非進行破壞、竊取機密資訊等犯罪行為的「網站 cracker」。 最近在 YouTube 網站進行操作時,長期下來開始覺得某些流程過於累贅,例如我想搜尋特定關鍵字的這些影片:
  • 播放清單
  • 大於20分鐘影片
  • 直播中
  • 最新影片
總是得先跑完一次搜尋結果,然後點開「篩選器」,找到以上選項再點擊,至少得花費三個動作才能完成。而換另一個關鍵字搜尋時,又需重複以上同樣的流程,長期下來覺得浪費時間。 於是想著手對 YouTube 網頁進行客製化修改,將常用的篩選項目在搜尋前,便可在網頁上顯示出來供選擇。為了達到這個需求,找到一個不錯的 Chrome 套件,可在任意網頁植入 Javascript/CSS 程式碼,如此一來自行改造各大知名網站都成了非常簡單的事。 順外一提,本篇的內容適合前端工程師、熟悉 JS/CSS 的使用者閱讀,不適合不懂程式碼的新手操作。

一、網頁植入程式碼的作法比較

過去我針對「瀏覽器及網頁植入程式碼」做過不少工具,大部分都是書籤工具,當需要執行特定功能時,點擊書籤可立即執行程式並看到效果:
  1. 破解網頁「鎖右鍵+防複製」
  2. Emoji 表情符號輸入小幫手
  3. 看 YouTube 影片不被廣告中斷
  4. 調整愛奇藝 WeTV 芒果tv Bilibili 字幕大小
1. 適合書籤的型態以上的工具,第 2、第 3 都是有需要時才執行,並非進入特定網站後一定要執行。如果強制進入網站後總是執行,反而成效不佳,所以維持書籤的形式就好。 2. 適合進入網站立即執行的型態第一個工具「破解網頁鎖右鍵+防複製」,非常適合進入所有網站後立即執行,剛好本篇介紹的 Chrome 套件允許設定「在所有網站都執行」,所以可以從原本的書籤改用 Chrome 套件來執行。 最後一個「調整字幕大小」的功能,也是進入特定網站後便可執行,如果改用本篇的 Chrome 外掛直接將程式碼植入網站(愛奇藝 WeTV 芒果tv Bilibili),就可省去點擊書籤的動作與時間,會方便許多。 本篇客製化 YouTube 篩選器的需求,只要一進入 YouTube 網站就可執行,點擊書籤反而多了一個累贅的動作,所以還是交給 Chrome 套件自動為 YouTube 網站植入 JS/CSS 會比較方便。

二、「User JavaScript and CSS」介紹

1. 安裝 Chrome 套件輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)安裝完畢後:
  • A:點擊 Chrome 右上角此套件圖示
  • B:點擊齒輪圖示,即可進入設定畫面
輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)點擊「Add new site」即可進行操作,之後可接續「三、操作流程」。 上圖可看到我完成了兩個工具「右鍵」與「YouTube」,這裡可選擇是否「啟用/關閉」該工具。 2. 功能介紹輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)選單切換到「Libraries」可選擇 JS 函式庫,上圖可看到預設載入了 jQuery 3(不需要也可移除),如果還需要引用其他函式庫,填入名稱、JS 外連網址,再按「Add new」即可。 輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)選單切換到「Documentation」可看到簡單的說明書內容:
  • 網址除了可填單一網站,還能使萬用字元「星號」(*),彈性非常大
  • 說明了 JS 會等 DOM 載入後才執行,確保能讀取到頁面上的內容

三、操作流程

1. 操作說明輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)接續前面點擊「Add new site」後的操作畫面:
  • A:為你的程式命名
  • B:填入程式要執行的網址,如前面提到的,可使用萬用字元
  • C:在這個區塊填入 JS 程式碼。
    • 必須稱讚一下這個編輯器,可以看得出是資深工程師的傑作
    • 輸入 JS 單字會有提示,有自動完成功能,避免輸入錯誤
    • 上圖也可看到,程式都可以收合,操作很舒服
    • 全選程式碼後還能用熱鍵 ctrl+[ctrl+]進行縮排
  • D:在這個區塊填入 CSS 碼,不需要 CSS 就不用填入
  • E:完畢後一定要點這裡的選項按鈕,勾選需要的項目,否則程式是無法執行的。
  • F:最後按「Save」大功告成
2. 執行效果輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)來看看我寫的 YouTube 工具效果吧,如上圖,進入 YouTube 後就會自動出現右上角紅框處的選項按鈕。 輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)直接選擇「清單」,搜尋就只會出現對應的播放清單,要搜尋「直播」也很方便。

四、應用方式

這個 chrome 外掛可以做的事太多了,就看想像力有多少了。另外提供幾個我的應用方式:
  • 前面提到的「破解網頁鎖右鍵+防複製」,只要作用網址填入 "*.*",就能在所有網站執行
  • 前面提到的「調整字幕大小」功能,由於必須在多個網站執行(愛奇藝 WeTV 芒果tv Bilibili),那麼作用網址需要填入多個網站,並用小寫逗號 "," 隔開即可
  • 如果需要常常填寫某個頁面的表單(搶票?),例如姓名、電話、住址...這類繁瑣的文字,可以用這個工具寫 JS,自動填入例行性的內容,將來填表單就輕鬆了,一切自動化完成!
更多 Chrome 相關套件:

快速掌握 2023 新版 Google 登入 API﹍完整教學及實作範例

$
0
0
快速掌握 2023 新版 Google 登入 API﹍完整教學及實作範例之前寫的舊版「Google API 處理登入登出功能」,經「Google 官方公告」將於 2023/3/31 終止,如果你的網站使用了「Google API 舊版登入功能」程式碼,到了三月底就不能再運作。 Google 官方提供了將舊版程式碼移轉到新版的操作說明,本篇也會提供各種情況下的實作範例程式碼供參考。 (圖片出處: pexels.com)

一、準備動作

操作 API 之前需要先建立 Google API 專案,如果還沒建立過的話,請完成以下流程:

二、安裝 Google 預設登入按鈕

1. 說明文件以下頁面為需要瞭解的官方技術文件:
  • 從 Google 登入遷移:Google 捨棄了原有的 Sign-In API,整合到新版的 Google Identity API。如果曾使用了舊版程式碼,這個頁面列出了新舊程式碼的差異,可以根據說明來調整舊程式碼,或是乾脆全部使用新版程式碼。
  • 使用 Google JavaScript API 登入:說明如何使用 JS 操作 API,以及取得 Google 使用者帳號資料後,JWT 的編碼格式為何
由於取得的資料會經過 JWT 編碼(JSON Web Token),若不熟悉此格式的話也可參考以下網頁: 2. 安裝程式碼及範例<script src="https://accounts.google.com/gsi/client" async defer></script> <div id="g_id_onload" data-client_id="5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com" data-callback="onSignIn1"></div> <div class="g_id_signin" data-type="standard"></div> 目前狀態: <span id="GOOGLE_STATUS_1"></span> <script> // 登入之後 function onSignIn1(response) { var credential = response.credential, profile = JSON.parse(decodeURIComponent(escape(window.atob(credential.split(".")[1])))), // 對 JWT 進行解碼 target = document.getElementById("GOOGLE_STATUS_1"), html = ""; html += "ID: " + profile.sub + "<br/>"; html += "會員暱稱: " + profile.name + "<br/>"; html += "會員頭像:" + profile.picture + "<br/>"; html += "會員 email:" + profile.email + "<br/>"; target.innerHTML = html; } </script>
  • 紅色字串請置換為前面「處理 OAuth 憑證」流程取得的「用戶端 ID」
  • 程式碼請放在前面「處理 OAuth 憑證」流程設定的網站
以下是「官方預設 Google 登入按鈕」的範例效果,可進行操作並注意對應狀態的文字:
目前狀態: 3. 程式碼產生器如果不喜歡 Google 預設登入按鈕的效果,官方另外提供了「程式碼產生器」頁面: 快速掌握 2023 新版 Google 登入 API﹍完整教學及實作範例如上圖,可以設定外觀顏色、形狀、文字、大小、寬度等等。 以下是範例程式碼: <script src="https://accounts.google.com/gsi/client" async defer></script> <div id="g_id_onload" data-client_id="5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com" data-context="signin" data-ux_mode="popup" data-callback="onSignIn2" data-auto_prompt="false"></div> <div class="g_id_signin" data-type="standard" data-shape="pill" data-theme="filled_blue" data-text="signin" data-size="large" data-logo_alignment="left"></div> 目前狀態: <span id="GOOGLE_STATUS_2"></span> <script> // 登入之後 function onSignIn2(response) { var credential = response.credential, profile = JSON.parse(decodeURIComponent(escape(window.atob(credential.split(".")[1])))), target = document.getElementById("GOOGLE_STATUS_2"), html = ""; html += "ID: " + profile.sub + "<br/>"; html += "會員暱稱: " + profile.name + "<br/>"; html += "會員頭像:" + profile.picture + "<br/>"; html += "會員 email:" + profile.email + "<br/>"; target.innerHTML = html; } </script>修改參數的方式請參考前面說明,由於 Google 新版登入 API 使用官方按鈕時,HTML 元素強制使用 ID 名稱 "g_id_onload",因此一個頁面只能出現一個按鈕,此處無法再提供「程式碼產生器」的範例效果,請自行複製程式碼在自己的頁面看效果。

三、自訂登入按鈕樣式

1. 初步說明 Google 官方提供的按鈕有一定的格式與大小,雖能調整但彈性不大。如不使用官方按鈕,想要自製「登入」、「登出」的樣式,那麼就得自行處理以下:
  • 分別製作兩個按鈕
  • 分別處理兩個按鈕的點擊
需要提醒的是,此次新版 Google Identity API 文件不但沒有提供客製按鈕的操作範例,同時 API 操作也不支援客製按鈕,所以要做到完全「客製按鈕」這件事有難度。 對此事有興趣的開發人員有必要詳細研究前面提到的文件「使用 Google JavaScript API 登入」。 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" /> <!--登入、登出按鈕--> <button id="GOOGLE_login" class="btn btn-large btn-primary">GOOGLE 登入</button> <button id="GOOGLE_logout" class="btn btn-large btn-warning">GOOGLE 登出</button> 目前狀態: <span id="GOOGLE_STATUS_3"></span> <script src="https://accounts.google.com/gsi/client" async defer></script> <script> function startSignIn() { google.accounts.id.initialize({ client_id: "5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com", callback: onSignIn3 }); google.accounts.id.prompt((notification) => { // 如果無法彈出登入視窗 紀錄錯誤訊息 if (notification.isNotDisplayed() || notification.isSkippedMoment()) { console.log(notification); } }); } // 處理登入取得的資訊 function onSignIn3(response) { var credential = response.credential, profile = JSON.parse(decodeURIComponent(escape(window.atob(credential.split(".")[1])))), $target = $("#GOOGLE_STATUS_3"), html = ""; html += "ID: " + profile.sub + "<br/>"; html += "會員暱稱: " + profile.name + "<br/>"; html += "會員頭像:" + profile.picture + "<br/>"; html += "會員 email:" + profile.email + "<br/>"; $target.html(html); } // 點擊登入 $("#GOOGLE_login").click(function() { // 進行登入程序 startSignIn(); }); // 點擊登出 $("#GOOGLE_logout").click(function() { google.accounts.id.disableAutoSelect(); // 登出後的動作 $("#GOOGLE_STATUS_3").html("已登出"); }); </script>主要修改地方為紅字的「用戶端 ID」,也可修改點擊按鈕後要處理的 JS,其餘注意事項請參考前面範例。 下面是「自製登入登出按鈕」的範例效果,可進行操作並注意對應狀態的文字: 目前狀態: 操作「Google JavaScript API 登入」可能會遇到幾個問題: 3. One Tap 使用者體驗請參考官網說明「瞭解 One Tap 使用者體驗」,新版 Google Identity API 讓使用者可以暫時停用「Google One 登入」功能,如果彈出登入視窗時,使用者曾經按右上角的「X」圖示進行關閉,則將會有一段時間無法開啟登入功能。所以開發者在測試登入按鈕時,有可能會發生怎麼點都無法執行程式的狀況,我也是研究很久才發現此事,要等過了幾小時冷卻後才能重新執行。至於要等待多久,請見該頁面官方提供的表格整理,從 2 小時到數週都有可能。這個功能雖可提升使用者體驗,但對開發者就不太友善了,所以程式碼裡面最好加入「偵測無法彈出登入視窗」的功能,請參考官方文件,或是上面提供的範例程式碼可找到相關的註解說明。 4. oAuth 2.0請參照官方文件「遷移至 Google Identity 服務」,如果你的舊版程式碼曾經使用 gapi.auth2 模組,這模組將在 2023/3/31 之後失效,必須將程式碼改成新版模組 google.accounts.oauth2: 操作新的 API 時,必須填入 scope 範圍,如不清楚要使用什麼 scope,可參考 Google 所有 scope 一覽: 如果只是要處理登入功能,取得使用者 email、profile 等基本資料,只要加入以下 scope 即可:
  • https://www.googleapis.com/auth/userinfo.email
  • https://www.googleapis.com/auth/userinfo.profile
需要範例程式碼的話,可參考這篇「2023 使用 Google 新版 API 取得使用者個人資訊」。
更多 Google 相關文章:

2023 使用 Google 新版 API 取得使用者個人資訊﹍實作範例

$
0
0
之前寫的「使用 Google People API 取得使用者生日、性別等多種個人資訊」,因為「Google 更新登入 API 及相關模組」,官方公告在 2023/3/31 舊版程式碼會失效,連帶也使能夠取得 Google 帳號個人資訊的 People API 必須更新程式碼。 由於變動相當大,例如原本使用的 gapi.auth2 模組將被 google.accounts.oauth2 模組取代,載入 API 的方式也差別很大,詳情可參考官網文件「網站適用的 Google 第三方 JavaScript 程式庫」。直接更新上一篇原文可能會造成相當大的混亂,乾脆重新寫一篇。因此關於 Google People API 的介紹、測試方法請看上一篇,本篇直接提供新版操作流程及範例程式碼。 (圖片出處: pixabay.com)

一、準備動作

操作 API 之前需要先建立 Google API 專案,如果還沒建立過的話,請完成以下流程:

二、程式碼範例

以下使用「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" /> <!--登入、登出按鈕--> <button id="google_login" class="btn btn-large btn-primary">GOOGLE 登入</button> <button id="google_logout" class="btn btn-large btn-warning">GOOGLE 登出</button> <p /> <p>目前狀態:</p> <div id="persoanl_info">尚未授權</div> <script> var client_id = "5432xxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com", apiKey = "AIzaxxxxxxxxxxxxxxxxxxxxxx", scope = "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/user.gender.read https://www.googleapis.com/auth/user.birthday.read", personFields = "names,emailAddresses,photos,genders,birthdays", discovery_doc = "https://www.googleapis.com/discovery/v1/apis/people/v1/rest", resourceName = "people/me", $persoanl_info = $("#persoanl_info"), tokenClient; loadApi(); // 載入 google api function loadApi() { // 載入 gapi $.getScript("https://apis.google.com/js/api.js", function() { gapi.load("client", function() { gapi.client.init({ apiKey: apiKey, discoveryDocs: [discovery_doc], }); }); }); // 載入 gsi $.getScript("https://accounts.google.com/gsi/client", function() { tokenClient = google.accounts.oauth2.initTokenClient({ client_id: client_id, scope: scope, callback: signIn_callback, error_callback: error_callback }); }); // 登入後 callback function signIn_callback(res) { // 登入失敗時 if (res.error !== undefined) { console.log(res.error); $persoanl_info.html(res.error); } // 登入成功後 if (res && res.access_token) { // 顯示帳號資訊 listAccountInfo(); } } // 捕捉非 OAuth 錯誤 或是在傳回 OAuth 回應前遭到關閉 function error_callback(res) { console.log(res); $persoanl_info.html(res.message); } // 顯示帳號資訊 function listAccountInfo() { // 呼叫 people api 取得資料 gapi.client.people.people.get({ "resourceName": resourceName, "personFields": personFields, }).then(function(res) { // 顯示資料 var result = res.result, errorMessage = "請重新登入, 並勾選生日及性別!", html = "", id, name, imgUrl, email, gender, birthday, birthdayStr; // 沒有勾選生日、性別時 if (!result.genders || !result.birthdays) { alert(errorMessage); $persoanl_info.html(errorMessage); return; } id = result.resourceName.split("/")[1]; name = result.names[0].displayName; imgUrl = result.photos[0].url; email = result.emailAddresses[0].value; gender = result.genders[0].formattedValue; birthday = result.birthdays[1].date; birthdayStr = birthday.year + "-" + birthday.month + "-" + birthday.day; html += "ID: " + id + "<br/>"; html += "暱稱: " + name + "<br/>"; html += "頭像:<img style='width: 40 px;' src='" + imgUrl + "'/><br/>"; html += "email:" + email + "<br/>"; html += "性別:" + gender + "<br/>"; html += "生日:" + birthdayStr + "<br/>"; $persoanl_info.html(html); }); } } // 點擊登入按鈕 $("#google_login").click(function() { // 進動畫 $persoanl_info.html("<img src='https://lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif' /> <span>請稍後...</span>"); if (gapi.client.getToken() === null) { // 未登入則彈出登入視窗 tokenClient.requestAccessToken(); } else { // 已登入則不彈出視窗 tokenClient.requestAccessToken({ prompt: "" }); } }); // 點擊登出按鈕 $("#google_logout").click(function() { var token = gapi.client.getToken(); if (token !== null) { google.accounts.oauth2.revoke(token.access_token); gapi.client.setToken(""); // 登出後的動作 $persoanl_info.html("已登出"); } }); </script>紅字字串參數請特別注意以下說明:
  • client_id:請置換為前面「處理 OAuth 憑證」流程取得的「用戶端 ID」
  • apiKey:請置換為前面「取得 Google API 金鑰流程」取得的「API 金鑰」字串
  • scope:請參考上一篇「一、People API 說明」填入需要的 scope 授權,每個網址字串用空格隔開
  • personFields:請參考上一篇「一、People API 說明」填入想取得的個人資料項目,每個項目用小寫逗號隔開
  • 範例程式碼請放在前面「處理 OAuth 憑證」流程設定的網站才能執行

三、DEMO 效果展示

以下為範例程式碼的執行效果,可進行操作並注意對應狀態的顯示資訊:
目前狀態:
尚未授權
更多 Google 相關文章:

FB 社團如何篩選貼文通知﹍操作 Google Apps Script 定時過濾 Gmail 郵件

$
0
0
相信每個人加入的 FB 社團都很多,但不見得每篇新貼文都有興趣看,主要也是時間不夠。如果能篩選出有興趣的貼文才收到通知,就能節省相當多時間。 如果是 FB 社團管理員,官方提供了「關鍵字提醒」的功能,但一般社員無法享受這個福利。 以下的「基本作法」是一種常見思路:
  • 參照「訂閱FB社團通知郵件」→「二、Facebook 設定」,可將 FB 社團所有新貼文寄到 Gmail
  • 在 Gmail 設定關鍵字篩選
這個流程對於多數情況已經很夠用了,能夠接受的話可以不用看本篇的作法。而本篇的 Google Apps Script(以下簡稱 GAS) 解決方案,主要能改善以下幾點:
  • Gmail 篩選器如果關鍵字只設定「一個中文字」時,會漏掉許多郵件,代表篩選器的關鍵字必須為設定「兩個中文字」以上,形成一個詞彙,才能精確篩選。
  • 如果 Chrome 有安裝「Gmail 檢查新信」這類套件,FB 社團新郵件通知可能還是很頻繁,會打擾工作頻率。
  • 使用 GAS 可定時檢查 Gmail,每隔一段時間才統整相關郵件,並寄發通知,讓我們在指定時間才接收 FB 社團新貼文。
(圖片出處: unsplash.com)

一、原理說明

1. 操作流程接續「基本作法」的流程:
  • 在 Gmail 篩選器,針對 FB 社團寄來的新貼文郵件,「標上星號」,並「標示為已讀取」,如此 Chrome 套件就不會頻繁通知有新郵件
  • 在 GAS 寫程式,讀取所有「標上星號」郵件的內容,與自行設定「關鍵字」進行比對
  • 所有符合的郵件整合成一封郵件,寄到指定 Gmail 信箱
  • 將所有處理過的郵件移除星號
  • 依照需求設定排程,例如每 n 小時執行一次程式,或是每天指定時刻執行,如此只有固定時刻會收到篩選後的郵件內容
2. GAS 說明文件過去在「使用 Gmail API 寄信的簡易管道」曾經說明,操作 Gmail API 是非常難搞的一件事,最方便的處理管道還是交給 GAS,因為 GAS 提供了一個 GmailApp 服務,可以用最無腦的方式寄送 Gmail 郵件。 以下提供操作 GmailApp 需要瞭解的官方文件: 根據官方文件,使用 GmailApp 的額度一天可寄 100 封郵件,可讀取 20000 封郵件,每封郵件內容最多 200KB。

二、範例程式碼

以下為 GAS 範例程式碼,修改參數請參考註解說明: function filterEmail() { var receiver = "xxx@gmail.com", // 收件者郵件 subject = "FB 社團篩選郵件", // 郵件標題 keyword = ["關鍵字1", "關鍵字2"], // 所有要篩選的字串 from = "facebookmail.com", // 寄件者網域 query = "is:starred from:(" + from + ")", // 搜尋參數 篩選標記星號、從 FB 寄來的郵件 quota = 200000, // 郵件大小上限 200k threads = GmailApp.search(query), // 搜尋符合條件的郵件 l = threads.length, // 郵件數量 html = "", // 寄出的郵件 html 內容 i = 0, serial = 0, newHtml, thread; // 沒有郵件則不處理 if (!l) { return; } for (i; i < l; i++) { thread = threads[i]; // 篩選郵件 html 內容 newHtml = getHtml(thread); // 內容超過郵件大小上限時 分批寄出信件 if ((html + newHtml).length > quota) { serial++; sendMail(html, serial); html = newHtml; } else { // 沒超過時 多封郵件內容整合為一封 html += newHtml; } // 郵件移除星號 GmailApp.unstarMessages(thread.getMessages()); } // 寄出整合後的郵件 if (html) { serial++; sendMail(html, serial); } // 取得郵件 html 內容 function getHtml(thread) { var message = thread.getMessages()[0], from = message.getFrom(), // 寄件者 subject = message.getSubject(), // 郵件主旨 body = message.getBody(), // 郵件 html 內容 plainBody = message.getPlainBody(), // 郵件純文字內容 html = "", i; // 篩選關鍵字 for (i in keyword) { // 內容可根據自己需求 選擇使用 body 或 plainBody 來產生 if (body.indexOf(keyword[i]) > -1) { html += "寄件者:" + from + "<br/>"; html += "主旨:" + subject + "<br/>"; html += "內容:" + body + "<br/><br/><br/>"; return html; } } return html; } // 寄出郵件 function sendMail(html, serial) { var date = Utilities.formatDate(new Date(), "GMT+8", "yyyy-MM-dd HH:mm"), // 日期格式化 subject_date = subject + " " + date + "-" + serial; // 組合信件標題 加上日期及序號 // 寄信 MailApp.sendEmail({ to: receiver, subject: subject_date, htmlBody: html }); } }

三、補充說明

1. 授權第一次執行 GAS 程式碼時,因為取得 Gmail 郵件需要權限,請參考「製作可執行 GAS 指令碼的圖片按鈕」→「三、撰寫 Apps Script 指令碼」的流程進行授權。 2. 排程執行程式碼 GAS 設定排程自動執行的操作,可參考「排程抓證交所台股交易資料」→「五、設定排程」。
更多 Google Apps Script 相關文章:

輕鬆打造網站置頂公告,抓住訪客注意力!

$
0
0
大部分情況下網站公告通常放在首頁,或是有經營 FB 粉絲團、社群媒體的話,重大事情在社群發佈的效果會比較好。然而這樣的處理方式,只能將公告內容擴散給粉絲。至於非粉絲的話,例如從搜尋引擎而來、或從別的網站連結過來的訪客,基本上只會到達文章頁面,不會看到首頁或社群媒體。 所以網站最好的處理方式,是在每個頁面最上方都出現置頂公告,如此可以確保通知所有訪客無漏網之魚。 對於一般部落格而言,可能不會經常有大事件需要公告,不過倒是可以借用置頂公告當作廣告,拿來宣傳「特定的熱門文章」、「社群媒體」等等。如果是商業用途的網站,那麼置頂公告更好用了,可以作為長期宣傳「商品」、「經營業務」、「加入會員」等等之用。 置頂公告這樣的功能已經有現成的免費/付費工具,不過因為這功能很簡單,乾脆自己開發一個,網站也可減少不必要的外連 JS(可參考「為何部落格最好避免第三方外掛」),避免拖慢網頁速度。 以下先介紹這個小工具的功能,想要直接安裝可跳至「二、安裝程式碼」 (圖片出處: pexels.com)

一、置頂公告功能介紹

  • 如果是注重使用者體驗的站長,會希望置頂公告可以讓訪客看過後選擇關閉,將來不再出現同樣的重複訊息,所以此工具可以設定置頂公告是否永遠顯示
  • 比較低調的站長或許希望公告不要浮動「置頂」,而是改為浮動置底,此工具也可選擇出現在網頁底部。
  • 如果開啟「關閉公告」的功能,當訪客關閉公告後,系統會自動記憶上次的公告內容。當下次站長更新公告內容時,置頂公告會重新顯示,直到訪客按下關閉為止。
  • 此工具預設了幾種顏色模版,可自行修改背景顏色、按鈕顏色等等
  • 如果熟悉 CSS 的話,可以自行調整所有 CSS 細節

二、安裝程式碼

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。 請到後台「主題」→ "自訂" 按鈕右方的下拉圖示 →「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼: <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script><!--Blogger 置頂公告 --> <script> (function($) { var newBulletin = "這裡是置頂公告內容,<a class='blt_btn blue' href='https://www.wfublog.com/' target='_blank'>按鈕</a> 也可使用!", // 填入要顯示的公告內容, 可使用 HTML 碼, 按鈕顏色可改 class 參數 blue、green、red、orange、black、white、gray、navy enableClose = true, // 是否允許關閉公告, 允許填 true, 不允許填 false position = "top", // 公告位置, 置頂填 "top", 置底填 "bottom" bgColor = "white", // 背景色, 可使用 "blue" "green" "red" "orange" "black" "white" "gray" "navy" delay = 3, // 幾秒後顯示 bulletinStatus = localStorage.bulletinStatus || "unRead"; var _0xb687=["\x75\x6E\x52\x65\x61\x64","\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x62\x75\x6C\x6C\x65\x74\x69\x6E\x53\x74\x61\x74\x75\x73","","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x68\x36\x30\x27\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x27\x20\x63\x6C\x61\x73\x73\x3D\x27","\x20","\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x5F\x62\x6F\x64\x79\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x62\x75\x6C\x6C\x65\x74\x69\x6E\x5F\x74\x65\x78\x74\x27\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x63\x6C\x6F\x73\x65\x42\x74\x6E\x5F\x6F\x75\x74\x65\x72\x27\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x63\x6C\x6F\x73\x65\x42\x74\x6E\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\u95DC\u9589\u516C\u544A\x27\x3E\xD7\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x27\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x20\x72\x69\x67\x68\x74\x3A\x20\x31\x30\x70\x78\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x30\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x20\x31\x35\x70\x78\x3B\x20\x6C\x69\x6E\x65\x2D\x68\x65\x69\x67\x68\x74\x3A\x20\x31\x30\x70\x78\x3B\x20\x6C\x65\x74\x74\x65\x72\x2D\x73\x70\x61\x63\x69\x6E\x67\x3A\x20\x31\x2E\x34\x70\x78\x3B\x27\x3E\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x27\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x3A\x20\x6E\x6F\x6E\x65\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x63\x63\x63\x3B\x20\x66\x6F\x6E\x74\x2D\x66\x61\x6D\x69\x6C\x79\x3A\x20\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x2C\x20\x61\x72\x69\x61\x6C\x2C\x20\x73\x61\x6E\x73\x2D\x73\x65\x72\x69\x66\x3B\x20\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x31\x31\x70\x78\x3B\x27\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x77\x66\x75\x62\x6C\x6F\x67\x2E\x63\x6F\x6D\x2F\x32\x30\x32\x33\x2F\x30\x32\x2F\x77\x65\x62\x73\x69\x74\x65\x2D\x74\x6F\x70\x2D\x62\x75\x6C\x6C\x65\x74\x69\x6E\x2E\x68\x74\x6D\x6C\x27\x20\x74\x61\x72\x67\x65\x74\x3D\x27\x5F\x62\x6C\x61\x6E\x6B\x27\x20\x74\x69\x74\x6C\x65\x3D\x27\x42\x6C\x6F\x67\x67\x65\x72\x20\u7DB2\u7AD9\u7F6E\u9802\u516C\u544A\x0A\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x57\x46\x55\x20\x42\x4C\x4F\x47\x27\x3E\u24E6\x20\x42\x75\x6C\x6C\x65\x74\x69\x6E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x74\x6F\x70","\x70\x72\x65\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x62\x6F\x74\x74\x6F\x6D","\x61\x70\x70\x65\x6E\x64","\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E","\x23\x68\x36\x30\x2C\x20\x23\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x68\x65\x69\x67\x68\x74","\x23\x62\x75\x6C\x6C\x65\x74\x69\x6E","\x23\x68\x36\x30","\x73\x6C\x69\x64\x65\x55\x70","\x68\x61\x73\x52\x65\x61\x64","\x63\x6C\x69\x63\x6B","\x2E\x63\x6C\x6F\x73\x65\x42\x74\x6E","\x74\x65\x78\x74","\x3C\x70\x3E","\x3C\x2F\x70\x3E"];ckNewBulletin();if(bulletinStatus== _0xb687[0]){addHtml();clickClose()};function ckNewBulletin(){var _0x9a2fx2=localStorage[_0xb687[1]];if(_0x9a2fx2&& entityConvert(newBulletin)!= _0x9a2fx2){localStorage[_0xb687[2]]= _0xb687[0];bulletinStatus= _0xb687[0]}}function addHtml(){var _0x9a2fx4=_0xb687[3];_0x9a2fx4+= _0xb687[4];_0x9a2fx4+= _0xb687[5]+ bgColor+ _0xb687[6]+ position+ _0xb687[7];_0x9a2fx4+= _0xb687[8];_0x9a2fx4+= _0xb687[9]+ newBulletin+ _0xb687[10];if(enableClose){_0x9a2fx4+= _0xb687[11]};_0x9a2fx4+= _0xb687[10];_0x9a2fx4+= _0xb687[12];_0x9a2fx4+= _0xb687[10];if(position== _0xb687[13]){$(_0xb687[15])[_0xb687[14]](_0x9a2fx4)};if(position== _0xb687[16]){$(_0xb687[15])[_0xb687[17]](_0x9a2fx4)};setTimeout(function(){adjustHeight();$(_0xb687[19])[_0xb687[18]]()},delay* 1000)}function adjustHeight(){var _0x9a2fx6=$(_0xb687[21])[_0xb687[20]]();_0x9a2fx6= _0x9a2fx6< 60?60:_0x9a2fx6;$(_0xb687[22])[_0xb687[20]](_0x9a2fx6)}function clickClose(){$(_0xb687[26])[_0xb687[25]](function(){$(_0xb687[19])[_0xb687[23]]();localStorage[_0xb687[1]]= entityConvert(newBulletin);localStorage[_0xb687[2]]= _0xb687[24]})}function entityConvert(_0x9a2fx9){return $(_0xb687[28]+ _0x9a2fx9+ _0xb687[29])[_0xb687[27]]()} })(jQuery); </script> <style> #h60, #bulletin {display: none; } #bulletin {position: fixed; left: 0; width: 100%; z-index: 10000; color: #fff; box-shadow: 0 1px 3px 2px rgb(0, 0, 0, .25);} #bulletin.top{top: 0;} #bulletin.bottom{bottom: 0;} .bulletin_body{display: flex; padding: 10px; align-items: center; justify-content: center; font-size: 1.2rem;} .bulletin_text{line-height: 40px; text-align: center;} .closeBtn_outer{padding: 0 15px;} .closeBtn {width: 24px; height: 24px; font-family: arial, sans-serif; font-size: 24px; font-weight: bold; text-align: center; border-radius: 50%; line-height: initial; background: #fff; color: #343a40; cursor: pointer; box-shadow: 0 0 5px rgb(0, 0, 0, 0.6);} .closeBtn:hover{background: #6c757d; color: #fff;} .blue{background: #5bc0de;} .green{background: #198754;} .red{background: #d9534f;} .orange{background: #f0ad4e;} .black{background: #343a40;} .white{background: #fff; color: #343a40!important;} .gray{background: #6c757d;} .navy{background: #337ab7;} .bulletin_text .blt_btn{padding: 3px 6px; text-align: center; white-space: nowrap; cursor: pointer; border-radius: 4px; color: #fff;} .bulletin_text .blt_btn:hover{text-decoration: none; opacity: .7;} </style> <!-- Designed by WFU BLOG -->
  • 第 1 行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。
  • 所有重要參數的修改,請見藍色註解的說明。
  • 如果對 CSS 熟悉可自行修改參數

三、展示效果

  • 本頁面即為展示頁面,網頁最上方可看到公告效果
  • 使用的參數為背景 navy,按鈕 white
  • 為了達到展示效果,點擊關閉按鈕後,本頁面的公告仍然會持續出現,這是跟原本程式效果不同之處。
更多網站工具:

簡單易懂的 Blogger GA4 移轉教學,讓你快速上手

$
0
0
簡單易懂的 Blogger GA4 移轉教學,讓你快速上手今年起進入 Blogger 後台,會不斷看到提示訊息「2023 年 7 月 1 日起,通用 Analytics (分析) 將不再處理標準資源中的新資料。請立即做好準備,完成相關設定並改用 Google Analytics (分析) 4 資源。 請按這裡瞭解詳情。」不過進入 Google Analytics(以下簡稱 GA)後台時,又會看到以下提示文字: 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手注意到紅色底線的字了嗎(若未這麼做,系統會根據原本的資源建立 GA4 資源,並重複使用現有的網站代碼),這段話代表,到了 2023/7/1 就算我們什麼事都不做,官方也會自動幫網站建立 GA4 資源,同時網站原本的 GA 安裝碼也不需改變,仍可繼續執行。 所以我們真的不必理會 GA 的警示訊息嗎?嚴格來說,只有初階的使用者才適合這麼做,例如偶爾才進 GA 後台(可能是幾個月)看看初階數據(網頁瀏覽數、訪客人數..等等),對於僅有這類需求的 Blogger 站長,的確可以不急著移轉到 GA4。 如果你需要頻繁觀測 GA 數據的話,例如每隔幾天或每星期,就不適合讓官方自動移轉 GA4 資源,因為到了 2023/7/1,當你看到 GA4 數據時,就會發現報表一片空白,因為網站的數據會從那一天才開始累積,那麼短期間內很多資訊將無法進行分析。所以最好的作法將是:
  • 越早建立 GA4 資源越好,儘早開始累積 GA4 數據
  • 網站讓原本的 GA 及新的 GA4 安裝碼同時存在,兩邊一起累積數據
  • 在 2023/7/1 舊的 GA 停止運行前,都可以使用舊 GA 進行分析
  • 等到 2023/7/1 之後,GA4 已經有了幾個月的數據,可以無縫接軌繼續使用,再移除網站的舊 GA 安裝碼
本篇會說明如何將原本的通用 GA 移轉到 GA4,按圖文一步步操作即可。過去也寫過不少進階的 GA 使用方式,如果有用到這些功能的話,也是越早移轉到 GA4 越好:

一、移轉步驟

簡單易懂的 Blogger GA4 移轉教學,讓你快速上手進入「GA 後台」,頁面上方會看到上圖的警示文字,點擊紅框「管理 GA4 遷移作業」,官方會引導我們進行移轉。 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手點擊「開始使用」 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手上圖看到官方會幫我們建立 GA4 資源,並複製舊 GA 的基本設定,點擊「建立並繼續」 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手選擇「安插 Google 代碼」,點擊右上角「下一步」 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手這裡有兩種安裝方式:
  • 若是如同本篇建議的作法,舊 GA 與 GA4 先並存到 2023/7/1 的話,請按上圖的官方說明,把程式碼複製到 Blogger 範本 head 元素之中即可。
  • 第二種安裝方式為,複製上圖紅框的 GA4 資源 ID 字串,貼到 Blogger 後台。這個方式會移除舊 GA 安裝碼,只保留 GA4 安裝碼
簡單易懂的 Blogger GA4 移轉教學,讓你快速上手選擇第二種方式的話,如上圖到 Blogger 後台 → 設定 → 找到「Google Analytics (分析) 評估 ID」,填入前圖複製的 GA4 資源 ID 字串後,按儲存即可。 再提醒一下,這個方式會移除舊 GA 安裝碼,改為運行 GA4 安裝碼。如果目前使用 GA 與 GA4 安裝碼並存的話,2023/7/1 之後可改為這個安裝方式。 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手如果網站的 GA4 安裝碼已經開始運行,回到 GA 後台,會看到上圖綠字「已連結」,可按「前往 GA4 資源」。 不過數據資料可能要 24 小時後才能接收到,目前先來完成一些基本設定。

二、資料保留時間

簡單易懂的 Blogger GA4 移轉教學,讓你快速上手 GA4 預設的資料保留時間只有區區「2個月」,建議改為最大期限「14 個月」。操作方式如上圖,GA 後台 → 管理 → 資料設定 → 資料保留 → 改為「14 個月」→ 儲存。

三、啟用Google信號資料收集

如果有打算對訪客進行分析研究的話,可以考慮啟用 GA4 新功能:「Google信號資料收集」。 例如本站開發的服務「線上看電視」適合對觀眾收視進行年齡、性別等分析研究,而部落格站長如果需要瞭解受眾分布資訊,來跟廠商談業配的話,也都是需要開啟這項功能。 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手操作方式如上圖,GA 後台 → 管理 → 資料設定 → 資料收集 → 點擊「開始使用」→ 一路點到最後直到「啟用」即可。

四、串接服務

簡單易懂的 Blogger GA4 移轉教學,讓你快速上手還有一些常用的服務可以跟 GA4 進行串接,如上圖,GA 後台 → 管理 → 找到「產品連結」 比較常用的會是上圖紅框處 Adsense 以及 Search Console,點擊對應的「連結」後一路按畫面指示進行即可。 簡單易懂的 Blogger GA4 移轉教學,讓你快速上手成功後如上圖,會顯示對應的連結資料。 以上是所有 GA4 的基本設定,之後會陸續寫進階的 GA4 應用說明。
更多 Google Analytics 相關文章:

GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心

$
0
0
GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心幾年前寫過「如何從 Google Analytics 站內搜尋數據瞭解訪客需求?」,這對站長而言是非常重要的必備技能,瞭解訪客需要的關鍵字後,等於拿到免費的考古題庫,也能知道訪客的痛點,讓我們寫熱門文章的靈感及題材源源不絕。 今年 2023/7/1 舊版 GA 即將退場,必須改用 GA4。試用之後才發現,原本報表內建的功能「站內搜尋」已然消失,現在要看到站內搜尋關鍵字報表,必須走比較複雜的流程,請見本篇的整理。 另外,如果網站還沒移轉到 GA4,請先看這篇「簡單易懂的 Blogger GA4 移轉教學」。 (圖片出處: pixabay.com)

一、啟用「加強型事件評估」

關於站內搜尋的基本設定,因為 GA4 的預設值剛好符合 Blogger 環境,所以此部分的操作內容完全不需要動手,想要直接建立報表也可跳至「二、建立自訂維度」,不過建議還是先閱讀以下的運作原理。 1. 官方文件可先參考官網說明文件「GA4 加強型事件評估」,瞭解設定方法及事件評估的參數。 2. 加強型事件評估 GA4 已經預設開啟「加強型事件評估」功能,不過還是說明一下如何設定: GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心進入「GA 後台」→ 選擇網站 GA4 資源 → 管理 → 資料串流 → 右側選擇網站 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心上圖可看到「加強型評估」功能預設已經勾選,請點擊右下角齒輪圖示。 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心可看到「站內搜尋」預設已經勾選,請點擊「顯示進階設定」。 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心上圖可看到預設搜尋參數有好幾個,其中 Blogger 的站內搜尋參數正是第一個 "q",所以同樣不需另外再設定。 若是其他平台請再自行設定對應的站內搜尋參數。 3. GA4 預設評估事件從前面提到的官方文件頁面,可看到 GA4 內建了一些事件可從報表看到,我們有必要瞭解一下:
  • page_view:網頁瀏覽數
  • scroll:GA4 會自動記錄訪客是否捲動頁面達 90%,可用來評判是否為一次實實在在的瀏覽
  • click:點擊事件,如果是外連網址,還會另外記錄「連結網域」(link_domain)、「連結網址」(link_url) 等參數
  • view_search_results:站內搜尋,這是本篇主題的關鍵事件。訪客搜尋的關鍵字會儲存在 search_term 這個參數,之後會用到。
  • video_start、video_progress、video_complete:內嵌影片互動的相關事件
  • file_download:檔案下載
  • form_start、form_submit:表單互動相關事件
這份文件的底部有一段話非常重要:「注意:您必須為參數建立自訂維度,才能在報表中使用參數。」 意思就是說,以上預設事件都可以在 GA4 報表中看到,但是「事件參數」(例如 link_domain、link_url,以及本篇需要用到的 search_term),必須另外建立「自訂維度」才能在報表中看到數據及資料

二、建立自訂維度

1. 預設事件報表GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心從 GA4 後台 → 報表 → 參與 → 事件,可看到系統的預設事件報表,如上圖可看到前面官方文件提到的 page_view、scroll、click 事件等等,最下面的 view_search_results 就是本篇主題「站內搜尋」事件,但現在點進去無法看到訪客的「搜尋關鍵字」資料,原因如前面所提,事件參數 search_term 還沒有建立「自訂維度」2. 自訂維度 search_termGA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心建立「自訂維度」的流程:GA4 後台 → 管理 → 自訂定義 → 點擊「建立自訂維度」 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心如上圖,最重要的是「事件參數」選擇 "search_term",其他「維度名稱」、「說明」可自行填寫。 3. 站內搜尋事件報表設定完成後,回到「1. 預設事件報表」的畫面,這次對著「view_search_results」點下去,看到的內容就不一樣了: GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心往下捲可找到上圖畫面,現在總算可以看到訪客搜尋的關鍵字為何,不過這個 GA4 官方預設報表還是有些問題:
  • 看起來最多只顯示 200 筆資料
  • 出現了 (not set) 這筆奇怪的資料
為了讓報表功能更佳,我們必須瞭解如何建立自訂事件報表。

三、「站內搜尋」自訂報表

GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心自訂事件報表的操作流程:GA4 後台 → 探索 → 上圖大紅框點擊「建立新的探索」 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心如上圖 A~F 步驟:
  • A:自訂事件報表名稱
  • B:維度選擇「搜尋字詞」、「事件名稱」
  • C:指標選擇「事件計數」
  • D:列選擇「搜尋自詞」
  • E:可選擇最多 500 筆結果,比前面的預設 200 筆多了不少
  • F:值選擇「事件計數」
GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心如果「維度」不曉得要到哪裡找的話,請見上圖,「搜尋字詞」在「一般」之下、「事件名稱」在「事件」之下,選完按右上角「匯入」。 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心如果「指標」不曉得要到哪裡找的話,請見上圖,「事件計數」在「事件」之下,選完按右上角「匯入」。 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心繼續往下捲,找到「篩選器」,按照上圖設定:
  • 選擇「事件名稱」
  • 篩選器選擇「完全符合」
  • 事件名稱找到 view_search_results
然後按「套用」即可。 GA4 如何查詢「站內搜尋」關鍵字,讓你更懂訪客的心設定完成後,右側就能顯示正常的站內搜尋自訂報表,看到所有訪客搜尋的熱門關鍵字了。
Google Analytics 4 系列文章:

GA4 如何追蹤自訂事件的成效及建立報表

$
0
0
以前曾為舊版 Google Analytics(以下簡稱 GA)寫過「Blogger 網站如何追蹤 GA 點擊事件的成效?」,但現在新版 GA4 自訂事件有了天壤之別的變化,舊版使用概念會完全對不起來,必須重新學習使用方法。 本篇會比較新舊版事件追蹤碼的差異,並說明 GA4 自訂事件如何產生報表。 另外,如果網站還沒移轉到 GA4,請先看這篇「簡單易懂的 Blogger GA4 移轉教學」。

一、追蹤碼差異

1. 通用 GA 事件追蹤碼舊版事件追蹤碼的完整格式如下: ga('send', 'event', [事件類別], [事件動作], [事件標籤], [事件價值]);必要參數為 send、event、事件類別、事件動作,舊版 GA 的「事件動作」隸屬於「事件類別」的層級之下。 2. GA4 事件追蹤碼根據官網文件「事件」,GA4 事件追蹤碼的完整格式如下: gtag('event', '自訂事件名稱', { '事件參數1': '事件值1', /*必要*/ '事件參數2': '事件值2', /*從這裡開始都是非必要*/ ... ... });新版 GA4 的所有事件參數沒有層級之分,每項參數都是獨立事件,可以個別拉出獨立報表。

二、加強型評估事件

在產生事件報表之前,有必要先瞭解「加強型評估事件」的所有概念,才不會一頭霧水。 1. 啟用「加強型評估事件」請先閱讀上一篇「GA4 如何查詢站內搜尋關鍵字」→「一、啟用加強型事件評估」→「1. 官方文件」以及「2. 加強型事件評估」,可在 GA4 後台啟用「加強型評估事件」。 2. GA4 預設評估事件這部分的內容很重要,所以直接複製上一篇的內容:
GA4 內建了一些事件可從報表看到,我們有必要瞭解一下:
  • page_view:網頁瀏覽數
  • scroll:GA4 會自動記錄訪客是否捲動頁面達 90%,可用來評判是否為一次實實在在的瀏覽
  • click:點擊事件,如果是外連網址,還會另外記錄「連結網域」(link_domain)、「連結網址」(link_url) 等參數
  • view_search_results:站內搜尋,這是本篇主題的關鍵事件。而訪客搜尋的關鍵字會儲存在 search_term 這個參數,之後會用到。
  • video_start、video_progress、video_complete:內嵌影片互動的相關事件
  • file_download:檔案下載
  • form_start、form_submit:表單互動相關事件
這份文件的底部有一段話非常重要:「注意:您必須為參數建立自訂維度,才能在報表中使用參數。」 意思就是說,以上預設事件都可以在 GA4 報表中看到,但是「事件參數」(例如 link_domain、link_url,以及本篇需要用到的 search_term),必須另外建立「自訂維度」才能在報表中看到數據及資料
有了以上概念後我們可以了解,GA4「自訂事件」在預設報表會看不到,必須另外建立「自訂維度」,才能在報表中看到數據及資料。 3. 建立事件報表上一篇雖然是說明如何產生「站內搜尋」的報表,但在某種程度上也算是半個「自訂事件」,所以請先閱讀上一篇瞭解如何產生「站內搜尋」的報表,那麼理解本篇的操作及概念就容易的多。

三、實作範例

下面以「線上看電視」追蹤節目點擊為例進行示範: 1. 事件追蹤碼gtag('event', 'click_prog', { 'event_value': '節目名稱' });
  • "自訂事件名稱" 命名為 click_prog(點擊節目)
  • "事件參數1" 命名為 event_value
  • "事件值1" 的字串值為該節目的名稱
2. 建立自訂維度事件參數必須先建立「自訂維度」,才能在報表中顯示,以下為流程: ga4-site-search-6.jpg-GA4 如何追蹤自訂事件的成效及建立報表 GA4 後台 → 管理 → 自訂定義 → 點擊「建立自訂維度」 ga4-event-track-report-1.jpg-GA4 如何追蹤自訂事件的成效及建立報表如上圖,最重要的是「事件參數」填入前面設定的「事件參數1」名稱 "event_value",而其他「維度名稱」、「說明」可自行填寫。 3. 官方預設報表設定完成後,我們可以先看看官方預設報表的效果。 ga4-event-track-report-2.jpg-GA4 如何追蹤自訂事件的成效及建立報表 GA4 後台 → 報表 → 參與 → 事件 → 可看到事件追蹤碼設定的「自訂事件名稱」 "click_prog",點擊 click_prog 進入報表。 ga4-event-track-report-3.jpg-GA4 如何追蹤自訂事件的成效及建立報表報表往下捲可看到剛剛建立的自訂維度名稱「TV節目收視數」報表,這個預設報表有一些缺點:
  • 看起來最多只顯示 200 筆資料
  • 報表區塊很小,實用性低
  • 無法進行其他分析
為了讓報表功能更佳,我們必須瞭解如何建立自訂事件報表。 4. 自訂事件報表ga4-site-search-9.jpg-GA4 如何追蹤自訂事件的成效及建立報表自訂事件報表的操作流程:GA4 後台 → 探索 → 上圖大紅框點擊「建立新的探索」 ga4-event-track-report-4.jpg-GA4 如何追蹤自訂事件的成效及建立報表如上圖 A~F 步驟:
  • A:自訂事件報表名稱
  • B:維度選擇「事件名稱」、自訂維度名稱「TV節目收視數」
  • C:指標選擇「事件計數」
  • D:列選擇自訂維度名稱「TV節目收視數」
  • E:可選擇最多 500 筆結果
  • F:值選擇「事件計數」
ga4-event-track-report-5.jpg-GA4 如何追蹤自訂事件的成效及建立報表如果「維度」不曉得要到哪裡找的話,請見上圖,自訂維度名稱「TV節目收視數」在「自訂」之下、「事件名稱」在「事件」之下,選完按右上角「匯入」。 如果「指標」不曉得要到哪裡找的話,「事件計數」在「事件」之下,選完按右上角「匯入」。 ga4-event-track-report-6.jpg-GA4 如何追蹤自訂事件的成效及建立報表繼續往下捲,找到「篩選器」,按照上圖設定:
  • 選擇「事件名稱」
  • 篩選器選擇「完全符合」
  • 事件名稱輸入自訂事件名稱 "click_prog"
然後按「套用」即可。 ga4-event-track-report-7.jpg-GA4 如何追蹤自訂事件的成效及建立報表設定完成後,右側就能顯示功能完整的自訂報表了。
Google Analytics 4 系列文章:

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

$
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-break-line-1.jpg-FB 按 Enter 換行分段技巧揭密,不必靠轉換器工具也不需複製空白字元上圖是 FB 社團發文的實驗,測試方法與效果可以看的很清楚,歸納如下:
  • Enter 按1次跟按無數次的效果一模一樣,只能看到 "一丁點" 的段落分隔效果
  • 多按一次 Alt + Enter可產生一個空白行,造成很好的段落分隔效果。
  • 可根據按 Alt + Enter的次數來調整版面。
正當以為找到解答時,才發現這只是幻象,因為 Alt + Enter的技巧除了 FB 社團發文,其他地方都不適用2. FB 貼文 + 留言fb-enter-break-line-2.jpg-FB 按 Enter 換行分段技巧揭密,不必靠轉換器工具也不需複製空白字元上圖是 FB 粉絲頁、以及個人頁的發文實驗,歸納如下:
  • 只按一次 Eneter 已經無法產生段落分隔效果
  • 必須按 Enter 兩次以上,才能產生 "一丁點" 的段落分隔效果
  • 全形、半形的空白字元都會被 FB 無視,沒有實際效果
  • Alt + Enter失效,按幾次都一樣,無法產生如同 FB 社團發文一般的空白行
3. FB 留言fb-enter-break-line-3.png-FB 按 Enter 換行分段技巧揭密,不必靠轉換器工具也不需複製空白字元上圖是 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 空白字元測試1fb-enter-break-line-4.jpg-FB 按 Enter 換行分段技巧揭密,不必靠轉換器工具也不需複製空白字元根據這張表「ASCII Character Codes Table & Cheat Sheet」,可看到以上紅框標示的都是空白字元:
  • 9 是 Tab 字元,10 是換行字元,但經過實測,ASCII 30 以前的字元都被 FB 封鎖了,完全無法輸入
  • 32 可輸入空格,但之前的 FB 實驗可看到,空格字元無論全形半形都被移除了
  • 129、141、143、144 這幾個可以輸入
fb-enter-break-line-5.png-FB 按 Enter 換行分段技巧揭密,不必靠轉換器工具也不需複製空白字元來看看實驗結果,結果全部失敗,FB 無法顯示這些空白字元,會出現問號圖案。 3. ASCII 空白字元測試2fb-enter-break-line-6.jpg-FB 按 Enter 換行分段技巧揭密,不必靠轉換器工具也不需複製空白字元上圖最後還剩幾個 ASCII 空白字元:157、160、173,繼續把實驗做完,終於測試到最後一個 Alt + 173時...

四、ALT + 173

fb-enter-break-line-7.jpg-FB 按 Enter 換行分段技巧揭密,不必靠轉換器工具也不需複製空白字元上圖為 FB 留言的實驗結果:
  • 按照圖中文字操作,就能產生紅框處的一行空白、或是兩行空白。
  • 想要產生的段落之間,依序輸入 Alt + EnterAlt + 173(請使用鍵盤右邊的數字鍵)、Alt + Enter,可產生一行空白行
  • 想要產生多行空白行,則重複 Alt + 173Alt + Enter多次即可
簡單說明一下,按下 Alt + 173會產生一個看不見的空白字元,且這個字元沒被 FB 移除,因此能實現空白行的效果。其他 ASCII 空白字元的效果都沒有 Alt + 173來得好,可參照本文之前的實驗畫面。 而 FB 留言是排版難度最高的區塊,能成功換行的話,自然能套用到 FB 粉絲頁發文、FB 社團發文等情況。

五、總結

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

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

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

一、瞭解 GA4自訂事件報表

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

二、GA4 外掛

進入 Google 試算表後,從選單「擴充功能」→「外掛程式」→「取得外掛程式」,可以搜尋現成的 GA4 工具。 ga4-import-data-to-google-sheet-1.jpg-GA4 如何將自訂事件數據報表,匯入 Google 試算表成為資料庫上圖為搜尋 "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-import-data-to-google-sheet-2.jpg-GA4 如何將自訂事件數據報表,匯入 Google 試算表成為資料庫

三、GA4 Magic Reports 設定流程

安裝完 GA4 Magic Reports 後,本篇跟上一篇「GA4 如何追蹤自訂事件的成效及建立報表」同樣,以「線上看電視」進行舉例: ga4-import-data-to-google-sheet-3.jpg-GA4 如何將自訂事件數據報表,匯入 Google 試算表成為資料庫選單「擴充功能」→「GA4 Magic Reports」→「Create new report」 ga4-import-data-to-google-sheet-4.jpg-GA4 如何將自訂事件數據報表,匯入 Google 試算表成為資料庫工作表右側會出現上圖這塊設定區域,按照 A~F 順序:
  • A:設定「產生報表」的工作表名稱
  • B:選擇來源網站
  • C:選擇對應的 GA4 資源
  • D:設定數據起始日
  • E:設定數據結束日
  • F:選擇 Event Count,統計事件次數
ga4-import-data-to-google-sheet-5.jpg-GA4 如何將自訂事件數據報表,匯入 Google 試算表成為資料庫往下捲繼續設定:
  • G:選擇在 GA4 中自訂事件所建立的「自訂維度」名稱,這裡我設定的是中文名稱,如果當初用英文命名的話,大致是 event_value。此處若自行操作過上一篇的流程,會比較容易理解。
  • H:選擇 Event name,代表「事件名稱」
  • I:選擇 Exact,代表完全符合字串
  • J:填入自訂事件的「事件參數」名稱,此處若自行操作過上一篇的流程,會比較容易理解。
  • 最後按「Create Report」
ga4-import-data-to-google-sheet-6.jpg-GA4 如何將自訂事件數據報表,匯入 Google 試算表成為資料庫設定完成後,可看到自動建立了工作表「GA4 Reports Configuration」,列出剛剛所有的設定內容。紅框是將來比較常會修改的參數:
  • Start Date & End Date:可自行修改起迄日期
  • Limit:可限定讀取的資料筆數上限
ga4-import-data-to-google-sheet-7.jpg-GA4 如何將自訂事件數據報表,匯入 Google 試算表成為資料庫 Start Date 及 End Date 之後有個星號 "*",滑鼠移過去會出現上圖的參數修改說明,不一定要填入 YYYY-MM-DD 這樣的日期格式。比較常用的有:
  • N 天之前:例如填入 7daysAgo 代表 7 天前
  • today:代表今日
  • yesterday:代表昨日

四、產生自訂事件報表

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

五、存取資料庫

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

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

$
0
0
nodejs-google-sheets-api-read-writ.jpg-使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫過去一向使用 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. 下載憑證nodejs-google-sheets-api-read-write-1.jpg-使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫接續前面的流程,啟用完 Sheets API 後,按上圖左側的「憑證」→ 上方「建立憑證」→ 選擇「oAuth 用戶端 ID」 nodejs-google-sheets-api-read-write-2.jpg-使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫本篇 Node.js 是在本機 Windows 執行,因此上圖請選擇「電腦版應用程式」,名稱隨意填寫,按下「建立」 nodejs-google-sheets-api-read-write-3.jpg-使用 Node.js 操作 Google Sheets API 讀寫試算表資料庫出現上圖畫面,不必記錄這些資料,只需按「下載 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 檔放在別處時,最好也一併複製過去

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

本篇範例一樣使用這個試算表作為舉例: 根據官網文件「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 相關文章:

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

$
0
0
這個月初「Xuite 隨意窩公告平台服務中止」,陸續有 Xuite 站長找上本站,請求協助搬家到 Blogger。雖然過去已有豐富的「協助 Pixnet 搬家到 Blogger」經驗,但這件事一開始沒有非常想進行,原因大致是這樣:
  • 過去開發的 Pixnet 搬家工具無法直接套用,需要重新開發新的工具
  • Xuite 雖然官方也有 API,但接到委託後一研究才發現,Xuite API 早已關閉,有些資料不知道要如何爬取。這一點真不知道官方在想什麼,不能等到平台服務中止後才關閉 API 嗎,這樣子你的使用者要怎麼委託搬家呢?
  • 開發新的整套工具要花很多時間,在委託數不多的情況下,讓委託人分攤昂貴的開發費用會造成很大負擔
然而案子是經由熟悉的朋友介紹,咬牙還是需要想辦法解決問題,而且真願意花錢搬家的站長,多是不希望累積大量回憶的相簿就此消失。 還好過沒幾天,「開發費用」這個負擔就減輕了許多,因為陸續有好多位 Xuite 站長找上本站,即便我沒有宣傳過 Xuite 搬家到 Blogger 這件事。如此一來協助搬 Xuite 就有了經濟效益,算是能夠得以自行吸收開發費用,如果你也有 Xuite 搬家需求的話,請務必在 2023/8/31 之前完成,本站的收費可以維持跟 Pixnet 搬家一樣。 過了 2023/8/31 之後,如果能保有匯出檔以及所有留存的圖檔,由於屆時難度很艱鉅,請另外再洽談搬家費用。

一、搬家流程

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. 1000) (若圖片總數太多,則每 20 張圖片 3 元)
  • 處理新舊文章連結 (1 篇文章 x 1 元, 最少 800)
  • 搬痞客邦人氣 (還需另外安裝單篇文章計數器 1k) (1 篇文章 x 1 元, 最少 800)
  • 網站搬家畫面 (1 篇文章 x 1 元, 最少 800)
請用以下表單與我聯繫:
稱呼:(必填)
電子郵件:(必填)
您的網址或提問的相關網址:(必填)
簡單自介、如何找到本站:(必填)
請詳細描述您的需求、問題或意見,如提供的資訊不足,可能無法回覆:(必填)
更多部落格搬家相關文章:

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

$
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 模組無法播放聲音檔

例如我裝了以下模組,但播放後都聽不到聲音: 看了許多網上的討論後才知道,這類模組不能自行播放檔案,而是需要呼叫播放程式來播放。例如上面的「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 模組即可。
更多 相關文章:
Viewing all 784 articles
Browse latest View live