プラグインでカスタムツールバーボタンを追加する方法

cBots (自動売買)

プラグインを使用すると、cTraderのチャートツールバーに特定のアクション、タスク、またはコンテンツのボタンを追加できます。アクションボタンがクリックされると、プログラムされた操作が実行されます。

この記事と対応するビデオでは、プラグインを使用してチャートツールバーに新しいボタンを追加する方法を説明します。

プラグインの作成

まず、プラグインを作成し、クリックするとポジションを開くボタンを表示するコードを作成しましょう。

Algo」アプリを開き、「プラグイン」タブに移動します。「新規」ボタンをクリックします。

空白」テンプレートを選択します。プラグインの名前を「カスタムツールバーボタン」などと入力し、「作成」ボタンをクリックします。

ツールバーボタンを追加します。

1
Commands.Add(CommandType.ChartContainerToolbar, OpenPositions);

ボタンクリックイベントを処理し、ポジションを開くメソッドを作成します:

1
2
3
4
5
6
private void OpenPositions(CommandArgs args) 
{
    ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
}

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

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 TestPlug : Plugin
    {
        protected override void OnStart()
        {
            Commands.Add(CommandType.ChartContainerToolbar, OpenPositions);
        }
        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000);
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
        }
        protected override void OnStop()
        {
            // プラグイン停止の処理
        }
    }        
}
 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

プラグインをビルドします。Ctrl+Bホットキーを使用するか、「ビルド」ボタンをクリックします。

次に、「Trade」アプリに移動し、新しいボタンがチャートツールバーに追加されたことを確認します。

ボタンをクリックして許可を与えると、いくつかのポジションが開くはずです。

ボタンにカスタム画像を追加する

デフォルトのアイコンが気に入らない場合は、お好みの画像をプラグインのアイコンとして設定できます。XMLコードに基づいて、SVG画像が最も一般的にアイコンとして使用されます。

cTrader Algoは、カスタムSVG画像をアイコンとして指定して使用するコマンドを提供します。

画像コードの取得

アイコンとして使用するSVG画像を作成またはダウンロードします。SVGファイルをNotepad、Visual Studio Code、または任意のIDEでXMLモードで開きます。

プログラムの「検索と置換」機能を使用して、すべてのダブルクォート"をシングルクォート'に置き換えます。XMLコードにはダブルクォートを含めないようにします。

生成されたXMLコードをコピーします。

<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>

新しいアイコンの設定

Algo」アプリに戻り、プラグインのコードエディタを開きます。

空のSVGアイコンを初期化します。

var icon = new SvgIcon();
1

先ほど抽出したXMLコードを追加します。

var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>");
1
2
3

アイコンをボタンに割り当てます。

Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
1

ボタンの機能を説明するツールチップを追加します。

var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
command.ToolTip = "Open Positions";
1
2

完全なコードをコピーできます:

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 CustomToolbarButton : Plugin
    {
        protected override void OnStart()
        {
            var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
    <path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
    </svg>");

            var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
            command.ToolTip = "Open Positions";

            Commands.Add(CommandType.ChartContainerToolbar, CloseAllPositions, icon);
        }

        private CommandResult CloseAllPositions (CommandArgs args)
        {
            var buttonStyle = new Style();

            buttonStyle.Set(ControlProperty.Margin, new Thickness(0, 5, 0, 0));
            buttonStyle.Set(ControlProperty.Width, 150);

            var closePositionsButton = new Button
            {
                Text = "Close All Positions", 
                Style = buttonStyle  
            };

            closePositionsButton.Click += args =>
            {
                foreach (var position in Positions)
                {
                    position.Close();
                }
            };

            var stackPanel = new StackPanel();
            stackPanel.AddChild(closePositionsButton);

            return new CommandResult(stackPanel);
        }

        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);  
        }

        protected override void OnStop()
        {
            // プラグイン停止の処理
        }
    }        
}
 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

プラグインを再ビルドします。

Trade」アプリに移動し、新しいアイコンが表示されたことを確認します。

ポップアップメニュー付きのボタンを追加する

クリックすると特定の操作を実行するボタンの他に、ポップアップメニューを表示するボタンも追加できます。カスタマイズして、複数のボタンやミニターミナルを表示するメニューにすることができます。

Algo」アプリのコードエディタに戻り、ポップアップメニューを開くボタンを作成し、そのメニュー内に「すべてのポジションを閉じる」機能を提供する別のボタンを追加します。このボタンがクリックされると、事前に開いたポジションがすべて閉じられます。

新しいツールバーボタンを追加します。

Commands.Add(CommandType.ChartContainerToolbar, OnIconClicked, icon);
1

新しいボタンを作成し、スタイルを割り当てます。

var buttonStyle = new Style();
buttonStyle.Set(ControlProperty.Margin, new Thickness(0, 5, 0, 0)); 
buttonStyle.Set(ControlProperty.Width, 150);
var closePositionsButton = new Button 
{ 
    Text = "Close All Positions", Style = buttonStyle 
};
1
2
3
4
5
6
7
8
9

スタックパネルを宣言し、ボタンを子として追加します。

var stackPanel = new StackPanel();
stackPanel.AddChild(closePositionsButton);
1
2

ボタンのクリックアクションを処理するイベントを追加します。

closePositionsButton.Click += args => 
{
    foreach (var position in Positions)
    {
        position.Close();
    }
};
1
2
3
4
5
6
7

完全なコードをコピーできます:

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 CustomToolbarButton : Plugin
    {
        protected override void OnStart()
        {
            var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
    <path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
    </svg>");

            var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
            command.ToolTip = "Open Positions";

            Commands.Add(CommandType.ChartContainerToolbar, CloseAllPositions, icon);
        }

        private CommandResult CloseAllPositions (CommandArgs args)
        {
            var buttonStyle = new Style();

            buttonStyle.Set(ControlProperty.Margin, new Thickness(0, 5, 0, 0));
            buttonStyle.Set(ControlProperty.Width, 150);

            var closePositionsButton = new Button
            {
                Text = "Close All Positions", 
                Style = buttonStyle  
            };

            closePositionsButton.Click += args =>
            {
                foreach (var position in Positions)
                {
                    position.Close();
                }
            };

            var stackPanel = new StackPanel();
            stackPanel.AddChild(closePositionsButton);

            return new CommandResult(stackPanel);
        }

        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);  
        }

        protected override void OnStop()
        {
            // プラグイン停止の処理
        }
    }        
}
 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

プラグインをビルドします。

Trade」アプリに移動し、「すべてのポジションを閉じる」ボタンを使用します。今回は、事前に開いたポジションが閉じられるはずです。

まとめ

この記事とビデオで、チャートツールバーに操作、タスク、さらにはポップアップメニュー用のカスタムボタンを追加する方法について理解を深めていただけたことを願っています。cTrader Algoについてもっと知りたい場合は、ドキュメントを読むか、フォーラムに質問を投稿してください。

目次

このページについて