Blog Management on kenji.blog

How to Post Messages to Slack using C++ (Win32 API + WinHTTP) [Webhook Supported]

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

How to Post Messages to Slack using C++ (Win32 API + WinHTTP) [Webhook Supported]

I want to post messages to Slack from C++. It’s common in Node.js or Python, but doing it with “C++ × Win32 API × WinHTTP” is quite rare, isn’t it?

In this article, I will explain how to send messages from C++ to Slack using a Webhook URL, step-by-step and in an easy-to-understand manner.

✅ Overall Flow

To post to Slack, follow these steps:

Obtain a Slack Webhook URL (API key)
Send a POST request using WinHTTP
Assemble the message body in JSON format
Check the result and you’re done!

🔑 Step 1: How to Obtain a Slack Webhook URL

Slack allows you to easily post messages from external services using a feature called Incoming Webhooks.

Steps to Obtain

Access https://api.slack.com/apps
Click Create New App
Choose From scratch, then select the app name and the workspace to post to
Select “Incoming Webhooks” from the left menu and enable it
Click “Add New Webhook to Workspace” and select a channel
Copy the generated URL (e.g., https://hooks.slack.com/services/xxx/yyy/zzz)

This URL functions like an API key.

💻 Step 2: Send a Message to Slack with C++ Code

Technologies Used

Win32 API
WinHTTP (Standard Library)
JSON formatted messages

Sample Code (Posting to 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) {
 // Parse 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"Failed to parse URL\n";
 return false;
 }

 // Connect and start HTTP session
 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 << "Send request failed\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);

 // Release resources
 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring webhookUrl = L"https://hooks.slack.com/services/xxx/yyy/zzz"; // Replace with your Webhook URL

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

 if (PostToSlack(webhookUrl, message)) {
 std::cout << "Posted successfully!\n";
 } else {
 std::cerr << "Failed to post.\n";
 }

 return 0;
}

🧪 Customizing JSON Messages

With Slack Webhooks, you can include parameters like the following:

1
2
3
4
5
6


{
 "text": "Notification content",
 "username": "Bot name",
 "icon_emoji": ":rocket:",
 "channel": "#desired_channel_name"
}

📌 Supplementary Notes

Content-Type must be specified as "application/json"
Pass the Webhook URL as a wstring without any changes (URL encoding is unnecessary)
Since it’s HTTPS communication, don’t forget WINHTTP_FLAG_SECURE

🎉 Bonus: Example of Post Confirmation in Slack

It will be displayed in Slack like this:

1
2


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

✍️ Summary

Item	Details
Posting Method	Webhook (Incoming Webhooks)
Communication Library	WinHTTP
Data Format	JSON
Usable Parameters	text, username, icon_emoji, channel, etc.

Even if you thought “Integrating C++ with Slack? No way…”, you can start embedding a notification bot today!

🚀 Teaser for Next Time?

If you’re interested, next time:

File attachments
UI with buttons
Flexible API operations with Slack App + OAuth2

I can introduce you to more advanced Slack integrations like these!

About Required Marks in Input Forms

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

I have summarized information about the “required” mark in overseas screen UI (forms), along with UI guideline materials.

📌 Main Required Marks and Best Practices

Using an Asterisk (*)
- This is generally the most widespread method, adding “*” to required fields.
- However, an explanation such as “* indicates a required field” at the beginning of the form is essential (Nielsen Norman Group, California State University, Northridge).
- There are also examples that use color for emphasis (such as red text).
Clearly Stating “Required” or “(required)” in the Label
- By explicitly adding “Required” in text within the label, it can be clearly communicated to screen readers, improving accessibility (Deque).
Using ARIA Attributes or HTML5 required Attribute in Conjunction
- In addition to visual indication, using aria-required="true" or <input required> allows you to programmatically communicate that a field is required (Deque).
Clearly Stating Optional Fields Using “(optional)”
- There is also a method of explicitly indicating optional fields as “(optional)” instead of required fields, which is effective when both are mixed.
- However, Nielsen-Norman points out that “it is easier to judge if required fields are also explicitly indicated” (TPGi).

✅ Summary of UI Guideline Materials

Source	Content
NN/g: Marking Required Fields in Forms	A combination of an asterisk + explanatory text is recommended, and showing only optional fields is evaluated as unfriendly (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	- Use the string “Required” or an image within the label. - Explicitly states that suggesting by color alone is insufficient.
W3C Techniques (H90)	There are examples of including an asterisk or “(required)” in the label and defining the meaning at the beginning of the form.
TPGi (Doing what’s required)	Considering accessibility, evaluated that an asterisk + ARIA attribute + inserting label text is optimal.
Contensis UX Forms Guidelines	Briefly summarizes that consistent marking (* or (optional)) is important.

✅ Recommended Implementation Approach

Add an explanatory text at the beginning of the form:

Fields marked with * are required. (Or collectively “All fields are required”, and if there are optional fields, “unless marked optional”)
Applying Labels:
- Write it like First Name * or Email (required).

ARIA Attributes / HTML5 Attributes:

1
2


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

Do not rely on color alone: Support both visual and programmatic indications.

🔗 Reference Links (UI Guideline Materials)

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)

If necessary, I can also provide specific HTML/CSS code examples, UI component design templates for Sketch/Figma, etc. Please feel free to consult with me!

Hugo Command List

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

What is Hugo?

Hugo is a static site generator. It can convert Markdown files into HTML and create websites. Hugo is written in the Go language and runs very fast.

This blog is also created with Hugo.

Installing the Hugo CLI

To install the Hugo CLI, run the following command.

Example for macOS. For other operating systems, please refer to the official documentation.

1

brew install hugo

You can install it using Homebrew.

Hugo Command List

Hugo provides various commands. Below is a summary of commonly used commands.

Create a new site

1

hugo new site <site-name>

Command to create a new site. Specify the name of the site in <site-name>.

Create a new post

1

hugo new <post-name>.md

Command to create a new post. Specify the name of the post in <post-name>.

Start the server

1

hugo server

Command to start a local server. You can access it at http://localhost:1313.

Build the site

1

hugo

Command to build the site. HTML files will be generated in the public directory.

Deploy the site

1

hugo deploy

Command to deploy the site. Deployment settings are configured in the config.toml file.

List all posts

1

hugo list all

Command to display a list of all posts.

Check configuration

1

hugo config

Command to check the configuration.

Display help

1

hugo help

Command to display help information.

Display version

1

hugo version

Command to display the version.

That concludes the Hugo command list. There are many other commands available, so please refer to the official documentation for more details.

References

Hugo Official Documentation

Auto-refresh Web Page Browser Extension (Edge Add-on)

Sat, 06 Apr 2024 15:36:54 +0900

I would like to introduce “Tab Auto Refresh”, an Edge browser extension that automatically refreshes web pages.

Installing Tab Auto Refresh

Tab Auto Refresh

Access the site above and click Install.

Click Add extension.

How to Use

Once the installation is complete, an icon will be added to the top right of Edge.

Open the web page you want to auto-refresh and click the icon to start auto-refreshing.

The part in the green frame is the auto-refresh interval. Please select the timing to auto-refresh.

To stop auto-refreshing, click the icon and then click Stop reloading this tab.

How to Get and Place Popular Page Rankings from Google Analytics

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

Introduction

By using a service called Ranklet, you can easily get and place popular page rankings from Google Analytics.

In this article, I will show you how to place it on a HUGO blog.

Demo

Preparation

Google Analytics must be set up on your site.

Steps

Access Ranklet.
Click Sign in with Google and log in with your Google account (it must be linked to your Google Analytics account).

Click Allow.

Set up basic information.

I configured it as above.

In Google Analytics View, select the view from which you want to get the ranking.

Set up text replacement.

I configured it as above. This is set to remove | kenji.blog from the page title.

Set up the template.

HTML (Hid the ranking numbers)

 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 (Changed font size and set the description to be displayed in 3 lines)

 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 { // 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; /* Number of lines */
 }
 }
 }
}

JavaScript remains unchanged.

Copy the HTML from “Publish on site”.

Copy the displayed HTML.

Paste it into the HUGO template.

Create layouts/partials/ranklet.html and paste the copied HTML.

1

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

Paste the following code on the line before </footer> in layouts/_default/single.html.

1

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

That’s it. Now the ranking will be displayed as shown at the bottom of this page.

About the Stock Photo Site "Unsplash" for Blogs

Sun, 02 Apr 2023 14:44:17 +0900

About “Unsplash”

https://unsplash.com/

To summarize, the stock photo site “Unsplash” has the following features:

All images can be used for free
Commercial use is allowed
Image modification is allowed
No permission required
No attribution required

It is very easy to use when writing articles for a blog, so please give it a try.

For information about the license, please refer to the footnote below.¹

I will also be utilizing it on this site.

Unsplash License ↩︎

Using HTML Tags in HUGO

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

By default, HUGO does not allow the use of HTML tags in articles, but you can enable them by adding the following to your config.toml.

1
2


[markup.goldmark.renderer]
 unsafe = true

Reference: Configure Markup

Changing the Image Layout in PaperMod

Sun, 11 Sep 2022 18:50:40 +0900

In the default layout, images are placed in the center with a width of 100%. However, I felt this was a bit too large, so I tried wrapping the image under the title and changing the width to around 150px.

The changes made to the files are as follows.

blank.css

To change the margins, image sizes, and the number of displayed text lines, add the following code to blank.css.

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


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

Since I couldn’t delete the definition in blank.css, I deleted the following line in post-entry.css.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ <- Delete this line
 height: auto;
}

list.html

To change the image layout, I modified the following section in list.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


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- Moved down -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Moved down -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- Added -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Added -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Moved from above -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Moved from above -->
 </div><!-- Added -->
 <div style="width:100%;"><!-- Added -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- Added -->
 </div><!-- Added -->
</article>

It seems there are quite a few similar requests.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

I would be grateful if this was supported in the upstream repository as well.

How to set up Twitter Card in PaperMod

Sat, 10 Sep 2022 18:41:22 +0900

Introduction

The PaperMod theme supports Twitter Cards. However, Twitter Card settings need to be described in config.toml or the header information of each article’s *.md. If set in both each article and config.toml, the header information of each article takes precedence.

How to Configure

config.toml

In config.toml, add an item named images under [params]. In images, describe the path to the image to be displayed on the Twitter Card. If placing the image in the static folder, specifying just the file name is sufficient.

1
2


[params]
 images = ["twitter_card.jpg"]

Folder structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Describe here)
├─content
│ └─posts
│ └─article folder
│ │ index.md (Describe here)
│ └─images
│ cover.png (Place here)
└─static
 twitter_card.jpg (Place here)

Header Information of Each Article

In the header information of each article, add an item named image under cover. If you set relative to true, you can specify it as a relative path from the article’s *.md.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

If You Do Not Want to Display It at the Top of the Article

If you do not want to display a cover image at the top of the article, add an item named hidden under cover and set it to true.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

About Image Size

Based on the current specifications of PaperMod, it seems that Twitter Card sizes are only supported for summary_large_image. The appropriate size (resolution) for summary_large_image varies according to different sources, but around 800 x 418 (aspect ratio 1.91:1) seems good.

Reference Site 1 Reference Site 2

If possible, it is recommended to resize the image before posting.

How to Check Settings

To check Twitter Card settings, use the Twitter Card Validator. However, in my environment, the preview did not display properly, so if the preview does not appear, it is recommended to check once using a private account or similar before posting.

Changing the Color Scheme of PaperMod

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

I changed the color scheme of the PaperMod theme. I referred to the following for the method.

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

The CSS path is as follows.

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 {
}

No changes for dark mode for now.

I Started a Blog

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

I Started a Blog

Something like fireworks, code is here

Hello everyone. Just on a whim, I decided to start a blog.

I don’t really have a grand purpose like “I want to broadcast this!”, but I thought it would be nice to have a place where I can just write down things about technology, daily life, or whatever comes to mind.

I’m not going to try too hard, and I plan to use it like a notepad.

Made with Hugo

This blog is made with a static site generator called “Hugo”. I found a nice theme, so I decided to use it on a whim. (It’s a secret that it took me about 2 hours to choose a theme)

I’ll casually write down things about code or tools I’m interested in as memos.

Morning Komeda Coffee Story

By the way, this morning, I woke up a bit early and went to Komeda Coffee. I left at 8:30, walking leisurely while breathing the morning air.

I ordered a Mini Shiro-Noir and Cafe Au Lait “A” Morning Set. I think it was about 800 yen? (I don’t remember)

Morning cafes are nice. Having some time to just space out before work makes me feel like the day will go well.

With that said, I’ll be writing casually from now on. I plan to mix in technical talks and daily life stuff.

Nice to meet you!