【Visual Studio 2017】openFrameworks導入方法【GUI - C++】

#姉妹記事はこちら

[【Visual Studio 2017】Boost導入方法【超易しい解説】](https://qiita.com/Gaccho/items/7e78911d2c8093baf200)
[【Visual Studio 2017】MPIR(GMP)導入方法【多倍長整数ライブラリ】](https://qiita.com/Gaccho/items/92b7fbf279d3ca6227fe)

#はじめに
今回はVisual Studio 2017でopenFrameworksの導入方法について解説していきます。

`そろそろopenFrameworksに手を出してみようかな`
と思っている方や、
`Visual StudioでプログラミングしてるけどopenFrameworksの入れ方がわからない`
という方に向けて書いてます。

これを見れば誰でもopenFrameworksが導入できる！~~はず~~

#[ダウンロード](hhttps://openframeworks.cc/ja/download/)

[⇒こちらから`visual studio (2017)` をダウンロードします。](https://openframeworks.cc/ja/download/)

![1.png](https://qiita-image-store.s3.amazonaws.com/0/213065/4504f3b7-4477-23b0-5434-6eceda065807.png)

[`visual studio (2017)`](https://www.boost.org/users/download/) を選択します。
`of_v〇〇_vs2017_release.zip`がダウンロードされます。

この解説では、 `of_v0.10.1_vs2017_release.zip` を使います。

#ダウンロード後

ダウンロードした[`of_v〇〇_vs2017_release.zip`](hhttps://openframeworks.cc/ja/download/)を `すべて展開(解凍)` します。
今回、展開場所は `Cドライブ直下(Windows (C:))` に置きます。

![bo3.PNG](https://qiita-image-store.s3.amazonaws.com/0/213065/acc73b96-7501-0b30-7720-5e896ee49715.png)

展開はそこそこ時間がかかります。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/213065/7af43202-bd05-3e39-6f3d-ffabf0178669.png)

展開が終わったら次へ。

#拡張機能を導入する

**`Visual Studio 2017`**を開きます。

![4.png](https://qiita-image-store.s3.amazonaws.com/0/213065/10fafb57-062c-3d44-0a25-3783aa224af1.png)

画面上部のバーにある**`ツール(T)`**から**`拡張機能と更新プログラム(U)`**を選択します。

![5.png](https://qiita-image-store.s3.amazonaws.com/0/213065/57e4881b-6b18-f1b2-ffa8-d14f71ac4ba4.png)

**`拡張機能と更新プログラム`**のウィンドウが出てきます。

![6.png](https://qiita-image-store.s3.amazonaws.com/0/213065/e0530138-168c-70c2-ff92-6975d9f44e51.png)

1.左側にある**`オンライン`**を選択。
2.右上にある**`検索欄`**で**`openFrameworks`**と検索する。
3.**`openFrameworks`**が出てくるので、**`ダウンロード`**を選択。

![7.png](https://qiita-image-store.s3.amazonaws.com/0/213065/2c69d224-fe63-dcb0-a46a-cb0c2b572998.png)

ダウンロードが完了したら、一旦**`Visual Studio 2017`**を閉じます。
そうすると、VSIXインストーラーが出るので**`変更`**を選択します。

![8.png](https://qiita-image-store.s3.amazonaws.com/0/213065/fa79c9cc-c45a-e2a3-723a-edee6de7929d.png)

![9.png](https://qiita-image-store.s3.amazonaws.com/0/213065/52e169d8-6635-f563-9ed5-543917d7bac1.png)

**`変更`**が完了したら**`閉じる`**を押します。
これで必要なもののインストールは全て完了です。

#プロジェクトを作成する

**`Visual Studio 2017`**を開きます。
左上のメニューから**`ファイル`**⇒**`新規作成`**⇒**`プロジェクト`**を選択します。

![10.png](https://qiita-image-store.s3.amazonaws.com/0/213065/158ff9e8-02c8-a277-ba37-97b976390c08.png)

左側にある**`インストール済み`**⇒**`Visual C++`**⇒**`openFrameworks`**を選択。

![11.png](https://qiita-image-store.s3.amazonaws.com/0/213065/dde6853f-4046-d0d6-2f5e-8b61c8a6faad.png)

右下の**`OK`**を押します。
そうすると、パスの設定画面が出てきます。

![12.png](https://qiita-image-store.s3.amazonaws.com/0/213065/a2611658-90d5-6819-df06-39b94638e64a.png)

**`...`**からフォルダパスを選択します。
フォルダパスには`of_v〇〇_vs2017_release`を選択します。
**`OK`**を押しましょう。

![13.png](https://qiita-image-store.s3.amazonaws.com/0/213065/41443338-57d1-aa68-88df-31f4ab6a498d.png)

さっきまで赤く塗られていた部分が緑になりました。
赤いままの場合は指定したフォルダパスが誤っています。
**`OK`**を押しましょう。

![14.png](https://qiita-image-store.s3.amazonaws.com/0/213065/134726d3-f28a-35f7-9c0a-e8ae28c0ac14.png)

追加する**`Addon`**を選べます。
特に指定しない場合はそのまま**`OK`**を押しましょう。

![15.png](https://qiita-image-store.s3.amazonaws.com/0/213065/87275a22-4ef2-4b98-afac-acd58800d7c4.png)

これでプロジェクトファイルが生成されます。

次に、**`ソリューションエクスプローラー`**から
**`ソリューション`**を右クリックして**`ソリューションの再ターゲット`**を選択します。

![16.png](https://qiita-image-store.s3.amazonaws.com/0/213065/0f8df80b-e152-d998-989c-7fb99c2f325c.png)

**`OK`**を押しましょう。

![17.png](https://qiita-image-store.s3.amazonaws.com/0/213065/dbc338f5-aeb0-8c36-9679-8b48bf49e0c5.png)

無事にソリューションの再ターゲットが完了しました。

![18.png](https://qiita-image-store.s3.amazonaws.com/0/213065/060ace44-1584-6231-90b7-f732c598640f.png)

**`ソリューションエクスプローラー`**から**`main.cpp`**を選択します。
![19.png](https://qiita-image-store.s3.amazonaws.com/0/213065/4440b8cc-7efc-acca-21c7-c8571ab78c4e.png)

ビルドしましょう。**(ビルドは[Ctrl]+[F5])**

![20.png](https://qiita-image-store.s3.amazonaws.com/0/213065/d7a5dc3d-800c-d7b4-e8bd-67ccb08975b2.png)

実行できました！

![スクリーンショット 2018-11-23 17.51.47.png](https://qiita-image-store.s3.amazonaws.com/0/213065/566b455e-ce33-5816-9466-998bca540f6f.png)