トレーダーは、取引やテクニカル分析に必要な重要な情報を含むウェブサイトをチャートの近くに置くことを目指すことがよくあります。プラグインを使用することで、カスタムフレームを通じてこの目標を達成できます。
この記事と対応するビデオでは、プラグインを使用してウェブサイトやテキストボックスを含むカスタムフレームを作成する方法を示します。
Creating a Custom Frame Showing a Website
チャートエリアにウェブサイトを収めるカスタムフレームを作成しましょう。
「Algo」アプリに移動し、「プラグイン」タブに切り替えます。「新規」ボタンをクリックして新しいプラグインを作成します。
「空白」オプションを選択します。プラグインに「My Custom Frame Example」などの名前を付け、「作成」ボタンをクリックします。

コードエディターが表示されたら、WebViewオブジェクトを初期化します。
| _cTraderWebView = new WebView();
|
WebViewのロードイベントを購読します。
| _cTraderWebView.Loaded += _cTraderWebView_Loaded;
|
ロード時にcTraderフォーラムをWebViewのウェブサイトとして設定します。
| private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args)
{
_cTraderWebView.NavigateAsync("https://ctrader.com/forum");
}
|
カスタムチャートフレームを初期化します。
| var webViewFrame = ChartManager.AddCustomFrame("Forum");
|
WebViewをカスタムチャートフレームの子として割り当てます。
| webViewFrame.Child = _cTraderWebView;
|
カスタムチャートフレームをマルチチャートモードに設定します。
| webViewFrame.ChartContainer.Mode = ChartMode.Multi;
|
チャートにアタッチします。
You can copy the full code below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 | using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;
namespace cAlgo.Plugins
{
[Plugin(AccessRights = AccessRights.None)]
public class MyCustomFrameExample : Plugin
{
WebView _cTraderWebView = new WebView();
protected override void OnStart()
{
_cTraderWebView.Loaded += _cTraderWebView_Loaded;
var webViewFrame = ChartManager.AddCustomFrame("Forum");
webViewFrame.Child = _cTraderWebView;
webViewFrame.ChartContainer.Mode = ChartMode.Multi;
webViewFrame.Attach();
}
private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args)
{
_cTraderWebView.NavigateAsync("https://ctrader.com/forum");
}
protected override void OnStop()
{
// Handle Plugin stop here
}
}
}
|
プラグインをビルドします。Ctrl+Bホットキーを使用するか、「ビルド」ボタンをクリックします。
結果を見るには、「取引」アプリに移動します。私たちの場合、カスタムフレームにcTraderフォーラムのウェブページが表示されるようになっています。

Managing the Custom Frame
cTraderフォーラムウェブサイトを収めるカスタムフレームは、cTraderの任意のチャートフレームと同様に管理できます。チャートエリアから切り離したり、再接続したり、サイズを変更したり、他のチャートと交換したりすることができます。
Changing the Website URL
cTraderフォーラムウェブサイトを別のウェブページに置き換えましょう。
再度「Algo」アプリに戻り、プラグインコードを編集します。cTraderフォーラムURL(https://ctrader.com/forum
)をSpotware URL(https://www.spotware.com
)に置き換えます。
次のコード行が結果として得られます:
| _cTraderWebView.NavigateAsync("https://www.spotware.com");
|
再度プラグインをビルドし、「取引」アプリに移動して変更を確認します。
カスタムフレームにはSpotwareウェブサイトが表示されます。

Adding Multiple Frames
2つのウェブサイトを収める2つのカスタムフレームを追加するようにプラグインを再コード化しましょう。
新しいWebViewオブジェクトを追加し、前の例と同じコード手順と行を繰り返します。
1
2
3
4
5
6
7
8
9
10
11
12
13 | WebView _cTraderWebView = new WebView();
WebView _cTraderWebViewSite = new WebView();
_cTraderWebViewSite.Loaded += _cTraderWebViewSite_Loaded;
var webViewFrameSite = ChartManager.AddCustomFrame("Site");
webViewFrameSite.Child = _cTraderWebViewSite;
webViewFrameSite.ChartContainer.Mode = ChartMode.Multi;
webViewFrameSite.Attach();
private void _cTraderWebViewSite_Loaded(WebViewLoadedEventArgs args)
{
_cTraderWebViewSite.NavigateAsync("https://www.spotware.com");
}
|
You can copy the full code below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 | using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;
namespace cAlgo.Plugins
{
[Plugin(AccessRights = AccessRights.None)]
public class MyCustomFrameExample : Plugin
{
WebView _cTraderWebView = new WebView();
WebView _cTraderWebViewSite = new WebView();
protected override void OnStart()
{
_cTraderWebView.Loaded += _cTraderWebView_Loaded;
var webViewFrame = ChartManager.AddCustomFrame("Forum");
webViewFrame.Child = _cTraderWebView;
webViewFrame.ChartContainer.Mode = ChartMode.Multi;
webViewFrame.Attach();
_cTraderWebViewSite.Loaded += _cTraderWebViewSite_Loaded;
var webViewFrameSite = ChartManager.AddCustomFrame("Site");
webViewFrameSite.Child = _cTraderWebViewSite;
webViewFrameSite.ChartContainer.Mode = ChartMode.Multi;
webViewFrameSite.Attach();
}
private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args)
{
_cTraderWebView.NavigateAsync("https://www.ctrader.com/forum");
}
private void _cTraderWebViewSite_Loaded(WebViewLoadedEventArgs args)
{
_cTraderWebViewSite.NavigateAsync("https://www.spotware.com");
}
protected override void OnStop()
{
// Handle Plugin stop here
}
}
}
|
プラグインをビルドします。
「Algo」アプリに戻ると、個別のフレームにcTraderフォーラムとSpotwareの2つのウェブサイトが表示されるはずです。

Creating a Text Box
ウェブページを収めるチャートフレームに加えて、プラグインを使用して他のオブジェクトを含むカスタムフレームを追加することができます。例えば、テキストボックスを含むフレームを追加することができます。それを行いましょう。
すべてのWebViewコード行を削除し、代わりに以下のテキストボックス用のコード行を追加します:
| var webViewFrame = ChartManager.AddCustomFrame("Hello World");
var txtHelloWorld = new TextBlock
{
Text = "Hello World"
};
webViewFrame.Child = txtHelloWorld;
webViewFrame.ChartContainer.Mode = ChartMode.Single;
webViewFrame.Attach();
|
You can copy the full code below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 | using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;
namespace cAlgo.Plugins
{
[Plugin(AccessRights = AccessRights.None)]
public class MyCustomFrameExample : Plugin
{
protected override void OnStart()
{
var webViewFrame = ChartManager.AddCustomFrame("Hello World");
var txtHelloWorld = new TextBlock
{
Text = "Hello World"
};
webViewFrame.Child = txtHelloWorld;
webViewFrame.ChartContainer.Mode = ChartMode.Single;
webViewFrame.Attach();
}
protected override void OnStop()
{
// Handle Plugin stop here
}
}
}
|
プラグインをビルドします。
通常通り、結果は「取引」アプリに反映されます。今回は、チャートエリアに「Hello World」というテキストのボックスが表示されるはずです。

Summary
これで、プラグインを使用してウェブページ、テキストボックス、およびその他の便利な要素をチャートエリアに組み込む方法に習熟したはずです。cTrader Algoについてさらに学ぶには、ドキュメントを参照するか、フォーラムに質問を投稿してください。