Strapi - Open source Node.js Headless CMS 🚀

Strapi is the next-gen headless CMS, open-source, JavaScript/TypeScript, enabling content-rich experiences to be created...

strapi.io

Strapiで制作したサイト「バスずかん」を公開しています。

バスずかん

バスの写真をたくさん掲載！バスずかんでは仙台を中心としたバスの写真を掲載しています。バスにっきとあわせてごらんください。

takabus.com

フロントエンドにはNuxt.jsを採用し、静的サイトジェネレーター（SSG）モードで完全静的サイトとして公開しています。ぜひご覧ください！

strapiとは？

StrapiはヘッドレスCMSのひとつです。

ヘッドレスCMSとは、フロントエンドを持たないCMS（コンテンツ管理システム）のことです。WordPressと同じように管理UIも有していますが、HTMLを返す代わりにJSONでデータを返してくれます。

WordPressとは異なり、別途フロントエンドも用意しなければなりませんが、その分柔軟性が増すというメリットがあります。

また、最近では、Nuxt.jsやReactなど、優秀なフロントエンドフレームワークがたくさん開発されています。これらのフレームワークを使うと、非常に効率よく開発をすすめることができます。昨今のWeb業界では、フロントエンドとバックエンドを分けて開発することが主流となっており、バックエンドをかんたんに開発する手法としてヘッドレスCMSが注目されているのです。

npmでインストール！

インストールはnpmで行うことができます。

npx create-strapi-app my-project --quickstart

インストール完了後、管理者アカウントの作成ページが表示されるので、指示に従ってパスワードを設定します。

メールアドレスのチェックは行われないので、メールアドレスと氏名については適当でOKです。

とくにトラブルなく構築することができました！

コンテンツタイプを作成する

まずはコンテンツタイプを作成しましょう。

コンテンツタイプとは、データベースでいうところのテーブルにあたるものです。どんなフィールド（カラム）を用意するのか、あらかじめ設定しておきます。

DIsplay nameにコンテンツの名前を入力します。データベースでいうところのテーブル名に該当するものです。ブログサイトであれば、postsなどを指定することになりますね。APIにアクセスする場合もこの名前を使用します。

つづけて、フィールドの追加を行います。

いろんなタイプを指定できるようになっています。

タイトルなど短めの文字列であればText、ブログ本文などエディタを使って編集したい場合はRich Textを選択します。

Relationをつかうと、ほかのコンテンツタイプ（モデル）を参照することもできます。

いくつか作成してみます。

３つほどフィールドを作成してみました。

最後に忘れずに保存します。

Saveをクリックすると、strapiがリスタートし、コンテンツタイプが作成されます。

無事作成できたようです。

なお、これらの設定はstrapiのディレクトリにあるapiディレクトリにJSONファイルとして保存されています。jsonファイルを直接編集しても設定することができます。

コンテンツを作成する

それでは、コンテンツを作成してみます。

Strapiではコンテンツの作成もGUIで行うことができます。WordPressのように手軽に利用できますし、開発者側としても自前で管理UIを作成しなくて良いので、大変便利です。

コンテンツのページに飛び、追加ボタンをクリックします。

すると、コンテンツ作成ページに移ります。

Rich Textフィールドについては、エディタを使用することができます。WordPressのようなデザインで、かんたんに操作できますね。

Mediaタイプのフィールドについては、ファイルアップローダーを利用することができます。

画像ファイルがアップロードされた場合は、自動的にリサイズ版も作成されます。ブログサイトなどでは、記事一覧ページのサムネイルなどのため、小さい画像も必要な場合がありますが、Strapiを使えばそれらの生成も自動的に行なってくれます。EXIFなどのメタデータも自動的に削除してくれるようです。

最後に保存をクリックします。

これで下書き保存されました。

となりにあるPublishをクリックすると、公開になります。Publishもクリックしましょう。

保存するだけでは公開はされません。

Publishをクリックし、このあと行うアクセス権の設定を済ますと、APIから取得できるようになります。

これでコンテンツが作成され、公開されました。

コンテンツの名前は適当に「asdfs」としてしまいましたが、このまま行くことにしましょう(^^;)本当はPostsとかにするべきでしたね。

アクセス権を設定する

ここまででデータを作成することはできています。

しかし、まだAPIから取得することはできません。APIからデータを取得するには、アクセス許可を設定しておく必要があります。

ログイン無しでAPIへアクセスする場合は、Publicロールが適用されます。Publicロールにアクセス許可を設定します。

「設定」＞「ロールと権限」をクリックします。

Publicの編集マークをクリック。

すると、権限の設定ページが表示されます。

「権限」パネルに権限のリストがありますので、

• count
• find
• findone

を許可しておきましょう。

選択できる権限については、以下のようになっています。

• count
  /モデルの複数形(postsなど)/countにアクセスすると、件数を取得できます。
• findone
  /モデルの複数形(postsなど)/idにアクセスすると、IDを指定してコンテンツを取得できます。
• find
  /モデルの複数形(postsなど)で全件取得できます。
• create・delete・update
  コンテンツの作成・削除・アップロードを許可します。

通常はcount,findone,findの３つを有効にしておけばいいでしょう。

終わったら保存をクリックします。

APIで投稿を取得してみる

それではstrapiのAPIをつかって、投稿を取得してみましょう。

コンテンツを取得するには、GETメソッドで次のようにアクセスします。

http://127.0.0.1:ポート番号/asdfses

ホスト名につづいて、取得したいモデルの複数形をつづけます。現在はモデル名をasdfsにしていたので、その複数形のasdfsesを指定すれば、コンテンツを取得できます。名前がPostなら、postsで取得できます。

ポート番号はstrapi起動時のシェルに表示されています。

Postmanを使って、APIへリクエストを投げてみましょう。Postmanがない方はブラウザで直接アクセスしてもかまいません。

取得できました！

JSON全体は次のようになっていました。

[
    {
        "id": 1,
        "hoge": "タイトル",
        "blog": "本文です。",
        "published_at": "2021-09-11T11:50:07.320Z",
        "created_at": "2021-09-11T11:37:15.896Z",
        "updated_at": "2021-09-11T11:50:07.353Z",
        "picture": [
            {
                "id": 2,
                "name": "SAMPLE-sm.jpg",
                "alternativeText": "",
                "caption": "",
                "width": 1024,
                "height": 683,
                "formats": {
                    "thumbnail": {
                        "name": "thumbnail_SAMPLE-sm.jpg",
                        "hash": "thumbnail_SAMPLE_sm_a409713b7d",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 234,
                        "height": 156,
                        "size": 9.59,
                        "path": null,
                        "url": "/uploads/thumbnail_SAMPLE_sm_a409713b7d.jpg"
                    },
                    "large": {
                        "name": "large_SAMPLE-sm.jpg",
                        "hash": "large_SAMPLE_sm_a409713b7d",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 1000,
                        "height": 667,
                        "size": 129.31,
                        "path": null,
                        "url": "/uploads/large_SAMPLE_sm_a409713b7d.jpg"
                    },
                    "medium": {
                        "name": "medium_SAMPLE-sm.jpg",
                        "hash": "medium_SAMPLE_sm_a409713b7d",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 750,
                        "height": 500,
                        "size": 78.26,
                        "path": null,
                        "url": "/uploads/medium_SAMPLE_sm_a409713b7d.jpg"
                    },
                    "small": {
                        "name": "small_SAMPLE-sm.jpg",
                        "hash": "small_SAMPLE_sm_a409713b7d",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 500,
                        "height": 333,
                        "size": 36.48,
                        "path": null,
                        "url": "/uploads/small_SAMPLE_sm_a409713b7d.jpg"
                    }
                },
                "hash": "SAMPLE_sm_a409713b7d",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "size": 131.9,
                "url": "/uploads/SAMPLE_sm_a409713b7d.jpg",
                "previewUrl": null,
                "provider": "local",
                "provider_metadata": null,
                "created_at": "2021-09-11T11:35:09.055Z",
                "updated_at": "2021-09-11T11:35:09.079Z"
            }
        ]
    }
]

きちんとデータが取得できていますね。

mediaフィールド（今回はpictureという名前にしました）を確認すると、ちゃんとリサイズ版も生成されていることがわかります。

表示されているURLをAPIにリクエストすると、ファイルも取得することができます。

なかなか便利ですね！Laravelで実装するなら、ファイルの保存やリサイズのロジックまで組まなければならないわけですが、それらをすべて割愛することができます。かなりの負担軽減です！

あとはVue.jsやNuxt.js、ReactなどのフロントエンドからAPIを利用してやれば、あっというまにサイトを作成することができます。

npmコマンドで操作できる

strapiはnpmコマンドからほとんどの操作を行うことができます。

起動するには、コンソール（WindowsならPowerShell）でstrapiのディレクトリを開き、

npm run strapi dev

を実行すればOKです。

Shiftを押しながら、strapiのフォルダを右クリックし、「PowerShellで開く」をクリックし、さきほどのコマンドを入力します。

起動が完了すると、管理ページとAPIのURLがシェルに表示されます。

シェルでCtrl＋Cを押せば、終了することができます。

本番環境ではnpm run strapiと入力し、実行します。この場合は、プラグインのインストールや重要な設定の変更などはできなくなります。

予想以上にかんたん！UIは要改良！

昨今流行りのHeadlessCMS。

今回はじめて使ってみましたが、予想以上にかんたんで驚きました。

当記事ではWebUIを使用した方法を紹介しましたが、ソースコードを書き換えて、機能拡張を行うこともできます。

ソースはMVCモデルに基づいた設計になっているため、カスタマイズ性も良好です。WordPres開発だと独自の関数をたくさん覚えなければなりませんが、Strapiではそういったこともなく、独自のルーティングやコントローラーをかんたんに追加することができます。

デメリットを挙げるとすると、UIの弱さでしょうか。せっかくコンテンツページにチェックボックスがあるのに、一括編集に対応していなかったり、リレーションフィールドのサジェスト機能が不安定だったりと、まだまだ改善の余地はあるのかなあと思います。エディタも基本的なタグしか対応していないうえ、リアルタイムプレビューにも対応していないため、WordPressに比べると使い勝手はよくありませんでした。

とはいえ、静的Webサイトにニュースリリースを追加したい場合や、基本のプロジェクトにちょっとした投稿機能を追加したいようなニーズであれば、Strapiで十分そうです。

今後の開発に乞うご期待です！

カラム名はあってる？

最初にマイグレーションのカラム名をチェックです。

// 外部参照するテーブル
Schema::create('items', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->unsignedBigInteger('master_id')->comment("マスターのID")->nullable();
    $table->foreign('master_id')->references('id')->on('masters');
});


// 外部参照先（参照を受けるほうの）テーブルのスキーマ
Schema::create('masters', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('name')->comment("名前")->nullable();
});

テーブル名、カラム名が正しいか確認してください。

型はunsignedBigIntegerにする

IDを外部参照するときは、データ型をunsignedBigIntegerにします。

$table->bigIncrements('id');
//を参照するなら、
$table->unsignedBigInteger('master_id')
//とする

通常、テーブルのIDカラムはbigIncrementsで自動採番としますが、bigIncrementsを参照したい場合は、unsignedBigIntegerで参照する必要があります。

マイグレーションの順番に注意！

盲点です。マイグレーションの順番に注意です。

マイグレーションはファイル名昇順で実行されるので、参照を受けるテーブルを先に作って置く必要があります。

たとえば、以下のようなマイグレーションファイルがあったとします。

この場合、question_setsテーブルからquestion_listsテーブルに参照が向けられていると、マイグレーションはうまくいきません。

create_question_sets_tableが実行される時点では、question_listsテーブルは存在しないためです。必ず参照先のテーブルから作成されるように、マイグレーションファイルの名前を変更しておく必要があります。

また、1つのマイグレーションファイルで複数テーブルを作成する場合も要注意です。

// 外部参照するテーブルをつくる
Schema::create('items', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->unsignedBigInteger('master_id')->comment("マスターのID")->nullable();
    $table->foreign('master_id')->references('id')->on('masters');
});

// →mastersテーブルがまだつくられていないので、失敗する

Schema::create('masters', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('name')->comment("名前")->nullable();
});

テーブルAからテーブルBを参照するなら、テーブルBのマイグレーションが先に実行されるようにします。

// 外部参照先（参照を受けるほうの）テーブル
Schema::create('masters', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('name')->comment("名前")->nullable();
});

// 外部参照するテーブル
Schema::create('items', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->unsignedBigInteger('master_id')->comment("マスターのID")->nullable();
    $table->foreign('master_id')->references('id')->on('masters');
});

// →mastersテーブルがつくられているので、成功する

まとめ

個人的によくひっかかると思われるポイントは以上の3点です。

とくにマイグレーションの順番は忘れがちなポイントですので、外部キー制約でエラーとなった場合は、確認してみることをおすすめします。

　しかし、C#と異なり、VisualC++ではプロジェクトのプロパティからかんたんに変更することはできません。ヘッダーファイルなどの編集が必要になります。

　当記事では、MFCアプリケーションやVisual C++のアプリケーションアイコン（実行ファイルのアイコン）を任意のアイコンに変更する方法を紹介します。

MFCアプリケーションのアイコンはどう決められている？

　C#やVBといった.NETでは、Visual Studioでプロジェクトのプロパティを開くと、GUIから使用するアイコンを設定できます。対して、MFCなどのVisual Cではこういったことができません。

　ではどのように変更するかというと、アイコンリソースのIDを変更します。

　各リソースには、ヘッダファイルにより定義されるIDが割り当てられています。そして、最小のIDが設定されたアイコンが、実行ファイルのアイコンとして使用されるようになっています。よって、実行ファイルのアイコンに使用したいアイコンリソースのIDを、アイコンリソースのなかで最も小さな値に変更してやることで、任意のアイコンをexeファイルに表示させることができます。

アイコンはどのように保存されているの？

そもそもアプリケーションの実行ファイルなどのアイコンは、どのようにして表示されているのでしょうか。

exe形式は一般に実行ファイルとして知られていますが、もう一つ重要な側面として、アーカイブ形式であることが挙げられます。アーカイブとは、複数のファイルを一つのファイルに集約することをいいますが、exeファイルもこのアーカイブ形式の一つで、アイコンはexeファイルの中にアーカイブされて格納されています。エクスプローラーで表示されるときに、アーカイブされているアイコンが表示されるという仕組みです。

Lhaplusなどのソフトウェアを用いると、次の画像のようにアーカイブされたファイルを取り出すことができます。

MFCアプリケーションのアイコンを変更するには？

それでは、具体的なやり方を紹介します。

【手順1】アイコンファイルをリソースに追加する

リソースビューから既存のアイコンファイルをインポートします。

[ソリューションエクスプローラー]から、アプリケーションのリソースファイルをダブルクリックします。

すると、[リソースビュー]が立ち上がるので、「Icon」を右クリックし、「リソースの追加」をクリックします。

[リソースの追加]ダイアログが開くので、「インポート」をクリック。

出てきたダイアログから、作成しておいたアイコンファイル（.ico）を選択します。

すると、こんな感じでアイコンファイルがリソースに追加されます。

【手順2】Resource.hを開く

[ヘッダーファイル]フォルダから、Resource.hを開きます。

【手順3】アイコンにしたいリソースのIDを最小に変更する

Resource.hを開いたら、ICONファイルのIDが定義されている箇所を探します。

オレンジで囲った部分がアイコンリソースのIDとなります。例として、「IDI_ICON2」を実行ファイルのアイコンにしてみましょう。

IDI_ICON2のIDをアイコンリソースのうち最小のIDに設定します。

ここでは125を割り当ててみました。ほかのアイコンよりも小さい値にすれば、なんでもOKです。

これでビルドします。

ちゃんと変わってますね。

アイコンがうまく変わらないときは？

　今回の方法を試しても、アイコンが変化しなかったという方もいるかもしれません。

　それはおそらくエクスプローラーのキャッシュが原因です。

　Windowsエクスプローラーは、アプリケーションのアイコンをキャッシュする機能を持っています。キャッシュが働いていると、正常にアイコンを変更できていても、表示に反映されない場合があります。

　実行ファイルを別のフォルダに移すと、キャッシュがクリアされて、アイコンが再読み込みされます。アイコンが変わらない場合は、実行ファイル（.exe）を別フォルダに移動させてみましょう。この状態でアプリケーションを起動してみて、正しくアイコンが変更されているか確認してみてください。

　注意してほしいのは、この現象はF5キーを押しても解決しません。また、アプリケーションを起動しなおした場合でも、以前のアイコンが表示されてしまいます。必ず別の場所に移動させてから、アイコンを確認するようにしてください。

まとめ

VIsualC++のアイコンを変更する方法について紹介しました。

意外につまづくのは、「うまくいかないときは？」で取り上げたキャッシュの問題かも知れませんね。ちゃんとやったはずなのに、アイコンが変わらないときは、キャッシュのせいではないかと疑ってみることをおすすめします。

サンプルコード

さっそくサンプルコードを公開します。

URL「http://192.168.1.4/test/test.php」に、次のデータをPOSTする例です。

• キー「a」値「1234」
• キー「b」値「5678」

// ConsoleApplication1.cpp : このファイルには 'main' 関数が含まれています。プログラム実行の開始と終了がそこで行われます。
//

#include <iostream>//std::coutなど使うのに必要
#include <tchar.h>//_Tを使うのに必要
#include <windows.h>//wininet.hを使うのに必要
#include <wininet.h>//HTTP通信に必要

//追加の依存ファイルにwininet.libを設定
#pragma comment (lib, "wininet.lib")


int main()
{
	// インターネット接続のハンドルを作成
	HINTERNET hInternet = InternetOpen(
		NULL, //User-Agentに設定したい文字列を指定する
		INTERNET_OPEN_TYPE_PRECONFIG,//接続方法（直接接続・プロキシ使用）を指定する
		NULL,//プロキシサーバーのアドレスを指定する
		NULL,//プロキシサーバー使用時、プロキシを経由させないで直接接続するアドレスを指定する
		0//オプション
	);

	// インターネット接続を確立して、コネクトハンドルを得る
	HINTERNET hConnect = InternetConnect(
		hInternet,
		_T("192.168.1.4"),//サーバーアドレス
		INTERNET_DEFAULT_HTTP_PORT,//ポート番号を指定する
		NULL,//認証ユーザー名を指定する
		NULL,//認証パスワードを指定する
		INTERNET_SERVICE_HTTP,//サービスタイプ(HTTP・FTP)を指定する
		0,//FTP接続時、パッシブモードにするかどうか指定する
		0
	);

	// リクエストを開いて、リクエストハンドルを得る
	HINTERNET hRequest = HttpOpenRequest(
		hConnect,
		_T("POST"),//POSTにする
		_T("/test/test.php"), //ホスト名以下
		_T("HTTP/1.1"),//HTTPプロトコルバージョン
		NULL, NULL, INTERNET_FLAG_RELOAD, 0);

	// ヘッダーを設定する
	wchar_t header[] = L"Content-Type: application/x-www-form-urlencoded; charset=utf-8";//コンテンツタイプをFORMに指定

	//送信データを指定する
	char data[] = "a=1234&b=5678";

	// リクエストを送信する
	BOOL r = HttpSendRequest(
		hRequest,//リクエストハンドルを指定する
		header, //ヘッダーを指定する
		wcslen(header), //ヘッダーのサイズを求めて指定する
		(LPVOID)(data),//送信コンテンツを指定する
		strlen(data) //送信コンテンツのサイズを求めて指定する
	);

	// エラーがあれば表示する
	std::cout << GetLastError() << std::endl;

        // ハンドルを閉じる
	InternetCloseHandle(hInternet);
}

実行すると、サーバーに次のようなデータが届きます。

2020-12-10 12:15:08 Array //リクエストヘッダー
(
    [Content-Type] => application/x-www-form-urlencoded
    [Host] => 192.168.1.4
    [Content-Length] => 13
    [Cache-Control] => no-cache
)

2020-12-10 12:15:08 Array //POSTデータ
(
    [a] => 1234
    [b] => 5678
)

きちんとPOSTできていますね。

▼PHPでリクエストヘッダとPOSTされたデータを書き出す方法は、次のページで紹介しています。

【PHP】POST・GETされたデータとヘッダーをロギングする方法

デバッグするときに、POST・GETで送信したデータやリクエストヘッダーを確認したいときがあります。こういったデータをテキストファイルに書き出すPHPコードを掲載しておきます。かんたんにクライアントからのリクエストを把握できるようになるので、とても便利ですよ～

takabus.com

2021.01.10

解説

　C#（.NET）なら、WebRequestを使ってかんたんにPOSTできますが、C++ではWinINetを使用します。

　WinINetのほかにWinHTTPというAPIもありますが、通常は使用する必要はありません。WinHTTPのWebクライアントとしての機能は、WinINetに内包されています。よって、クライアントとしてPOSTするだけなら、基本的にWinINetを使用すればOKです。逆に、HTTPサーバーを構築するときは、WinHTTPを使用する必要があります。

　次のページにWinINetとWinHTTPの機能比較表が掲載されていますが、利用可能な機能もWinINetのほうが多いです。WinINetなら、HTTPのみならず、FTPも使用することができます。

WinINet vs. WinHTTP - Win32 apps

Learn how to choose between WinInet and WinHTTP. Read a comparison of features, and review related topics.

learn.microsoft.com

処理の流れ

　まず、全体の流れを整理します。

　最初にInternetOpen関数を実行します。

void InternetOpenW(
  LPCWSTR lpszAgent,
  DWORD   dwAccessType,
  LPCWSTR lpszProxy,
  LPCWSTR lpszProxyBypass,
  DWORD   dwFlags
);

　InternetOpen関数を実行することで、WinINetが初期化されます。初期化が完了すると、ハンドルが返されます。以降、ここで得られたハンドルを使用して、処理を行っていきます。

Unicode対応版としてビルドした場合、InternetOpen関数をはじめ、ほとんどの関数はワイド文字対応版の関数（末尾に「W」がついている関数）に置き換えられます。（既定ではUnicode対応版としてビルドされます。）よって、InternetOpen関数とInternetOpenW関数は同じものとして考えてもらってかまいません。

　次にInternetConnect関数を実行します。

void InternetConnectW(
  HINTERNET     hInternet,
  LPCWSTR       lpszServerName,
  INTERNET_PORT nServerPort,
  LPCWSTR       lpszUserName,
  LPCWSTR       lpszPassword,
  DWORD         dwService,
  DWORD         dwFlags,
  DWORD_PTR     dwContext
);

　これにより、サーバーに接続が行われ、セッションが開始されます。

　あとは、HTTPOpenRequest関数とHTTPSendRequest関数により、データをPOSTします。

// リクエストを開いて、リクエストハンドルを得る
HINTERNET hRequest = HttpOpenRequest(
	hConnect,
	_T("POST"),//POSTにする
	_T("/test/test.php"), //ホスト名以下
	_T("HTTP/1.1"),//HTTPプロトコルバージョン
	NULL, NULL, INTERNET_FLAG_RELOAD, 0);

// ヘッダーを設定する
wchar_t header[] = L"Content-Type: application/x-www-form-urlencoded";//コンテンツタイプをFORMに指定

//送信データを指定する
char data[] = "a=1234&b=5678";

// リクエストを送信する
BOOL r = HttpSendRequest(
	hRequest,//リクエストハンドルを指定する
	header, //ヘッダーを指定する
	wcslen(header), //ヘッダーのサイズを求めて指定する
	(LPVOID)(data),//送信コンテンツを指定する
	strlen(data) //送信コンテンツのサイズを求めて指定する
);

　POSTでデータを送信する際には、何らかのMIMEタイプにデータをエンコードする必要があります。jsonなどをはじめ、使用できるMIMEタイプは多岐にわたりますが、今回はformタグを送信する際に使用される「application/x-www-form-urlencoded」を採用します。この場合、送信データは「キー＝値」のペアを&で区切る形でエンコードされますので、送信データもそれに従って定義しておきます。

//送信データを指定する
char data[] = "a=1234&b=5678";

POST リクエストメソッド - HTTP | MDN

POST は HTTP のメソッドで、サーバーにデータを送信します。リクエストの本体の型は Content-Type ヘッダーで示されます。

developer.mozilla.org

　リクエストヘッダーのContent-typeにも、「application/x-www-form-urlencoded」を指定しておきます。これでサーバーは受け取ったデータを適切にパースしてくれるようになります。

// ヘッダーを設定する
wchar_t header[] = L"Content-Type: application/x-www-form-urlencoded";//コンテンツタイプをFORMに指定

　リクエストの送信が完了したら、ハンドルを破棄しましょう。

//ハンドルを閉じる(hRequestなどは同時に閉じられるのでClose不要)
InternetCloseHandle(hInternet);

　当プログラムでは、複数のハンドルが使用されていますが、hInternetハンドルだけ閉じれば十分です。二次的に生成されているhRequestなどのハンドルは、自動的に同時に閉じられます。

　POSTによる送信については以上です。エラーはGetLastError関数で取得できますので、うまくいかないときは追加してみてください。

レスポンスを取得するには？

　POSTした後、サーバーからのレスポンスを取得したいケースもあるでしょう。サーバーからのレスポンスは、hRequestハンドルにFileとして格納されています。

　InternetReadFile関数を使用すると、格納されているレスポンスデータを読み出すことができます。

サンプルコード

InternetCloseHandle(hInternet);の前に、次のコードを追加してください。

//レスポンス取得・表示

char buf[1024] = { 0 };//バッファ
DWORD size = 1024;//1回あたり読み出すサイズ
BOOL bResult;
DWORD lpdwReadLength;

for (;;) {

	//レスポンスを取得する
	bResult = InternetReadFile(hRequest, buf, sizeof(buf), &lpdwReadLength);

	//読み出しサイズ0以下のとき、ループを抜ける
	if (lpdwReadLength <= 0) {
		break;
	}

	//バッファを出力する
	printf("%s", buf);
	//std::cout << buf;
}

// エラーがあれば表示する
std::cout << GetLastError() << std::endl;

//ハンドルを閉じる(hRequestなどは同時に閉じられるのでClose不要)
InternetCloseHandle(hInternet);

これを追加して実行すると、コンソールにレスポンスが出力されます。

解説

　InternetReadFile関数は、hRequestハンドルの中に格納されているレスポンスボディを読み出します。

BOOLAPI InternetReadFile(
  HINTERNET hFile,
  LPVOID    lpBuffer,
  DWORD     dwNumberOfBytesToRead,
  LPDWORD   lpdwNumberOfBytesRead
);

　第3引数に、1回あたり読み出すバイト数を指定します。読み出されたデータ（文字配列）は、第2引数に出力されます。第2引数に文字型配列（char[]）を指定することで、指定したバイト数だけ、サーバーからのレスポンスを文字列として取り出せるという仕組みです。これをforでループさせて、レスポンス全体を取得します。

　使用する変数は、最初に定義してあります。

char buf[1024] = { 0 };//バッファ
DWORD size = 1024;//1回あたり読み出すサイズ
BOOL bResult;
DWORD lpdwReadLength;

NULL終端

Cでの文字列は、必ずNULLで終わっていなければならないというルールがあります。これをNULL終端といいます。

今回、バッファとして使用する配列（buf）は、変数定義の時点でゼロクリアしておきました。buf[1024]={0}とは、次のコードを実行しているのとほぼ同義です。

for (int i = 0; i < 1024; i++) {
	buf[i] = '\0';
}

これをせずに、ただの空配列としてbufを定義してしまうと、bufがレスポンスデータで埋めつくされない場合に問題が出ます。末尾の要素が不定となってしまい、以下のような実行結果になってしまいます。

NULL終端に関わる部分は、脆弱性の元となることもあります。次のページに詳しい解説がなされていますので、興味があれば参照してみてください。

文字列はNULL終端させる　――C/C++セキュアコーディング入門（3）

文字列操作に関するプログラミングエラーはいくつかありますが、今回は基本的であるが間違いを犯しやすい文字列のNULL終端エラーについて解説します。

codezine.jp

ステータスコードを取得するには？

　ステータスコードなど、各種情報を取得したいときにはHttpQueryInfo関数を使用します。

例）ステータスコードを取得する

//ステータスコード取得
DWORD buf2 = { 0 };
DWORD buf2len = sizeof(buf2);

HttpQueryInfoW(hRequest, HTTP_QUERY_STATUS_CODE | HTTP_QUERY_FLAG_NUMBER, &buf2, &buf2len, 0);

printf("%d", buf2);

　実行すると、ステータスコードが表示されます。

404

　ステータスコード以外にも、HttpQueryInfo関数を使用すると、ヘッダーに含まれる様々な情報を取得することができます。第2引数にパラメーターを指定することで、取得するデータを切り替えることができます。指定できるパラメータは、次のページにまとめられています。

Query Info Flags (Wininet.h) - Win32 apps

The following lists contain the attributes and modifiers used by HttpQueryInfo and QueryInfo.

learn.microsoft.com

日本語のデータを送るには？

　基本的にこのままでOKです。data変数に日本語を追加してもらえれば、日本語も送れるはずです。

char data[] = "a=1234&b=5678&あ=あいうえお";

　実際にやってみたところ、日本語も送信することができました。

WinINetのオプションを活用する

　WinINetには、さまざまなオプションが用意されています。オプションを設定するにはInernetSetOption関数を使用します。タイムアウト時間を変更したり、接続失敗時に自動的にリトライするようにしたりすることができるようになります。

BOOL InernetSetOption(
     IN HINTERNET hInternet OPTIONAL,
     IN DWORD Option,
     IN LPVOID Buf,
     IN DWORD BufSize);

第1引数には、hInternetハンドルを指定します。InternetOpen関数で返されるハンドルです。

タイムアウト時間を変更する

　Optionに”INTERNET_OPTION_CONNECT_TIMEOUT”を指定すると、タイムアウト時間を任意に設定することができます。

InternetSetOption(hInternet, INTERNET_OPTION_CONNECT_TIMEOUT, &dwtimeoutMs, sizeof(timeoutMs));

　第3引数にタイムアウトまでの時間をミリ秒単位で指定します。指定時間内にサーバーとの接続が確立できないと、エラー12002（ERROR_INTERNET_TIMEOUT）が発生します。

接続できないときに自動で再試行するようにする

　INTERNET_OPTION_CONNECT_RETRIESオプションを設定すると、接続失敗時に自動再試行させることもできます。

InternetSetOption(hInternet, INTERNET_OPTION_CONNECT_RETRIES , &dwRetryTimes, sizeof(dwRetryTimes));

　自動再試行する回数や間隔を任意の値に設定することができます。

　ほかにも様々なオプションが用意されています。MSDNに指定できるパラメーターが掲載されていますので、ご参照ください。

Option Flags (Wininet.h) - Win32 apps

The following option flags are used with the InternetQueryOption and InternetSetOption functions. All valid option flags...

learn.microsoft.com

まとめ

　.NET Frameworkの活用が当たり前になっている世の中で、「今頃C++？？」という印象を受ける方もいるかもしれません。

　しかし、実際動かしてみると、C#とは比較にならないくらい、爆速で動作します。一瞬で処理が完了するので、とにかく速く動作させたいというニーズには、今でもぴったりな選択肢といえるでしょう。

　それに、メモリを初期化したりなど、C#では味わえない”コンピューターをコントロールしている感覚”がまた新鮮です。きっちり理解していないと動作させられないので、勉強になります。ふだんHTTPClientを使用されている方も、たまにはC++で遊んでみてはいかがでしょうか。

　WinINetに関しては、Microsoft Docsに詳細が掲載されています。あわせて参照することをおすすめします。

HTTP Sessions - Win32 apps

Resources on the WWW are accessed by using http.

learn.microsoft.com

　こういうときに使えるコードを載せておきます。

サンプルコード

　phpファイルを作成し、以下のコードをコピー・アンド・ペーストします。Webサーバーにアップロードすれば完了です。

<?php
// ログ保存ファイル名
define("TXTFILE", "log.txt");
// ファイルを追記モードでオープン
$fh = fopen(TXTFILE, "a+");
//ヘッダーをすべて取得して、配列として取得
$str = print_r(getallheaders(), true);//print_r関数は、第2引数んいtrueを指定すると、内容を返すことができる
// ファイルに追記する
fputs($fh,  date("Y-m-d H:i:s") . ' ' . $str . "\n");
// WEBページにも表示しておく
echo ($str);
// POSTされたデータをすべて取得して、配列として取得
$str = print_r($_POST, true);
// ファイルに追記する
fputs($fh,  date("Y-m-d H:i:s") . ' ' . $str . "\n");
// GETされたデータをすべて取得して、配列として取得
$str = print_r($_GET, true);
// ファイルに追記する
fputs($fh,  date("Y-m-d H:i:s") . ' ' . $str . "\n");
// WEBページにも表示しておく
echo ($str);
// ファイルを閉じる
fclose($fh);
// var_dump(file_get_contents(TXTFILE));
?>

あとはそのphpにPOSTしてみると、こんな感じで、POSTされたデータとRequestヘッダーがテキストファイルに記録されます。

2020-12-10 12:44:24 Array
(
    [Content-Type] => application/x-www-form-urlencoded
    [Host] => 192.168.1.4
    [Content-Length] => 13
    [Cache-Control] => no-cache
)

2020-12-10 12:44:24 Array
(
    [a] => 1234
    [b] => 5678
)
2020-12-10 12:44:24 Array
(
)

　ログを出力するテキストファイルは、phpを配置したディレクトリに作成されます。GETでもヘッダーは記録されますので、ブラウザでアクセスするだけでもログが追加されていきます。

　もちろん、ログファイルが作成されるディレクトリは、Webサーバーから書き込めるように、書き込み権限を設定しておく必要がありますので、お忘れなく。

# chmod -R 777 test //全ユーザーからの全権限（書き込み含む）を許可