Gestion De Blog on kenji.blog

Comment publier un message sur Slack en C++ (API Win32 + WinHTTP) 【Support Webhook】

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

Comment publier un message sur Slack en C++ (API Win32 + WinHTTP) 【Support Webhook】

Je veux publier un message sur Slack depuis le C++. C’est très courant en Node.js ou en Python, mais les cas d’utilisation de « C++ × API Win32 × WinHTTP » sont rares.

Dans cet article, je vais expliquer étape par étape, de manière claire, comment envoyer un message à Slack depuis le C++ en utilisant une URL Webhook.

✅ Flux global

Pour publier sur Slack, suivez ces étapes :

Obtenir l’URL Webhook (clé API) de Slack
Envoyer une requête POST en utilisant WinHTTP
Construire le corps du message au format JSON
Vérifier le résultat et c’est terminé !

🔑 Étape 1 : Comment obtenir l’URL Webhook de Slack

Sur Slack, vous pouvez facilement publier des messages à partir de services externes en utilisant une fonctionnalité appelée Incoming Webhooks.

Procédure d’obtention

Accédez à https://api.slack.com/apps
Cliquez sur Create New App
Sélectionnez From scratch, choisissez un nom d’application et l’espace de travail cible
Dans le menu de gauche, sélectionnez « Incoming Webhooks » et activez-le
Cliquez sur « Add New Webhook to Workspace » et sélectionnez un canal
Copiez l’URL générée (ex : https://hooks.slack.com/services/xxx/yyy/zzz)

Cette URL fonctionne comme une clé API.

💻 Étape 2 : Envoyer un message à Slack avec du code C++

Technologies utilisées

API Win32
WinHTTP (bibliothèque standard)
Message au format JSON

Code d’exemple (Publication sur 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) {
 // Décomposition de l'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"Échec de la décomposition de l'URL\n";
 return false;
 }

 // Session HTTP et connexion
 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 << "Échec de la requête d'envoi\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);

 // Libération des ressources
 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring webhookUrl = L"https://hooks.slack.com/services/xxx/yyy/zzz"; // Remplacez par votre Webhook

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

 if (PostToSlack(webhookUrl, message)) {
 std::cout << "Publication réussie !\n";
 } else {
 std::cerr << "Échec de la publication.\n";
 }

 return 0;
}

🧪 Personnalisation du message JSON

Dans les Webhooks de Slack, vous pouvez inclure les paramètres suivants :

1
2
3
4
5
6


{
 "text": "Contenu de la notification",
 "username": "Nom du bot",
 "icon_emoji": ":rocket:",
 "channel": "#Nom du canal souhaité"
}

📌 Remarques supplémentaires

Assurez-vous de spécifier "application/json" pour Content-Type
L’URL Webhook est passée telle quelle en tant que wstring (l’encodage URL n’est pas nécessaire)
N’oubliez pas WINHTTP_FLAG_SECURE car il s’agit d’une communication HTTPS

🎉 Bonus : Exemple de vérification de publication sur Slack

Cela s’affichera ainsi sur Slack :

1
2


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

✍️ Résumé

Élément	Contenu
Méthode de publication	Webhook (Incoming Webhooks)
Bibliothèque réseau	WinHTTP
Format des données	JSON
Paramètres utilisables	text, username, icon_emoji, channel, etc.

Même vous qui pensiez que l’intégration Slack en C++ était difficile, vous pouvez intégrer un bot de notification dès aujourd’hui !

🚀 Prochainement ?

Si vous êtes intéressé, la prochaine fois :

Pièces jointes de fichiers
Interface utilisateur avec des boutons
Manipulation flexible de l’API avec Slack App + OAuth2

Je peux également présenter une intégration Slack un peu plus avancée !

Extension de rafraîchissement automatique des pages Web (Module complémentaire Edge)

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

Voici “Tab Auto Refresh”, une extension de navigateur Edge qui actualise automatiquement les pages Web.

Installation de Tab Auto Refresh

Tab Auto Refresh

Accédez au site ci-dessus et cliquez sur Installer.

Cliquez sur Ajouter l'extension.

Comment l’utiliser

Une fois l’installation terminée, une icône sera ajoutée dans le coin supérieur droit d’Edge.

Ouvrez la page Web que vous souhaitez rafraîchir automatiquement et cliquez sur l’icône pour lancer le rafraîchissement automatique.

La zone encadrée en vert indique l’intervalle de rafraîchissement automatique. Sélectionnez le moment où vous souhaitez que le rafraîchissement automatique se produise.

Pour arrêter le rafraîchissement automatique, cliquez sur l’icône et cliquez sur Stop reloading this tab.

Modèle de page Web cool (html5up)

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

Modèle de page Web cool

html5up https://html5up.net/

J’ai pensé que j’aimerais l’utiliser, donc voici une note.

Comment obtenir et intégrer un classement des pages populaires depuis Google Analytics

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

Introduction

En utilisant un service appelé Ranklet, vous pouvez facilement récupérer le classement des pages populaires depuis Google Analytics et l’intégrer sur votre site.

Dans cet article, nous allons vous présenter comment l’intégrer sur un blog HUGO.

Aperçu du fonctionnement

Préparation

Avoir configuré Google Analytics sur votre site

Étapes

Accédez à Ranklet
Cliquez sur Sign in with Google pour vous connecter avec votre compte Google (celui-ci doit être associé à votre compte Google Analytics)

Cliquez sur Autoriser (許可)

Configurez les informations de base

La configuration a été effectuée comme indiqué ci-dessus.

Dans Vue Google Analytics (Google Analytics ビュー), sélectionnez la vue dont vous souhaitez obtenir le classement.

Configurez le remplacement de texte

La configuration a été effectuée comme indiqué ci-dessus. Ce paramètre est défini pour supprimer | kenji.blog du titre de la page.

Configurez le modèle

HTML (les numéros de classement ont été masqués)

 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 (la taille de police a été modifiée et la description s’affiche sur 3 lignes)

 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 { // Réinitialisation
 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; /* Nombre de lignes */
 }
 }
 }
}

Aucun changement pour JavaScript

Copiez le code HTML depuis « Publier sur le site »

Copiez le code HTML affiché

Collez-le dans le modèle HUGO

Créez layouts/partials/ranklet.html et collez-y le code HTML copié

1

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

Collez le code suivant sur la ligne précédant </footer> dans layouts/_default/single.html

1

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

C’est tout. Le classement s’affichera désormais comme au bas de cette page.

À propos du site de photos pour blogs "Unsplash"

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

À propos d’“Unsplash”

https://unsplash.com/ja/

Le site de matériel photo “Unsplash” peut être résumé comme suit :

Toutes les images peuvent être utilisées gratuitement
Utilisation commerciale autorisée
Modification d’image autorisée
Aucune autorisation requise
Aucune attribution de crédit requise

Il est très facile à utiliser lors de la rédaction d’articles pour un blog, n’hésitez pas à l’essayer.

※ En ce qui concerne la licence, veuillez consulter la “Note de bas de page” ci-dessous. ¹

Nous utiliserons également ce site.

Licence Unsplash ↩︎

Utiliser des balises HTML dans HUGO

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

Par défaut, HUGO n’autorise pas l’utilisation de balises HTML dans les articles, mais vous pouvez l’activer en ajoutant la description suivante au config.toml.

1
2


[markup.goldmark.renderer]
 unsafe = true

Référence: Configure Markup

Cocher toutes les cases sur une page web

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

Pour cocher toutes les cases sur une page web, ouvrez les DevTools avec F12, collez le code suivant dans la console et exécutez-le.

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

Ou,

Créez un nouveau favori et collez le code suivant dans l’adresse d’enregistrement (la partie où vous tapez généralement https://…). Affichez la page web que vous souhaitez cocher, puis cliquez sur le favori créé pour cocher toutes les cases.

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;}}})();

Pour tout décocher, remplacez la partie boxes[i].checked = true; du script ci-dessus par boxes[i].checked = false;.

Shortcodes utiles dans HUGO

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

Shortcodes utiles dans HUGO

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

Autres

Shortcodes

Remarque supplémentaire

Si vous souhaitez afficher {{< foo >}} sur le site, vous devez écrire {{</* foo */>}}.

J'ai commencé un blog

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

J’ai commencé un blog

Quelque chose comme des feux d’artifice, le code est ici

Bonjour. Pour une raison quelconque, j’ai décidé de commencer un blog.

Il n’y a pas de grand objectif comme “Je veux publier ça !”, mais j’ai pensé que ce serait bien d’avoir un endroit où je pourrais écrire sur la technologie, la vie quotidienne, ou tout ce qui me passe par la tête.

J’ai l’intention de le faire comme un bloc-notes, sans trop forcer.

Je le fais avec un truc appelé Hugo

Ce blog est fait avec un générateur de site statique appelé “Hugo”. J’ai trouvé un thème sympa, alors j’ai décidé de l’adopter sur un coup de tête. (C’est un secret que j’ai mis environ 2 heures pour choisir le thème)

Je prévois aussi de prendre des notes avec désinvolture sur le code et les outils qui m’intéressent.

L’histoire du matin chez Komeda

Au fait, ce matin, je me suis levé un peu tôt et je suis allé au café Komeda. Je suis parti à 8h30 et j’ai marché en respirant l’air du matin.

J’ai commandé le menu du matin A avec un mini Shiro-Noir et un café au lait. Je crois que c’était environ 800 yens ? (Je ne m’en souviens pas)

Les cafés le matin, c’est agréable. Avoir un peu de temps pour se détendre avant le travail me donne l’impression que la journée va bien se passer.

De cette façon, je vais écrire de manière détendue à partir de maintenant. Je prévois de mélanger des sujets techniques et des histoires du quotidien.

Merci de votre attention !