Notepad++ de MQL5

Notepad++ v6.2が登場したことでハイライト機能が充実しました。と言うことで今回は、MQL5の実装をしてみました。

初めに

自動補完用の設定ファイル（MQL5.xml)とハイライト用の設定ファイル（MQL5hl.xml)をココからDLしてくだしい。

自動補完の設定

MQL5.xmlを前回と同様の場所[Notepad++]‐[plugins]‐[\APIs]にコピペします。
※今回の自動補完用ファイルには、関数の引数表示は、設定していません。

ハイライトの設定

Notepad++のバージョンアップに伴い[ユーザー定義ダイアログ]がなくなりました。
設定場所は、【言語】‐【Define-your language…】です。
後は、前回同様です。

ヘルプ（chm）の設定

プラグイン【LanguageHelp】をココからDLします。※plugin manager からは、DLできませんでした。
解凍後、[Notepad++]‐[plugins]にLanguageHelpA.dllとLanguageHelpU.dllをコピペします。
Notepad++を再起動すると、注意表示されますが無視ししてください。
【プラグイン】‐【Language Help】‐【option】と進み【Add】をクリックします。設定は、以下のとおりです。

検索したい文字を指定しCTRL＋F1で実行できます。

コンパイラーの設定

MetaTrader5は、MQL5.DLLでコンパイルを行いますが、コマンドプロンプトでコンパイル作業が行えるようにMQL5.EXEが用意されています。引数などは、MetaEditor Help → Creating Programs → Compilingに記載されていますので確認してください。あとは、MQL4の時と同じです。

その他

MQL5のエディタで作成されるファイルのフォーマットは、UNICODEです。MQL5を新規に作成する場合は、UT-８のフォーマットにした方が良いとは思いますが、SJISのフォーマットでもコンパイルできました。（※作動確認はしていません）
また、MQL5のMetaEditorで行えるデバッグ機能をNotepad++で行う方法がわかりませんでした。もし可能ならコメント頂けると幸いです。

DWTHarrをMQL5に書き換えました。■■■

途中で放り投げたDWTHarrのMQL5版を作成してみました。
元ネタは、こちら。

コード

//+------------------------------------------------------------------+
//|                                                      DWTHarr.mq5 |
//|                                          Copyright 2010, bighope |
//|                       http://expertadviser-bighope.blogspot.com/ |
//+------------------------------------------------------------------+
#property copyright "Copyright 2010, bighope"
#property link      "http://expertadviser-bighope.blogspot.com/"
#property version   "1.00"
//#property indicator_separate_window//サブチャート
#property indicator_chart_window//メインチャート
#property indicator_buffers    1
#property indicator_plots      1
#property indicator_type1         DRAW_LINE
#property indicator_style1        STYLE_SOLID
#property indicator_color1    Red
input int N     =  10;//対象データ数（２のN乗）
input int HBs   =  4;//高周波カット位置
input int LBs   =  10;//低周波カット位置
input int Shift =  0;//データのシフト数
int DWTPeriod;
//---------buffers
double IDWT[];
double g[];
double gs[];

//+------------------------------------------------------------------+
//| Custom indicator initialization function                         |
//+------------------------------------------------------------------+
int OnInit()
  {
//--- indicator buffers mapping
   SetIndexBuffer(0,IDWT,INDICATOR_DATA);
   PlotIndexSetDouble(0,PLOT_EMPTY_VALUE,0.0);
   DWTPeriod =(int)MathPow(2,N);
   ArrayResize(g,DWTPeriod);
   ArrayResize(gs,DWTPeriod);
//---
   return(0);
  }
//+------------------------------------------------------------------+
//| Custom indicator iteration function                              |
//+------------------------------------------------------------------+
int OnCalculate(const int rates_total,
                    const int prev_calculated,
                    const datetime& Time[],
                    const double& Open[],
                    const double& High[],
                    const double& Low[],
                    const double& Close[],
                    const long& Tick_volume[],
                    const long& Volume[],
                    const int& Spread[])  
  {
//---
   int     k;
   int     DWTf,z;
   double  sum,difference;
   for(k=0;k<DWTPeriod;k++)g[k] = Open[rates_total-k-Shift-1];
   DWTf = DWTPeriod/2;
   //変換作業
   for(z=1;z<=N;z++)
   {
      for(k=0;k<DWTf;k++)
      {
         sum        =(g[k*2]+g[k*2+1])/2;
         difference =(g[k*2]-g[k*2+1])/2;
         gs[k]      =sum;
          //フィルタリング作業
          if((LBs>=z)&&(z>=HBs)){gs[DWTf+k] = difference;}else{gs[DWTf+k] = 0;}
       }
      ArrayCopy(g,gs);
      if(N>z) DWTf =DWTf/2; 
    }
      
    //逆変換
    for(z=1; z<=N ;z++)
    {
     
      for(k = 0; k < DWTf; k++) 
      {
         sum         =  g[k]+g[k+DWTf];
         difference  =  g[k]-g[k+DWTf];
         gs[2*k]       = sum;
         gs[2*k+1]     = difference;
      }
      ArrayCopy(g,gs);
      if(N>z)DWTf =2*DWTf;
     }

    //プロット
       for(k=0;k<DWTPeriod;k++){
        IDWT[rates_total-DWTPeriod-Shift+k] = g[DWTPeriod-k-1];
       }
   return(rates_total);
  }
//+------------------------------------------------------------------+

 

コメント

実は、コード表示のテストだったりします。＾＾；

思い込みとは恐ろしいもので・・■■■

ArrayResize関数について、勘違いをしてましたので記録しておきます。

【サンプルコード】

以下の様なサンプルコードを作成しました。

void OnStart()
  {
    double k[];
   int     count;
   double    sum;
   for(int i=1 ;i<10;i++){
      ArrayResize(k,i);
      k[i-1] = i;
      count = ArraySize(k);
      sum=0;
      for(int q=0;q<count;q++)sum += k[q];
      Print("No= ",i," sum = ",sum);
   }   
  }

【勘違いしていた脳内処理】

脳内処理では、以下の様になると思い込んでいました。

No	sum	脳内処理過程(E= EMPTY_VALUE)
1	1	k[0]=1
2	2	(k[0]=E)+(k[1]=2)=2
3	3	(k[0]=E)+(k[1]=E)+(k[2]=3)=3
4	4	(k[0]=E)+(k[1]=E)+(k[2]=E)+(K[3]=4)=4
5	5	(k[0]=E)+(k[1]=E)+(k[2]=E)+(K[3]=E)+(K[4]=5)=5
6	6	省略
7	7	省略
8	8	省略
9	9	省略

簡単に言ってしまえば、ArrayResize関数を実行すると、それ以前に格納した数値は、初期化されると思い込んでいました。

【実際の処理】

No	sum	実際の処理過程
1	1	k[0]=1
2	3	(k[0]=1)+(k[1]=2)=3
3	6	(k[0]=1)+(k[1]=2)+(k[2]=3)=6
4	10	(k[0]=1)+(k[1]=2)+(k[2]=3)+(K[3]=4)=10
5	15	(k[0]=1)+(k[1]=2)+(k[2]=3)+(K[3]=4)+(K[4]=5)=15
6	21	省略
7	28	省略
8	36	省略
9	45	省略

実施は、上記の様になります。つまり、配列を、初期化せずに配列数を変えていきます。
ArrayResize関数は、動的配列を行うための関数だったってことです。

【まとめ】

alohafxさんのブログに書かれているように、ＡＴＣ２０１１に再挑戦しようと思っていますが・・・・こんな状態です。はたして間に合うかどうか・・・、それと、ツイッターをしてみることにしました。ほとんど情報収集用ですが・・

MQL5のBarに注意 ■■■

再再追記しました。2011/5/10 22：48
思わず嵌ってしまったのでご報告します。

【ＭＱＬ４の場合】

例えば、ＭＱＬ４で５分足を使用しインジケーター若しくは、ＥＡを作動させた場合、ヒストリーセンターに格納されている５分足と１分足のデータを用いて処理されます。Bar数は、ヒストリカルセンターの５分足のデーター数(ただし、オプションにて制限を加えない場合）となり、５分ごと以下に区切られたデータで処理されることになります。

【ＭＱＬ５の場合】

以下のコードをUSDJPY M5で走らせてみました。

int OnCalculate(const int rates_total,
                const int prev_calculated,
                const datetime &time[],
                const double &open[],
                const double &high[],
                const double &low[],
                const double &close[],
                const long &tick_volume[],
                const long &volume[],
                const int &spread[])
  {
//---
   Print("Open[0] =",open[0]," Open[1] = ",open[1]," Open[2] = ",open[2]);
   Print("Time[0] =",time[0]," Time[1] = ",time[1]," Time[2] = ",time[2]);
//--- return value of prev_calculated for next call
   return(rates_total);
}

結果は以下の様に表示されます。
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Time[0] =1971.01.04 00:00:00 Time[1] = 1971.01.05 00:00:00 Time[2] = 1971.01.06 00:00:00
Open[0] =357.73 Open[1] = 357.81 Open[2] = 357.86
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
USDJPYのM5で稼働させたにもかかわらず、日足のデータが格納されています。
チャートを最も左側（最古）にスライドさせてみると以下の様になっています。

仕様なのかバグなのかわかりませんが、指定した時間足のデータがなくなった場合、日足データで補完するようになっているようです。また、日足より上位の時間足に関しては、補完処理はされていませんでした。

《あるBarから突然、時間足の異なるデータを使うことになるなんて、恐ろしすぎる…orz》

【まとめ】

≪CopyOpen・・・・・CopyTime≫などでデータを取得した際も同様の事例となりました。
どこまで、時間足通りのデータが格納されているか調べる必要があるなんて….
バグであることを祈りたいものです。
バックテストをする際は、ＭＱＬ４以上に注意が必要になりますね・・・・orz

【追記】※再追記

天狗さんから頂いたコメントによると，ＦＸＤＤのヒストリカルデータでも同じような現象が現れたそうです。ただし、現在ＦＸＤＤのＭＴ５デモ申請ページが閉鎖？されているようで確認ができませんでした。ちなみに、再度MetaQuotes-Demoのヒストリカルデータを読み込んでも問題は解消されませんでした。
また、アルパリ（ＵＳ）[208.122.38.200:443]のヒストリカルデータをUSDJPY M5で確認した結果以下の通りとなりました。
現在～2010/04/18までがM5データ
2010/04/19～2007/10/15の間がH1データ
2007/10/15以降は、D1データ
なんと2段階です。・・・orz

【再再追記】

この問題の記事がありましたのでご覧ください。

Strange history data in Strategy test: old data becomes H1 during M5 test

『バグではなく仕様だ！』って感じでしょうか？
対応策は、 MT5→【Tools】→【Options】→【Charts】を選択後【Max bars in chart:】を適正なbar数に変更し終了です。この値がUnlimitedに設定されているとこのような現象が発生するようです。

【データの抜けを確認するインジケーター】

視覚的にデータの抜けを確認できるインジケーターを作成してみました。
方法は、Barのtimeの差を対数値で表示するものです。
どの程度の抜けがあるか？もしくは取引がされていなかったのか？がわかります。
checkbars.mq5

MQL4で使用していたDLLをMQL5で使用する方法 ■■■

※追記2011/4/3しました。
MQL4で使用していたDLL(ANSI版DLL)は、そのままでは、MQL5で使用できません。原因は、MQL4とMQL5の、文字コードが異なるからです。MQL5は、より高速処理を実現させるために、WINDOWSの内部処理文字コードであるＵＮＩＣＯＤＥを採用しています。そのため、引数をDLLに渡す時や、DLLから戻り値を受け取る際に文字コードエラーが発生します。

MQL5用のUNICODE版DLLの作り方

以下のサイトに簡単な作り方が紹介されている。
How to Exchange Data: A DLL for MQL5 in 10 Minutes

ANSI版DLLをMQL5で使用する方法

先に記述の通り文字コードの互換問題をクリアすればANSI型DLLを使用することが可能です。
方法は、以下のサイトにまとめられていますので参照してくだい。
MQLmagazine.com DLL Hell, MQL5 edition : UNICODE vs ANSI
変換方法は、上記サイトにある【stringlib.mqh】をインクルードし 、
UNICODE2ANSI関数でUNICODEからANSICODEに変換
ANSI2UNICODE関数でANSICODEからUNICODEに変換
します。
実際にテストしてみると、

前々回紹介したSQLite3のデーターベースを接続することができました。

まとめ

ANSI型DLLの場合でも内部的にはUNICODEに変換して処理しているので、ANSI型DLLを使用した場合、文字変換を４回行う結果となり、処理能力を下げる結果となります。

※追記事項

MQL5からSQLite3への接続には、ラッパーが必要ありません。
新しいプロジェクトが誕生したようです。
sqlite-class-for-metatrader5

『一歩後・・』

先回投稿したＥＡについてパラメータの説明をしてくれという依頼がありましたので記載します。
あまりにも不親切でした・・・
まず、日本語環境以外で、【Inputs Variable】が表示されないとのご指摘を受けました。
日本語環境の場合は、以下の様に表示されます。

この現象を回避するには、mq5を開きパラメーターのコメントを削除してください。
例）茶色のコメント部を削除

input int     TakeProfit = 700;//利確値
input double  Balance    = 0.5;//損切値（利確値に対する割合）
input double  lot        = 0.1;//ロット数
input ENUM_MA_METHOD      MaMode     = MODE_EMA;
input ENUM_APPLIED_PRICE  PriceMode  = PRICE_CLOSE;
input int     SizeAry    = 10;
input int     Sizemin    = 3;
input int     pips       = 2;
input int     EPeriod    = 8;
input double  spred      = 0.020;
input int     stpos      = 1;
input int     heikensp   = 20; 
input int     heikenw    = 10;
input int     heikenbw   = 230;
input bool    Doten      = false;//【オプション１】ドテンしますか？
input bool    ModifyCh   = false;//【オプション２】利確値のシフトをしますか？
input int     ShiftProfit= 350;//【オプション２　パラメータ】
input int     ShiftLevel = 175;//【オプション２　パラメータ】

【パラメータの説明】
《TakeProfit》 利確値をpipsで設定します。
《Balance》 StopLoss値を利確値の割合で設定します。デフォルトでは、700×0.5＝350pipsとなる。
《lot》 取引数量を指定します。
《MaMode/PriceMode/EPeriod/spred》 エンペロープインジケーターのパラメータです。

このＥＡは、平均足（Heiken_Ashi)のある一定の形を元にリミットオーダーを発生させる仕組みになっています。その形を設定するパラメーターが以下の物です。
《SizeAry》形を抽出する期間を設定します。
《Sizemin》上記画像のSizeAry期間中の赤印の期間を設定しています。
《heikenbw》上記画像の青印の幅の合計を設定しています。
《heikenw》上記画像の青印の個々の幅を設定しています。
《heikensp》上記画像の赤印の個々の幅を設定しています。
エンペロープは、リミットオーダーの注文値を導くために使用しています。
上線がSELL用で下線が、1BUY用となります。
《pips》エンペロープと価格にpips以上の差ができたときに、再度変更注文を行うための設定です。
《オプション》省略

【まとめ】
日本語環境にない方からの質問に日本語で答えるのもどうか？と思いますが・・・

『前へ』

年末に掲示した『まねぶ』にて用いたＥＡを公開します。
特に深い意味はありませんのでご了承ください。
【使用するインジケーター】
①平均足
②エンペロープ
【取引条件】
①平均足が、設定回数分連続で同方向に動いたら、同方向にリミット注文
②エンペロープにてリミット注文を変更していく。
以上（詳しくはコードをご覧ください。）

【ダウンロード】 Ｉｍｉｔａｔｉｏｎ．ｍｑ５
【まとめ】
ご興味がある方は、どうぞ！

MT5が更新されたが・・・・・・onz

追記しました2010/12/30
Ｖｅｒｓｉｏｎ5.00 Ｂｕｉｌｄ373に変更されたのでテストしてみました。

バックテストの結果が・・・onz

改善されてないみたいです。
しかもメモリリークまで出てるし・・
ちなみに、コンパイルは、すべて問題ないみたいでインジケーターの表示もＥＡの青信号も出ました。（取引は確認していませんが・・）


年内に総括しようと思ってましたが年明けになりそうです。
ＰＣ環境に問題があるのかな？

【おまけ】
MＱＬ５のＨｅｌｐが更新されたようなので更新しておきました。
mql5.chm in Google API

【追記】

原因がわかりました。
簡単に言えば、カスタムインジケーターを使用する場合は、ＥＡに以下のコードを記入しなければ作動しないようになったようです。

【#property tester_indicator "インジケーター名.ex5"】をＥＡに追加する。

上記で稼働するようになりました。
また、ゲストモードでのバックテストができなくなり、ＡＴＣ2010の履歴にリンクすることができなくなりました。ＡＴＣＴｒａｄｅＷｒｉｔｅｒＺも使用できません。

単なる確認不足でした。

まねぶ

まねぶとは、【まなぶ（学ぶ）】と同源で、【まねる（真似る）】とも同じ語源である。
そのため、学ぶの語源は【真似ぶ（まねぶ）】とされることも多い。語源由来辞典より
今回は、ATC２０１０で１位を独走中のbobsley氏のMover3MkIIを真似てみました。
【Mover3MkIIの基本情報】
【Mover3MkIIの予測フローチャート】
【模索結果】 作成したEAのテスト結果にATCTradeを使用して実際の履歴を添付してみました。

※結論から言ってしまえば、完全に一致するEAではありません。 ※ATCTradeは、設定をいじらずに使用しています。
【模索したEAの設定】 ロット調整を行わず、固定0.1Lotとしました。また、注文の中止は無視しています。 その他は、Mover3MkIIの設定を使用しました。
【模索したEAのテスト結果】 期間：2007/01/01～2010/10/31
【模索したEAで別条件を試してみた①】 一度ポジションを持つと逆シグナルが発生しても無視し、現在のポジションを維持していたので、ドテンさせたらどのような結果になるか試してみました。
【模索したEAで別条件を試してみた②】 TP/SLの割合はそのままにし、値幅に応じたTPを設定してみました。 今回は、2日足の値幅（高値-底値）のEMAを基準に使用しました。
【まとめ】 今回は、Mover3MkIIを真似ることでいろいろと勉強させて頂きましが、2008/09月～2009/11月の期間の結果に違和感を感じています。（ちなみにその期間の期待値は、-3.8でした。）データの異常があるのでしょうか？どちらにしてもMover3MkIIの結果ではありません。

やっぱり存在するんですね！

  MT4に標準で格納されているMetaquotesのヒストリカルデータには、2006年9月頃より過去のデータに異常な上髭と下髭が存在することが知られています。参考
そのため、Metaquotesのヒストリカルデータを使用する場合は、2006年以前のヒストリカルデータでのテストは、避けてきました。
今回は、その問題が解決されているか？
MT5に格納されているMetaquotesのヒストリカルデータを確認してみました。
結果は、以下を確認ください。

↑EURUSD 5分足 2006年5月

↑USDJPY ５分足 2006年9月
同じデータを使用しているのでしょうか？やはり異常な髭が存在します。
スキャル系のEAのテストには使用できないようです。

せっかく作成したので・・・・

ＭＱＬ５ナンピン用ＥＡのテンプレートを作成しましたので最適化作業等にご使用ください。
ファイル名:MQL5テンプレート .zip ヘッダーファイル：MYTrade.mqh(保存先/MetaTrader5/MQL5/Include/Trade) テンプレート :EATemplates.mq5(保存先 ・・・・・・・・/MQL5/Experts)
テンプレートには、ＲＳＩを基準にナンピンするように作成してあります。 下図は、テンプレートをそのまま稼働させた場合の参考図です。 エラーや不明な点がありましたら連絡ください。

MQL5の注意点と便利な点！

しばらく更新できませんでしたがようやく少し時間が作れたので更新します。
ここしばらく、ＭＱＬ５に遊ばれて、ようやく使える？程度になってきたので今回は、『私が感じたＭＱＬ５の注意点と便利な点』を書いてみます。

【注意点】
①ＭＱＬ４では行われていた『変数の暗黙の初期化』がＭＱＬ５では行われない。
//+------------------------------------------------------+
   int pos;
   if(PositionsTotal()>0) pos=1;
   if(pos==1) PositionClose(_Symbol,100,0,lot)
//+------------------------------------------------------+
上記のようなコードがある場合、ＭＱＬ４では、問題なく作動しますが、ＭＱＬ５ではバグを発生します。その原因は、ＭＱＬ４では、変数【pos】の宣言時に勝手に（暗黙の内に）０で初期化してくれていましたが、ＭＱＬ５では初期化が行われないためにゴミ（メモリの残り）が入っているためです。
≪対策≫
//+------------------------------------------------------+
   int pos=0;《宣言時に初期化する》
   if(PositionsTotal()>0) pos=1;else pos=0;《必ず設定できるコードにする》
   if(pos==1) PositionClose(_Symbol,100,0,lot)
//+------------------------------------------------------+
対策は上記の2種類あり、宣言時に初期化する方法と、必ず定数を格納できるコードを書く方法です。基本作業ではありますが、この現象が理解できるまで、かなり悩まされました。
②配列の向きがＭＱＬ４とＭＱＬ５では異なります。
※MQL4とMQL5では、インジケーターバッファの向きが逆である。
例）バッファ数がｎの場合
MQL4の場合：Buf[n-1](最古バッファ)→Buf[0](最新バッファ）
MQL5の場合：Buf[0](最古バッファ)→Buf[n-1](最新バッファ）
③ＭＱＬ５にはポジションの決済用関数がない。
ＭＴ５に標準で格納されているクラスにポジション決済の関数が作られていますが、実はポジションと逆の注文を出して決済する仕組みになっています。
例）ＢＵＹポジションの決済には、同数のＳＥＬＬポジションの注文がなされます。 つまり、両建てが基本的にできない構造になっています。
標準で用意されているクラスを使用すれば問題はありませんが、自作する場合は、注意が必要となります。

【便利な点】
①ＭＱＬ５から構造体、クラスが使えるようになりました。
基本事項ですが使用してみてその利点が十分に理解できました。
特に、構造体が使用できる点が便利です。
また、構造体配列も使用できることを確認しました。
例）
+--------------------------------------------------------+
int maxpos =3;
//ポジション用の構造体
struct Opened_Oder
{
  ulong      magic;//マジック
  int      type;//ポジションタイプ
  datetime time;//発注時間
  double   price;//発注価格
  double   pf;//利確値
  double   sl;//損切値
  double   lot;//注文数
  };
class CPosition
   {
protected:
                Opened_Oder   myoder[];//構造体配列
public:
                     CPosition();//コンストラクタ
                     *******
                     ?????????
   }

void CPosition::CPosition()//コンストラクタ
{
 ArrayResize(myoder,maxpos);//配列数の設定
 ZeroMemory(myoder);//初期化
}
+--------------------------------------------------------+
②複数のＰＣを利用して最適化作業ができて時間の短縮が図れる。
faiさんのサイトで紹介されているので省略します。
③input 変数をわかりやすい文字（日本語にも対応）にできる。
例）
+-------------------------------------------------------+
//--- input parameters
input double   pich  = 10.0;//猿
input int      mone  =  100;//犬
input double   wid   = 350.0;//キジ
+--------------------------------------------------------+
input定数の末尾にコメントを記載すると設定画面にそのコメントが表示される。
 
第3者にわかりやすい変数名が作成できます。
ちょっぴり感動！

【まとめ】
バグとり作業にかなりの時間を割かれましたが、新しい言語に取り組み始めた時にはつきものなので仕方がないとして！とりあえず『面白い！』の一言でまとめたいと思います。＾＾；

更新です。

ＭＱＬ５のリファレンスが更新されていたんですね。
それと、ＡＰＩ挿入するコードを少し変更しました。変換されてないところが減ったと思います。とりあえず更新のご連絡です。
mql５ｊｐ．chm 今回は日本語のみです。

MQL5 Reference 日本語化計画(Google API 編）

※Goole Language API の廃止に伴い使用できなくなりました。 2012/1/4追記
今回は、【Google AJAX Language API】を使用して【ＭＱＬ５ Reference（ｃｈｍファイル）】の機械翻訳に挑戦してみました。
【方法】
mql5.chmファイルをデコンパイルし、Google APIを移植し再コンパイルしました。
日本語訳を埋め込むのではなく、APIを埋め込んだのでGoogleの翻訳性能が上がれば日本語訳も向上します。（ただし、毎回読み込み時間が掛かります。）
 

【添付ファイル】
日本語バージョン   韓国語バージョン
※ＡＰＩの埋め込みのため、多言語化が容易に出来ます。
試しに、韓国語も作ってみました。（でも、さっぱり読めませんね！）

【まとめ】
今回、自分のスキル向上を目的に作成してみました。
はたして、スキルが向上したかどうかはわかりませんが、とりあえず掲載しておきます。ただ、毎回読み込み作業が必要になってくるので、サーバーに過度の負荷が掛からないか心配です。