沒穿方服

首頁

設計

類似 term.ptt.cc 滑鼠移到圖片連結時「直接顯示圖片」的功能。
當場讀取圖片,浮動顯示,位置隨滑鼠游標移動。

備料

在 React 專案,採用 Floating UIFloatingPortal 作為圖片容器,用一個 atom 記錄目前要預覽的 URL,然後在 <a> 的 mouse 事件操作它們。

根據所在連結的 URL 判斷是否為圖片,是的話就載入,onLoad 時設定維度,讓 Floating UI 自己判斷位置。

打磨

  • 問題:圖片在畫面邊緣會跳動

    圖片切到畫面邊緣時,Floating UI 會嘗試重新定位,造成跳動。

    更糟的是,因為 mouseover 會更新滑鼠位置,而且「載入中」的圖片尺寸、載入後的圖片尺寸調整都會變更最終維度,以致跳動可能循環,看起來就是不斷抖動。

    不好解決,最後用騙的,把容器的 pointer-events 關掉避免重複滑鼠事件,再用 CSS 動畫讓圖片先保持透明,100 ms 後才看得見,這時閃爍多半也結束了。

    參考 commit 817b816

  • 問題:手機上沒有 mouse 事件

    手機上無法用 mouseover/mouseout 事件來偵測到需要預覽,會變成 touch 的時候啟動預覽。

    雖然仍有基本可用性,但無法用 mouseout 關閉預覽,且再度 touch 時,到底會再度預覽,還是變成 touch 連結而開啟,行為差異很細微,使用者難以預期。

    解決方式是另外處理 touch 事件(onTouchStart, onTouchEnd, onTouchCancel),自己處理預覽行為,唯有當 touch 按住超過一定時間後,才交還瀏覽器內建的處理器(打開連結)。

    參考 commit dbf3fe43d56fce

成果

這個功能做在 Feeders 事實選集和地圖留言中,原始碼都在 GitHub

問題描述

我要把臉書貼文貼到其他網站作為引用資料來源,連結必須是永久連結,且文字能顯示相關資訊(理想是顯示貼文的「標題」)而不是「Facebook」「影片」這樣的文字。

實際作業會發現連結格式很亂,有些情況甚至是「登入後」看不到標題(網頁 title),反而要登出才有。

成果

Greasyfork → Facebook 取得帶標題連結,原始碼也放在 GitHub

在頂端塞一個小元件,把文章的「時間戳記連結」拖曳進去,就會找出「帶標題的連結」,顯示在一個小對話框,可以複製 HTML。

研究

每篇貼文的連結 URL,大家都是由網頁上「時間戳記」的部分取得(臉書主要只曝露在這裡),然而根據貼文露出方式(在動態牆、彈出對話框、影片推廣等),同一篇貼文有多種不同連結,點進去看到的可能也不一樣。

連結就在「時間」上面

只能盡量列舉處理,想辦法轉換成「標題最完整」的連結構造。

也參考 Facebook 登入牆移除器(有提供「永久連結/標準網址」功能)已處理的各種格式,它還有從網頁 meta 甚至 JS relay(臉書的內部實作)偵測標準連結的實作(我沒有做)。

目前已知的格式

  • 使用者貼文 /{user}/posts/{id}

    例如 https://www.facebook.com/twreporter/posts/pfbid0bDDP6YCaEfULbAjBruvVbHVySX2iemoHCQRnaeKipNtbpDcx2Tz71WUqDnQZdWDTl?__cft__[0]={省略}&__tn__={省略}

    把追蹤參數移除即可,標準網址為: https://www.facebook.com/twreporter/posts/pfbid0bDDP6YCaEfULbAjBruvVbHVySX2iemoHCQRnaeKipNtbpDcx2Tz71WUqDnQZdWDTl

  • 群組內的貼文 /groups/{group}/posts/{id}

    例如 https://www.facebook.com/groups/Show.YMSNP/posts/1532962150583712/?__cft__[0]={省略}&__tn__={省略}

    也是移除追蹤參數即可。

  • 有永久連結參數 /groups/{group}/?multi_permalinks={id}

    例如 https://www.facebook.com/groups/667899516591545/?multi_permalinks=26147630041525142&notif_id={省略}&notif_t=feedback_reaction_generic&ref=notif

    移除追蹤參數,並統一轉為 posts/{postId} 格式: https://www.facebook.com/groups/667899516591545/posts/26147630041525142

  • 影片:Reel /reel/{id}

    例如 https://www.facebook.com/reel/1421756105769991/?__cft__[0]={省略}&__tn__={省略}

    移除追蹤參數,並統一轉為 video.php?v= 格式: https://www.facebook.com/video.php?v=1421756105769991

  • 影片:Watch /watch/?v={id}

    例如 https://www.facebook.com/watch/?v=1221241823458045

    移除追蹤參數,並統一轉為 video.php?v= 格式: https://www.facebook.com/video.php?v=1221241823458045

  • 影片:使用者貼文 /{user}/videos/{id}/

    例如 https://www.facebook.com/FANCA.Taiwan/videos/653740892754035/

    這個形式帶有 user 資訊,比前面只有 id 的品質好,所以移除參數即可,盡量保留原狀。

無能為力

  • 時間戳記的卵連結

    從「時間戳記」取得連結有一個限制,就是連結剛出現時,上面 URL 的值是隱蔽、編碼過的,這是臉書的設計,要等使用者互動時(例如滑鼠移到該連結上)才會動態變換為我們要的 URL。

    沒辦法,只好麻煩使用者手動滑一下。

  • 實在抓不到標題

    前面的研究,最後仍無法 100% 應付所有情境,有發現一些貼文出現在首頁動態牆時,看起來是有文字敘述的,但從那個連結就是只能連到降級的網頁,除非進入貼文作者的頁面找出原文,否則就是拿不到文字。

    不強求,只要最後拿到標題仍是「Facebook」這樣,就放棄,顯示警告就是了:

    🦴☠️ 只找到預設標題,可能需手動探索才能發現文字敘述(如果有的話)

沒有第一時間跟到農業部 3/16 發布的「遊蕩犬社區管理計畫」消息,有點不爽,為求改進,把動物保護資訊網的「訊息專區」弄成 RSS feed 了:

動保資訊網 最新消息 + 新聞稿

具體是用 RSS Bridge 抓網頁的「最新消息」和「新聞稿」兩個區塊,填寫表單就能製作,還蠻方便的。


另外也擴充 Feeders「事實記錄」頁面,開始提供 RSS feed,抓最後更新的 25 筆資料:

事實記錄 - Feeders

3/21(六)從山下看見兩個身影,我立刻衝到 75 巷上山,在工寮附近聽見草動,發現了牠倆。

小黃和跛腳黑還在一起,個性也沒變。

上次記錄到牠們是去年 3/25,這次隔了快一年,應該是清明打草吸引牠們過來。

探索持續一陣子,中午還有出現在山道,然後就離開了,後續五天也未再現。

還給流浪狗尊嚴與權利

尊重、認識每一隻個體,不要餵食

續前篇《Feeders 法規文摘,2025 早秋》,記近期更新,來源

虐貓案「一命一罰」翻盤

  • 1/14 謝水森殺貓案二審

    高等法院 114 年上易字 2029,計程車司機謝水森殺死 7 貓,一審採「一貓一罰」計 6 罪,判 3 年 6 個月 + 35 萬; 二審卻逆轉,改認「接續犯」只判 7 個月 + 20 萬,讓許多愛貓人忿忿不平。

    此案可以跟趙育慶虐貓案(5 貓 5 罪判 9 年)一起看,共同點是以「接續犯」辯護,法院皆不採,且強調貓隻生命主體,侵害個別獨立法益,以下擷圖兩案論罪部分:

    一審主張可說相同,然而最終翻盤,外在差異是:

    • 發生時間不同,趙 112 年 5~8 月,謝 114 年 2/27
    • 趙案動機和手法明顯更殘虐
    • 謝案貓隻死亡時間比較不明確(應該都在同一天)

    如果兩案都成立「一命一罰」,那麼在殺害案件能這樣解釋的信心就很高,不過現在看來完全打消。

    我個人是接受一隻一罰,因為承認動保法有意保護生命法益,但法條確實有矛盾之處,像是「致複數動物死亡,情節重大」就已經把命數包進去,那自然不是一命一罰。

法院看蟑螂

  • 1/30 新竹地院 114 年易字 266(妨害名譽)

    網路發文批評動緊小組 (ARTT)、許星星等「動保蟑螂」,被另一人(非前述兩者)告誹謗、公然侮辱,結果部分無罪,部分被判 36 日(可上訴),摘要與延伸可參考被告事後貼文

    看點是:

    • 批評動緊和許星星的部分無罪,理由之一是引用資深媒體人張沂卉貼文(應該是 2023 那篇黑名單,後來自刪),已經算是有「充分查證」! 那篇列出來的蟑螂可不少啊。
    • 動緊部分,法院明確列舉 106、107 年、臉書、蘋果日報等證據,認為確實有假借名義募款、帳目瑕疵、承諾未履等狀況,可說是很具體的認證。

妨害公務

  • 1/29 嘉義地院 114 年嘉簡字 1611

    就是觀音要她餵、動手推公務員、有影片上新聞的那個。

    愛媽阻礙浪犬管制一向難以對付,讚嘆嘉畜所,又成立一件珍貴判決。

廢清法

  • 11/7 臺北高等行政法院 114 年簡字 140

    在防火巷和車子旁餵貓,罰 1200,不服上訴,被駁回。

    看點是:

    • 違規行為不一定要是「廢棄物」,只要是「物」即可
    • 「私有土地」或「私人防火巷」也可以罰,是開放的就行
    • 上訴稱「飼料仍有利用價值」、「主觀上無拋棄故意」所以不能用廢清法,通通駁回

過失傷害

  • 12/18 臺南地院 114 年易字 1938

    狗咬單車騎士,明顯有圈養,但老人自認「狗是我在餵養,但不是我的狗,是流浪狗生的小狗。因為那隻狗之前有攻擊過附近路過陌生人,所以我用鐵網把農地圍起來」。

    就當他是立意良善吧,又一個沒意識到自己正在飼養的例子。
    勸世平安,不要餵才是最好的作法。

毀損(不成立)

  • 9/30 新北地院 114 年聲自字 92

    湯城園區管委會,請清潔人員或自行動手,清除住戶自費建的貓屋、貓窩,結果不起訴;原告不服提訴也被駁回。

    看理由應該是管委會有先公告不認同公共空間養貓,住戶卻不經申請亂搞,在這種狀況下清除,不認為有毀損犯意。

餵食類,厚痟人

  • 12/18 高院高雄分院 114 年上易字 319(刑法「妨害自由」)

    餵狗夫妻認為餵養的 3 隻狗被抓走,其中 1 隻未歸,憤而對(疑似)通報人住家丟雞蛋,半夜也丟,時間長達 5 個月,記錄到 27 次。

    一審判兩人 5 個月、2 個月,檢察官還上訴追認「共同正犯」把 2 個月的升級為 3 個月。

    看點是餵食者的無理,根本掌握不了自己狗的狀況,出事不好好解決,上了公堂還態度惡劣。

  • 此外還有互告傷害,證據卻顯示愛媽先動手的例子(最後互相撤告);還有一樓愛媽恐嚇四樓住戶(義舉:錄影蒐證、清飼料)被判 20 天,檢方有嘗試加算愛媽公然侮辱但沒過,就不細列了。

反餵食不利 3 案

  • 1/12 南投地院 115 年投簡字 12(毀損)

    等垃圾車時把貓飼料 + 10 個飼料碗丟進垃圾車,成立毀損,判 15 日。

    諸君,宣揚反餵食,就該努力讓大家全身而退,只顧高呼「罰不到」過度簡化是不負責任的。
    前述湯城園區例子,就是一個可行方式。

  • 10/23 臺中地院 114 年交易字 735(過失傷害,不成立)

    題目是餵餵不算飼主,請作文

    狗追車造成摔車骨折,不能說不嚴重。
    但告訴人證述不一,也無法指認狗個體,可能造成難以定罪。

    被告承認有養兩犬,也有餵流浪狗十幾隻,結果卻是「無罪」,且判決書明確說:

    被告縱有餵養流浪狗,為僅係避免食物浪費而單純餵養流浪犬或出於愛心之行為,並非義務,也不因此而負有動物保護法第5條第2項所定之飼主照顧義務,
  • 2025 年初報導的一件「私繁」行政訴訟

    台南張男餵食懷孕浪犬「小黑」產下 10 犬,被檢舉私繁,農業局認定張男有管領行為,即為飼主,依動保法罰鍰 2 萬 5; 後張男提行政訴訟,調解後「撤銷原處分」。

    報導: 餵流浪狗挨罰2.5萬 行政法院法官親自調解成功 │ TVBS新聞網

    承審法官了解後,因法官也具有保護動物的意識,加上機關對飼主的解釋有模糊空間,小黑真正住哪裡也不明確,所以主動讓張男與農業局調解

    那些主張動保法「恢復正常使用」就能讓行政機關「餵食=飼主」簡單執法的,請不要逃避法院解釋的實存困境。