JUN-NIKKI

現役プログラマーのFXとプログラミングのアウトプットブログです

【FX】MT4でチャートに移動平均性を表示させる方法!(有名なインジケータ)

f:id:jun1221:20160330134110j:plain

今回は有名なインジケータの移動平均線(MA)を表示させる方法について紹介します。

目次

表示方法

初めてMT4を開いたときは以下の様な画面になっているかと思います。 ローソク足しか出ていない状態ですね。早速ここに移動平均線を表示させます。

f:id:jun1221:20190506221204p:plain

メニューバーの[挿入] - [インジケータ] - [トレンド] - [Moving Average]を選択します。

f:id:jun1221:20190506221406p:plain

そうすると、MAの設定画面が出てきます。 期間は「100」、移動平均線の種別は「Exponential」を選択してください。 f:id:jun1221:20190506221947p:plain

その後に「OK」ボタンをクリックすると、画面に100EMAの移動平均線が表示されます。 f:id:jun1221:20190506222053p:plain

期間が100というのは、過去100本分のローソク足を対象として平均値をとるということを指定しています。そして、種別の「Exponential」は指数平滑移動平均線というもので、最新の価格が一番重視されてそれ以降は徐々に重視されなくなっていきます。つまりは、直近のローソク足に対して反応が早いです。 これはトレーダによく使われる移動平均線です。

期間は何がいい?

初心者の時は期間を何にすれば良いかが分からないと思います。一般的に言われているのは、25・75・100・200の内3つを表示するのが良いです。 ただ、人によって少しずつ期間が違うため、20が良いとか25が良いとかの少しの期間の違いは余り気にしても意味ないです。

何のために移動平均線を見ている?

例えば

等があります。

自分のおススメは、25・100・200です。 25と200EMAは良く見ている人が多いというのが理由です。見ている人が多いということはタッチした時に反発しやすい場所になります。実際に200EMAで反発することもまあまああるので、この様な環境になっていることが分かれば、逆張り気味に200EMAタッチ後にエントリーするなんて手法もありですね。

まとめ

  • 表示はメニューバーの[挿入] - [インジケータ] - [トレンド] - [Moving Average]から選択する
  • 期間は25・75・100・200のどれか3つをお勧め
  • ローソク足では、上位足の流れも確認できる

色んなインジケータはありますが、自分に合ったものを探してみてください!!

【FX】おススメのチャート(通貨)、動きやすい時間など

f:id:jun1221:20190416000512j:plain

今回は、おススメのチャートや動きやすい時間についてお伝えします。

目次

おススメのチャート

以下の2通貨です。

ドルはニューヨーク市場、ユーロはロンドン市場、円はもちろん日本市場です。

おススメの理由①

第1に、この3つは経済大国にあたるのでその分、参入者が多くトレンドに素直に動きやすいです。トレンド通りに動くということは、

  1. 変な動きはし辛い=間違った認識をしにくいということ
  2. エントリータイミングを計りやすい=損切にあい辛い
  3. 一定の方向に継続しやすい

ということが言えます。

ただし、経済大国のため経済指標の発表時は乱高下するため注意が必要です。

おススメの理由②

第2に、スプレッドが小さい通貨ペアであるとこが多いです。色んな業者のスプレッドを比べていただくと分かると思うのですが、ドル円(USD/JPY)が一番スプレッドが小さいことが多いです。スプレッド=取引手数料と思っていただけると良いと思います。特に短期トレード主体の人ではスプレッドが狭くないと勝つことが難しくなります。そのため、できる限り手数料は小さい方がいいです。

おススメの時間帯

おススメはロンドン市場とニューヨーク市場です。残念ながら日本市場は微妙です。
何故ならロンドン市場とニューヨーク市場が大きく、さらに時間帯が重なっている場所があるため、2市場分の力があります。一方で日本は市場はシドニーと被っていますが、ロンドン市場とニューヨーク市場に比べれば小さいので無理してやることもないですね。
注意点としては、ロンドン市場とニューヨーク市場はサマータイムがあることと、休日が日本と違うことです。
まず1つ目のサマータイムでは、市場が開くのに1時間前後するためこれは必ずチェックしましょう。また、休日の場合はスプレッドが5倍とか開きますし、そもそもチャートがほとんど動かないので見ていてもくたびれ損になってしまうことがほとんどです。素直にチャートは閉じて遊びに行きましょう!!

それぞれの市場の開く時間帯は以下のサイトでご確認ください。
www.oanda.com

おまけ

f:id:jun1221:20190505210031p:plain

FXでチャートが良く動くのは非常に重要ですが、どの程度動くのかもしっかりと認識しておく必要があります。
1日の動きが平均50pipsであれば、1回のエントリーで最大25pips程度とれると思ってください。もちろん最大なのでこれが実際は1/3や1/4しか取れなかったということも良くあるものです。 ただ、どの程度動くかを知っていればどの程度チャレンジできるかも自ずとわかります。無謀な位置で利益確定の設定をすることも少なくなるので勝ちやすくなります。

jp.investing.com

まとめ

記事のポイントを整理します。

意識しているだけでだいぶ違うはずです。しっかりと頭に叩き込んでおきましょう!

【Bootstrap 4】テンプレートを利用した使い方の勉強方法!

f:id:jun1221:20190412215220p:plain

f:id:jun1221:20190504223048p:plain:w150:left

Bootstrapを勉強するのは大変?
簡単に勉強するには?






この様な疑問にお答えします。

目次

やること(結論)

サンプルコードをひたすら書いてみても、作成したいレイアウトを学ぶことはできません。 ではどうするか?Bootstrapで作られているサイトを見て・カスタマイズして・どんな動きになるか理解を深めましょう!

Bootstrapのサンプルを表示させよう!

Bootstrap 4ではサンプルを用意しており、無料で利用できます。

Examples · Bootstrap

f:id:jun1221:20190504224137p:plain

色々なレイアウトのページがあるので、確認してみましょう。
今回は「Album」というサンプルのソースを見てみましょう! 「Album」をクリックしてください。 f:id:jun1221:20190504224519p:plain

そうすると、「Album」画面に遷移します。その上で右クリックするとメニューが表示されるので、「ページのソースを表示」をクリックしてください。 f:id:jun1221:20190504224005p:plain

すると、ソースコードが表示されます。 f:id:jun1221:20190504224823p:plain

これを適当に「index.html」ファイルを作成してソースを全て張り付けると同じ画面が表示できる!と思いきやできません。。。CSSとJSの一部が相対パスでファイルを指定しているためです。

効率よく(面倒なので)BootstrapCDNを使用して表示しましょう!

14行目

<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

を以下に変更します。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

238行目

<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

を以下に変更します。

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

これで正常に表示できる様になります。

ブラウザ上で要素を確認しよう!

ブラウザで表示した後に、「F12」キーを押して開発ツールを起動させましょう。

左からEdge、FirefoxChromeの開発ツール画面です。

f:id:jun1221:20190504231325p:plainf:id:jun1221:20190504231424p:plainf:id:jun1221:20190504231507p:plain

開発ツールの左上のボタンをクリックした後に、画面にマウスを移動させると要素とソースが連動します。 f:id:jun1221:20190504232111p:plain

これで

  • どこでどの様な要素を使用しているのか
  • cssは何を指定しているのか

が簡単にわかります。画面上で要素を変更できるので試してみるのも良いですね。

まとめ

基本的には全てを一字一句覚える必要はありませんが、利用方法は理解しておく必要はあります。
サンプルサイトを利用して、自分が実現したい画面に近いソースをコピーして色々いじってみるのが効率的なので是非やってみてください。

【Bootstrap 4】背景画像の上にボタンや文字を自由に表示する方法、手順、レスポンシブレイアウト等(初心者向け)

f:id:jun1221:20190412215220p:plain

ホームページでよく、背景画像にボタンや文字を表示していてカッコいいデザインがありますよね。 その簡単なやり方をお伝えします。

目次

背景画像の上にボタンや文字を自由に表示する方法

下のコードをコピペして実行してみてください。こんな画像を表示します。 f:id:jun1221:20190503224708p:plain

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>

    <!-- Custom -->
    <style type="text/css">
      body,
      html {
        height: 100%;
        background-image: url('https://cdn.pixabay.com/photo/2019/04/24/15/31/rotterdam-4152380_960_720.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body class="text-center">
    <div class="cover-container d-flex w-100 h-100 mx-auto flex-column">
      <header class="mb-auto"></header>
      <main role="main">
        <h1 class="cover-heading">Cover your page.</h1>
        <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
      </main>
      <footer class="mt-auto"></footer>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

表示自体はこれで終わりです。以下は解説です。

解説①:背景画像の表示について

1. 全画面表示で、かつレスポンシブル表示が必要なので、body部は全て背景にします。
background-image:(URL)
2, 画像は中央に表示させます。
background-position: center;
3. 画像をそのまま大きくして余分な画像は削除します。
background-size: cover;を指定します。
4, 画面に合わして描画しようとすると、同じサイズの画像を複数枚表示しようとするためやめさせます。
background-repeat: no-repeat;

結果は以下になります。

    <!-- Custom -->
    <style type="text/css">
      body,
      html {
        height: 100%;
        background-image: url('https://cdn.pixabay.com/photo/2019/04/24/15/31/rotterdam-4152380_960_720.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>

因みに、background-image:のみにすると以下になります。ダサッ f:id:jun1221:20190503230144p:plain

解説②:文字を中央にする方法について

まずは、body部でclass="text-center"を使用して文字を左右の中心に持ってきています。
後は上下の中心に持ってくる必要があるのですが、 "d-flex w-100 h-100 mx-auto flex-column"と、 header部とfooter部のclassに指定している"mb-auto"と"mt-auto"で実現しています。

d-flexでは"w-100 h-100 mx-auto"で横・縦を100%表示にしてflex-columnでflexboxを縦並びにします。flexboxとはFlexible Box Layout Moduleのことで、要素のサイズが不明なものでも柔軟なレイアウトを組めるCSSです。d-flexではFlexboxをより使いやすくしています。

d-flexがflexboxとみなしているのは、header・main・footerの3つです。そして、mb-autoは下側のマージンをautomt-autoは上側のマージンをauto、つまりは使用していない部分はautoとしているため、中央からheaderとfooterの幅を決定しています。

今回は文字とボタンがあるので、その縦幅のみをmainとしてそれ以外はheaderとfooterにしています。
以下の様にheader・main・footerが分かれます。

f:id:jun1221:20190503234831p:plain

結果は以下です。

  <body class="text-center">
    <div class="cover-container d-flex w-100 h-100 mx-auto flex-column">
      <header class="mb-auto"></header>
      <main role="main">
        <h1 class="cover-heading">Cover your page.</h1>
        <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
      </main>
      <footer class="mt-auto"></footer>
    </div>
</body>

ドキュメントは以下です。興味があればご覧ください。

flexのDocument
getbootstrap.com

まとめ

レイアウトはd-flexを使用すれば簡単に作成できることが多いのでぜひ使い方をマスターしてください!

2019/04/29 GDPJPYの考察

f:id:jun1221:20190408223442j:plain

ゴールデンウィーク中ですが、GDPJPYの考察をしていきまっす。


f:id:jun1221:20190429161442p:plain

先週は大幅に下落しました。
下降のトレンドラインが描ける状態になっています。
また、200EMAからももぐっている状態ですので、これからも下落の可能性はあります。

f:id:jun1221:20190429161818p:plain
同じチャートで引いてみてみましょう。
ひとまず、下限は1度試していることが分かります。大きな戻りもあるかもしれません。
また、下落するならば141.16辺りまで下がる可能性はありますが、まだそのフェーズに入っていません。

ここまでの考察では、上昇ととるか、下落ととるかはまだ分からないということが分かりました。
じゃあどうするかですが、基本的には上昇を失敗したら1つ下のフェーズに移行する可能性があると思っておけばいいかと。
つまりは直ぐにショートは出来ないけど、可能性はあるよーという感じですので、大きな利益を取ろうと考えないことです。
20pips~40pipsの間で取れたら利確するくらいのイメージが良いですね。

もちろん4時間足だけでは環境しか理解できないので、エントリーする時は1時間足か15分足当たりを使用して狙ってください。

直ぐに4時間足の200EMAを上に超えることはないのですが、安易にショートをしない様に気を付けてください。
きっちりとラインに近づけてからエントリーしましょう!!

【Bootstrap 4 + Vue.js + Firebase】ログイン画面の作成方法、手順

f:id:jun1221:20190429125712p:plain


ログイン画面の作成をFirebaseを使用してサクッと作成します!
所要時間 15分







まずBootstrap 4 + Vue.js を始めたい場合は、以下の構築手順をご覧ください。
jun-nikki.hatenablog.com


目次

Firebaseとは??

FIrebaseはバックエンドを簡単に出来る様にするサービスです。
詳しくは下記をご覧ください!

Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。クラウドサービスの形態では BaaS に位置付けされます。 Firebase を使うことで、開発者はアプリケーションの開発に専念でき、バックエンドで動くサービスを作成する必要も管理する必要もありません。

https://www.topgate.co.jp/firebase01-what-is-firebase

デザイン案

今回はこれでいきます。完璧です!
f:id:jun1221:20190429131142p:plain

Bootstrap 4とVue.jsをインストール

npm install -g @vue/cli
vue init bootstrap-vue/webpack vue-firevase-auth

以下の様に表示されますが、設定はデフォルトでOKです。

? Project name
? Project description
? Author
? Vue build standalone
? Install vue-router?
? Use ESLint to lint your code? Yes?
? Setup unit tests with Karma + Mocha?
? Setup e2e tests with Nightwatch?
npm install firebase

npm install
npm run dev

実行するといきなり躓きます。。。
f:id:jun1221:20190429105424p:plain

エラーを見てみるとmain.jsのsinglequoteを必ず使用しろって言っているので、変更します。

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote
  src\main.js:4:26
  import BootstrapVue from "bootstrap-vue"


main.js

import BootstrapVue from "bootstrap-vue"
// 下に変更する
import BootstrapVue from 'bootstrap-vue'

再度見るとOKですね。

Signinのルートを作成する


src/route/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Signin from '@/components/Signin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    }
  ]
})

Signinの画面を作成する

components直下のsigninを使用する様に定義しているので、新規にファイルを作成しましょう!

src/components/Signin.vue

<template>
  <div class="signin">
    <h2>Sign in</h2>
    <div class="container" style="width:500px">
      <div class="row align-items-center">
        <div class="col-md-4">アカウント名</div>
        <div class="col-md-3">
          <input type="text" placeholder="Username" v-model="username">
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-md-4">パスワード</div>
        <div class="col-md-3">
          <input type="password" placeholder="Password" v-model="password">
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-md-12">
          <button class="btn btn-primary" @click="signIn">Signin</button>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.signin {
  margin-top: 20px;

  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
input {
  margin: 10px 0;
  padding: 10px;
}
</style>

開くとこんな感じになります。上のアイコンはネットから拾ってきました。(笑)
かわいい。。
http://localhost:8080/#/signin
f:id:jun1221:20190429134805p:plain


次にFirebaseに登録しましょう。Googleが作成しているサービスです。もちろん無料です。
firebase.google.com

Go Startedをクリックして、gmailで認証をしてください。
gmailがなければ作成しましょう。
f:id:jun1221:20190429135310p:plain

プロジェクトを作成をクリックしてください。
f:id:jun1221:20190429135201p:plain


初めて使用するので、デフォルトでいいと思いますが、一応「アナリティクスの地域」は日本にしました。

f:id:jun1221:20190429091207p:plain

次に左のAuthonticationをクリックして、メールアドレスを有効にしましょう。
f:id:jun1221:20190429123809p:plain

次はユーザを追加しましょう。
f:id:jun1221:20190429124050p:plain


一度戻って赤丸のところをクリックすると、scriptが表示されるのでコピーしましょう。
f:id:jun1221:20190429122121p:plain

コピーしたら、main.jsに張り付けましょう。”script~”は不要なので削除します。
実際には以下の様に貼り付けます。
src/main.js

var config = {
  apiKey: 
  authDomain: 
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
}
firebase.initializeApp(config)


サインインした時にユーザ認証してもらいたいので、scriptを追加しましょう。
src/Signin.vue

<script>
import firebase from 'firebase'

export default {
  name: 'Signin',
  data: function () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    signIn: function () {
      firebase.auth().signInWithEmailAndPassword(this.username, this.password).then(
        user => {
          alert('Success!')
          this.$router.push('/')
        },
        err => {
          alert(err.message)
        }
      )
    }
  }
}
</script>

実際に入力して成功するとSuccessと出ます。
f:id:jun1221:20190429140225p:plain

まとめ

認証機能となるとPHPRubyなどを使用しなければならなかったため、敷居は高かったように思いますがFirebaseはGUIで設定ができますし、処理もjavascriptで簡単に書けるのでちょっとしたものを作成するには良いですね。というのも、無料版だと制限があります。それほど大きな縛りではないと思いますが、場合によっては使用できないこともあるので注意が必要ですね。


Firebaseのリファレンス
firebase.google.com

Bootstrap 4+Vue.jsの始め方、~構築手順編~

f:id:jun1221:20190427215120p:plain

最近(?)伸びているVue.jsと、Bootstrapを構築する方法を紹介します。

今回はnpmで全部インストールします。
所要時間:約8分

Vue.js jp.vuejs.org

BootstrapVue bootstrap-vue.js.org

目次

ゴール

これを表示します。Vueをインストールした時の初期画面で、下にBootstrap 4のボタンを表示します。 めっちゃ簡単です。 f:id:jun1221:20190427230449p:plain

事前準備

npmコマンドを実行できるようにしておいてください。

以下のサイトの下の方にインストール方法も書いていますので、参考にしてください。

jun-nikki.hatenablog.com

今回の構築では、以下を使用しています。

  • Bootstrap 4
  • Vue.js
  • webpack

手順

① vueコマンドを実行できる様にしましょう!

npm install -g @vue/cli

② プロジェクトを作成します。
bootstrap-vueとwebpackを含めたプロジェクトを作成します。
今回はmy-projectを作成します。

vue init bootstrap-vue/webpack-simple my-project

# 下は全てエンターで進めてください!
? Project name (my-project) <ENTER>
? Project description  <ENTER>
? Author  <ENTER>
? Use sass? <ENTER>

③ my-projectフォルダに移動して、npm installしてください。

cd my-project
npm install

④ runを実行すると、自動でVueの画面が開きます!

npm run dev

⑤ 以下の画面が開けばOKです。 f:id:jun1221:20190427223305p:plain

my-project - src の下にApp.vueとmain.jsがあって、これが実行されています。 import App from './App.vue'でApp.vueが実行される様に設定されているので、App.vueを見ましょう。 f:id:jun1221:20190427225152p:plain

htmlが記載されていますね。ここにボタンを表示しましょう! f:id:jun1221:20190427225846p:plain 下のdivの上にボタンを記載します。

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
  </div>
</template>

完成! f:id:jun1221:20190427230813p:plain

まとめ

インストールを手動でやると大変ですが、npmでBootstrapとVueがまとまったパッケージを爆速構築できて楽ですね!