I'd like to welcome you to another Audio Programmer tutorial.

オーディオ・プログラマーのチュートリアルへようこそ。

And in this tutorial, we're going to talk about the Juice Audio Processor Editor class.

このチュートリアルでは、Juice Audio Processor Editorクラスについて説明します。

This is the base class that is used by Juice for any visual elements that you would like to use for your user interface.

これはJuiceがユーザーインターフェイスに使用するビジュアル要素のために使用する基本クラスです。

That is, what people see when they open up your plugin.

つまり、人々があなたのプラグインを開いたときに目にするものです。

The main objectives for this tutorial are to introduce you to the Audio Processor Editor class and the concept of components within Juice.

このチュートリアルの主な目的は、Audio Processor EditorクラスとJuice内のコンポーネントの概念を紹介することです。

To introduce you to the concept of parent and child components.

親コンポーネントと子コンポーネントの概念を紹介する。

I'll also show you how to create new source files within the CMake system to create child components.

また、CMakeシステム内で新しいソースファイルを作成して子コンポーネントを作成する方法も紹介する。

And finally, we'll dig a little bit deeper into what happens when you load a plugin and how the editor is actually created in the plugin loading process.

そして最後に、プラグインをロードするときに何が起こるのか、プラグインのロードプロセスでエディタが実際にどのように作成されるのかについて、もう少し掘り下げてみましょう。

As always, I'll also briefly discuss some of the core C++ concepts along the way for those who are just getting started.

いつものように、これから始める人のために、C++のコアとなる概念についても簡単に説明する。

If you're ready to take that deeper dive into audio plugin development, I invite you to check out our books.

オーディオ・プラグインの開発をより深く掘り下げる準備ができたら、ぜひ私たちの本をチェックしてみてください。

The Complete Beginner's Guide to Audio Plugin Development and Creating Synthesizer Plugins with C++ and Juice.

C++とJuiceを使ったオーディオ・プラグイン開発とシンセサイザー・プラグイン作成の完全初心者ガイド。

These are great resources to get started.

これらは、始めるための素晴らしいリソースだ。

All in all, there's about 900 pages on how to start creating your own plugins.

全部で、独自のプラグインを作り始める方法について約900ページある。

I invite you to check them out on theaudioprogrammer.com forward slash books.

ぜひ、theaudioprogrammer.comのフォワード・スラッシュ・ブックでチェックしてほしい。

Link is in the description below.

リンクは以下の説明にある。

This video is also brought to you in part by our sponsor JetBrains.

このビデオは、スポンサーのJetBrainsのご協力によりお送りしたものです。

If you're looking for ways to streamline your development process, I invite you to check out their amazing C-Line IDE.

開発プロセスを効率化する方法を探しているなら、ぜひ彼らの素晴らしいC-Line IDEをチェックしてほしい。

Their tools have helped me to exponentially speed up my workflow and I'm proud to be a supporter.

彼らのツールは、私のワークフローを飛躍的にスピードアップしてくれた。

Be sure to check out more on the link in the description below.

詳しくは下の説明のリンクで確認してほしい。

And with that being said, let's get started.

ということで、さっそく始めよう。

OK, so right now we're in a blank Juice plugin template project.

さて、今はJuiceプラグイン・テンプレート・プロジェクトの空白の状態です。

If you're not sure how to get to this point, be sure to check out our tutorial called CMake vs.

ここまでの道のりがわからない場合は、CMake vs. CMakeというチュートリアルをぜひご覧ください。

ProJuice or FaceOff, which shows you how to start creating a project that will help you get up and running.

ProJuiceやFaceOffでは、立ち上げに役立つプロジェクトの作り方を紹介している。

And as I was saying before, we're going to use CMake for tutorials from here on out.

先ほども言ったように、ここからはチュートリアルにCMakeを使うことにする。

It's the industry standard.

業界標準だ。

And I think that even though it's more difficult to get started, it will definitely help you in the long run.

そして、始めるのは難しくても、長い目で見れば必ず役に立つと思う。

So where we are now is in the Audio Plugin Audio Processor Editor class.

というわけで、今いる場所はAudio Plugin Audio Processor Editorクラスです。

So as we can see, we have four files that are over here on the left hand side.

見ての通り、左側に4つのファイルがある。

Plugin Editor.cppnh and Plugin Processor.cppnh.

Plugin Editor.cppnhとPlugin Processor.cppnh。

Plugin Processor is what we went through last tutorial where we talked about the Audio Processor class.

Plugin Processorは、前回のチュートリアルでAudio Processorクラスについて説明したものです。

And that is where the actual audio processing happens for your plugins.

そして、そこでプラグインの実際のオーディオ処理が行われる。

So not the part that you see, but the actual audio processing.

つまり、目に見える部分ではなく、実際のオーディオ処理なんだ。

The Audio Processor Editor class is what you actually see when you load your plugin.

Audio Processor Editorクラスは、プラグインをロードしたときに実際に表示されるものです。

So if I just go ahead and I compile this here, we can see that this plugin is loaded.

ここでコンパイルしてみると、プラグインがロードされていることがわかる。

We're in standalone mode right now.

今はスタンドアローンモードだ。

And that what we actually see, this is the Audio Processor Editor.

これがオーディオ・プロセッサー・エディターです。

Now, if we dive a little bit deeper into this class, we can see that it inherits from this class called the Audio Processor Editor class.

さて、このクラスをもう少し掘り下げてみると、Audio Processor Editorクラスというクラスを継承していることがわかります。

So what I'm going to do is I'm going to jump into this class now.

だから、これからこのクラスに飛び込むんだ。

And what we'll see is that the Audio Processor Editor class is a juice class.

そして、オーディオ・プロセッサー・エディター・クラスがジュース・クラスであることがわかるだろう。

And this in turn inherits from the component class.

これはコンポーネント・クラスを継承している。

So the component class is essentially any visual element that you have within juice.

つまり、コンポーネント・クラスとは、基本的にjuice内にあるあらゆるビジュアル・エレメントのことです。

So when you load up some type of visual class in juice or you're creating some type of visual element, it will inherit from this component class.

つまり、juiceで何らかのビジュアル・クラスを読み込んだり、何らかのビジュアル・エレメントを作成したりする場合は、このコンポーネント・クラスを継承することになります。

And what I'll do here is I'll actually show you the juice documentation because sometimes it's nice to see it this way as well, which is that we have this Audio Processor Editor class.

このオーディオ・プロセッサー・エディター・クラスがある。

And then this is what's called an inheritance diagram, which shows you where in the hierarchy these classes inherit from.

そして、これは継承図と呼ばれるもので、クラスがどの階層から継承されているかを示している。

So it says here that the juice Audio Processor Editor class inherits from the juice component class.

つまり、juice Audio Processor Editorクラスはjuiceコンポーネントクラスを継承しているということです。

So anything that you can do with a component class, you can do with an Audio Processor Editor class because Audio Processor Editor inherits from component.

つまり、コンポーネント・クラスでできることはすべて、オーディオ・プロセッサ・エディター・クラスでもできるのです。なぜなら、オーディオ・プロセッサ・エディターはコンポーネントを継承しているからです。

OK, so now let's just jump back into the source code here.

よし、ではここでソースコードに戻ってみよう。

Here we have four functions that are in this class.

このクラスには4つの関数がある。

And this is pretty typical for what you would see within any type of component or visual element class.

これは、コンポーネントやビジュアル・エレメントのクラスで見られる典型的なものです。

You would have a constructor and a destructor that are called when the window is created or destroyed.

コンストラクタとデストラクタがあり、ウィンドウの作成時と破棄時に呼び出される。

And you have this paint function, which is more for things that you would do within that component itself.

そして、このペイント機能は、そのコンポーネント自体の中で行うものだ。

So if you wanted to write some text, for example, we have the window currently saying hello world.

例えば、現在ウィンドウにはhello worldと表示されている。

If we wanted to change the color of the background, if we wanted to change the size of the text, we would do that within paint.

背景の色を変えたければ、文字の大きさを変えたければ、ペイントの中でそれを行う。

And then we have this resized function, which is where we would actually lay out any type of other components that we want to sit inside of this Audio Processor Editor.

そしてこのリサイズ機能で、オーディオ・プロセッサー・エディター内に配置したい他のコンポーネントをレイアウトします。

So I'm going to describe that in a little bit more detail here by going to the CPP file, which is the actual implementation of these function calls.

そこで、これらの関数コールの実際の実装であるCPPファイルを見て、もう少し詳しく説明しよう。

So as I said before, first thing that we have is the constructor.

前にも言ったように、まずコンストラクターがある。

And I won't go really into what these are because I don't think that they're relevant so much for getting started.

そして、これらが何であるかについては、私はあまり関係ないと思うので触れないことにする。

But what we see down here is we have this set size, which at the moment is 400 by 300 pixels.

しかし、ここにあるのは設定されたサイズであり、現時点では400×300ピクセルである。

Right.

そうだね。

So if we just go ahead and build that now, we see that this is 400 by 300 pixels.

では、今すぐ構築してみると、これは400×300ピクセルであることがわかる。

And if I wanted to change this, let's say I wanted to change it to a 600 pixel height and then we just rebuild this here, then we will see that now the plugin has got taller.

そして、これを変更したい場合、例えば高さを600ピクセルに変更したい場合、ここを再構築すれば、プラグインの高さが高くなったことがわかるだろう。

Right.

そうだね。

So as I was saying before, for people who are just getting started, the constructor is what's being called when the window is first created.

だから、さっき言ったように、これから始めようとする人にとって、コンストラクターはウィンドウが最初に作られるときに呼び出されるものだ。

And then the destructor is what happens when the when the window is destroyed.

そしてデストラクターは、ウィンドウが破壊されたときに起こるものだ。

Now, one thing that I will say that was a common mistake that I used to think about when I was first getting started and one that I see very often for other people who are getting started is that when when we're in a DAW, let's say we're in Ableton Live or in Reaper, that it's very easy to think that if we close out the plugin, that the plugin window is actually being minimized.

私がDAWを始めたばかりのころによく考えていたことで、これからDAWを始めようとする人たちにもよく見られる間違いなのですが、例えばAbleton LiveやReaperを使っているときに、プラグインを閉じるとプラグイン・ウィンドウが最小化されると考えがちです。

That's how I used to think of it in my mind, because when you pull up the window again, all of the parameters and dials and sliders are all in the same place where you left them.

再びウインドウを立ち上げると、すべてのパラメーターやダイヤル、スライダーが元の位置にある。

Or at least they're supposed to be if the person made the plugin properly.

少なくとも、プラグインをきちんと作った人ならそうなるはずだ。

So because of that, I used to think that this window was actually being minimized.

そのため、以前はこのウィンドウが実際に最小化されていると思っていた。

But one thing one key thing to think about is that the window is actually being destroyed.

しかし、ひとつ重要なことは、ウィンドウが実際に破壊されているということだ。

So it actually does not exist anymore.

だから、実際にはもう存在しない。

You'll learn a little bit more about this as we get a little bit further in the plugin development.

これについては、プラグイン開発のもう少し先に進むにつれて、少しずつ学んでいくことになるだろう。

But one great example of where this mistake is made is when it comes to sliders that are holding some type of value.

しかし、このような間違いを犯す良い例が、何らかの価値を保持しているスライダーの場合である。

So when it's holding that value, it's very important that the value of the slider that is sitting within this plugin window is able to relay what the value of the slider is over to the plugin processor.

だから、この値を保持するとき、このプラグイン・ウィンドウの中にあるスライダーの値が、プラグイン・プロセッサーに伝わることがとても重要なのです。

Because if it doesn't, and you're relying on that value to be there, and the plugin window is destroyed, then it doesn't exist anymore.

なぜなら、もしそうでなく、その値がそこにあることに依存していたとして、プラグイン・ウィンドウが破壊されたら、その値はもう存在しないからだ。

And you're going to be trying to look for a value that does not exist.

そして、存在しない値を探そうとしている。

So once again, that gets a little bit, that's jumping ahead a little bit.

だから、もう一度言うけど、ちょっと話が飛ぶよ。

But it's just something to keep in mind that as you're going through this journey, that when you're creating this window, that when you close it out, it's not minimized.

ただ、この旅を通して、このウィンドウを作成するときに、それを閉じるときに最小化されないように留意してほしい。

It actually does not exist anymore.

実際にはもう存在しない。

Okay.

オーケー。

So jumping down a little bit further, we have this function that's called paint.

もう少し下に飛ぶと、paintという関数がある。

So paint, I would think of as what you actually want to happen within this visual component itself.

だからペイントは、このビジュアル・コンポーネントの中で実際に起こってほしいことだと考えている。

So as we can see, we have this g.fillall, which is filling the background of the component with this green color.

見ての通り、g.fillallはコンポーネントの背景を緑色で塗りつぶしている。

Now, what I could do is I could actually change this color.

さて、私ができることは、実際にこの色を変えることだ。

Let's just go ahead and change it to black.

そのまま黒に変えよう。

And what I can do is, oh, I need to get rid of this bracket.

そして私にできることは、このブラケットを取り外すことだ。

And what I could do is I could recompile this.

そして私ができることは、これを再コンパイルすることだ。

And then what we should see is now the plugin window is black, right?

そうすると、プラグインのウィンドウが黒くなりますよね？

And if I wanted to change this text to red, and I wanted to make it a little bit bigger, I would just do that here.

このテキストを赤にして、もう少し大きくしたい場合は、ここでそうすればいい。

So the size of this text is being set by this g.setfont.

つまり、このテキストのサイズはこのg.setfontによって設定されている。

So if I wanted to change this from 15 to 30, and then if I wanted to change the color from white to red, this is where all of that would happen.

つまり、これを15から30に変更し、色を白から赤に変更したい場合、ここですべてが行われることになる。

So paint, once again, is the place where the things that are actually happening within this component itself are being changed.

だからペイントは、もう一度言うが、このコンポーネントの中で実際に起こっていることそのものを変える場所なのだ。

Now coming down to the resize function, we see that there's nothing that's happening inside of this at the moment.

さて、リサイズ機能のところまで来てみると、今のところこの内部では何も起こっていないことがわかる。

And this brings us to another principle of these component classes, which is that components can hold other components.

これは、コンポーネントが他のコンポーネントを保持できる、というコンポーネント・クラスのもうひとつの原則につながる。

So when I say component, think a window, like a visual window.

だから、コンポーネントと言うときは、視覚的な窓のようなものを思い浮かべてほしい。

And these components can have other components inside of them.

そして、これらのコンポーネントは、その内部に他のコンポーネントを持つことができる。

And the way that you would lay those out is typically in this resized function.

そして、それらをレイアウトする方法は、通常、このリサイズ機能の中にある。

Okay, so what we're going to do now is we're going to create our own component class.

さて、ではこれから独自のコンポーネント・クラスを作成しよう。

And we're going to include it as a child within this plugin editor class that we have here.

このプラグイン・エディター・クラスの子クラスとして、このプラグインを組み込みます。

Okay, so if that sounds like a daunting task, don't worry, I'm going to take you step by step.

さて、それが大変な作業に聞こえるかもしれないが、心配はいらない。

And I feel confident that if you follow along, that you're going to come out successfully on the other side.

そして、もしあなたがついてきてくれるなら、反対側で成功すると確信している。

So let's go ahead and get started.

では、さっそく始めよう。

First thing that we're going to need to do if we want to create a component class is we're going to need to create some source files.

コンポーネント・クラスを作成する場合、最初に必要なことは、いくつかのソース・ファイルを作成することだ。

So the way that we're going to do that is we're going to go over here to our source folder over here in our Explorer.

そこで、エクスプローラーでソース・フォルダーに移動します。

We're going to right click and create a new C++ class.

右クリックして新しいC++クラスを作成する。

So this is how you would do it in SceneLion.

これがSceneLionでのやり方だ。

If you were working in Xcode or Visual Studio, it essentially be a similar type of command.

XcodeやVisual Studioで作業していた場合、基本的には同じようなタイプのコマンドになる。

So now I'm going to go ahead and create this.

では、これからこれを作成します。

And I will just call this, let's just call it square.

これを正方形と呼ぶことにしよう。

And I will create a .cpp and .header file for this new class that we're calling square.

そして、squareと呼ぶこの新しいクラスの.cppと.headerファイルを作成する。

And I'm going to hit OK.

そしてOKを押す。

And now we've created those new source files.

これで新しいソース・ファイルができた。

I'm just going to hit add.

私はただ追加を押すだけだ。

And now we have some new source files.

そして今、新しいソースファイルがいくつかある。

And what I'm going to do is I'm just going to get rid of everything just so it's blank.

そして、これからすることは、すべてを取り除いて真っ白にすることだ。

And we'll start from complete scratch.

そして、完全にゼロから始める。

The next thing that we need to do is we need to now include this within our CMake file.

次に必要なのは、CMakeファイルにこれをインクルードすることだ。

So the reason that we need to do this is if we look at our current CMake file, we can see here that the source files that we've included so far are plug-in editor.cppnh and plug-in processor.cppnh.

現在のCMakeファイルを見ると、プラグイン・エディターとプラグイン・プロセッサーが含まれていることがわかる。

And so it doesn't know at the moment that square.cppnh are supposed to be part of our build system, part of the files that we want to use and include in our project.

そのため、square.cppnhがビルド・システムの一部であり、プロジェクトで使用したりインクルードしたりするファイルの一部であることを、現時点では知らない。

So just to show you here, if I go into the source folder and just open it up in the finder, here we are in our project.

ソース・フォルダーに入ってファインダーで開くと、プロジェクトがここにある。

You see cmakelist.txt here.

cmakelist.txtはこちら。

And there's the source folder.

そしてこれがソース・フォルダーだ。

I'm just going to double-click in there.

そこでダブルクリックするだけだ。

And there we see our class, all of our source files, in fact, square.cppnh and all of our other ones.

そして、クラスとすべてのソース・ファイル、実際、square.cppnhと他のすべてのソース・ファイルを見ることができる。

Now, what we need to do is we need to include this in our CMake file.

さて、ここで必要なのは、CMakeファイルにこれをインクルードすることだ。

Now, the reason that you need to say source slash dot plug-in editor and slash square dot h and cpp is because the declaration that you're making inside the CMake file needs to be relative to where the cmakelist.txt resides.

ここで、sourceスラッシュドットプラグインエディタとスラッシュスクエアドットhとcppと言う必要があるのは、CMakeファイル内で行っている宣言がcmakelist.txtのある場所からの相対的なものである必要があるからです。

So here we are in our project.

というわけで、私たちのプロジェクトはここまで来た。

We see that we have this cmakelist.txt, and then we have this source folder.

cmakelist.txtがあり、sourceフォルダがある。

So we need to say relative to the cmakelist.txt file, we're going into source and into these files.

つまり、cmakelist.txtファイルからの相対パスで、ソースとこれらのファイルに移動する必要がある。

If we had another folder that we just, let's say we called it code, for instance, and we put these files in here, then in our cmakelist.txt, it would need to say source slash code slash whatever your source file is.

例えば、codeと呼ぶ別のフォルダがあって、ここにこれらのファイルを置くとすると、cmakelist.txtには、ソース・スラッシュ・コード・スラッシュ（ソース・ファイルが何であれ）と書く必要がある。

So that's the reason why the convention is being named this way.

だから、このような大会名になっているのだ。

Okay, so now we're going to put our square class files in here.

それでは、正方形のクラス・ファイルをここに置くことにしよう。

So we've got square.cpp, source, square.h.

square.cpp、source、square.hがある。

And now those are included.

そして今、それらは含まれている。

Now, if you're in Visual Studio or in Xcode, what you're going to need to do to update your CMake build is you're going to need to invoke CMake, which is that normal command that you normally do, which is cmake-bbuilds-gxcode or whatever your command is, right?