[{"content":"做動漫週邊圖鑑的時候遇到一個小麻煩：很多商品的官方圖片是一整排角色的合照，要在圖鑑裡只顯示其中一個角色，就得替每張圖片記下裁切範圍。一開始是用小畫家看座標再手動換算成百分比，做了幾張就受不了，於是寫了這個工具。\n👉 網址：https://www.miwa23333.xyz/image-crop-preview/\n使用方式 Upload：選擇一張本機圖片。圖片只會在你的瀏覽器裡處理，不會上傳到任何伺服器。 Coordinates：在圖片上拖拉出想要的範圍，右側會即時顯示兩種格式的座標，各有一個 Copy 按鈕： Normalized %：x1, y1, x2, y2，以圖片寬高的百分比表示左上角與右下角，保留兩位小數。這種格式不受圖片實際尺寸影響，換成不同解析度的同一張圖也能用。 Pixels：x, y, width, height，實際像素座標。 Preview：下方會顯示裁切後的預覽。 裁切框沒有固定長寬比，可以自由拖拉，也可以在圖片上重新框選。\n技術小記 整個工具就是一個 HTML 檔，用 Cropper.js 處理拖拉與座標計算，百分比座標是把 Cropper 回傳的像素值除以圖片的原始寬高再乘上 100。原始碼在 GitHub。\n雖然是為了圖鑑做的，但任何需要「量出圖片某個區域座標」的情境都能用，例如替 CSS 的 object-position、clip-path 或圖片切割程式準備參數。\n","permalink":"https://www.miwa23333.xyz/posts/image-crop-preview/","summary":"\u003cp\u003e做\u003ca href=\"/posts/acg-goods/\"\u003e動漫週邊圖鑑\u003c/a\u003e的時候遇到一個小麻煩：很多商品的官方圖片是一整排角色的合照，要在圖鑑裡只顯示其中一個角色，就得替每張圖片記下裁切範圍。一開始是用小畫家看座標再手動換算成百分比，做了幾張就受不了，於是寫了這個工具。\u003c/p\u003e\n\u003cp\u003e👉 網址：\u003ca href=\"/image-crop-preview/\"\u003ehttps://www.miwa23333.xyz/image-crop-preview/\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"使用方式\"\u003e使用方式\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eUpload\u003c/strong\u003e：選擇一張本機圖片。圖片只會在你的瀏覽器裡處理，不會上傳到任何伺服器。\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCoordinates\u003c/strong\u003e：在圖片上拖拉出想要的範圍，右側會即時顯示兩種格式的座標，各有一個 Copy 按鈕：\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eNormalized %\u003c/strong\u003e：\u003ccode\u003ex1, y1, x2, y2\u003c/code\u003e，以圖片寬高的百分比表示左上角與右下角，保留兩位小數。這種格式不受圖片實際尺寸影響，換成不同解析度的同一張圖也能用。\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePixels\u003c/strong\u003e：\u003ccode\u003ex, y, width, height\u003c/code\u003e，實際像素座標。\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003ePreview\u003c/strong\u003e：下方會顯示裁切後的預覽。\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e裁切框沒有固定長寬比，可以自由拖拉，也可以在圖片上重新框選。\u003c/p\u003e","title":"圖片裁切座標工具：拖拉選取範圍，直接取得百分比與像素座標"},{"content":"收週邊的人大概都有同樣的困擾：同一個系列出了好幾波，到底哪些已經有了、哪些還沒收，光靠記憶很容易漏。動漫週邊圖鑑就是為了解決這個問題做的。\n👉 網址：https://www.miwa23333.xyz/acg-goods/\n收錄了什麼 目前收錄兩個系列，共七百多件商品，每一件都有日文原名、中文名稱、商品圖片和作品標籤：\n系列 廠商 說明 JS 趴娃（のるキャラマスコット） Jump Shop 趴在物品上的小吊飾造型 抬頭娃 MegaHouse 抬頭往上看的小公仔系列 作品涵蓋《排球少年》、《鬼滅之刃》、《咒術迴戰》、《航海王》、《火影忍者》、《坂本日常》、《銀魂》、《我的英雄學院》、《鏈鋸人》、《藍色監獄》、《怪獸 8 號》等，其中排球少年的品項最多。\n主要功能 依作品與系列篩選 頁面上方有「作品篩選」和「類別篩選」兩個下拉選單，可以只看某部作品（例如《排球少年》）或某個類別（趴娃或抬頭娃），兩種條件可以同時使用。商品會依作品分組顯示。點擊商品卡片會放大顯示所有圖片和標籤。\n標記已擁有 在商品卡片上按一下就能標記為「已擁有」，卡片會改變樣式。標記結果存在你的瀏覽器裡（localStorage），不需要註冊帳號。如果想重來，右上角的「清除紀錄」會把所有標記清掉。\n製作進度表 按下「製作進度表」，網站會把目前篩選範圍內的商品依作品分組，畫成一張圖片，已擁有的品項會標示出來，並顯示收藏比例。畫好之後會先跳出預覽，確認後再下載，方便貼到社群或傳給同好比對。\n技術小記 跟我其他的工具一樣，這是純前端的靜態網站。商品資料用 Protocol Buffers 的文字格式存放，圖片存在 GitHub 上。有些商品官方圖是一整張多個角色的合照，所以每張圖片都能附帶一組裁切範圍（以百分比表示的左上與右下座標），前端會用 canvas 只顯示對應的那一塊；這組座標就是用我另一個小工具圖片裁切座標工具產生的。原始碼在 GitHub。\n如果你也在收這兩個系列，歡迎試用看看。想要加入其他系列或發現資料有誤，可以透過 Contact Us 告訴我。\n","permalink":"https://www.miwa23333.xyz/posts/acg-goods/","summary":"\u003cp\u003e收週邊的人大概都有同樣的困擾：同一個系列出了好幾波，到底哪些已經有了、哪些還沒收，光靠記憶很容易漏。\u003ca href=\"/acg-goods/\"\u003e動漫週邊圖鑑\u003c/a\u003e就是為了解決這個問題做的。\u003c/p\u003e\n\u003cp\u003e👉 網址：\u003ca href=\"/acg-goods/\"\u003ehttps://www.miwa23333.xyz/acg-goods/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"動漫週邊圖鑑首頁，商品依作品分組顯示\" loading=\"lazy\" src=\"/images/acg-goods-screenshot.png\"\u003e\u003c/p\u003e\n\u003ch2 id=\"收錄了什麼\"\u003e收錄了什麼\u003c/h2\u003e\n\u003cp\u003e目前收錄兩個系列，共七百多件商品，每一件都有日文原名、中文名稱、商品圖片和作品標籤：\u003c/p\u003e","title":"動漫週邊圖鑑：追蹤 Jump Shop 與 MegaHouse 週邊的收藏進度"},{"content":"最近看動畫的時候，常常看到那種「咦？這是真實圖片吧？」的畫面。角色還是動畫風格，但背景卻是現實的街景、車站或風景，或是出現真實的物件，很有趣。這篇就想整理幾部最近有用到真實影像的動畫，看看他們怎麼把現實素材融進虛構世界裡。\n敗北女角太多了！ 敗北女角太多了！的第 1 個 ED 就使用真實影像當作背景。\n八奈見杏菜在跑：\n敗北女角太多了！ [1] 22:43\n跑到像是車站的地方，還有真人：\n敗北女角太多了！ [1] 22:46\n第 6 集大家去燒鹽檸檬新城的奶奶家接燒鹽回來。\n這應該是途中經過的道路休息站，鍋子看起來很真實：\n敗北女角太多了！ [6] 16:23\n月之木古都手上拿的是在道の駅 もっくる新城販售的鹿肉咖哩。\n道の駅 もっくる新城 売店上的照片：\n道の駅 もっくる新城 Google 地圖\n第 8 集又到另一個路邊休息站，佳樹在餵兄長大人吃東西：\n敗北女角太多了！ [8] 15:48\n地點在道の駅 とよはし。\n道の駅 とよはし Google 地圖\n吃的大概是 GELATO SANTA 的冰淇淋：\nView this post on Instagram ジェラートサンタ 道の駅とよはし店 Google 地圖\n膽大黨 經費火鍋：\n膽大黨 第二季 [17] 02:52\n有點逼真的文字燒：\n膽大黨 第二季 [17] 21:21\n孤獨搖滾！ 結束バンド的成員們為了留下美好的夏天回憶來到江之島。\n買了章魚仙貝來吃：\n孤獨搖滾！ [9] 12:05\n孤獨搖滾！ [9] 12:08\n1 噸高壓：\n孤獨搖滾！ [9] 12:11\n動畫製片人（アニメーションプロデューサー）梅原翔太表示捕捉到了章魚仙貝片段製作的瞬間。\nぼっち・ざ・ろっく９話、たこせんカットの作り方の瞬間をおさえた pic.twitter.com/ilStbCjqbQ\n\u0026mdash; 梅原翔太 (@kafunsyokougun) December 6, 2022 章魚仙貝是在あさひ本店購買的：\n孤獨搖滾！ [9] 11:58\n江の島名物「丸焼きたこせんべい」のあさひ本店｜公式サイト上的照片：\nあさひ本店 Google 地圖\n無神世界的神明活動 御靈大人創造的神之道具：\n無神世界的神明活動 [4] 2:35\nKamisama 300：\n網路上有人說收割機的原型是這個自脱型コンバイン フロンティアファイター HFG325：\n小市民系列 小市民系列的 ED 也使用真實背景。\n小佐内搭公車：\n小市民系列 [1] 21:53\n蛋糕是 Princess Branche Pâtisserie KURA 的：\n小市民系列 [1] 22:04\nPrincess Branche Pâtisserie KURA Google 地圖\n小佐内站在一家叫 Alice 的店外：\n小市民系列 [1] 22:10\n現實中的店其實叫 AND-LADY。\nGoogle 地圖上的評論中的照片：\n網路上的人分享的 Instagram Reel：\nView this post on Instagram AND-LADY Google 地圖\n小佐內看著你：\n小市民系列 [1] 22:58\n光逝去的夏天 雞胸肉：\n光逝去的夏天 第 2 集： 疑心 -07:04 第 2 集的製作助理（制作進行）土屋晶治表示雞胸肉做成唐揚雞後，由工作人員美味地享用了。\nご視聴ありがとうございました！\n2話の制作進行を担当させて頂きました！\n大迫さんを中心的に最高なカットを沢山作ることが出来て、関わって頂いた方には感謝しきれません！\n個人的に実写撮影が初めてでしたので楽しく撮影出来ました！\n※鶏肉のカットは唐揚げにしてスタッフで美味しく頂きました！ https://t.co/FRvrDXqfeD pic.twitter.com/WNhY1H0Hrk\n\u0026mdash; 土屋晶治 (@tsuchi31478044) July 12, 2025 ED 中他們在搭很真實的列車：\n光逝去的夏天 第 2 集： 疑心 -01:08 ED 的牛：\n光逝去的夏天 第 2 集： 疑心 -00:59 第 12 集也搭上了真實列車：\n光逝去的夏天 第 12 集： 歸屬 -13:30 真實的鏡子：\n光逝去的夏天 第 12 集： 歸屬 -12:18 把圖片給 Google AI Mode ，說列車是JR 東海キハ 25 形気動車：\n結語 看下來會發現，用真實影像的動畫真的越來越多，不論是背景、物件，還是整段場景。這或許不只是節省製作成本，也是一種新的表達方式。\n","permalink":"https://www.miwa23333.xyz/posts/anime-realistic/","summary":"\u003cp\u003e最近看動畫的時候，常常看到那種「咦？這是真實圖片吧？」的畫面。角色還是動畫風格，但背景卻是現實的街景、車站或風景，或是出現真實的物件，很有趣。這篇就想整理幾部最近有用到真實影像的動畫，看看他們怎麼把現實素材融進虛構世界裡。\u003c/p\u003e","title":"動畫中的超真實畫面"},{"content":"對動漫有興趣的人去日本玩的時候，可以關注 Baseyard Tokyo。它是 PAL CLOSET 旗下的動漫快閃店據點，會輪流舉辦不同作品的期間限定展出與販售，出發前先看一下官網，說不定剛好有喜歡的作品在做活動。\n店舖位置 目前 Baseyard Tokyo 在日本總共有八家店（詳細位置可以看官網的 Access 頁面），分別在：\n北海道札幌 東京原宿（有兩間） 東京新宿 東京河原町 大阪梅田 大阪阿倍野 廣島市 排球少年快閃店 之前去東京的時候剛好有排球少年快閃店，佈置得蠻精緻的，從門口、地板到旗幟都是作品的元素。\n如果也想順便把週邊收藏整理起來，可以試試我做的動漫週邊圖鑑，裡面收錄了 Jump Shop 和 MegaHouse 的商品，可以標記已經入手的品項。\n","permalink":"https://www.miwa23333.xyz/posts/baseyard-tokyo/","summary":"\u003cp\u003e對動漫有興趣的人去日本玩的時候，可以關注 \u003ca href=\"https://www.palcloset.jp/shared/pc_pal/event/baseyard\"\u003eBaseyard Tokyo\u003c/a\u003e。它是 PAL CLOSET 旗下的動漫快閃店據點，會輪流舉辦不同作品的期間限定展出與販售，出發前先看一下官網，說不定剛好有喜歡的作品在做活動。\u003c/p\u003e","title":"Baseyard Tokyo"},{"content":"Feel free to reach out.\n📧 For inquiries, questions, or collaborations:\n[dodorama0519@gmail.com]\nTo see my projects and contributions:\ngithub.com/miwa23333\n歡迎透過以下方式與我聯繫\n📧 若有任何問題、合作邀約或意見回饋：\n[dodorama0519@gmail.com]\n查看我的專案或程式碼貢獻：\ngithub.com/miwa23333\n","permalink":"https://www.miwa23333.xyz/contact-us/","summary":"\u003cp\u003eFeel free to reach out.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e📧 For inquiries, questions, or collaborations:\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e[dodorama0519@gmail.com]\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eTo see my projects and contributions:\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/miwa23333\"\u003egithub.com/miwa23333\u003c/a\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cp\u003e歡迎透過以下方式與我聯繫\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e📧 若有任何問題、合作邀約或意見回饋：\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e[dodorama0519@gmail.com]\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e查看我的專案或程式碼貢獻：\u003c/strong\u003e\u003c/p\u003e","title":"Contact Us"},{"content":"這個網站的所有頁面：\n圖片裁切座標工具：拖拉選取範圍，直接取得百分比與像素座標 動漫週邊圖鑑：追蹤 Jump Shop 與 MegaHouse 週邊的收藏進度 動畫中的超真實畫面 Baseyard Tokyo Contact Us Sitemap Privacy Terms of Service About 動漫中文填字遊戲：用動畫作品名稱玩填字 日本萬代一番賞 Google 地圖製作 近年的日劇標題是不是越來越長？ Dodorama：整理日劇資訊與觀劇清單的小網站 透過 SSH 將遠端主機作為 Proxy 瀏覽網頁 Cannot Start Chrome Due to Singletonlock 沒有公開 IP？用 SSH 遠端轉發讓外部存取你的本機服務 搜尋 自製工具（同一個網域下的獨立頁面）：\nDodorama 動漫中文填字遊戲 動漫週邊圖鑑 圖片裁切座標工具 ","permalink":"https://www.miwa23333.xyz/sitemappa/","summary":"\u003cp\u003e這個網站的所有頁面：\u003c/p\u003e\n\u003cul\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/image-crop-preview/\"\u003e圖片裁切座標工具：拖拉選取範圍，直接取得百分比與像素座標\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/acg-goods/\"\u003e動漫週邊圖鑑：追蹤 Jump Shop 與 MegaHouse 週邊的收藏進度\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/anime-realistic/\"\u003e動畫中的超真實畫面\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/baseyard-tokyo/\"\u003eBaseyard Tokyo\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/contact-us/\"\u003eContact Us\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/sitemappa/\"\u003eSitemap\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/privacy/\"\u003ePrivacy\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/tos/\"\u003eTerms of Service\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/about/\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/animanga-crossword/\"\u003e動漫中文填字遊戲：用動畫作品名稱玩填字\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/ichiban-kuji-google-map/\"\u003e日本萬代一番賞 Google 地圖製作\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/dorama-title-abbreviation/\"\u003e近年的日劇標題是不是越來越長？\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/dodorama/\"\u003eDodorama：整理日劇資訊與觀劇清單的小網站\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/set-remote-host-as-proxy-for-chrome-through-ssh/\"\u003e透過 SSH 將遠端主機作為 Proxy 瀏覽網頁\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/cannot-start-chrome-due-to-singletonlock/\"\u003eCannot Start Chrome Due to Singletonlock\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/posts/ssh-remote-port-forwarding/\"\u003e沒有公開 IP？用 SSH 遠端轉發讓外部存取你的本機服務\u003c/a\u003e\u003c/li\u003e\n  \n  \u003cli\u003e\u003ca href=\"/search/\"\u003e搜尋\u003c/a\u003e\u003c/li\u003e\n  \n\u003c/ul\u003e\n\n\u003cp\u003e自製工具（同一個網域下的獨立頁面）：\u003c/p\u003e","title":"Sitemap"},{"content":"Welcome to miwa23333 (\u0026ldquo;we,\u0026rdquo; \u0026ldquo;us,\u0026rdquo; or \u0026ldquo;our Blog\u0026rdquo;). We are committed to protecting your personal information and your right to privacy. This Privacy Policy aims to explain what information we collect, how we use it, and what rights you have in relation to it.\nThis policy applies to all information collected through our website (the \u0026ldquo;Blog\u0026rdquo;) and/or any related services.\nInformation We Collect\nWe collect information in the following ways:\nInformation Automatically Collected: Like most websites, when you visit and use the Blog, we automatically collect certain non-personal information. This information does not reveal your specific identity but may include device and usage information, such as your IP address, browser type, operating system, pages viewed, and dates/times of visits. How We Use Your Information\nWe use the information we collect to:\nOperate and maintain the Blog. Analyze website traffic and user behavior to improve the Blog and user experience. Prevent spam and protect the security of the Blog. Display advertisements to support the operation of the Blog. Analytics and Advertising\nGoogle Analytics (Web Analytics): We use Google Analytics, a web analytics service provided by Google, Inc. Google Analytics uses cookies to help us analyze how users use the Blog.\nGoogle AdSense (Third-Party Advertising): We use Google AdSense to display ads on our Blog.\nThird-party vendors, including Google, use cookies (such as the Google advertising cookie) to serve ads based on a user\u0026rsquo;s prior visits to our Blog or other websites. Google\u0026rsquo;s use of advertising cookies enables it and its partners to serve personalized ads to you based on your visit to our Blog and/or other sites on the Internet. 歡迎來到 miwa23333（「我們」或「本部落格」）。我們致力於保護您的個人資訊和您的隱私權。本隱私權政策旨在說明我們收集哪些資訊、我們如何使用這些資訊，以及您對這些資訊擁有哪些權利。\n本政策適用於透過我們的網站（「本部落格」）及/或任何相關服務收集的所有資訊。\n我們收集的資訊\n我們透過以下方式收集資訊：\n自動收集的資訊： 與大多數網站一樣，當您訪問和使用本部落格時，我們會自動收集某些非個人資訊。這些資訊不會揭露您的具體身份，但可能包括設備和使用資訊，例如您的 IP 位址、瀏覽器類型、作業系統、瀏覽的頁面以及訪問日期/時間。 我們如何使用您的資訊\n我們將收集到的資訊用於：\n營運和維護本部落格。 分析網站流量和用戶行為，以改善本部落格和用戶體驗。 防止垃圾訊息並保護本部落格的安全。 顯示廣告以支持本部落格的營運。 網站分析與廣告\nGoogle Analytics (網站分析)： 我們使用由 Google, Inc. 提供的網頁分析服務 Google Analytics。Google Analytics 使用 Cookie 來幫助我們分析用戶如何使用本部落格。\nGoogle AdSense (第三方廣告)： 我們使用 Google AdSense 在本部落格上顯示廣告。\n包括 Google 在內的第三方供應商會使用 Cookie（例如 Google 廣告 Cookie）來根據用戶先前對我們部落格或其他網站的訪問情況來放送廣告。 Google 對廣告 Cookie 的使用，使其及其合作夥伴能夠根據您對本部落格及/或網際網路上其他網站的訪問，向您放送個人化廣告。 ","permalink":"https://www.miwa23333.xyz/privacy/","summary":"\u003cp\u003eWelcome to miwa23333 (\u0026ldquo;we,\u0026rdquo; \u0026ldquo;us,\u0026rdquo; or \u0026ldquo;our Blog\u0026rdquo;). We are committed to protecting your personal information and your right to privacy. This Privacy Policy aims to explain what information we collect, how we use it, and what rights you have in relation to it.\u003c/p\u003e\n\u003cp\u003eThis policy applies to all information collected through our website (the \u0026ldquo;Blog\u0026rdquo;) and/or any related services.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eInformation We Collect\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eWe collect information in the following ways:\u003c/p\u003e","title":"Privacy"},{"content":"Use of Our Content All content on this Blog, including text, images, and logos, is the property of miwa23333 and is protected by copyright law.\nYou may not copy, reproduce, republish, or distribute any content from this Blog without our express written permission. You may share links to our content, but you may not claim it as your own.\nDisclaimers The content on this Blog is provided \u0026ldquo;AS IS\u0026rdquo; and for informational purposes only. It does not constitute professional [medical, legal, financial, etc] advice.\nYour use of the Blog and reliance on any information is at your own risk. We make no warranties about the accuracy or completeness of the content.\nThird-Party Links This Blog may contain links to other websites. We are not responsible for the content or practices of these third-party sites.\n網站內容使用 本部落格（Blog）上的所有內容，包括但不限於文字、圖片和標誌，均為 miwa23333 的財產，並受版權法保護。\n未經我們明確的書面許可，您不得複製、重製、轉載或散佈本部落格的任何內容。您可以分享我們內容的連結，但不得聲稱其為您所有。\n免責聲明 本部落格（Blog）上的內容均「依現狀」提供，且僅供參考之用。本站內容不構成專業的 [醫療、法律、財務等] 建議。\n第三方連結 本部落格可能包含指向其他網站的連結。我們對這些第三方網站的內容或做法概不負責。\n","permalink":"https://www.miwa23333.xyz/tos/","summary":"\u003ch2 id=\"use-of-our-content\"\u003eUse of Our Content\u003c/h2\u003e\n\u003cp\u003eAll content on this Blog, including text, images, and logos, is the property of miwa23333 and is protected by copyright law.\u003c/p\u003e\n\u003cp\u003eYou may not copy, reproduce, republish, or distribute any content from this Blog without our express written permission. You may share links to our content, but you may not claim it as your own.\u003c/p\u003e\n\u003ch2 id=\"disclaimers\"\u003eDisclaimers\u003c/h2\u003e\n\u003cp\u003eThe content on this Blog is provided \u0026ldquo;AS IS\u0026rdquo; and for informational purposes only. It does not constitute professional [medical, legal, financial, etc] advice.\u003c/p\u003e","title":"Terms of Service"},{"content":"我是 miwa23333，一位開發者，也是個日劇和動畫愛好者。這個網站是我分享興趣、專案以及一些學習心得的空間。\nWelcome to my corner of the internet! I\u0026rsquo;m miwa23333, a developer and enthusiast of Japanese dramas and anime. This website is a space where I share my passions, projects, and a few things I\u0026rsquo;ve learned along the way.\n網站內容 這個部落格融合了我幾個興趣：日劇、動漫，以及一些工程上的小發現。你會在這裡看到以下的主題：\n日劇觀察：身為日劇迷，我喜歡挖掘一些有趣的趨勢，例如近年日劇片名為什麼越來越長，也為同好們做了整理日劇資訊的工具。 動畫與週邊：像是動畫裡出現的真實場景與物件、去日本時值得逛的週邊店，以及怎麼把一番賞販售店家標到 Google 地圖上。 技術分享：研究並記錄實用的技巧，主題涵蓋 SSH 遠端連線的應用，以及解決日常遇到的技術問題。 我做的小工具 這些工具都是純前端的靜態網頁，資料存在你自己的瀏覽器裡，不需要註冊帳號。\nDodorama：整理與追蹤日劇資訊的小網站，可以查每年的熱門日劇、標記自己看過的作品，並產生觀劇清單圖片。介紹文章 動漫中文填字遊戲：用動畫作品的中文名稱做成的填字遊戲，每次重新產生都不一樣。介紹文章 動漫週邊圖鑑：收錄 Jump Shop 與 MegaHouse 的動漫週邊商品，可以標記已擁有的品項並產生收藏進度表。介紹文章 圖片裁切座標工具：拖拉選取圖片範圍，直接取得百分比或像素座標。介紹文章 原始碼都放在 GitHub。\n感謝你的來訪，希望你能在這裡找到感興趣或有幫助的內容。有任何想法歡迎透過 Contact Us 告訴我。\n","permalink":"https://www.miwa23333.xyz/about/","summary":"\u003cp\u003e我是 miwa23333，一位開發者，也是個日劇和動畫愛好者。這個網站是我分享興趣、專案以及一些學習心得的空間。\u003c/p\u003e\n\u003cp\u003eWelcome to my corner of the internet! I\u0026rsquo;m miwa23333, a developer and enthusiast of Japanese dramas and anime. This website is a space where I share my passions, projects, and a few things I\u0026rsquo;ve learned along the way.\u003c/p\u003e","title":"About"},{"content":"做了一個中文的動漫填字遊戲，有興趣的人可以去玩看看！\n👉 網址：https://www.miwa23333.xyz/animanga-crossword/\n怎麼玩 畫面中間是填字盤面，下方是「可用詞庫」，裡面列出這一局會用到的動畫作品名稱，全部都是台灣常見的中文譯名，例如《葬送的芙莉蓮》、《孤獨搖滾》、《膽大黨》、《我推的孩子》、《迷宮飯》這些近幾年的作品。\n玩法跟一般的填字遊戲一樣：看格子的位置和長度，從詞庫裡找出對應的作品名稱填進去。橫向和直向的詞會在交叉的格子共用同一個字，所以填對一個詞之後，交叉的詞就會多一個提示。\n點一下格子就能開始輸入，同一個詞裡可以直接連續打字，游標會自動往下一格移動。中文輸入法選字的過程也有處理過，不會打到一半跳格。\n按鈕功能 檢查答案：把填錯的格子標示出來，填對的保留。 一字提示：隨機幫你填好一個還沒填對的格子。 顯示答案：直接把整個盤面填完，適合想看解答的時候。 重新產生：用同一份詞庫重新排一個新盤面，每次的排列和用到的詞都不一樣。 背後怎麼產生盤面 盤面是 18 × 18 的格子，每次產生時會先把詞庫洗牌，隨機挑一個詞放在中間當起點，接著依長度由長到短，嘗試把其他詞放到能與已放的詞交叉的位置上。放不進去的詞會先擱著，多試幾輪之後還是放不下的就不會出現在這一局，但仍然會列在詞庫裡當干擾項。\n整個遊戲是純前端的靜態網頁，沒有後端，原始碼放在 GitHub。詞庫目前有四十多部作品，如果你有想加進去的作品，歡迎透過 Contact Us 告訴我。\n","permalink":"https://www.miwa23333.xyz/posts/animanga-crossword/","summary":"\u003cp\u003e做了一個中文的動漫填字遊戲，有興趣的人可以去玩看看！\u003c/p\u003e\n\u003cp\u003e👉 網址：\u003ca href=\"/animanga-crossword/\"\u003ehttps://www.miwa23333.xyz/animanga-crossword/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"animanga-crossword\" loading=\"lazy\" src=\"/images/animanga-crossword.png\"\u003e\u003c/p\u003e\n\u003ch2 id=\"怎麼玩\"\u003e怎麼玩\u003c/h2\u003e\n\u003cp\u003e畫面中間是填字盤面，下方是「可用詞庫」，裡面列出這一局會用到的動畫作品名稱，全部都是台灣常見的中文譯名，例如《葬送的芙莉蓮》、《孤獨搖滾》、《膽大黨》、《我推的孩子》、《迷宮飯》這些近幾年的作品。\u003c/p\u003e","title":"動漫中文填字遊戲：用動畫作品名稱玩填字"},{"content":"抽一番賞想必是許多人去日本玩的時候的其中一個樂趣，但有時候搶手的系列可能需要跑好幾家店才能找到，於是最近就想了個方法透過一番賞官網的資料快速在 Google Map 上標好有販賣的店家。\n照著以下教學做就可以生出特定一番賞系列及販賣地區下的 Google 地圖！\n1. 去官網看想要的商品 先去萬代一番賞官網看一下想要的一番賞\n點選網頁上方的 店舖搜尋 可以查詢一番賞商品在特定區域內哪些地方有販售\n2. 生成地圖資料檔案 這步會需要執行已寫好的程式向一番賞官網爬取資料。 為了方便大家執行，已經把程式都放在 Google Colab。\n1. 登入 Google 帳號並進入上面的 Colab 連結後先執行一次 Run all 2. 勾選想要的商品及欲查詢地區 3. 選擇完後再執行一次 Run all ，完成後點選綠色的下載鍵 3. 將生成的地圖資料上傳到 Google Map 開啟 Google My Maps 後點選建立新地圖。\n點選匯入，把前一步生成的檔案上傳即可完成 ✨✨✨\n不過有個小提醒，現在 Google Map 好像無法一次匯入超過 2000 個地點，所以有超過的話可能要分次進行。\n","permalink":"https://www.miwa23333.xyz/posts/ichiban-kuji-google-map/","summary":"\u003cp\u003e抽一番賞想必是許多人去日本玩的時候的其中一個樂趣，但有時候搶手的系列可能需要跑好幾家店才能找到，於是最近就想了個方法透過一番賞官網的資料快速在 Google Map 上標好有販賣的店家。\u003c/p\u003e","title":"日本萬代一番賞 Google 地圖製作"},{"content":"日劇片名與社群行銷 日劇《不適切にもほどがある！不適切にもほどがある！》（極度不妥）在第四集中提到一個有趣的現象：宣傳部門在決定節目名稱時，會希望片名能被縮寫成四個字，這樣更方便在社群媒體上使用 hashtag。\n戲劇當中也舉了同樣由 TBS 製作的 《恋はつづくよどこまでも》（戀愛可以持續到天長地久） 簡寫為《恋つづ》的例子。\n縮寫實例 如果你常在社群媒體上關注日劇宣傳，會發現這種手法很常見。以下是一些例子：\n月薪嬌妻：《逃げるは恥だが役に立つ》-\u0026gt; 《逃げ恥》 (中文也常常看到有人用《逃恥》稱呼) 繼母與女兒的藍調：《義母と娘のブルース》-\u0026gt; 《ぎぼむす》 我們愛情不正常：《私たちはどうかしている》-\u0026gt; 《わたどう》 名察小會計：《これは経費で落ちません!》-\u0026gt; 《これ経》 輪到你了：《あなたの番です》-\u0026gt; 《あなばん》 初戀那件大事：《初めて恋をした日に読む話》-\u0026gt; 《はじこい》 長片名趨勢分析 整理這些例子時，我不禁好奇：是不是近幾年的日劇名稱都特別長？於是我試著統計了每年日文片名超過十個字的日劇比例，並繪製成折線圖。\n從這張圖表可以清楚地觀察到兩個階段性的趨勢：\n1985-2000 年： 長片名比例較低，大多維持在 10% 到 20% 之間。當時的日劇片名多半簡短精煉。\n2000 年以後： 長片名比例顯著上升。特別是進入 2010 年代後，比例穩定維持在 35% 至 40% 的高點。這顯示長片名已成為日劇命名的常態。\n圖表印證了近年日劇片名有越來越長的趨勢。這可能與網路和社群媒體的興起有關，製作方偏好使用較長的片名來傳達劇情，以吸引觀眾並利於社群討論。因此，將長片名簡化成四個字的縮寫，便成為了兼顧行銷與傳播便利性的有效策略。\n","permalink":"https://www.miwa23333.xyz/posts/dorama-title-abbreviation/","summary":"\u003ch2 id=\"日劇片名與社群行銷\"\u003e日劇片名與社群行銷\u003c/h2\u003e\n\u003cp\u003e日劇\u003ca href=\"https://www.tbs.co.jp/futekisetsunimohodogaaru/\"\u003e《不適切にもほどがある！不適切にもほどがある！》（極度不妥）\u003c/a\u003e在第四集中提到一個有趣的現象：宣傳部門在決定節目名稱時，會希望片名能被縮寫成四個字，這樣更方便在社群媒體上使用 hashtag。\u003c/p\u003e\n\u003cp\u003e戲劇當中也舉了同樣由 TBS 製作的 \u003ca href=\"https://www.tbs.co.jp/koitsudu_tbs/\"\u003e《恋はつづくよどこまでも》（戀愛可以持續到天長地久）\u003c/a\u003e 簡寫為《恋つづ》的例子。\u003c/p\u003e\n\u003ch2 id=\"縮寫實例\"\u003e縮寫實例\u003c/h2\u003e\n\u003cp\u003e如果你常在社群媒體上關注日劇宣傳，會發現這種手法很常見。以下是一些例子：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e月薪嬌妻：\u003cstrong\u003e《逃げるは恥だが役に立つ》\u003c/strong\u003e-\u0026gt; \u003cstrong\u003e《逃げ恥》\u003c/strong\u003e (中文也常常看到有人用《逃恥》稱呼)\u003c/li\u003e\n\u003cli\u003e繼母與女兒的藍調：\u003cstrong\u003e《義母と娘のブルース》\u003c/strong\u003e-\u0026gt; \u003cstrong\u003e《ぎぼむす》\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e我們愛情不正常：\u003cstrong\u003e《私たちはどうかしている》\u003c/strong\u003e-\u0026gt; \u003cstrong\u003e《わたどう》\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e名察小會計：\u003cstrong\u003e《これは経費で落ちません!》\u003c/strong\u003e-\u0026gt; \u003cstrong\u003e《これ経》\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e輪到你了：\u003cstrong\u003e《あなたの番です》\u003c/strong\u003e-\u0026gt; \u003cstrong\u003e《あなばん》\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e初戀那件大事：\u003cstrong\u003e《初めて恋をした日に読む話》\u003c/strong\u003e-\u0026gt; \u003cstrong\u003e《はじこい》\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"長片名趨勢分析\"\u003e長片名趨勢分析\u003c/h2\u003e\n\u003cp\u003e整理這些例子時，我不禁好奇：是不是近幾年的日劇名稱都特別長？於是我試著統計了每年日文片名超過十個字的日劇比例，並繪製成折線圖。\u003c/p\u003e","title":"近年的日劇標題是不是越來越長？"},{"content":"Dodorama 是我做的一個整理日劇資訊的小網站。起因很單純：想查某一年有哪些熱門日劇的時候，總是要在好幾個網站之間跳來跳去，而且查完也沒有地方把「我看過哪些」好好記下來。於是就做了這個工具，讓查劇和整理觀劇清單都能在同一個頁面完成。\n👉 網址：https://www.miwa23333.xyz/dodorama/\n資料從哪裡來 網站裡的日劇資料是根據 dorama info 的日劇頁面點閱數整理的，目前收錄了七千多部作品，每一部都有中文劇名、日文劇名、播出年份和主演。除了完整資料庫之外，我也整理了幾份排行榜，可以在左上角的篩選選單切換資料集：\n資料集 內容 全部 完整的日劇資料庫 Netflix 目前在 Netflix 上架的日劇 每年 Top 5（2000 年前） 2000 年以前每年點閱數最高的五部 每年 Top 5（2000 年起） 2000 年之後每年點閱數最高的五部 Top 100 總榜 歷年總點閱數前一百名 主要功能 查劇：搜尋與年份篩選 在搜尋欄輸入劇名或主演名字就會即時過濾，中文劇名、日文劇名和主演都會比對。也可以設定起始與結束年份，只看某一段時間的作品。點擊卡片上的演員名字，會直接篩出這位演員主演過的所有日劇，找「這個演員還演過什麼」很方便。\n標記看過的日劇 點一下卡片就能標記為「看過」，標記結果會存在你的瀏覽器（localStorage）裡，不需要註冊帳號，下次打開網站還會在。\n產生觀劇清單圖片 標記完之後，按下「產生清單圖片」會把你看過的日劇依年份排成一張表格圖片，可以複製或下載下來分享。從圖片上就能一眼看出自己偏好哪個年代的日劇。\n匯出與匯入 CSV 如果你想用其他方式保存清單，可以把標記結果匯出成 CSV，欄位是「年份、中文劇名、日文劇名、主演、劇集 ID」。同一個格式的 CSV 也可以再匯入回來，匯入時會先顯示預覽，並讓你選擇要與現有標記合併還是整個覆蓋。\n解析檔案：把舊清單搬過來 很多人原本就用記事本或試算表記錄看過的日劇。「解析檔案」功能可以直接讀取文字檔，把每一行當成一個劇名，用模糊比對（編輯距離）在資料庫裡找出最接近的作品，然後開一個審核視窗讓你逐筆確認：\n完全符合的會直接標示「完全符合」 比對分數接近的會列出幾個候選讓你挑 找不到的可以手動搜尋指定，或選擇忽略 確認之後就會一次合併到你的標記裡。\n技術小記 Dodorama 是純前端的靜態網站，沒有後端伺服器。資料用 Protocol Buffers 的文字格式（textproto）存放，前端用 protobuf.js 解析；清單圖片是用 html2canvas 在瀏覽器裡把表格畫成圖片。原始碼在 GitHub。\n歡迎喜歡看日劇的朋友試用看看，有任何建議都可以透過 Contact Us 告訴我。\nChangelog 2025-07-07 上次分享了一個日劇整理小網站，很高興收到一些朋友的迴響！\n為了讓大家使用起來更方便，最近網站又更新了一些功能：\n現在你可以匯出觀看清單成 CSV 檔了！ 對於習慣用其他方式紀錄日劇觀看清單的朋友，網站也新增了檔案解析功能，可以嘗試把文字檔的內容匯入到網站中，讓你把舊資料輕鬆搬過來整理。 觀劇清單圖片現在不只會依照年份分類，還能讓你一目瞭然地看到自己所觀看日劇的年代分佈！ 是不是很想知道自己偏愛哪個年代的日劇呢？歡迎喜歡看日劇的朋友們再試用看看：Dodorama\n2025-07-01 最近做了一個整理日劇資訊的小網站，主要是想讓查劇變得簡單一點，也順便整理了幾份排行榜。\n網站裡的資料是根據 dorama info 的日劇頁面點閱數來的，有每年 Top 5，也有歷年總榜 Top 100。\n另外，也可以自動產生自己的觀看清單，方便分享，說不定也能找到聊得來的劇友！\n","permalink":"https://www.miwa23333.xyz/posts/dodorama/","summary":"\u003cp\u003e\u003ca href=\"/dodorama/\"\u003eDodorama\u003c/a\u003e 是我做的一個整理日劇資訊的小網站。起因很單純：想查某一年有哪些熱門日劇的時候，總是要在好幾個網站之間跳來跳去，而且查完也沒有地方把「我看過哪些」好好記下來。於是就做了這個工具，讓查劇和整理觀劇清單都能在同一個頁面完成。\u003c/p\u003e","title":"Dodorama：整理日劇資訊與觀劇清單的小網站"},{"content":"在某些情況下，我們可能需要透過遠端主機的網路來瀏覽網頁。例如有些學校的課程網站可能會限制學校的 IP。\n這時，一個常見且有效的方法就是利用 SSH（Secure Shell） 建立一個 SOCKS Proxy，然後讓你的 Chrome 瀏覽器透過這個 proxy 連線。\n這個方法特別適用於當你需要存取受地理限制的服務，或是想在一個較為安全的環境下進行網路活動時。\n步驟 1: 建立 SSH 代理 首先，你需要開啟終端機，並使用 ssh -D 指令來建立一個動態的 SOCKS proxy。\nssh -D 3636 user@remote_host_address -D 3636: 這部分的意思是在你的本地電腦上，開啟一個監聽在 port 3636 的 SOCKS 代理。你可以將 3636 替換成任何你喜歡的、未被佔用的 port number。\nuser@remote_host_address: 這裡請替換成你的遠端主機使用者名稱和 IP 位址。\n執行這個指令後，SSH 會建立一個加密的通道，所有傳輸到你本地 port 3636 的流量都會被加密並轉送到遠端主機。這時，你的終端機會保持在連線狀態，不要關閉它。\n步驟 2: 設定 Chrome 瀏覽器 接下來，我們需要告訴 Chrome 瀏覽器使用這個 SOCKS proxy。\n你可以在啟動 Chrome 時，在指令列中加入 \u0026ndash;proxy-server 參數。\nchromium --proxy-server=\u0026#34;socks://localhost:3636\u0026#34; chromium: 在某些作業系統（例如 Linux）上，Chrome 的執行檔名稱可能是 chromium。在 macOS 上可能需要使用 /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome 或其他啟動指令。\n--proxy-server=\u0026quot;socks://localhost:3636\u0026quot;: 這部分就是告訴 Chrome，將所有的流量都透過本地的 port3636 傳送到一個 SOCKS 代理伺服器。\n執行這個指令後，一個新的 Chrome 視窗就會開啟。現在，這個瀏覽器視窗中的所有網路流量都會經過你遠端主機的網路進行傳輸。\n小提醒：\n請確保你的 SSH 連線保持開啟，一旦你關閉了終端機視窗，proxy 也會隨之失效。\n這個方法只會影響透過這個特別啟動的 Chrome 視窗，並不會影響你電腦上其他的應用程式。\n","permalink":"https://www.miwa23333.xyz/posts/set-remote-host-as-proxy-for-chrome-through-ssh/","summary":"\u003cp\u003e在某些情況下，我們可能需要透過遠端主機的網路來瀏覽網頁。例如有些學校的課程網站可能會限制學校的 IP。\u003c/p\u003e\n\u003cp\u003e這時，一個常見且有效的方法就是利用 \u003cstrong\u003eSSH（Secure Shell）\u003c/strong\u003e 建立一個 \u003ca href=\"https://en.wikipedia.org/wiki/SOCKS\"\u003e\u003cstrong\u003eSOCKS Proxy\u003c/strong\u003e\u003c/a\u003e，然後讓你的 Chrome 瀏覽器透過這個 proxy 連線。\u003c/p\u003e","title":"透過 SSH 將遠端主機作為 Proxy 瀏覽網頁"},{"content":"某次打開電腦突然發現 Chromium 怎麼樣都打不開，用 terminal 執行後發現以下錯誤訊息：\nThe profile appears to be in use by another Chromium process (xxxxx)... Chromium has locked the profile so that it doesn\u0026#39;t get corrupted (完整的 error message 可以參考這裡)\n上網爬了一下發現把 .config/chromium/SingletonLock 刪掉就可以了。\n我們可以觀察，當我們把 chromium 打開的時候 .config/chromium/ 底下會多三個檔案：\nSingletonCookie SingletonLock SingletonSocket chromium source code 中的 process_singleton_posix.cc\n裡面講到 Chromium 會用這三個檔案來管理不同 process 間 profile 的 syncronization\n我們去反查上面出現的錯誤訊息的 ID 會發現是 IDS_PROFILE_IN_USE_POSIX 並且在 DisplayProfileInUseError 中被使用，代表下面這個 if 的條件是成立的\nif (hostname != net::GetHostName() \u0026amp;\u0026amp; !IsChromeProcess(pid)) { // Locked by process on another host. If the user selected to unlock // the profile, try to continue; otherwise quit. if (DisplayProfileInUseError(lock_path_, hostname, pid)) { UnlinkPath(lock_path_); internal::SendRemoteProcessInteractionResultHistogram(PROFILE_UNLOCKED); return PROCESS_NONE; } return PROFILE_IN_USE; } 推測應該是因為前一次不正常的關機使得 SingletonLock 沒有被正確的刪除，而且下一次開機時 PID 也已經找不到對應的 process 或是變成非 Chrome Process。\n但另一個問題是為什麼 hostname != net::GetHostName() 會成立\n剛好這台使用的電腦沒有設置 hostname (/etc/hostname 不存在)，查一下 hostname 的規則 會發現\na transient hostname may be set during runtime, for example based on information in a DHCP lease 因此這台電腦的 hostname 會根據 DHCP 拿到的 lease 而改變，可能剛好前一次拿到的 IP 跟發生問題的時候拿到的 IP 不一樣，導致 hostname 也不一樣，也剛好解釋了這次的行為。\nReference https://stackoverflow.com/questions/38894321/chromium-browser-singleton-bug-caused-by-power-failure ","permalink":"https://www.miwa23333.xyz/posts/cannot-start-chrome-due-to-singletonlock/","summary":"\u003cp\u003e某次打開電腦突然發現 Chromium 怎麼樣都打不開，用 terminal 執行後發現以下錯誤訊息：\u003c/p\u003e\n\u003cpre tabindex=\"0\"\u003e\u003ccode\u003eThe profile appears to be in use by another Chromium process (xxxxx)...\nChromium has locked the profile so that it doesn\u0026#39;t get corrupted\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e(完整的 error message 可以參考\u003ca href=\"https://chromium.googlesource.com/chromium/src/\u0026#43;/master/chrome/app/chromium_strings.grd#1359\"\u003e這裡\u003c/a\u003e)\u003c/p\u003e\n\u003cp\u003e上網爬了一下發現把 \u003ccode\u003e.config/chromium/SingletonLock\u003c/code\u003e 刪掉就可以了。\u003c/p\u003e","title":"Cannot Start Chrome Due to Singletonlock"},{"content":"有時候，我們會在本機電腦上啟動一個 HTTP 伺服器，例如進行測試或開發。但如果你沒有公開 IP，外部使用者就無法直接存取你的伺服器。\n不過，如果你手上有一台具有公開 IP 的 SSH 伺服器，就可以利用 SSH Remote Port Forwarding（遠端 port 轉發），讓外界透過該伺服器存取你的本機服務。\nSSH 遠端 port 轉發的語法 ssh -R [bind_address:]port:host:hostport destination bind_address：綁定的位址，可用 * 代表所有 interface。 port：遠端 SSH 伺服器要開放的 port。 host 與 hostport：要轉發到的主機與 port（通常是你的本機服務）。 destination：SSH 連線的目標（你的具有公開 IP 的 SSH 伺服器）。 範例：本機 HTTP 伺服器 假設你在本機（localhost:8000）啟動了一個 HTTP 伺服器：\npython -m http.server --bind localhost 8000 接著，你想讓外界透過 example.com:3636 連線到你的本機服務，可以執行：\nssh -R \u0026#39;*:3636:localhost:8000\u0026#39; miwa23333@example.com 可能遇到的問題：GatewayPorts 限制 根據 man ssh(1) 說明：\nBy default, TCP listening sockets on the server will be bound to the loopback interface only. This may be overridden by specifying a bind_address. An empty bind_address, or the address ‘*’, indicates that the remote socket should listen on all interfaces. Specifying a remote bind_address will only succeed if the server\u0026rsquo;s GatewayPorts option is enabled (see sshd_config(5)).\n預設情況下，SSH 伺服器上的 TCP 監聽 Socket 只會綁定到 loopback 介面（127.0.0.1）。\n如果要讓它綁定到所有介面（*），必須在伺服器的 sshd_config 中啟用 GatewayPorts 選項。\n也就是說，如果 SSH 伺服器沒有開啟 GatewayPorts，你的遠端 port 轉發可能只能在伺服器內部使用，外部訪客無法直接連線。\n解法 1：修改 SSH 伺服器設定 如果你有權限修改 sshd_config，可以加入或修改以下設定：\nGatewayPorts yes 然後重新啟動 SSH 服務。\n解法 2：使用 socat 建立 relay 若你無法更改 SSH 伺服器設定，可以透過 socat(1) 建立一個 TCP relay，突破 GatewayPorts 限制。\n步驟 1：本機 SSH 遠端轉發到伺服器內部 port ssh -R 23333:localhost:8000 miwa23333@example.com 這會將本機的 localhost:8000 轉發到 SSH 伺服器的 localhost:23333。\n步驟 2：在 SSH 伺服器上用 socat 建立對外 port socat TCP-LISTEN:3636,fork,reuseaddr TCP:localhost:23333 這樣，外界訪客連線到 example.com:3636 時，會先進入伺服器透過 socat 轉發到 port 23333，再透過 SSH 從 port 23333 轉發到你的本機 HTTP 伺服器。\n最終效果 現在，你在瀏覽器輸入 http://example.com:3636/ 就能存取你本機的 HTTP 伺服器了 🎉\n","permalink":"https://www.miwa23333.xyz/posts/ssh-remote-port-forwarding/","summary":"\u003cp\u003e有時候，我們會在本機電腦上啟動一個 HTTP 伺服器，例如進行測試或開發。但如果你沒有\u003cstrong\u003e公開 IP\u003c/strong\u003e，外部使用者就無法直接存取你的伺服器。\u003c/p\u003e\n\u003cp\u003e不過，如果你手上有一台\u003cstrong\u003e具有公開 IP 的 SSH 伺服器\u003c/strong\u003e，就可以利用 \u003cstrong\u003eSSH Remote Port Forwarding（遠端 port 轉發）\u003c/strong\u003e，讓外界透過該伺服器存取你的本機服務。\u003c/p\u003e","title":"沒有公開 IP？用 SSH 遠端轉發讓外部存取你的本機服務"}]