AIでWebViewプラグインを作成する¶

わずか数ステップで、AIを使用してWebViewプラグインのウェブサービスを簡単に作成できます。プログラミングの知識やスキルは必要ありません。

プラグインのアイデアをブレインストーミングする ¶

作成したいウェブサービスのタイプが既にわかっている場合は、このセクションをスキップして次に進んでください。

または、お気に入りのAIにアイデアをブレインストーミングするよう依頼することもできます。

プロンプト

 cTrader内でWebViewプラグインとして表示されるウェブアプリを作成したいです。
 私のトレーディング体験を向上させる有用なアイデアを提案してください。

Answer

スマートトレードアシスタント
トレード計算機
カスタムシンボルダッシュボード
シンボルノート & コラボレーションツール
リスク管理ダッシュボード
ニュース影響トラッカー
セッションヒートマップツール
トレードコパイロット（AIノート & フィードバック）

ウェブサイトのコードを生成する ¶

cTraderのWebViewプラグインには、標準的なJavaScript、HTML、CSSのスタックを使用し、必要に応じてWebView APIメソッドを使用する外部ホストのウェブサイトが必要です。

より正確な応答を得るために、AIに以下の入力データを提供してください：

WebViewプラグインに関する一般的な情報
WebViewプラグインのAPIリファレンス
cTraderストアの利用規約
App StoreとGoogle Playの規則

警告

作成するWebViewプラグインは、cTraderストア、App Store、Google Playの規則に準拠する必要があります。最も重要なのは、Webサービスに認証や支払いフォームを含めないことです。

便利のために、WebViewプラグインのドキュメントとcTraderストアの規則をダウンロードできます。AIが参照するファイルとしてアップロードする場合に便利です。

プロンプト

 cTraderで使用するためのトレード計算機ウェブアプリを作成したいです。
 ウェブサイトは、JavaScript、HTML、CSSおよびWebViewプラグインのAPIメソッドのみを使用して構築する必要があります。
 追加のライブラリは必要ありません。
 ウェブサイトは、cTraderストア、AppleのApp Store、GoogleのPlay Storeの規則に準拠する必要があります。
 ウェブサイトには認証や支払いフォームを含めてはいけません。
 追加の設定なしでウェブサイトを構築するために必要なすべてを含む単一のコードを提供してください。

回答

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Trade Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
      color: #333;
    }
    h1 {
      text-align: center;
    }
    .container {
      max-width: 400px;
      margin: auto;
      padding: 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    label, input, select {
      display: block;
      width: 100%;
      margin-bottom: 15px;
    }
    input, select {
      padding: 8px;
      font-size: 1em;
    }
    button {
      padding: 10px;
      background-color: #007acc;
      color: white;
      border: none;
      font-size: 1em;
      cursor: pointer;
      width: 100%;
    }
    button:hover {
      background-color: #005fa3;
    }
    .result {
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Trade Calculator</h1>
    <label for="symbol">Symbol (e.g., EURUSD)</label>
    <input type="text" id="symbol" value="EURUSD"/>

    <label for="volume">Volume (Lots)</label>
    <input type="number" id="volume" value="1" min="0.01" step="0.01"/>

    <label for="price">Price</label>
    <input type="number" id="price" value="1.1000" step="0.0001"/>

    <label for="leverage">Leverage</label>
    <input type="number" id="leverage" value="100" step="1"/>

    <button onclick="calculate()">Calculate</button>

    <div class="result" id="result">Margin: --</div>
  </div>

  <script>
    function calculate() {
      const volume = parseFloat(document.getElementById("volume").value);
      const price = parseFloat(document.getElementById("price").value);
      const leverage = parseFloat(document.getElementById("leverage").value);

      // Standard 100,000 units per lot
      const notional = 100000 * volume;
      const marginRequired = (notional / leverage) * price;

      document.getElementById("result").innerText = 
        `Margin Required: ${marginRequired.toFixed(2)} (base currency units)`;
    }

    // WebView Plugin API Example
    window.addEventListener("message", (event) => {
      const message = event.data;
      if (message.type === "symbolUpdate") {
        document.getElementById("symbol").value = message.symbol;
      }
    });

    // Send initial readiness signal
    window.parent.postMessage({ type: "ready" }, "*");
  </script>
</body>
</html>

ウェブサービスをデプロイする ¶

生成されたコードをHTMLファイルに貼り付け、コンピュータに（ローカルで）保存します。

ウェブサービスをデプロイするには、HTMLファイルを安全なサーバー上でホストする必要があります。ドメイン名を取得し、ホスティングプロバイダに登録し、cPanel/hPanelまたはFTP経由でHTMLファイルをアップロードする必要があります。

以下のプロンプトを使用してAIに支援を求めることができます：

プロンプト

 ドメイン名を取得し、ホスティングプロバイダと設定する手順を教えてください。

ウェブアプリをテストする ¶

ブラウザで新しいウェブサイトを開きます。サイトの機能をテストして、正しく動作することを確認します。

実際のウェブサイトの外観に応じて、AIツールに戻って調整を依頼することもできます。例えば、以下のようにウェブサイトのコードを編集するようAIに依頼できます：

正しく動作していない機能を修正する
カラーテーマを変更する
特定の機能を追加する
特定の機能を削除する
その他

調整を行った後、ファイルに戻り、編集したコードを貼り付けて変更をデプロイします。

ウェブアプリが準備できてURLがわかれば、cTraderでWebViewプラグインをビルドできます。