コンテンツにスキップ

カスタムフレームプラグインを作成する方法

トレーダーは、重要な取引やテクニカル分析情報を含むウェブサイトをチャートにできるだけ近づけようとすることがよくあります。 プラグインを使用することで、カスタムフレームを通じてこれを実現できます。

この記事と対応する動画では、プラグインを使用してウェブサイトやテキストボックスを収容できるカスタムフレームを作成する方法を紹介します。

ウェブサイトを表示するカスタムフレームを作成する

チャートエリアにウェブサイトを表示するカスタムフレームを作成します。

Algo アプリに移動し、プラグイン タブに切り替えます。 新規 ボタンをクリックして新しいプラグインを作成します。 空白 オプションを選択します。 プラグインに「My Custom Frame Example」などの名前を付け、作成 ボタンをクリックします。

コードエディタが表示されたら、WebViewオブジェクトを初期化します。

1
_cTraderWebView = new WebView();

WebViewのロードイベントをサブスクライブします。

1
_cTraderWebView.Loaded += _cTraderWebView_Loaded;

WebViewがロードされたときに、cTraderフォーラムをウェブサイトとして設定します。

1
2
3
4
private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args) 
{
    _cTraderWebView.NavigateAsync("https://ctrader.com/forum");
}

カスタムチャートフレームを初期化します。

1
var webViewFrame = ChartManager.AddCustomFrame("Forum");

WebViewをカスタムチャートフレームの子要素として割り当てます。

1
webViewFrame.Child = _cTraderWebView;

カスタムチャートフレームをマルチチャートモードに設定します。

1
webViewFrame.ChartContainer.Mode = ChartMode.Multi;

チャートにアタッチします。

1
webViewFrame.Attach();

以下の完全なコードをコピーできます：

 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 ホットキーを使用するか、ビルド ボタンをクリックします。

結果を確認するには、Trade アプリに移動します。 この場合、cTraderフォーラムのウェブページがチャートエリアのカスタムフレームに表示されます。

カスタムフレームを管理する

cTraderフォーラムのウェブサイトを表示するカスタムフレームは、cTraderの他のチャートフレームと同様に管理できます。 チャートエリアからデタッチおよび再アタッチしたり、サイズを変更したり、他のチャートと交換したりすることができます。

ウェブサイトのURLを変更する

cTraderフォーラムのウェブサイトを別のウェブページに置き換えます。

Algo アプリに戻り、プラグインコードを編集します。 cTraderフォーラムのURL（https://ctrader.com/forum）をSpotwareのURL（https://www.spotware.com）に置き換えます。

これが結果のコード行になります：

1
_cTraderWebView.NavigateAsync("https://www.spotware.com");

プラグインを再度ビルドし、Trade アプリに移動して変更を確認します。 Spotwareのウェブサイトがカスタムフレームに表示されます。

複数のフレームを追加する

プラグインコードを更新して、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");
}

以下の完全なコードをコピーできます：

 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 アプリに戻ると、2つのウェブサイト（cTraderフォーラムとSpotware）が個別のフレームに表示されているはずです。

テキストボックスを作成する

ウェブページを表示するチャートフレームに加えて、プラグインを使用して他のオブジェクトを含むカスタムフレームを追加できます。 例えば、テキストボックスを含むフレームを追加できます。

すべてのWebViewコード行を削除し、代わりにテキストボックスの次の行を追加します：

1
2
3
4
5
6
7
8
9
var webViewFrame = ChartManager.AddCustomFrame("Hello World");

var txtHelloWorld = new TextBlock
{
    Text = "Hello World"
};
webViewFrame.Child = txtHelloWorld;
webViewFrame.ChartContainer.Mode = ChartMode.Single;
webViewFrame.Attach();

以下の完全なコードをコピーできます。

 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
        }
    }        
}

プラグインをビルドし、Trade アプリで結果を確認します。 今回は、チャートエリアにHello Worldというテキストが表示されたボックスが表示されます。

概要

これで、プラグインを使用してウェブページ、テキストボックス、その他の便利な要素をチャートエリアに組み込む方法に慣れたはずです。