cTrader UI でのプラグイン配置

プラグインは、cTrader UI のさまざまな領域（アクティブ通貨ペアパネル（ASP）、トレードウォッチ（TW）、チャートとカスタムフレーム、カスタムウィンドウ、メインメニュー領域など）にカスタム要素を追加できます。このガイドでは、これらの各オプションの使用方法と関連するユースケースを紹介します。

1分でわかるプラグイン配置！

cTrader UI を拡張することで、サードパーティサービスを取引ターミナルにシームレスに統合できます。
単一のプラグインがUIの異なる領域で異なる機能を実行できるため、cTraderの外観や操作性をカスタマイズできます。
プラグインによって作成されたカスタム要素を、cTrader UI内の元の位置から切り離したり再配置したりするように設定できます。
特定のアイデアは、UIの特定の領域に適している場合があります。配置を試して、最適な方法を見つけることができます。

ASP

ASPはチャート表示の右側に位置しています。プラグインは、以下のオプションを使用して1つ以上のカスタム要素を追加できます：

AspTabとして。このオプションを使用すると、プラグインは通貨ペア、DoMなどと並んで別のタブにカスタム要素を表示します。
AspBlockとして。このオプションを使用すると、プラグインは通貨ペアタブ内に、カスタマイズ可能なタイトルと位置を持つ新しい折りたたみ可能なセクションにカスタム要素を表示します。

同じプラグインがブロックとしてとタブとしてどのように見えるかを以下に示します。

ASPブロックASPタブ

ユースケース

ASPブロックにカスタム要素を表示するプラグインのアイデアをいくつか紹介します：

指定された通貨ペアの保護レベルを計算する小さな計算機。
現在アクティブな通貨ペアに関する追加情報を表示するグリッド。

以下のアイデアは、ASPタブとして埋め込むと最もよく機能します：

現在オープンしているすべてのポジションに関するカスタム分析を含むリスト。
金融ニュースメディアのWebView。

ASPブロックとしてカスタム要素を追加するには、Asp.SymbolTab.AddBlock(string title)メソッドを使用します。

var child = ... // Insert the contents you want the block to have here
AspBlock aspBlock = Asp.SymbolTab.AddBlock("Cool Plugin");
aspBlock.Child = child; 

ASPタブとしてカスタム要素を追加するには、Asp.AddTab(string title)メソッドを使用します。

var child = ... // Insert the contents you want the tab to have here
AspTab pluginTab = Asp.AddTab("Another Cool Plugin");
pluginTab.Child = child;

ASP内でのブロックやタブの表示順序を決定するには、それぞれAspBlockとAspTabのIndexプロパティを使用します。

警告

通貨ペアタブの前にカスタムタブを配置できないことに注意してください。また、通貨ペアタブ内の新規注文セクションよりも上にブロックを埋め込むこともできません。その結果、ASPに埋め込まれたブロックの最小可能なインデックスは1です。

トレードウォッチ

トレードウォッチはチャートエリアのすぐ下に位置しています。そこにカスタム要素を別のタブとして追加できます。

以下は、表示に追加されたプラグインの外観の例です。

ユースケース

以下のアイデアは、トレードウォッチ表示に表示するのに適しています。

ユーザーの現在の口座に関するさまざまな統計を表示するカスタム分析スイート。
取引向けのウェブフォーラムのWebView。

トレードウォッチ表示に新しいタブとしてカスタム要素を追加するには、Trade Watch.AddTab(string title)メソッドを使用します。

var child = ... // Insert the contents you want the plugin to have here
Trade WatchTab Trade WatchTab = Trade Watch.AddTab("Yet Another Cool Plugin");
Trade WatchTab.Child = child;

ASPブロックやタブと同様に、Trade WatchTabのIndexプロパティを使用して、トレードウォッチ表示内の他のタブとの相対的な位置を定義できます。

注意

トレードウォッチ表示に配置されたすべてのカスタムタブは、cTrader UIに最初に含まれているデフォルトのタブの右端にのみ表示されます。その後、これらのタブのIndexは1以上でなければなりません。インデックスは、他のプラグインタブとの相対的な位置のみを決定します。

チャートとカスタムフレーム

カスタム要素を別のチャートフレームに表示することもできます。基本的に、現在のチャートビューに新しいチャートとして追加します。さらに、プラグインは、利用可能な通貨ペアとチャートフレームに対して任意の数のチャートを開くことができます。

以下は、通常のチャートの横にあるWebViewを含むカスタムチャートフレームの外観です。

ユースケース

以下のアイデアは、カスタムフレームに埋め込むと最もよく見え、機能します：

別のチャートサービスのWebView。
大規模なカスタム取引パネル。
市場の動きにどのように反応するかを決定する際にトレーダーが相談する生成AIサービスのWebView。

新しいカスタムフレームを追加するには、ChartManager.AddCustomFrame(string title)メソッドを使用します。

var child = ... // Insert the contents you want the plugin to have here
var newCustomFrame = ChartManager.AddCustomFrame("Best Plugin");
newCustomFrame.Child = child;

プラグインが新しいチャートを開くには、ChartManager.AddChartFrame(string symbolName, TimeFrame timeFrame)メソッドを使用します。

var newChart = ChartManager.AddChartFrame("EURUSD", TimeFrame.Day2);

注意

プラグインが新しいカスタムフレームまたはチャートを追加すると、cTraderはシングルチャートモードまたはフリーチャートモードが以前に有効になっていた場合でも、マルチチャートモードに切り替わります。

メインメニュー

プラグインは、Trade、Algo、Copy、Analyzeなどの既存のセクションに加えて、メインメニューUIにカスタムセクションを追加するようにコーディングできます。追加されたカスタムセクションには、ウェブサイト、ダッシュボード、ボタン、ツールなどを含めることができます。

以下は、メインメニューに cTrader Store ウェブサイトを含む cTrader Store カスタムセクションを追加するシンプルなプラグインのコードです：

using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CTraderStorePlugin : Plugin
    {
        private MainMenuOwnCustomItem _storeItem;

        private const string StoreIconSvg = @"
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
          <path fill='white' d='M7 7V6a5 5 0 0 1 10 0v1h2a1 1 0 0 1 1 1l-1 11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 8a1 1 0 0 1 1-1h2zm2 0h6V6a3 3 0 0 0-6 0v1z' />
        </svg>";

        protected override void OnStart()
        {
            _storeItem = MainMenu.AddItem("cTrader Store", new SvgIcon(StoreIconSvg));

            var webView = new WebView();
            webView.Loaded += _ =>
            {
                webView.NavigateAsync("http://ctrader.com");
            };

            _storeItem.Child = webView;

            MainMenu.SelectedItemChanged += OnSelectedItemChanged;
        }

        private void OnSelectedItemChanged(MainMenuSelectedItemChangedEventArgs args)
        {
            if (args.NewItem == _storeItem)
            {
                MainMenu.IsExpanded = true;
            }
        }

        protected override void OnStop()
        {
            MainMenu.SelectedItemChanged -= OnSelectedItemChanged;

            if (_storeItem != null)
            {
                MainMenu.RemoveItem(_storeItem);
                _storeItem = null;
            }
        }
    }
}

cTrader Store を選択すると、カスタムセクションに移動し、以下のようにその内容が表示されます。

複数の配置

以下のプラグインは、cTraderのUIの複数の場所にカスタム要素を追加します：

プラグインは、現在オープンしているすべてのポジションの手数料の合計をASPブロックに表示します。
トレードウォッチ表示では、プラグインはすべてのオープンポジションの累積取引高を表示します。
プラグインはまた、カスタムチャートフレームにctrader.comのWebViewを表示します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class PluginPlacementTest : Plugin
    {

        private TextBlock _commissionsText;
        private TextBlock _volumeText;
        private WebView _cTraderWebView;

        protected override void OnStart()
        {
            _cTraderWebView = new WebView();
            _cTraderWebView.Loaded += ShowWebsite;

            _commissionsText = new TextBlock
            {
                Text = ShowCommissions(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            _volumeText = new TextBlock
            {
                Text = ShowVolume(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            ChartManager.AddCustomFrame("cTrader.com").Child = _cTraderWebView;
            Asp.SymbolTab.AddBlock("Commissions").Child = _commissionsText;
            TradeWatch.AddTab("Volume").Child = _volumeText;
            Timer.Start(TimeSpan.FromSeconds(0.5));

        }

        protected void ShowWebsite(WebViewLoadedEventArgs args)
        {
            _cTraderWebView.NavigateAsync("https://ctrader.com");
        }

        protected string ShowCommissions()
        {
            double commissionsCounter = 0;
            foreach (var position in Positions)
            {
                commissionsCounter += position.Commissions;
            }
            return commissionsCounter.ToString();
        }

        protected string ShowVolume() 
        {
            double volumeCounter = 0;
            foreach (var position in Positions) 
            {
                volumeCounter += position.VolumeInUnits;
            }
            return volumeCounter.ToString();
        }

        protected override void OnTimer()
        {
            _commissionsText.Text = ShowCommissions();
            _volumeText.Text = ShowVolume();
        }
    }
}

まとめ

cTraderは、プラグインを介してカスタム要素を配置するためのいくつかのオプションを提供します。これらを使用してcTraderのUIをカスタマイズし、プラットフォームをあなただけのものにすることができます。