部落格營運 on kenji.blog

使用 C++（Win32 API + WinHTTP）發送訊息至 Slack 的方法【支援 Webhook】

Wed, 16 Jul 2025 19:42:56 +0900

使用 C++（Win32 API + WinHTTP）發送訊息至 Slack 的方法【支援 Webhook】

想要從 C++ 發送訊息到 Slack。在 Node.js 或 Python 中這很常見，但使用「C++ × Win32 API × WinHTTP」來做的情況應該很少見吧。

這篇文章將以循序漸進的方式，淺顯易懂地解說 如何使用 Webhook URL 從 C++ 發送訊息到 Slack 。

✅ 整體流程

要發布到 Slack，需要遵循以下步驟。

取得 Slack 的 Webhook URL（API 金鑰）
使用 WinHTTP 發送 POST 請求
以 JSON 格式建立訊息主體
檢查結果即可完成！

🔑 Step1：取得 Slack Webhook URL 的方法

在 Slack 中，可以使用 Incoming Webhooks 的功能，輕鬆地從外部服務發送訊息。

取得步驟

進入 https://api.slack.com/apps
點擊 Create New App
選擇 From scratch 並選擇應用程式名稱與發布目標工作區
從左側選單選擇 「Incoming Webhooks」 並啟用
點擊 「Add New Webhook to Workspace」 ，然後選擇頻道
複製發行的 URL（例如: https://hooks.slack.com/services/xxx/yyy/zzz）

這個 URL 將如同 API 金鑰般發揮作用。

💻 Step2：使用 C++ 程式碼發送訊息至 Slack

使用技術

Win32 API
WinHTTP（標準函式庫）
JSON 格式訊息

範例程式碼（發佈至 Slack）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostToSlack(const std::wstring& webhookUrl, const std::string& messageJson) {
 // 解析 URL
 URL_COMPONENTS urlComp{};
 wchar_t hostName[256];
 wchar_t urlPath[1024];

 urlComp.dwStructSize = sizeof(urlComp);
 urlComp.lpszHostName = hostName;
 urlComp.dwHostNameLength = _countof(hostName);
 urlComp.lpszUrlPath = urlPath;
 urlComp.dwUrlPathLength = _countof(urlPath);

 if (!WinHttpCrackUrl(webhookUrl.c_str(), 0, 0, &urlComp)) {
 std::wcerr << L"URL 解析失敗\n";
 return false;
 }

 // HTTP 階段與連線
 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 HINTERNET hConnect = WinHttpConnect(hSession, hostName, urlComp.nPort, 0);
 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", urlPath,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 std::wstring headers = L"Content-Type: application/json\r\n";
 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 -1,
 (LPVOID)messageJson.c_str(),
 messageJson.length(),
 messageJson.length(),
 0);

 if (!result) {
 std::cerr << "發送請求失敗\n";
 return false;
 }

 WinHttpReceiveResponse(hRequest, NULL);

 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 // 釋放資源
 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring webhookUrl = L"https://hooks.slack.com/services/xxx/yyy/zzz"; // 請替換成自己的 Webhook

 std::string message = R"({
 "text": "Hello from C++ :rocket:",
 "username": "C++ Bot",
 "icon_emoji": ":robot_face:"
 })";

 if (PostToSlack(webhookUrl, message)) {
 std::cout << "發布成功！\n";
 } else {
 std::cerr << "發布失敗。\n";
 }

 return 0;
}

🧪 自訂 JSON 訊息

在 Slack 的 Webhook 中，可以包含以下參數：

1
2
3
4
5
6


{
 "text": "通知內容",
 "username": "Bot 名稱",
 "icon_emoji": ":rocket:",
 "channel": "#任意頻道名稱"
}

📌 補充事項

Content-Type 必須指定為 "application/json"
Webhook URL 直接以 wstring 傳遞即可（無需 URL 編碼）
因為是 HTTPS 通訊，請別忘了加上 WINHTTP_FLAG_SECURE

🎉 附錄：Slack 中的發布確認範例

在 Slack 中會這樣顯示：

1
2


[C++ Bot]
Hello from C++ :rocket:

✍️ 總結

項目	內容
發布方式	Webhook (Incoming Webhooks)
通訊函式庫	WinHTTP
資料格式	JSON
可用參數	text, username, icon_emoji, channel 等

還在想著怎麼用 C++ 整合 Slack 嗎？你也可以從今天開始加入通知 Bot！

🚀 下集預告？

如果您有興趣，下次我們可以：

檔案附件
帶按鈕的 UI
使用 Slack App + OAuth2 進行靈活的 API 操作

等，為您介紹更進一步的 Slack 整合！

關於輸入表單的必填標記

Mon, 14 Jul 2025 13:47:51 +0900

我們整理了關於國外介面（表單）中「必填」標記的相關資訊，並附上 UI 設計指南。

📌 主要的必填標記與最佳實踐

使用星號 (*)
- 最常見且普及的方式，在必填欄位加上「*」。
- 然而， 在表單開頭必須加上「 為必填項目」等說明* (Nielsen Norman Group, California State University, Northridge)。
- 也有使用顏色來強調的例子（如紅字）。
在標籤中明確標示 “Required” 或 “(required)”
- 在標籤內加入文字「Required」，可以讓螢幕閱讀器明確識別，提升無障礙體驗 (Deque)。
結合使用 ARIA 屬性與 HTML5 的 required 屬性
- 除了視覺顯示外，使用 aria-required="true" 或 <input required>，也能在程式層面傳達必填的資訊 (Deque)。
使用 “(optional)” 來明示選填欄位
- 也有不標示必填，而是將選填欄位標示為「(optional)」的方法，這在兩者混合的情況下很有效。
- 不過，Nielsen‑Norman 指出「同時明示必填欄位會更容易判斷」 (TPGi)。

✅ UI 設計指南資料總結

來源	內容
NN/g: Marking Required Fields in Forms	建議結合星號與說明文，僅標示選填欄位被認為是不夠友善的做法 (Nielsen Norman Group)。
Deque (Anatomy of Accessible Forms)	・在標籤內結合使用「Required」字串或圖片。・明確表示僅用顏色提示是不夠的。
W3C Techniques (H90)	有在標籤中包含星號或「(required)」，並在表單開頭定義其含義的範例。
TPGi (Doing what’s required)	考量到無障礙體驗，結合星號＋ARIA 屬性＋標籤文字插入被評為最佳做法。
Contensis 表單 UX 指南	簡潔地整理出：一致的標記（* 或 (optional)）非常重要。

✅ 實作上的建議方法

在 表單開頭 加入說明文：

Fields marked with * are required. （或統一使用 “All fields are required”，若有選填則加上 “unless marked optional”）
附加標籤 ：
- 寫作 First Name * 或 Email (required)。

ARIA 屬性・HTML5 屬性 ：

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

不要僅依賴顏色 ：視覺與程式層面都需對應。

🔗 參考連結（UI 設計指南資料）

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

如果需要，我也可以提供具體的 HTML／CSS 程式碼範例，或是 Sketch・Figma 用的 UI 元件設計模板。歡迎隨時提出討論！

Hugo 指令列表

Fri, 31 May 2024 01:36:00 +0900

什麼是 Hugo

Hugo 是一個靜態網站生成器。您可以透過將 Markdown 檔案轉換為 HTML 來建立網站。Hugo 使用 Go 語言編寫，運行速度非常快。

這個部落格也是使用 Hugo 建立的。

安裝 Hugo CLI

要安裝 Hugo CLI，請執行以下指令。

※ 這是 macOS 的範例。對於其他作業系統，請參考官方文件。

1

brew install hugo

您可以使用 Homebrew 進行安裝。

Hugo 指令列表

Hugo 提供了各種指令。以下總結了常用的指令。

建立新網站

1

hugo new site <網站名稱>

建立新網站的指令。在 <網站名稱> 中指定網站的名稱。

建立新文章

1

hugo new <文章名稱>.md

建立新文章的指令。在 <文章名稱> 中指定文章的名稱。

啟動伺服器

1

hugo server

啟動本地伺服器的指令。可以透過 http://localhost:1313 進行存取。

建置網站

1

hugo

建置網站的指令。HTML 檔案將產生在 public 目錄中。

部署網站

1

hugo deploy

部署網站的指令。部署目標的設定在 config.toml 檔案中進行。

顯示文章列表

1

hugo list all

顯示文章列表的指令。

確認設定

1

hugo config

確認設定的指令。

顯示幫助

1

hugo help

顯示幫助的指令。

顯示版本

1

hugo version

顯示版本的指令。

以上是 Hugo 的指令列表。還有其他各種指令可供使用，請參考官方文件。

參考資料

Hugo 官方文件

很酷的網頁模板 (html5up)

Mon, 17 Apr 2023 00:26:55 +0900

很酷的網頁模板

html5up https://html5up.net/

因為想試用看看，所以做個筆記。

如何從 Google Analytics 取得並配置熱門頁面排行榜

Mon, 10 Apr 2023 20:26:57 +0900

前言

使用名為 Ranklet 的服務，可以從 Google Analytics 取得熱門頁面排行榜並輕鬆進行配置。

本文將介紹如何將其配置到 HUGO 部落格中。

效果預覽

事前準備

網站已設定 Google Analytics

步驟

前往 Ranklet
點擊 Sign in with Google 並使用 Google 帳號登入（需與已綁定 Google Analytics 的帳號一致）

點擊 允許

設定基本資訊

如上圖所示進行設定。

在 Google Analytics ビュー（Google Analytics 檢視）中，選擇想要取得排行榜的檢視。

設定文字取代

如上圖所示進行設定。此設定是為了刪除頁面標題中的 | kenji.blog。

設定範本

HTML（隱藏了排名的數字）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS（修改了字型大小，並讓說明文字以 3 行顯示）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // 重設
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 行數 */
 }
 }
 }
}

JavaScript 保持不變

從「サイトへの掲載（發佈至網站）」複製 HTML

複製畫面上顯示的 HTML

貼上至 HUGO 範本中

建立 layouts/partials/ranklet.html，並將複製的 HTML 貼上

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

在 layouts/_default/single.html 中的 </footer> 前一行貼上以下程式碼

1

{{- partial "ranklet.html" . }}

以上步驟完成。這樣一來，頁面下方就會像本頁底部一樣顯示出排行榜。

在 HUGO 中使用 HTML 標籤

Tue, 17 Jan 2023 19:20:32 +0900

預設情況下，HUGO 不允許在文章中使用 HTML 標籤，但您可以透過在 config.toml 中加入以下描述來啟用它。

1
2


[markup.goldmark.renderer]
 unsafe = true

參考: Configure Markup

勾選網頁中的所有核取方塊

Wed, 05 Oct 2022 20:07:06 +0900

要勾選網頁中的所有核取方塊，請按 F12 開啟 DevTools，將以下代碼貼上到主控台並執行。

1
2
3
4
5
6


let boxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < boxes.length; i++) {
 if (!boxes[i].disabled) {
 boxes[i].checked = true;
 }
}

或者，

建立一個新書籤，並將以下代碼貼上到註冊網址處（通常是輸入 https://… 的地方）進行註冊。顯示您想要勾選的網頁，然後點擊已建立的書籤，所有的核取方塊就會被勾選。

1

javascript:(function(){let boxes=document.querySelectorAll('input[type="checkbox"]');for(let i=0;i<boxes.length;i++){if(!boxes[i].disabled){boxes[i].checked=true;}}})();

如果要全部取消勾選，請將上述腳本中的 boxes[i].checked = true; 部分更改為 boxes[i].checked = false;。

HUGO 可用的 Shortcodes

Sun, 11 Sep 2022 22:59:52 +0900

HUGO 可用的 Shortcodes

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

其他

Shortcodes

題外話

若要在網站上顯示 {{< foo >}}，您必須撰寫 {{</* foo */>}}。

更改 PaperMod 的配色方案

Wed, 07 Sep 2022 15:30:21 +0900

我更改了 PaperMod 主題的配色方案。更改方法參考了以下連結。

https://github.com/adityatelange/hugo-PaperMod/discussions/645

CSS 的路徑如下。

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

黑暗模式暫時沒有更改。

【HUGO】本機環境顯示預覽

Mon, 05 Sep 2022 12:28:01 +0900

安裝 HUGO

下載

下載 HUGO

從上述網站，下載並解壓縮符合您環境的 Windows 模組。就我而言，我下載了「hugo_0.102.3_Windows-64bit.zip」。

解壓縮

解壓縮下載的 zip 檔案，將其中的 hugo.exe 複製到您建立的資料夾中，例如 C:\bin。

登錄到環境變數

將其登錄到環境變數中，以便從任何位置執行 hugo.exe。以下是在 Windows 11 上的操作，但您應該可以透過類似的步驟進行登錄：

按 Win+Pause 鍵開啟版本資訊
點擊「進階系統設定」
點擊「環境變數」
選擇 Path，然後點擊「編輯」
點擊「新增」，在新的一行輸入「C:\bin」，然後點擊「確定」關閉對話框

預覽部落格

在命令提示字元中，移動到 HUGO 部落格的資料夾，然後執行以下命令。

hugo server -D

執行結果如下。（-D 是顯示草稿文章的選項。）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
 Pages | 39
 Paginator pages | 0
 Non-page files | 7
 Static files | 0
 Processed images | 0
 Aliases | 13
 Sitemaps | 1
 Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

由於地址在執行時會顯示（在上述範例中為 http://localhost:1313/），請將該地址複製到您的瀏覽器中。每次儲存檔案時，預覽都會自動更新。要結束預覽，請在命令提示字元中輸入 Ctrl+C。

我開始寫部落格了

Fri, 02 Sep 2022 07:23:00 +0900

我開始寫部落格了

類似煙火的東西，程式碼在這裡

大家好。不知怎麼地，我決定開始寫部落格了。

沒有什麼「我想發表這個！」之類的宏大目標，只是覺得如果有個地方能把關於技術、日常瑣事，或是腦海中浮現的想法原封不動地寫下來，應該會很不錯。

我打算把它當作筆記本一樣，不會放太多心力進去。

用一個叫 Hugo 的東西製作

這個部落格是用名為「Hugo」的靜態網站產生器製作的。因為找到了一個感覺不錯的主題，就順勢套用了。（挑選主題花了大約 2 個小時這件事是個秘密）

關於程式碼、感興趣的工具之類的，我也打算輕鬆地記錄下來。

關於早晨的 Komeda

順帶一提，今天早上稍微早起，去了 Komeda 咖啡店。 8點半出發，一邊呼吸著早晨的空氣一邊慢慢走去。

點了迷你冰與火（Shiro-Noir）和咖啡歐蕾的 A 早餐套餐。印象中大概是 800 日圓左右吧？（不記得了）

早晨的咖啡館真不錯。感覺在工作前有一點放空的時間，一整天都會很順利。

大概就是這種感覺，之後會輕鬆地寫下去。預計會混合技術方面的話題和日常瑣事。

請多指教囉！