Visual Studio 2019 × OpenCV (C++)  [導入からWebカメラを使うまでの軌跡]

#はじめに
私が**Visual Studio 2019** (以下VS2019) で**OpenCV** を使うまでの軌跡を
備忘録がてら記載していきます.
(※Visual Studio Code ではありません)

先に言っておきます.

**最初から最後までイッキ見しようとすると, かなり長いです.**

かといって記事を分ける気にもなれず...

目次があるので必要なものを
取捨選択していただくとありがたいです.


#環境
```
Visual Studio 2019
OS: Windows10
```

#目次
**前半戦**

- [Visual Studio 2019 をインストール](#visual-studio-2019-をインストール)
- [Visual Studio 2019 で C++ のコードを実行](#visual-studio-2019-で-cのコードを実行)
- [OpenCV の環境設定](#opencv-の環境設定)
    - [OpenCV のインストール](#opencv-のインストール)
    - [グローバルな設定(環境変数)](#グローバルな設定)
    - [ローカルな設定(プロジェクト側)](#ローカルな設定)

**後半戦**

- [OpenCV を使う](#opencv-を使う)
    - [画像入出力](#画像入出力)
        - [エディタを少し編集](#エディタを少し編集)
        - [ソースコード](#ソースコード)
        - [出力結果](#出力結果)
    - [Webカメラ](#webカメラ)
        - [ソースコード](#ソースコード-1)
        - [出力結果](#出力結果-1)

ご自身に必要な部分へジャンプしてください.

前半戦
---
#Visual Studio 2019 をインストール
Windowsユーザーであればデフォルトで入っていることが多いと思いますが
もしアプリケーションがPC内に存在しない場合はインストールしましょう.

しかし, 私がここに記載するより, 公式のDOCが分かりやすいので
こちらをご覧ください.
[-Visual Studio に C および C++ サポートをインストールする-][vsCpp]
(※MicroSoftアカウントが必要です)

>
![vs-installer-workloads.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/bc7ec83f-ba97-ee4a-8d2e-29b46bbb9912.png)
(*公式より引用*)

これはワークロード選択画面です.

`Desktop development with C++` :white_check_mark:
もしくは
`C++によるデスクトップ開発` :white_check_mark:
にチェックを入れるのを忘れないようにしてください.

また, インストールにはわりと時間がかかると思います.

インストール終了後, **PCの再起動** を要求されると思うので再起動してください.
再起動後VS2019を起動すると以下のような画像が表示されると思います.
![エントリー画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/d262a088-191a-cbff-0c00-2bd0e6c79dd5.png)


#Visual Studio 2019 で C++のコードを実行
C++/Cのコードが実行できるのか実際に試してみましょう.
##VS2019を起動
###▷新しいプロジェクトの作成(N)を選択
![プロジェクト作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/b044f272-ad06-0e51-a963-7a66b1f7dc15.png)

###▷コンソールアプリを選択し, 次へ(N)
![アプリ形式選択](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/b6073af2-a3d5-dc50-0e2d-cc8f5baf408a.png)

###▷適当なプロジェクト名をつけ, 作成(C)
![名前付け](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/8c2f0d87-1098-1de1-ecbc-5fa889da840f.png)

以上でC++のプロジェクトのエディタ画面が開かれます.

###▷エディタの設定
左上(ヘッダーのすぐ下)の水色枠を `debug`
赤枠を**32bitOS**なら `x86` , **64bitOS**なら `x64`
に設定します.

後半戦のために `x64` にしておいてください.
![OS設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/9e1b8807-f3a1-59de-6903-ed193935c5b8.png)

###▷F5キーを押下してデバッグ
デバッグコンソールが開かれ, `Hello World!` と出力されます.
![スクリーンショット (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/4f637d62-90ed-a12e-0140-b10d31ef654f.png)

適当にキーを押下して終了します.

##もしうまくいかなかったら
折り畳みからご覧ください.
<details><summary>**ワークロードの設定を見直してみましょう**</summary>
`Desktop development with C++` :white_check_mark:
もしくは
`C++によるデスクトップ開発` :white_check_mark:
にチェックを入れるの忘れていませんか?
<br>
**Visual Studio Installer** を起動します.
![スクリーンショット (39).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/3c5edf2c-258f-d84f-cbb5-2a5769b4e775.png)
`変更(modify)` を選択します.
![スクリーンショット (40).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/1dc5f222-697f-1b0d-3aec-f12cd5f205d9.png)
ワークロードの追加などが行えるので, インストール必要なものを
インストールしましょう.<br>
[詳しくは公式DOCへ][modifycpp]
</details>

#OpenCV の環境設定
OpenCVの設定では, インストール後に

- **コントロールパネル側の設定** (以下グローバルな設定)
- **プロジェクト毎の設定** (以下ローカルな設定)

の二つが必要です. (名称は勝手に私が呼んでいるだけです...)

##OpenCV のインストール
まずはインストールです.
[「こちらから」][opencvexe] OpenCVの EXEファイルをダウンロードし
EXEファイルを起動してください.

起動すると, 保存先が聞かれるので指定してください.
私は `C:\OpenCVforVS` というところに
`opencv4.2.0` という名前で保存しました.
(※以降このディレクトリ関係で話を進めますので注意してください)

##グローバルな設定
`コントロールパネル`>`システムとセキュリティ`>
`システム`>`システムの詳細設定`>`システムのプロパティ`
の順に開いていきます.

`詳細設定` の右下に `環境変数` とあるのでクリックします.
以下のように `Path` の `値` をダブルクリックし, 編集画面に行きます.

| ![Path](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/246288ee-e95e-6394-fad9-56b72bc6e17c.png) |
|:-:|

`新規(N)` から
`C:\OpenCVforVS\opencv4.2.0\build\x64\vc15\bin` を追加します.

| ![Path追加](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/0a6f7c1e-edc7-a993-006f-1958a2c7e8b3.png) |
|:-:|

##ローカルな設定
これは, OpenCVを扱うプロジェクト毎に設定します.
主はよくここら辺を徘徊しています.

###▷プロパティ設定
ヘッダの `プロジェクト` から `testProjectのプロパティ` を選択します.
![スクリーンショット (43).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/109add73-99f0-7d91-e2f4-548ac98e6959.png)

###▷構成プロパティの設定
####・デバッグ設定

`構成プロパティ`>`デバッグ` の `環境` の右側をダブルクリックし
`C:\OpenCVforVS\opencv4.2.0\build\x64\vc15\bin` と追加する.
![debug設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/b8187810-25b8-64cd-61af-c919ecc7c590.png)


####・VC++ ディレクトリ設定
ここでは以下の

- **インクルード ディレクトリ**
- **ライブラリ ディレクトリ**

を設定します.

まず, `構成プロパティ`>`VC++ ディレクトリ` の
`インクルード ディレクトリ` の右側をダブルクリックし `;` の後に
`C:\OpenCVforVS\opencv4.2.0\build\include` と追加します.
![include](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/ce2ae9e6-cd4a-6f59-7ac1-e8e5804e46c5.png)

次に, `構成プロパティ`>`VC++ ディレクトリ` の
`ライブラリ ディレクトリ` の右側をダブルクリックし `;` の後に
`C:\OpenCVforVS\opencv4.2.0\build\x64\vc15\lib;` と追加します.
![lib](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/c331d3c8-167c-3ba0-d4b6-419fc4cb8c55.png)

###▷ヘッダファイルを追加
`構成プロパティ`>`C/C++` の
`追加のインクルード ディレクトリ` の右側をダブルクリックし
`C:\OpenCVforVS\opencv4.2.0\build\include;` と追加します.
![スクリーンショット (50).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/bd607cbb-4bf5-af0a-ac8d-ff5d3bb0e437.png)

###▷ライブラリファイルを追加
`構成プロパティ`>`リンカー`>`全般` の
`追加のライブラリ ディレクトリ` の右側をダブルクリックし 
`C:\OpenCVforVS\opencv4.2.0\build\x64\vc15\lib` と追加します.
![add lib](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/8697a46a-c036-13d9-775c-16a071ac6377.png)

###▷デバッグ用追加ライブラリを設定
左上の `構成` を `debug` に切り替えます.

`構成プロパティ`>`リンカー`>`入力` の
`追加の依存ファイル` の右側をダブルクリックし 
`%(AdditionalDependencies)` のすぐ前に
`opencv_world420d.lib;` と追加します.
![debug add lib](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/2a506d61-444d-968c-4939-e5018fc0d4d1.png)


###▷リリース用追加ライブラリを設定
左上の `構成` を `Release` に切り替えます.

`構成プロパティ`>`リンカー`>`入力` の
`追加の依存ファイル` の右側をダブルクリックし 
`%(AdditionalDependencies)` のすぐ前に
`opencv_world420.lib;` と追加します.

デバッグ用と名前が似ているので注意してください.
![release add lib](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/bca045e4-b6a8-49f8-61ce-ccfea849dc00.png)

これにてOpenCVの設定は終わりです.

VS2019をいったん閉じ, 再起動しておいてください.

ひとまずお疲れ様です.

後半戦
---
#OpenCV を使う
実際に使っていきましょう.
もし, どこかで設定をミスしていると
うまくいかないので, その場合はPath名などを見直しましょう.

##画像入出力
###▷エディタを少し編集
ヘッダのソリューション プラットフォームを `x64`
に変更してください. (今回x64のOpenCVを設定したので)
![editor](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/2c22cae7-489f-e8c9-dd37-eb32d103ddd5.png)

###▷ソースコード
OpenCVの要素をいくつか入れてみました.

```cpp:testProject.cpp
#include <opencv2/opencv.hpp>		//OpenCV読み込み
#include <iostream>					//PI用に読み込み

#define PI std::acos(-1.0)			//πの動的定義

using namespace cv;

//ソラリゼーション変換関数
Mat soralizationLike(Mat image)
{
	Mat look_up_table = Mat::zeros(256, 1, CV_8U);
	uchar* lut = look_up_table.data;

	for (int i = 0; i < 256; i++)
		lut[i] = (sin(3.0 * PI * (i / 255.0 + 1.0 / 2.0)) + 1.0) * 255.0 / 2.0;

	LUT(image, look_up_table, image);
	return image;
}

//画像出力関数
void showIm(Mat image)
{
	image = soralizationLike(image);
	resize(image, image, Size(), 0.5, 0.5, INTER_AREA);
	namedWindow("openCV", WINDOW_AUTOSIZE);
	imshow("openCV", image);
	waitKey(0);
}

/* ここからメイン関数 */
int main()
{
	//画像読み込み
    Mat image = imread("C:\\Users\\user\\Desktop\\glass.png");
	//画像表示
    showIm(image);

    return 0;
}
```
[「関数等の説明」][tc]や[「LUT」][lut]に関しては気になる方は
前投稿の記事を見ていただきたいです. (宣伝)

ここではあくまでOpenCVが使えるかの確認です.

###▷出力結果

| 元画像 | 出力画像 |
|:-:|:-:|
|  ![glass.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/3bacf5b4-55d1-e9d6-2ea2-b06770d8f55a.png) | ![changed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/659167bf-7d71-527c-ae94-be1c933a2066.png)  |

無事OpenCVの機能を使うことができました.

##Webカメラ
とうとうたどり着きました.
長い長い軌跡にお付き合いありがとうございました.

それでは, サクッと行きましょう.
###▷ソースコード
デバッグ用の先ほどのコードは残しておいても大丈夫ですが
main()からの関数呼び出しは消(コメントアウト)してから書き換えてください.

コードの内容については, [公式DOC][cvvc]のサンプルコードと
自分のコードを見比べながら読んでいくとわかりやすいかと思います.

```cpp:testProject.cpp
#include <opencv2/opencv.hpp>
#include <iostream>					//PI用に読み込み

#define PI std::acos(-1.0)			//πの動的定義

using namespace cv;

//関数群省略

int main()
{
	Mat frame;
	VideoCapture cam(1);

	if (!cam.isOpened())	//正常にカメラが起動できなければ終了
	{
		return -1;
	}

	while (cam.read(frame))
	{
		imshow("Origin", frame);
		imshow("Sorali", soralizationLike(frame.clone()));

		const int key = waitKey(1);

		if (key == 'q')		//qが押されたらカメラを閉じる
		{
			break;
		}
	}
	destroyAllWindows();

	//画像読み込み
    //Mat image = imread("C:\\Users\\user\\Desktop\\glass.png");
	//画像表示
    //showIm(image);

	return 0;
}
```
###▷出力結果
`F5` キーを押してください.
![出力](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506931/ccd3ee8e-499d-f584-4a30-47c8f8617ff8.png)

Webカメラに接続できました.

なんかソラリゼーションっていいですよね?

#おわりに
**長い長い軌跡にお付き合い本当にありがとうございました.**

VS2019 の導入からやるとやはり長くなってしまいました.

実際に環境構築するときは, おそらく1時間もかからず終わると思います.
(※ネット環境による)

なぜ VS2019 上に環境構築したかの動機ですが
単に学校の研究で VS2019 と C++ を使いそうで
「C++ なら OpenCV も使えるよなぁ」
といった感じです.

また
「同じような方が, 私よりも短時間で環境構築できればいいな」
「PC買い換えたとき一から調べるの嫌だな」
という思いもあります.

プログラマにとって環境構築というものが厄介で
簡単に人のやる気を吸い取ってしまうものだと思っています. (個人の意見)

VS2019 の使用者とかあまり多そうではないですが
誰かの一助になれればと思います.

それでは:wave:

#参考
- [Visual Studio に C および C++ サポートをインストールする][vscpp] (公式DOC)
- [ワークロードやコンポーネントを追加または削除することで Visual Studio を変更する][modifycpp] (公式DOC)
- [画像とビデオの読み込みと書き込み][cvvc] (公式DOC)
- [OpenCVをVisualStudioのC++で使えるようにしてみた][opencvcpp] (はてなブログ)

#関連記事
- [画像処理のトーンカーブについての話しをしよう ~LUTはすごいぞ~][lut]
- [Python & OpenCVで画像処理 [ Tone Curve編 ]][tc]

[vscpp]:https://docs.microsoft.com/ja-jp/cpp/build/vscpp-step-0-installation?view=vs-2019
[modifycpp]:https://docs.microsoft.com/ja-jp/visualstudio/install/modify-visual-studio?view=vs-2019
[cvvc]:http://opencv.jp/opencv-2svn/cpp/highgui_reading_and_writing_images_and_video.html#videocapture

[opencvexe]:https://sourceforge.net/projects/opencvlibrary/
[opencvcpp]:https://krhb.hatenablog.com/entry/2020/01/16/181858

[lut]:https://qiita.com/RoaaaA/items/373f309f724c4b569749
[tc]:https://qiita.com/RoaaaA/items/723b2b9409a6fc8bb781