Blog-Betrieb on kenji.blog

Wie man Nachrichten in Slack mit C++ (Win32 API + WinHTTP) postet 【Webhook-Unterstützung】

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

Wie man Nachrichten in Slack mit C++ (Win32 API + WinHTTP) postet 【Webhook-Unterstützung】

Ich möchte eine Nachricht von C++ an Slack senden. Das ist bei Node.js oder Python sehr üblich, aber Fälle mit „C++ × Win32 API × WinHTTP“ sind eher selten.

In diesem Artikel erkläre ich Schritt für Schritt und leicht verständlich, wie man mithilfe einer Webhook-URL Nachrichten von C++ an Slack sendet .

✅ Gesamtablauf

Um in Slack zu posten, befolgen Sie diese Schritte:

Holen Sie sich die Slack Webhook-URL (API-Schlüssel)
Senden Sie eine POST-Anfrage mit WinHTTP
Erstellen Sie den Nachrichtentext im JSON-Format
Überprüfen Sie das Ergebnis und fertig!

🔑 Schritt 1: So erhalten Sie die Slack Webhook-URL

Mit einer Funktion namens Incoming Webhooks in Slack können Sie ganz einfach Nachrichten von externen Diensten posten.

Schritte zur Beschaffung

Besuchen Sie https://api.slack.com/apps
Klicken Sie auf Create New App
Wählen Sie From scratch, legen Sie den App-Namen fest und wählen Sie den Ziel-Workspace
Wählen Sie im linken Menü “Incoming Webhooks” und aktivieren Sie es
Klicken Sie auf “Add New Webhook to Workspace” und wählen Sie einen Kanal
Kopieren Sie die generierte URL (z. B. https://hooks.slack.com/services/xxx/yyy/zzz)

Diese URL fungiert wie ein API-Schlüssel.

💻 Schritt 2: Nachricht an Slack senden mit C++ Code

Verwendete Technologien

Win32 API
WinHTTP (Standardbibliothek)
Nachricht im JSON-Format

Beispielcode (Slack Post)

 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 aufteilen
 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 konnte nicht aufgeteilt werden\n";
 return false;
 }

 // HTTP-Sitzung und Verbindung
 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 << "Sendeanfrage fehlgeschlagen\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);

 // Ressourcen freigeben
 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring webhookUrl = L"https://hooks.slack.com/services/xxx/yyy/zzz"; // Durch Ihren eigenen Webhook ersetzen

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

 if (PostToSlack(webhookUrl, message)) {
 std::cout << "Erfolgreich gepostet!\n";
 } else {
 std::cerr << "Posten fehlgeschlagen.\n";
 }

 return 0;
}

🧪 JSON-Nachricht anpassen

Bei Slack-Webhooks können Sie folgende Parameter einbeziehen:

1
2
3
4
5
6


{
 "text": "Benachrichtigungsinhalt",
 "username": "Bot-Name",
 "icon_emoji": ":rocket:",
 "channel": "#BeliebigerKanalname"
}

📌 Ergänzende Hinweise

Stellen Sie sicher, dass Sie als Content-Type "application/json" angeben
Die Webhook-URL wird direkt als wstring übergeben (URL-Codierung nicht erforderlich)
Da es sich um HTTPS-Kommunikation handelt, vergessen Sie nicht WINHTTP_FLAG_SECURE

🎉 Bonus: Beispiel für eine gepostete Nachricht in Slack

In Slack wird es so angezeigt:

1
2


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

✍️ Zusammenfassung

Element	Inhalt
Post-Methode	Webhook (Incoming Webhooks)
Kommunikationsbibliothek	WinHTTP
Datenformat	JSON
Verwendbare Parameter	text, username, icon_emoji, channel usw.

Selbst wenn Sie dachten „Slack-Integration mit C++…?“, können Sie ab heute einen Benachrichtigungs-Bot einbauen!

🚀 Vorschau auf das nächste Mal?

Wenn Sie interessiert sind, zeige ich das nächste Mal:

Datei anhängen
UI mit Buttons
Flexible API-Bedienung mit Slack App + OAuth2

und wir können Ihnen einen weiteren Schritt der Slack-Integration vorstellen!

Über die Pflichtfeld-Markierung in Eingabeformularen

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

Wir haben Informationen über die “Pflicht”-Markierung in Benutzeroberflächen (Formularen) im Ausland zusammen mit UI-Richtlinienmaterialien zusammengefasst.

📌 Wichtige Pflichtmarkierungen und Best Practices

Verwendung des Sternchens (*)
- Es ist am weitesten verbreitet; Pflichtfelder werden mit einem “*” versehen.
- Jedoch ist eine Erklärung wie " * ist ein Pflichtfeld" am Anfang des Formulars erforderlich (Nielsen Norman Group, California State University, Northridge).
- Es gibt auch Beispiele, die Farbe zur Hervorhebung verwenden (wie roten Text).
“Required” oder “(required)” im Label angeben
- Durch das Hinzufügen des Wortes “Required” in das Label kann es Screenreadern klar angezeigt werden, was die Barrierefreiheit verbessert (Deque).
Kombinierte Verwendung von ARIA-Attributen und dem HTML5-Attribut required
- Neben der visuellen Anzeige wird durch die Verwendung von aria-required="true" und <input required> auch programmatisch mitgeteilt, dass das Feld erforderlich ist (Deque).
Verwendung von “(optional)” zur Kennzeichnung optionaler Felder
- Es gibt auch den Ansatz, optionale Felder explizit mit “(optional)” zu kennzeichnen, anstatt Pflichtfelder zu markieren, was effektiv ist, wenn beide gemischt auftreten.
- Nielsen-Norman weist jedoch darauf hin, dass es “leichter zu beurteilen ist, wenn auch Pflichtfelder klar ausgewiesen werden” (TPGi).

✅ Zusammenfassung der UI-Richtlinienmaterialien

Quelle	Inhalt
NN/g: Marking Required Fields in Forms	Die Kombination von Sternchen und Erklärungstext wird empfohlen; nur optionale Felder anzuzeigen gilt als unfreundlich (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・Die Zeichenfolge “Required” oder ein Bild wird im Label verwendet. ・Es wird deutlich gemacht, dass Hinweise allein durch Farben unzureichend sind.
W3C Techniques (H90)	Es gibt Beispiele für die Einbindung eines Sternchens oder “(required)” im Label und die Definition der Bedeutung am Anfang des Formulars.
TPGi (Doing what’s required)	Unter Berücksichtigung der Barrierefreiheit wird die Kombination aus Sternchen + ARIA-Attributen + Labeltext als am besten bewertet.
Contensis Formular-UX-Leitfaden	Prägnant zusammengefasst: Eine konsistente Markierung (* oder (optional)) ist wichtig.

✅ Empfohlene Ansätze für die Implementierung

Fügen Sie einen Erklärungstext am Anfang des Formulars hinzu:

Fields marked with * are required. (Oder “All fields are required” für alle, oder “unless marked optional”, wenn es optionale gibt)
Labelzuweisung :
- Geschrieben als First Name * oder Email (required).

ARIA-Attribute und HTML5-Attribute :

1
2


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

Verlassen Sie sich nicht nur auf Farben : Bieten Sie sowohl visuelle als auch programmatische Unterstützung.

🔗 Referenzlinks (UI-Richtlinienmaterialien)

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)

Bei Bedarf kann ich auch spezifische HTML/CSS-Codebeispiele oder UI-Komponenten-Designvorlagen für Sketch und Figma bereitstellen. Zögern Sie nicht zu fragen!

Hugo Befehlsliste

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

Was ist Hugo

Hugo ist ein Generator für statische Websites. Sie können eine Website erstellen, indem Sie Markdown-Dateien in HTML konvertieren. Hugo ist in der Sprache Go geschrieben und arbeitet sehr schnell.

Dieser Blog wurde ebenfalls mit Hugo erstellt.

Installation der Hugo CLI

Um die Hugo CLI zu installieren, führen Sie den folgenden Befehl aus.

※ Dies ist ein Beispiel für macOS. Für andere Betriebssysteme konsultieren Sie bitte die offizielle Dokumentation.

1

brew install hugo

Sie können es mit Homebrew installieren.

Hugo Befehlsliste

Hugo bietet verschiedene Befehle. Im Folgenden sind die am häufigsten verwendeten Befehle zusammengefasst.

Eine neue Website erstellen

1

hugo new site <site-name>

Befehl zum Erstellen einer neuen Website. Geben Sie unter <site-name> den Namen der Website an.

Einen neuen Artikel erstellen

1

hugo new <artikelname>.md

Befehl zum Erstellen eines neuen Artikels. Geben Sie unter <artikelname> den Namen des Artikels an.

Den Server starten

1

hugo server

Befehl zum Starten des lokalen Servers. Erreichbar unter http://localhost:1313.

Erstellen (Build)

1

hugo

Befehl zum Erstellen (Builden) der Website. HTML-Dateien werden im Verzeichnis public generiert.

Bereitstellen (Deploy)

1

hugo deploy

Befehl zur Bereitstellung der Website. Die Einstellungen für das Bereitstellungsziel werden in der Datei config.toml vorgenommen.

Artikelliste anzeigen

1

hugo list all

Befehl zum Anzeigen der Artikelliste.

Konfiguration überprüfen

1

hugo config

Befehl zur Überprüfung der Konfiguration.

Hilfe anzeigen

1

hugo help

Befehl zur Anzeige der Hilfe.

Version anzeigen

1

hugo version

Befehl zur Anzeige der Version.

Dies ist die Liste der Hugo-Befehle. Da es viele weitere Befehle gibt, konsultieren Sie bitte die offizielle Dokumentation.

Referenz

Offizielle Hugo Dokumentation

Wie man das Ranking beliebter Seiten aus Google Analytics abruft und einbindet

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

Einleitung

Mit dem Dienst Ranklet können Sie ganz einfach ein Ranking beliebter Seiten aus Google Analytics abrufen und auf Ihrer Website einbinden.

In diesem Artikel zeige ich Ihnen, wie Sie dieses Ranking in einem HUGO-Blog einbinden.

Vorschau

Vorbereitung

Auf Ihrer Website muss Google Analytics eingerichtet sein.

Schritte

Rufen Sie Ranklet auf.
Klicken Sie auf Sign in with Google und melden Sie sich mit Ihrem Google-Konto an (dieses muss mit Ihrem Google Analytics-Konto verknüpft sein).

Klicken Sie auf Zulassen (許可).

Richten Sie die grundlegenden Informationen ein.

Die Einstellungen wurden wie oben abgebildet vorgenommen.

Wählen Sie unter Google Analytics-Ansicht (Google Analytics ビュー) die Datenansicht aus, aus der Sie das Ranking abrufen möchten.

Richten Sie die Textersetzung ein.

Die Einstellungen wurden wie oben abgebildet vorgenommen. Dies ist so eingestellt, dass | kenji.blog aus dem Seitentitel entfernt wird.

Richten Sie die Vorlage ein.

HTML (Die Platzierungsnummern des Rankings wurden ausgeblendet)

 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 (Schriftgröße geändert und die Beschreibung auf maximal 3 Zeilen begrenzt)

 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; /* Zeilenanzahl */
 }
 }
 }
}

JavaScript bleibt unverändert

Kopieren Sie den HTML-Code aus „Auf Website einbinden“ (サイトへの掲載)

Kopieren Sie den angezeigten HTML-Code.

In das HUGO-Template einfügen

Erstellen Sie layouts/partials/ranklet.html und fügen Sie den kopierten HTML-Code ein.

1

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

Fügen Sie den folgenden Code in der Zeile vor </footer> in layouts/_default/single.html ein.

1

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

Das ist alles. Damit wird das Ranking wie unten auf dieser Seite angezeigt.

【HUGO】Vorschau in der lokalen Umgebung anzeigen

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

HUGO Installation

Download

HUGO Download

Laden Sie von der obigen Website das für Ihre Umgebung geeignete Windows-Modul herunter und entpacken Sie es. In meinem Fall habe ich “hugo_0.102.3_Windows-64bit.zip” heruntergeladen.

Entpacken

Entpacken Sie die heruntergeladene Zip-Datei und kopieren Sie die darin enthaltene hugo.exe in einen Ordner, den Sie erstellt haben, z. B. C:\bin.

In den Umgebungsvariablen registrieren

Registrieren Sie es in den Umgebungsvariablen, um hugo.exe von überall ausführen zu können. Die folgenden Schritte gelten für Windows 11, aber Sie sollten es mit einem ähnlichen Verfahren registrieren können:

Drücken Sie Win+Pause, um die Versionsinformationen zu öffnen
Klicken Sie auf Erweiterte Systemeinstellungen
Klicken Sie auf Umgebungsvariablen
Wählen Sie Path und klicken Sie auf Bearbeiten
Klicken Sie auf Neu, geben Sie “C:\bin” in eine neue Zeile ein und klicken Sie auf OK, um den Dialog zu schließen

Vorschau des Blogs

Navigieren Sie in der Eingabeaufforderung zum HUGO-Blog-Ordner und führen Sie den folgenden Befehl aus.

hugo server -D

Das Ausführungsergebnis ist unten aufgeführt. (-D ist eine Option zur Anzeige von Entwurfsartikeln.)

 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

Da die Adresse während der Ausführung angezeigt wird (im obigen Beispiel http://localhost:1313/), kopieren Sie diese Adresse in Ihren Browser. Die Vorschau wird bei jedem Speichern der Datei automatisch aktualisiert. Um die Vorschau zu beenden, geben Sie in der Eingabeaufforderung Ctrl+C ein.

Ich habe einen Blog gestartet

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

Ich habe einen Blog gestartet

So etwas wie ein Feuerwerk, der Code ist hier

Hallo. Aus irgendeinem Grund habe ich beschlossen, einen Blog zu starten.

Es gibt kein großes Ziel wie “Ich möchte dies veröffentlichen!”, aber ich dachte, es wäre schön, einen Ort zu haben, an dem ich Dinge über Technologie, den Alltag oder was auch immer mir in den Sinn kommt, schreiben kann.

Ich habe vor, dies wie einen Notizblock zu führen, ohne mich zu sehr anzustrengen.

Ich mache das mit so einem Ding namens Hugo

Dieser Blog wird mit einem Static Site Generator namens “Hugo” erstellt. Ich habe ein schönes Theme gefunden, also habe ich beschlossen, es spontan zu übernehmen. (Es ist ein Geheimnis, dass ich ungefähr 2 Stunden gebraucht habe, um das Theme auszuwählen)

Ich habe auch vor, mir nebenbei Notizen zu Code und Tools zu machen, die mich interessieren.

Die Morgengeschichte im Komeda

Übrigens bin ich heute Morgen etwas früher aufgewacht und ins Komeda Coffee gegangen. Ich bin um 8:30 Uhr losgegangen und bin gemütlich spaziert, während ich die Morgenluft genossen habe.

Ich habe das A-Morgen-Set mit einem Mini-Shiro-Noir und Café au Lait bestellt. Ich glaube, es hat ungefähr 800 Yen gekostet? (Ich erinnere mich nicht)

Ein Café am Morgen ist doch was Schönes. Wenn man vor der Arbeit ein wenig Zeit zum Entspannen hat, fühlt es sich an, als würde der ganze Tag gut laufen.

Auf diese Weise werde ich von nun an entspannt schreiben. Ich plane, Technikthemen und Alltagsgeschichten zu mischen.

Vielen Dank!