技術 | Narumium Blog

ヒロセ通商のLionFXで取引報告書から損益可視化する

学生だった頃からFX（外国為替証拠金取引）をずっとやってます。

現在はメイン口座としてヒロセ通商のLION FXを使っています。

毎月、取引量にあわせて食料を送ってくれる変な会社です。

損益の可視化をしたいけど、現状サービスがないので作ってみました。

Narumium Portal

LionFXの取引内容可視化 | Narumium Portal

ヒロセ通商のLionFXで取引報告書から取引内容の可視化します。表示方法は取引報告書を下の枠内にドロップするだけです。

使い方

取引ツールの上部タブから「履歴検索/報告書」を選択
「報告書のダウンロード」を選択
取引残高報告書で確認したい月を選んで表示ボタンを押す
「コピーを保存」でローカルに保存する
ドロップエリアにファイルをドラッグ＆ドロップするかファイル選択をする

可視化される内容

現在表示できるのは以下です。

通貨ごとの約定数、１Lotごとの損益、合計損益の表
通貨別の約定数の割合グラフ
通貨別の１Lot当り損益グラフ
通貨別の合計損益グラフ
日別、累計の損益チャート

感想とか

最初は履歴検索からダウンロードできるCSVファイルを入力にするつもりだったけど、１００件ごとしかダウンロードできないのに気づいてPDF入力に方向転換。

どうすればいいか困ったけど pdf.js というライブラリのおかげで簡単に実装できた。

本当にJS界隈はなんでもあるな。

気が向いたら複数PDFをまとめてドロップして表示できるようにしたい。

あと可視化する情報を増やしたい。

情報をスタック＆可視化するサービスを作りたい

定期的に更新される情報。

数字だけで小難しかったり、単体で見てもわかりにくかったり。

そういうのをDBにスタックしてわかりやすく表示する機能を作ってみたい。

次の要素があると作りやすい。

1日1回定期更新
フォーマットが変わらない
意味のある数値が毎日変化する

今回は練習作としてFXのスワップ金利を対象に作ってみた。

Narumium Portal

LionFXのスワップ可視化 | Narumium Portal

ヒロセ通商のLionFX。そのスワップ金額をチャートにして見えるようにしました。お試しテスト機能なので急に変更したり停止したりします。

※スワップ金利とは2国間の金利差を日割りにして付与するものです。

仕組み

基本的にAWSで収まる設計にする。

概要： CloudWatch -> Lambda -> DynamoDB <- Lambda <- API <- S3

入力
1. CloudWatch Events – Schedule: daily で1日1回Lambda関数を起動する
2. Lambda関数でスクレイピング＋DB格納
  - AWSを使って欲しい情報を自動取得するの方法２を利用してスクレイピング
  - JSONのポストを利用して検索するのでこれも利用
出力
1. S3に置いたHTMLファイルからAPI呼び出し
  - 普通にHTTP POST（GETしたかったがうまく設計できなかった）
2. APIからLambdaを起動
  - Lambda関数と統合する
3. DBから検索結果を返す
  - JSON形式でパススルー

可視化

次に持ってきたJSONをグラフ化する。

グラフ作成系のJavascriptは結構あるけど、どれも面倒な感じ。

今回は比較的簡単そうでデザインと名前が好みのChart.jsを使ってみる。

これは基本機能は簡単ではあったけど、ちょっと変えようとすると難しい。

頻繁に仕様が変わっているのか、ブログや紹介記事なんかはまったく当てにならなかったので公式ドキュメント以外は信用しない方がいい（Update関連は公式通りではうまくいかなかったけど）。

出来上がったチャートはこんな感じ。アニメーションが心地良い。

さて何をつくろうかな。

javascriptでGIFアニメを作る【jsgif】

htmlで通信なしにGIFアニメを作成したい。

そこで jsgif というライブラリがあったので使ってみた。

GitHub

antimatter15/jsgif

jsgif - Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS

ダウンロード＆解凍したらhtmlにリンクを追加。

<script src="js/b64.js"></script>
<script src="js/LZWEncoder.js"></script>
<script src="js/NeuQuant.js"></script>
<script src="js/GIFEncoder.js"></script>

読み込み終わったら次のようなスクリプト記述でGIFアニメが作れる。

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext("2d");
var encoder = new GIFEncoder();
encoder.setRepeat(0); //auto-loop
encoder.setDelay(800);//interval(ms)

encoder.start();
//doSomething
encoder.addFrame(ctx);
//doSomething
encoder.addFrame(ctx);
//doSomething
encoder.addFrame(ctx);
encoder.finish();

document.getElementById('outImg').src = 'data:image/gif;base64,'+encode64(encoder.stream().getData());

var cvs = document.getElementById('canvas');

var ctx = cvs.getContext("2d");

var encoder = new GIFEncoder();

encoder.setRepeat(0); //auto-loop

encoder.setDelay(800);//interval(ms)

encoder.start();

//doSomething

encoder.addFrame(ctx);

//doSomething

encoder.addFrame(ctx);

//doSomething

encoder.addFrame(ctx);

encoder.finish();

document.getElementById('outImg').src = 'data:image/gif;base64,'+encode64(encoder.stream().getData());

addFrameでcontext要素を変えながら追加していくとGIFアニメになる。

オプションの１つで指定した色を透明として扱うこともできる。

encoder.setTransparent(0x0000FF);　

しかしコレはそのままでは使えなかった。

GIFEncoder.js の以下部分を変更。

//Before
var index = i / 3;

//After
var index = Math.floor(i / 3) ;

//Before

var index = i / 3;

//After

var index = Math.floor(i / 3) ;

//Before
if (transparent !== null) {
	transIndex = findClosest(transparent);
}

//After
if (transparent !== null) {
	transIndex = findClosest(transparent);
	var r = colorTab[transIndex*3];
	var g = colorTab[transIndex*3+1];
	var b = colorTab[transIndex*3+2];
	var trans_indices = [];
	for (var i=0; i<colorTab.length; i+=3) {
	        var index = i / 3;
        	if (!usedEntry[index]) continue;
		if (colorTab[i] == r && colorTab[i+1] == g && colorTab[i+2] == b)
		trans_indices.push(index);
	}
	for (var i=0; i<indexedPixels.length; i++)
		if (trans_indices.indexOf(indexedPixels[i]) >= 0)
			indexedPixels[i] = transIndex;
}

//Before

if (transparent !== null) {

transIndex = findClosest(transparent);

}

//After

if (transparent !== null) {

transIndex = findClosest(transparent);

var r = colorTab[transIndex*3];

var g = colorTab[transIndex*3+1];

var b = colorTab[transIndex*3+2];

var trans_indices = [];

for (var i=0; i<colorTab.length; i+=3) {

var index = i / 3;

if (!usedEntry[index]) continue;

if (colorTab[i] == r && colorTab[i+1] == g && colorTab[i+2] == b)

trans_indices.push(index);

}

for (var i=0; i<indexedPixels.length; i++)

if (trans_indices.indexOf(indexedPixels[i]) >= 0)

indexedPixels[i] = transIndex;

}

これで指定した色が透明になる。

位置を変えながらfillTextすると次のようなGIFアニメが作れた。

これを使ってまたなんか作ってみよう。

音声合成に関して色々やってみる

テキストを投げるとWAVが帰ってくるAPIを作りたい。

サービスとしてはいくつかあってDocomoは使いやすかった。

dev.smt.docomo.ne.jp

| docomo Developer support | NTTドコモ

こういうのは制限もあるので自分で作ってみたい。

Lambdaでお試し

慣れてるし、他にいいのも思いつかないのでAWSを使う。

LambdaでテキストからWAVを作る処理を書いてトリガーでAPIを指定する。

Lambdaで実行ファイルを起動したいときは次みたいな処理をはさむ。

cp -r /var/task/aquestalkpi /tmp/; chmod -R 755 /tmp/aquestalkpi/AquesTalkPi;

1	cp -r /var/task/aquestalkpi /tmp/; chmod -R 755 /tmp/aquestalkpi/AquesTalkPi;

ためしにAquesTalkPiがLambdaで動かないかなと思ったけど無理だった。

sh: /tmp/aquestalkpi/AquesTalkPi: cannot execute binary file

1	sh: /tmp/aquestalkpi/AquesTalkPi: cannot execute binary file

音声合成ソフトについて

次に音声合成ソフトを色々調べてみた。

組み込み用
- AquesTalk,AquesTalk2：アクエスト規約に従う。
- OpenJTalk：修正BSDライセンス。
フリーソフト（実行ファイル）
- softalk（ソフトーク）：Windows向け。Aquestalk使用でアクエスト規約に従う必要あり。
- textalk（テキストーク）：Windows向け。OpenJTalk使用。
- AquesTalkPi：ラズベリーパイ向け。アクエスト規約に従う必要あり。

実行ファイルは基本Winbdows向けだし、いろいろ自由に使うためにOpenJTalk使って自分で実行ファイル作ることにする。

他にもnodejsのモジュールが２つ見つかったけど、やりたいことと微妙に違ったのとEC2でインストールできなかったのでこれらはいったん保留。