openFrameworksをVScodeで使用したい｜Macユーザー

openFrameworksはC++ベースで利用できるツールです。openFrameworksのMacセットアップガイドでは、“Xcode”にて進められていますが、VSCode（Visual Studio code）でも利用することが可能です。

本記事は「openFrameworksをMacのVSCode環境で利用したい」という人へ向けたセットアップの内容です。パソコンに何もインストールしてない段階からのセットアップなので、必要ない項目は飛ばし読みしてください。

►barbe_generative_diary でopenFrameworksを利用したもの

環境／macOS Ventura, openFrameworks, VSCode

ーーーーー

Index

Chapter.1 – 環境構築
1-1　openFrameworksをダウンロード
1-2　VScode（Visual Studio Code）をダウンロード・インストール
1-3　VScode 拡張機能『C/C++』をインストール

Chapter.2 – Project作成
2-1　projectGenerator にてVSCodeを追加する。
2-2　ビルドと実行
2-3　ビルドと実行を一緒に行うセットアップ

OpenFrameworksおすすめの本

ーーーーー

Chapter.1 – 環境構築

Macにまだ、openFrameworksやVSCode（Visual Studio Code）を導入してない方や、VSCodeにC++環境を拡張してない方はご参考ください。

1-1　openFrameworksをダウンロード

openFrameworks は、使用するOS環境によってのバージョンがあります。使っているパソコンに合うファイルをダウンロードします。今回はMacバーションです。

執筆時点のバージョンは0.12.0です。

openFrameworks Webサイト
https://openframeworks.cc/download/

頻繁に新しいバージョンが更新されるのでopenFrameworks のSNS をフォローしておくと情報を得るのに便利です。

X : https://twitter.com/openframeworks
Github : https://github.com/openframeworks/openFrameworks

zipファイル（of_v0.12.0_**.zip）をダウンロードしたら、バージョンを管理しやすい任意の場所へファイルを移動し解凍します。

書類（documents）フォルダに“openFrameworks”という名前のフォルダを制作し、アップデートされるたびに追加して管理すると便利です。

1-2　VScode（Visual Studio Code）をダウンロード・インストール

Visual Suduio Code WebサイトよりDownloadしインストールを行います。

Visual Studio Code Webサイト
https://code.visualstudio.com/

1-3　VScode 拡張機能『C/C++』をインストール

VScodeの機能拡張にてエディターを自分仕様にカスタマイズできます。起動後、左のバーに機能拡張（四角のマーク）があります。そこから“C/C++”を検索し、インストールを行います。

Chapter.2 – Project作成

ここからが、openFrameworksをVSCodeで利用できるようにするための、ワークスペースを作成する方法です。

2-1　projectGenerator にてVSCodeを追加する。

openFrameworksを利用するには“projectGenerator”にてセットアップを行います。

Visual Studio Codeを利用するためにはVSCode用のワークスペースを制作します。

右上の歯車マーク（設定）をクリック、Advanced optionにチェックマークを入れます。

create/updateに戻るとTemplateが選択できるのでVisual Studio Codeを設定します。

その他は任意で、Project name（プロジェクト名）、Project path（保存場所）などを設定し、
“Generate” ボタンで制作します。

制作されたフォルダの中に、“○○.code-workspace”という名前のVScodey用ワークスペースが作成されるのでこれを開きます。

2-2　ビルドと実行

新規プロジェクトを制作するとさまざまなファイルが生成されますが、主にコードを書き進めていくのは、srcフォルダ内にあるmain.cpp、ofApp.h、ofApp.cppの３つのファイルを利用します。

・main.cpp ／ ウィンドウサイズやヘッダーなどを読み込みなど、プロジェクトファイル群の大枠を管理します。

・ofApp.h ／ofApp.cppで利用するファンクション（関数）やクラスなどをまとめて設定・管理します。

・ofApp.cpp ／ setupやupdate,drawなどの中に主なプログラムを書き込んでいきます。

ショートカット“⌘ + Shift + B”にてプログラムをビルドし、
Terminalにて make RunDebug と打ち込み実行します。
※ターミナルはVScodeの上記 Terminalの項目から新規ターミナルを選択するとコンソールが開きます。

2-3　ビルドと実行を一緒に行うセットアップ

ビルド・Run（実行）と面倒な場合、tasks.jsonファイルを書き換えビルドと一緒に実行するようにします。

.vscode内にあるtasks.json内の下記の場所を変更します。

"command": "make RunDebug",
 "dependsOn": ["Build DEBUG"]

以上、openFrameworksをVScodeで利用する方法です。

beyond-interaction-image

Beyond Interaction[改訂第3版] クリエイティブ・コーディングのためのopenFrameworks実践ガイド – Atushi Tadokoro

2020年の本ですが、改訂第３版ともなりopenFrameworksを学ぶ本として多くの人に読まれており、これからopenFrameworksを始めたい人へおすすめです。

ただ、この数年でopenFrameworksの仕様も変わってきているので、所々コード記述の仕方に変更があり、Webサイトで検索しながらコーディングする必要があります。

初心者にもわかりやすい簡単な図形の生成から、アニメーション、サウンド、画像処理（Open CV）による物体検知など、とても丁寧な解説です。

ーーーーー
► 『Beyond Interaction[改訂第3版] クリエイティブ・コーディングのためのopenFrameworks実践ガイド』 – （田所 淳）（柳沢 英輔）
初版／ 2020.10.14
ページ数／280ページ
出版社／ビー・エヌ・エヌ新社
言語／日本語
ーーーーー

Recommends on Amazon

Amazonのインフルエンサープログラム barbe_generative_diary ページにて、使用している道具や機材、本棚にあるアートに関連する本などをまとめています。

► barbe_generative_diary Recommends on Amazon