ブログ運営 on kenji.blog

Slack App + OAuth2 を使って Slack にメッセージを投稿する方法

Wed, 16 Jul 2025 23:36:27 +0900

✅ アクセストークンを使う投稿方法（Slack Web API）

Slackの「OAuth Token（xoxb-〜など）」は、Slackの Web API を使って投稿するためのキーです。この場合、Webhookとは違い Slack API エンドポイント に Authorization: Bearer ヘッダー付きで POST します。

🔑 必要な前提

Slackアプリで OAuthスコープに chat:write を含める必要があります：

設定手順

https://api.slack.com/apps にアクセス
アプリ作成 or 既存アプリを選択
「OAuth & Permissions」 > Scopes にて → chat:write を追加
「Install to Workspace」または「Reinstall」して Access Token を取得（例: xoxb-xxxxxxxxxx）

💻 C++ コード（WinHTTPで Slack API へ投稿）

 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


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

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

bool PostSlackMessage(const std::wstring& accessToken, const std::string& channel, const std::string& text) {
 const wchar_t* host = L"slack.com";
 const wchar_t* path = L"/api/chat.postMessage";

 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 if (!hSession) return false;

 HINTERNET hConnect = WinHttpConnect(hSession, host, INTERNET_DEFAULT_HTTPS_PORT, 0);
 if (!hConnect) return false;

 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", path,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 // AuthorizationヘッダーとContent-Type
 std::wstring headers = L"Content-Type: application/json\r\n";
 headers += L"Authorization: Bearer " + accessToken + L"\r\n";

 // JSONボディ
 std::string body = R"({"channel":")" + channel + R"(","text":")" + text + R"("})";

 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 (DWORD)-1,
 (LPVOID)body.c_str(),
 body.length(),
 body.length(),
 0);

 if (!result || !WinHttpReceiveResponse(hRequest, NULL)) {
 std::cerr << "送信エラー\n";
 return false;
 }

 // ステータスコード確認
 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 token = L"xoxb-あなたのアクセストークン"; // アクセストークン
 std::string channel = "チャンネルIDまたは#general"; // 例: "#general" or "C0123456789"
 std::string message = "C++からSlackに投稿してみた！";

 if (PostSlackMessage(token, channel, message)) {
 std::cout << "投稿成功！\n";
 } else {
 std::cerr << "投稿失敗。\n";
 }

 return 0;
}

📌 チャンネルIDの取得方法

チャンネル名（例: #general）だけではエラーになることがあります。確実な方法は、SlackのチャンネルページURLにあるIDを使うことです。

1
2


https://app.slack.com/client/Txxxxx/C0123456789
 ↑この部分がチャンネルID

✅ トークンの種類について（補足）

トークンの形式	用途	例
`xoxb-...`	Bot Token（推奨）	投稿・編集・削除
`xoxp-...`	User Token（非推奨）	非Bot系の操作
Refresh Token	長期トークン更新用	通常は使わない

📝 まとめ

Slack に C++ から投稿するには、Slack Web API + Bearer Token 方式が確実
chat.postMessage エンドポイントを HTTPS POST で使う
トークンは Bearer ヘッダーで送信すること
チャンネルは ID指定 が確実

C++（Win32 API + WinHTTP）でSlackにメッセージを投稿する方法【Webhook対応】

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

C++（Win32 API + WinHTTP）でSlackにメッセージを投稿する方法【Webhook対応】

SlackにC++からメッセージを投稿したい。 Node.js や Python ではよくあるけど、「C++ × Win32 API × WinHTTP」でやるケースは少ないですよね。

この記事では、Webhook URLを使ってSlackにC++からメッセージを送信する方法 を、ステップ・バイ・ステップでわかりやすく解説します。

✅ 全体の流れ

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（フォーム）における「必須」マークについて、UIガイドライン資料とともに整理しました。

📌 主な必須マークとベストプラクティス

アスタリスク (*) の使用
- 一般的にもっとも普及しており、必須フィールドに「*」を付けます。
- ただし、*フォーム冒頭に「 は必須項目です」などの説明が必須**です (Nielsen Norman Group, カリフォルニア州立大学ノースリッジ)。
- 色を使って強調する例もあります（赤文字など）。
ラベルに “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 (カリフォルニア州立大学ノースリッジ, 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に変換して、Webサイトを作成することができます。Hugo は、Go言語で書かれており、高速で動作します。

このブログもHugo で作成されています。

Hugo のCLIのインストール

Hugo のCLIをインストールするには、以下のコマンドを実行します。

※ macOSの場合の例です。他のOSの場合は、公式ドキュメントを参照してください。

1

brew install hugo

Homebrew を使ってインストールすることができます。

Hugo のコマンド一覧

Hugo には、様々なコマンドが用意されています。以下に、よく使うコマンドをまとめました。

新しいサイトを作成する

1

hugo new site <サイト名>

新しいサイトを作成するコマンドです。<サイト名>には、サイトの名前を指定します。

新しい記事を作成する

1

hugo new <記事名>.md

新しい記事を作成するコマンドです。<記事名>には、記事の名前を指定します。

サーバーを起動する

1

hugo server

ローカルサーバーを起動するコマンドです。http://localhost:1313でアクセスできます。

ビルドする

1

hugo

サイトをビルドするコマンドです。publicディレクトリにHTMLファイルが生成されます。

デプロイする

1

hugo deploy

サイトをデプロイするコマンドです。デプロイ先の設定は、config.tomlファイルで行います。

記事一覧を表示する

1

hugo list all

記事一覧を表示するコマンドです。

設定の確認

1

hugo config

設定を確認するコマンドです。

ヘルプを表示する

1

hugo help

ヘルプを表示するコマンドです。

バージョンを表示する

1

hugo version

バージョンを表示するコマンドです。

以上が、Hugo のコマンド一覧です。他にも、様々なコマンドが用意されていますので、公式ドキュメントを参照してください。

参考

Hugo 公式ドキュメント

Webページの自動更新ブラウザ拡張(Edgeアドオン)

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

Webページを自動更新するEdgeのブラウザ拡張機能「タブの自動更新」を紹介します。

タブの自動更新のインストール

タブの自動更新

上記のサイトにアクセスし、インストールをクリック。

拡張機能の追加をクリック。

使い方

インストールが完了すると、Edgeの右上にアイコンが追加されます。

自動更新したいWebページを開き、アイコンをクリックすると、自動更新が開始されます。

緑枠の部分が自動更新される間隔です。自動更新するタイミングを選択してください。

自動更新を停止する場合は、アイコンをクリックしてStop reloading this tabをクリックします。

かっこいいWebページテンプレート（html5up）

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

かっこいいWebページテンプレート

html5up https://html5up.net/

を使ってみたいと思ったのでメモです。

Googleアナリティクスから人気ページランキングを取得して配置する方法

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

はじめに

Rankletというサービスを使うと、Googleアナリティクスから人気ページランキングを取得して簡単に配置できます。

この記事ではHUGOブログに配置する方法をご紹介します。

動作イメージ

準備

サイトにGoogleアナリティクスを設定していること

手順

Rankletにアクセスする
Sign in with GoogleをクリックしてGoogleアカウントでログインする（Googleアナリティクスのアカウントと紐づけられていること）

許可をクリック

基本情報を設定する

上記のように設定しました。

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" . }}

以上です。これでこのページ下のようににランキングが表示されます。

ブログで使える写真素材サイト「Unsplash」について

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

「Unsplash」について

https://unsplash.com/ja/

写真素材サイト「Unsplash」はまとめると下記となっているようです。

全ての画像を無料で使える
商用利用OK
画像の加工OK
使用許可は不要
クレジット表記不要

ブログで記事を書く上で非常に使いやすいので、ぜひ使ってみてください。

※ライセンスについては下記の「脚注」を参照してください。¹

このサイトでも活用していきます。

Unsplash ライセンス ↩︎

HUGOでHTMLタグを使う

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

HUGOのデフォルトでは記事中のHTMLタグの使用ができなくなっていますが、config.tomlに下記の記述をするとできるようになります。

1
2


[markup.goldmark.renderer]
 unsafe = true

参考: Configure Markup

Webページ内のすべてのチェックボックスを全チェックする

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

Webページ内のチェックボックスを全チェックするには、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://…と入力する部分に)に以下のコードを貼り付けて登録します。チェックをつけたいWebページを表示し、作成したブックマークをクリックするとすべてのチェックボックスがチェックされます。

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で使えるショートコード

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

HUGOで使えるショートコード

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

その他

Shortcodes

余談

サイト上で{{< foo >}}と表現したい場合は、{{</* foo */>}}と記述する必要があります。

PaperModの画像の配置変更

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

既定のレイアウトは、画像を中央に横幅100%で配置されていますが、少し大きいなと感じることがあったため、画像をタイトルの下に周り込ませて、横幅を150px程度に変更してみました。

ファイルの変更箇所は下記のとおりとなります。

blank.css

余白や画像のサイズ、テキストの表示行を変更するために、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

blank.css側で定義を削除できなかったので、post-entry.cssに下記の場所を1行削除します。

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← この行を削除
 height: auto;
}

list.html

画像の配置を変更するために、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) }} --><!-- 下に移動 -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- 下に移動 -->
 <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;"><!-- 追加 -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- 追加 -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- 上から移動 -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- 上から移動 -->
 </div><!-- 追加 -->
 <div style="width:100%;"><!-- 追加 -->
 {{- 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><!-- 追加 -->
 </div><!-- 追加 -->
</article>

似た要望は少なからずあるようです。

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

本家の方でも対応してくれるとありがたいなぁ。

PaperModでTwitter Cardを設定する方法

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

はじめに

PaperModテーマはTwitter Cardに対応しています。ただし、Twitter Cardの設定は、config.tomlまはた各記事の*.mdのヘッダ情報に記述する必要があります。各記事とconfig.tomlの両方に設定した場合は、各記事のヘッダ情報が優先されます。

設定方法

config.toml

config.tomlには、[params]の下に、imagesという項目を追加します。 imagesには、Twitter Cardに表示する画像のパスを記述します。画像をstaticフォルダに配置する場合は、ファイル名だけの指定でOKです。

1
2


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

フォルダ構成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (ココに記述)
├─content
│ └─posts
│ └─記事フォルダ
│ │ index.md (ココに記述)
│ └─images
│ cover.png (ココに配置)
└─static
 twitter_card.jpg (ココに配置)

各記事のヘッダ情報

各記事のヘッダ情報には、coverの配下にimageという項目を追加します。 relativeをtrueにすると、記事の*.mdからの相対パスで指定できます。

1
2
3


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

記事の上部には表示させたくない場合

記事の上部にカバー画像を表示させたくない場合は、coverの配下にhiddenという項目を追加てtrueに設定します。

1
2
3
4


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

画像のサイズについて

現状のPaperModの仕様でTwitter Cardのサイズは、summary_large_imageのみ対応しているようです。 summary_large_imageの適切なサイズ（解像度）は、諸説ありますが800 x 418（画像比1.91:1）あたりがよさそうです。

参考サイト1 参考サイト2

できれば、画像サイズをリサイズして投稿することをおすすめします。

設定の確認方法

Twitter Cardの設定を確認するには、Twitter Card Validatorを利用します。ただし、私の環境ではうまくプレビューが表示されなかったため、もしプレビューが表示が表示されない場合は非公開のアカウント等を使って投稿前に一度確認しておくことをおすすめします。

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を実行するために環境変数に登録します。 Windows11での操作になりますが、下記のような手順で登録できると思います。

Win+Pauseボタンを押してバージョン情報を開く
システムの詳細設定をクリックする
環境変数をクリックする
Pathを選択して編集をクリックする
新規をクリックして、新しい行に「C:\bin」と入力してOKでダイアログを閉じる

ブログをプレビューする

コマンドプロンプトで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時間くらいかかったのは秘密です）

コードのこととか、気になったツールとかも、気軽にメモしていくつもりです。

朝コメダのはなし

ちなみに今朝は、ちょっと早めに起きて、コメダ珈琲に行ってきました。 8時半に出発して、朝の空気を吸いながら、てくてくと。

ミニシロノワールとカフェオーレのAモーニングセットを注文。たしか800円くらいだったかな？（おぼえてない）

朝のカフェ、いいですね。仕事前にちょっとぼーっとする時間があると、なんか一日うまくいく気がします。

そんな感じで、これからゆるっと書いていきます。技術的な話も、日常のことも、混ざりつつやっていく予定です。

よろしくどうぞー！