有用なテクノロジーカクテルでYour MQL5 顧客を驚嘆させる！

laplacianlab | 24 11月, 2015

はじめに

MQL5 はプログラマーに関数の完全セットとオブジェクト指向API を提供します。それらのお陰でプログラマーは MetaTrader 環境内で願うことを行うことができるのです。ただ「ウェブテクノロジー」は今日ひじょに特殊なことをしてなにか違ったもので顧客を驚かせる必要があったり、ただ MT5 「標準ライブラリ」の特定箇所をマスターする十分な時間がないなんらかの状況で救助にきてくれる極端に多才なツールです。今回の例題によりご自身の開発時間管理の仕方と同時にすばらしいテクノロジーカクテルを作成する方法を実用例をご紹介します。

この指導書はすぐれたウェブ駆動GUI（グラフィカルユーザーインターフェース）から CSV ファイルを作成する方法をお伝えします。具体的には記事 Building an Automatic News Trader で説明されているようにEA によって使用されるニュースカレンダーを作成します。われわれが連携するウェブテクノロジーは HTML5、CSS、 JQueryです。この例題はすでにいくらかウェブ知識があったり、その技術を自身の MQL5 開発に取り入れるためにあるていど学習したいと思っている MQL5 開発者にとっては特に興味深いものです。個人的には私は近年 JQuery、HTML5、CSSと連携する機会があったので、それらすべてにひじょうに精通しています。これはすべてウェブアプリケーションのクライアント側として知られています。

カクテルFlickr上でクリエイティブコモンライセンスの下にmountainhiker によって配布されている写真

図1　カクテルFlickr上でクリエイティブコモンライセンスの下にmountainhiker によって配布されている写真

今月私はClasses for Creation of Control Panels and Dialogsを調査するための物理的時間がなかったためCharts and diagrams in HTMLで説明されている方法を取るのが良いと思いました。EA's GUIs to enter dataのスレッドを開いたのはそれが理由です。


1. テクノロジーカクテル

HTML 言語とウェブはCERN（欧州原子核研究機構）で科学的書類は記述し共有するために1989年に誕生しました。それほど昔ではありません。HTML はもともと科学コミュニティーのコミュニケーションツールとして考案されました。それ以来 HyperText Markup Language は世界中の人々の間で情報共有を行うため常に進化しています。科学と技術の歴史をお話してみなさんを退屈にしたいわけではありませんが、この情報だけは覚えておいてください。

最初に開発者は HTML を取り入れ自身でかっこいいものを作りました。彼らは HTML コード、CSS スタイルのコード、JavaScript をすべて単一のドキュメントに書いていました。すべてをごちゃまぜにし、そしてすぐウェブアプリケーションが少ないエラーで動作するよう物事を避ける哲学を取り入れることを認識したのです。それが今日ウェブアプリケーションのクライアント側で作業するときつねにストラクチャ（HTML）、視覚表現（CSS）、ふるまい（JavaScript）を分ける理由です。今日のような練習をしたいときはいつでも、上記3種類の相互依存的技術を理解する必要があります。


2. そしてユーザビリティについてはどうでしょうか？

ユーザビリティとは使いやすいことを意味します。 それはなにかを使うことを学ぶのはどれほどたやすいか、それを使おうと思うことはどれほど効率的か、なにかを使うときどれほど簡単に間違うか、ユーザーはどれほどそのようなものを使いたがっているか、を意味します。簡単に思い出します。われわれは顧客が MQL5 プロダクト、すなわち記事Building an Automatic News Traderで説明されているEA 用のニュースカレンダーを作成することができるようウェブ起動 GUI を作成しています。ユーザビリティの側面は、われわれが数多くの技術を統合しているため重要です。しかし注意しなければなりません。これはすべてユーザーにとってわかりやすいものである必要があるのです。顧客がウェブ起動ソリューションを使い、「このプロダクツを使うのはなんてステキ！」、「すごく好きだ！」と言うようになるときわれわれは成功するのです。

われわれの GUI 設計は周知のユーザビリティガイドラインに従います。


3. ニュースの CSV 作成用GUI

本例題の全体コードは news-watcher-csv.htmlにあります。これは EAとともに顧客に配布するものです。ところでまず下記で詳しく説明するファイルに目を通すことをお薦めします。

3.1. 行動階層 (JS) および表示階層 (CSS)のロード

The Google Hosted Librariesはもっとも一般的なオープンソースの JavaScript ライブラリに対するコンテンツ配布ネットワークです。連携するためにご自分のマシンにコピーすることのなく、みなさんのウェブアプリが指定するライブラリへの最初の HTTP 依頼するよう必要な JS ファイルファイルをGoogleのサーバーから取ることができます。これはブラウザが JQueryライブラリとその対応 CSSをロードするためこの例題で取られる方法です。

ドキュメントのヘッダタグで必要なものをすべてロードします。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="jquery.timepicker.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.timepicker.min.js"></script>

それでもN CSS および顧客が指定時刻を選択できるウィジェットである jquery.timepickerのJavaScriptもインクルードします。これは特効薬はどこにもないからです！JQuery UI にはボックスから1日の時刻を選択するウィジェットは付属していません。よって第三者コンポーネントに頼る必要があります。ファイル jquery.timepicker.css および jquery.timepicker.min.js は Googleサーバーで利用することはできないため、ローカルマシンにコピーし HTML ドキュメントでそれを参照します。

これは顧客にとって快適とは言えません。本例題のコンテクストとしてまずこれら2件のファイルを信頼のおけるパブリックサーバーにアップロードし、それからお手持ちの HTML ドキュメントからそれらを指示します。Googleで利用可能なJQuery にするのとちょうど同じです。顧客が見るファイルが少なければ少ないほど良いのです。ユーザビリティに関して前に話したことを思い出してください。これは改善のエクササイズとして残します。とにかくこれはすべて顧客が GUIを使用するためのインターネット接続を持っていると仮定していることを念頭に置きます。

3.2. われわれの GUIで使用されるJQuery ウィジェット

われわれの GUI は以下の JQuery ビジュアルコントロールを持ちます。これはすべてすでにこの JavaScript フレームワークにプログラムされていることを覚えておきます。JQuery および JQuery UIについての知識を深めるため公式ドキュメンテーションを一読ください。主要な jQuery プログラムがどのように動作するかはのちに説明します。

3.2.1. 日付ピッカー

このコントロースによりユーザーは簡単に特定日付に入力することができます。


図2　jQuery 日付ピッカー

図2　jQuery 日付ピッカー


3.2.2. 時刻ピッカー

このプラグインはユーザーが特定時刻に入力するのに役立ちます。これは Google カレンダーからヒントを得ています。


図3　jQuery 時刻ピッカーこの拡張は Jon Thornton氏によって書かれています。

図3　jQuery timepicker. この拡張は Jon Thornton氏によって書かれています。

3.2.3. ソータブル

これはリスト上またはマウスを使用してグリッド上でニュースを再注文するためです。

図4　jQuery ソータブル

図4　jQuery ソータブル


3.2.4. ダイアログ

このコントロールはインタラクティブオーバーレイのコンテンツを表示するためのものです。ユーザビリティの純粋性にこだわる人はそれを推奨しません。ユーザーにとってやや押しつけがましいからです。ユーザーはまたそれと連携するのに注意して手を動かすよう強制されます。動作するのに障害がある人は jQuery ダイアログとの情報やりとりは快適でないと感じることでしょう。しかしこのウィジェットはいくつかの状況で利用することができます。私はこのことをわかっています。あまり押しつけがましくない方法でCSV コンテンツが表示される ようグラフィカルユーザーインターフェースを改善することはみなさんのエクササイズとして残しておきます。


図5　jQuery ダイアログ


図5　jQuery ダイアログ


3.3. プロダクトに素晴らしいカスタム価値の追加

フリーランスまたは企業としてみなさんは MT5 を基にしたソリューションを提供し、マーケティングの問題のため顧客の嗜好をデータベースに格納していることでしょう。その場合、ご自身のウェブ起動 GUIをカスタマイズする情報を有利に利用することができます。


図6　みなさんはスカルラッティクリップを組み込んでリラックスした環境でボブがカレンダーを作成できるようにすることが可能です。

図6　みなさんはスカルラッティクリップを組み込んでリラックスした環境でボブがカレンダーを作成できるようにすることが可能です。

この例ではになさんの顧客ボブが有名なイタリア人／スペイン人のバロック音楽指揮者、ドメニコ・スカルラッティを愛好しているので、リラックスした環境でボブがカレンダーを作成できるようスカルラッティのクリップを組み込みます。

3.4. われわれの GUIの JQuery コード

今度はファイル news-watcher-csv.html を開き、本稿で先に話した3か所を考察します。クライアントのウェブアプリはプレゼンテーション（CSS）、ストラクチャ（HTML）、動作（JavaScript/jQueryで構成されていることを思い出してください。ビュー内のこれらすべてによって簡単に jQuery が行うことを理解します。

主要な jQuery のプログラムは簡単です。まずそれは YouTubeの iframeに少し修正を加えてドキュメントの HTML5 コードが適切に検証できるようにします。それからアプリは前述のウィジェットを起動し、最後にニュースを追加するボタンとCSVコンテンツを作成するリンクの両方の動作をプログラムします。それだけです！

$(function() { 

    // fix YouTube's zIndex iframes issue

    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });

    // Init GUI elements

    $("#datepicker").datepicker({ 'dateFormat': 'yy.m.dd' });
    $("#timepicker").timepicker({ 'timeFormat': 'H:i:s' });                 
    $("#sortable").sortable().disableSelection();
    $("#news-calendar").hide();

    // Buttons behavior

    $("#add-new").click(function() {

        $("#news-calendar").fadeIn("500");

        $("#sortable").append('<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + 
            $('#base-currency').val() + ';' + 
            $('#datepicker').val() + ';' + 
            $('#timepicker').val() + ';' + 
            $('#description').val() + '</li>');

    });

    $("#get-csv").click(function() {

        var csv = "Country;Time;Event\n";

        $("#sortable li").each(function(){

            csv += $(this).text() + "\n";

        });

        $("#dialog").empty().dialog({
            modal: true,
            width: 650,
            show: {
                effect: "blind",
                duration: 400
            },
            hide: {
                effect: "explode",
                duration: 400
            },
            buttons: {
                Ok: function() {
                $( this ).dialog( "close" );
                }
            }
        }).append(csv.replace(/\n/g, '<br/>'));

        return false;

    });

});

上のjQuery コードは以下の HTML ストラクチャを動的に操作します。

<div id="csv-generator">
    <p>Dear Bob, please, generate the CSV file for NewsWatcher EA while you listen to your favourite music:</p>
    <iframe id="video" width="400" height="280" src="https://www.youtube.com/embed/4pSh8kHKuYw" allowfullscreen></iframe>
    <div id="form">
        <p>Enter news in your CSV calendar:</p>
        <div class="form-field">
            <label>Base currency:</label>
            <select id="base-currency">
                <option>AUD</option>
                <option>CAD</option>
                <option>CHF</option>
                <option>CNY</option>
                <option>EUR</option>
                <option>GBP</option>
                <option>JPY</option>
                <option>NZD</option>
                <option>USD</option>
            </select>
        </div>
        <div class="form-field">
            <label>Date:</label>
            <input type="text" id="datepicker"/>
        </div>
        <div class="form-field">
            <label>Time:</label>
            <input type="text" id="timepicker"/>
        </div>
        <div class="form-field">
            <label>Description:</label>
            <input id="description" type="text"/>
        </div>
        <div id="add-new-button" class="form-field">
            <label></label>
            <button id="add-new">+ Add new</button>
        </div>
    </div>
</div><!-- end of csv-generator -->
<div id="news-calendar">
    <p><a id="get-csv" href="#">Get CSV</a></p>
    <ul id="sortable"></ul>
</div>
<div id="dialog" title="Please, copy and paste in data_folder\MQL5\FILES\news_watcher.csv"></div>

最終的にプレゼンテーション階層が明確に他の2種類の階層から分離されている CSS に従うことは言うまでもありません。

<style>

    /* Simple CSS reset */

    * {
        margin: 0;
        padding: 0
    }


    /* HTML tags */

    body {
        font-family: Arial, Helvetica, sans-serif;
        padding: 0em 2em
    }

    header { border-bottom: 1px solid #cccccc }
    footer { border-top: 1px solid #cccccc; margin-top: 2em; padding-top: 1em }

    h1, h2, h3, h4, h5, p { padding: 1em 0em }

    label {
        width: 150px;
        display: inline-block;
        margin: 5px;
        text-align: right
    }

    input { border: 1px solid #cccccc }           
    button, option, input { padding: 4px }
    select { padding: 3px }

    /* Custom ids */

    #csv-generator {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa');
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); 
        background: -moz-linear-gradient(top, #ffffff, #fafafa);
        width: 100%;
        clear: both;
        overflow: hidden
    }

    #video {
        width: 30%;
        float: left;
        margin-right: 1em;
        -moz-box-shadow: 0px 3px 5px #888;
        -webkit-box-shadow: 0px 3px 5px #888;
        box-shadow: 0px 3px 5px #888;
        border:0
    }  

    #dialog { font-size: 12px }

    /* Form for adding the news */

    #form { width: 65%; float: right }
    input#datepicker, input#timepicker { width: 100px }
    input#description { width: 300px } 
    #add-new-button { float: left; margin-right: 1em }

    /* Sortable */

    #news-calendar { clear: both; margin-top: 2em; padding: 0em 2em 2em 1em; background: #fafafa; border: 1px solid #cccccc }
    #sortable { list-style-type: none; margin: 0; padding: 0em; width: auto; clear: both }
    #sortable li { margin: 3px; padding: 0.4em; padding-left: 1.5em; }
    #sortable li span { position: absolute; margin-left: -1.3em; }

    a#get-csv {
        background: url('http://icons.iconarchive.com/icons/deleket/soft-scraps/24/File-New-icon.png') no-repeat 0px 8px;
        padding: 10px 58px 20px 30px;
    }

    /* Custom classes */

    .form-field { margin-bottom: 0.5em }

    /* Overwrites */

    .ui-dialog-title { font-size: 12px }

</style>

このシンプルなプレゼンテーション階層は改善することもできます。たとえばすべてのモバイルデバイスを考慮した CSS コードを書くことでこれが行えます。現在これは CSS3 メディアクエリー、また応答するウェブデザイン によって可能です。が、本稿にはこの技術を精査するに必要な誌面がありません。よってそれは読者のみなさんのエクササイズとして残しておきます。


おわりに

ウェブ技術は今日ではなんらかの状況で救いとなるひじょうに多彩なツールです。本稿では 記事Building an Automatic News Trader ですでに開発したExpert Advisor によって使用される CSV 形式でニュースカレンダーを作成するためのウェブを基にしたグラフィカルユーザーインターフェースを作成しました 。

HTML5、CSS、JQuery はわれわれが連携した主要なウェブ技術です。これはすべてウェブアプリケーションのクライアント側として知られています。またインターフェースを利用する人のことをつねに考える必要があることもユーザビリティの問題についての簡単なメモを造って、簡単にお話ししました。

*ひじょうに重要な注意事項：本稿の HTML5 コードは質の高いプロダクツを保証するための W3C マークアップ検証サービスによって確認されており、 Chrome および Firefox ブラウザの最近のバージョンで検証されています。IE8 は廃止されつつあります。そのブラウザでこのエクササイズを実行しないようにしてください。jQuery 2.0 は IE 6、7、8はサポートしていません。本稿のファイル3件は txt フォーマットで送信されます。 HTML、CSS、JavaScriptを送信することを許可していないためです。それらをダウンロードし名前をnews-watcher-csv.txtからnews-watcher-csv.htmlに、jquery.timepicker.txtから jquery.timepicker.cssに、jquery.timepicker.min.txtからjquery.timepicker.min.jsに変えてください。