WEB | Narumium Blog

ダイエット支援ページの追加

先月の終わりごろからダイエット中です。ラーメン二郎に行ったりしてますが。

基本的には「摂取カロリー＜消費カロリー」であれば痩せるはず。

そこで身長、体重、年齢を入れると自動的にBMI、基礎代謝、摂取カロリー目安、運動消費カロリーを算出する機能を作りました。

narumium.net

Narumium-ダイエット支援

年齢、身長、体重、性別からBMIや基礎代謝・摂取・消費カロリーの目安を計算します。

続きを読むダイエット支援ページの追加

ニコニコのマイリストをエクスポートする

生放送を見なくなくなってニコニコ動画自体あんまり見なくなったので解約する。

ちょうど月末だし。

特に不便になるわけではないけど「とりあえずマイリスト」が500から100に減るのでどっかにエクスポートしておきたい。

そこでマイリストを抜き出すブックマークレットを作ってみた。

続きを読むニコニコのマイリストをエクスポートする

ヒロセ通商のLionFXでぞろ目損益の確認をする

機能追加

ヒロセ通商ではFXの損益にぞろ目が含まれると何かもらえたりする。

hirose-fx.jp

ぞろ目でにっこり!さっくさくミニゴーフルプレゼントキャンペーン!

たくさん取引しているとぞろ目を探すのは面倒なので、以前作った損益可視化に機能を追加しました。

Narumium Portal

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

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

使い方とかは以前紹介した通り。

Narumium Blog

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

学生だった頃からFX（外国為替証拠金取引）をずっとやってます。現在はメイン口座としてヒロセ通商のLION FXを使っています。毎月、取引量にあわせて食料を送ってくれる...

Javascript解説

必要性のなさからかググっても出てこなかったので、ついでに数値の中で連続する数字をカウントするJavascriptの紹介をします。

1111を入れると4が返り、122233を入力すると3が返ってくる感じです。

function countZorome(input){
  var t1,t2=-1,cnt=1,maxCnt=0;
  while(input>0){
    t1=t2;
    t2=input%10;
    if(t1==t2) cnt++; else cnt=1;
    if(cnt>maxCnt)maxCnt=cnt;
    input=Math.floor(input/10);
  }
  return maxCnt;
};

function countZorome(input){

var t1,t2=-1,cnt=1,maxCnt=0;

while(input>0){

t1=t2;

t2=input%10;

if(t1==t2) cnt++; else cnt=1;

if(cnt>maxCnt)maxCnt=cnt;

input=Math.floor(input/10);

}

return maxCnt;

};

一定以上の数(たぶん 2^53 = 9007199254740992 )を超えると演算誤差が出るのでそれ以上を計算したければ文字列にして右端を切るようにすれば良いんじゃないかな。

> input=Math.floor(21133333333333333112);
< 21133333333333330000
> input=Math.floor(9007199254740992);
< 9007199254740992
> input=Math.floor(9007199254740993);
< 9007199254740992

> input=Math.floor(21133333333333333112);

< 21133333333333330000

> input=Math.floor(9007199254740992);

< 9007199254740992

> input=Math.floor(9007199254740993);

< 9007199254740992

今月はまだゴーフルもらえないー。

寝れない夜はUnityで遊ぼう５

これまで

今回やったこと

アンドロイドアプリ作成でいくつか詰まった点の覚書。

続きを読む寝れない夜はUnityで遊ぼう５

為替レートを読み上げるサービスが欲しい

為替レートを定期的に読み上げるサービスが欲しいんだけど見つからなかった。ないものはしかたがないので自作してみる。

node.jsで作るのが個人的に一番楽だろうけど、今後のWEBサービスにつながるかもしれないからHTMLベースで作ってみる。

続きを読む為替レートを読み上げるサービスが欲しい

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

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

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

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

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

Narumium Portal

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

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

使い方

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

可視化される内容

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

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

感想とか

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

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

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

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

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

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アニメが作れた。

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

グルーヴコースター 3 リンクフィーバー場所一覧

最近グルーブコースターに嵌ってます。アーケードの方。

行きつけのゲームセンターだったら良いんですが、ちょっと遠出したついでにやりたいときに筐体が見つからなくて悲しい思いをしたので場所一覧を作りました。

とりあえず関東エリアだけですが。

narumium.net

Narumium

なんとなくグーグルマップの埋め込みって難しいイメージがあったんですが、そんなことはなかったです。

これからちょっと凝った機能を追加しようとするとキツイのかもしれません。

AWSを使って欲しい情報を自動取得する

やりたいことの概要

技術的にはクローリングとかスクレイピングとか呼ばれている。

クローリングはWebを自動で徘徊する技術で、スクレイピングはさらに欲しいものだけ抽出するような感じ。

例えばポータルのほうで技術ニュースリンクをまとめてるのはこの技術を使っている。

方法は色々あるけどAWSで簡単にできそうなものを２つ実装している。

けどいまいちしっくりこないので現状をまとめつつ、どう運用するのが一番いいか考えてみる。

１つ目の方法はEC2にヘッドレスブラウザを入れてJenkinsで管理するやり方。

２つ目の方法はLambdaで起動してCloudWatchで管理するやり方。

どっちもスクレイピング自体はjavascriptを中心にした方法で実現している。

方法１

概要

■EC2＋phantomjs＋casperjs＋Jenkins

EC２インスタンスを立ち上げてその中で好きなようにしようというスタンス。

phantomjsはヘッドレスブラウザでcasperjsはそのユーティリティ。

narumium.net

Phantomjs + Casperjs でスクレイピングを行う — Narumium 3.0 documentation

javascriptで実行できる画面描写のないブラウザを利用して情報を集める。

Jenkinsのジョブで収集スクリプトを起動したり、データを格納したりする。

メリット

インスタンス内でできることは何でもできるので拡張性が高い。

デメリット

インスタンスのメンテナンスが必要。EC2インスタンスは起動時間課金なのですでに運用しているインスタンスに相乗りしたり、必要に応じて起動/停止をしないとお金がかかる。

スクレイピング実行部分のサンプル

var casper = require('casper').create();
casper.start('http://１つ目のサイト',function(){this.wait(20000);/*広告ページ待機*/});
casper.then(function(){
  $(this.getHTML('DOM#dom',true)).each(function(){
    my_json.a=$(this).prop('href');
  });
});
casper.thenOpen('http://２つ目のサイト',function(){this.wait(20000);/*広告ページ待機*/});
casper.then(function(){
  $(this.getHTML('DOM#dom',true)).each(function(){
    my_json.b=$(this).prop('href');
  });
});
casper.then(function(){
  fs.write(FILE_NAME, JSON.stringify(my_json));
});
casper.run();

var casper = require('casper').create();

casper.start('http://１つ目のサイト',function(){this.wait(20000);/*広告ページ待機*/});

casper.then(function(){

$(this.getHTML('DOM#dom',true)).each(function(){

my_json.a=$(this).prop('href');

});

casper.thenOpen('http://２つ目のサイト',function(){this.wait(20000);/*広告ページ待機*/});

casper.then(function(){

$(this.getHTML('DOM#dom',true)).each(function(){

my_json.b=$(this).prop('href');

});

casper.then(function(){

fs.write(FILE_NAME, JSON.stringify(my_json));

});

casper.run();

ブラウザとして巡回するので広告ページを待ったりしている。

ヘッダをいい感じに設定すれば特に待つ必要はないかもしれない。

方法２

概要

■Lambda＋nodejs＋cheerio-httpcli＋CloudWatch

インスタンスを保持せずサービスとして使おうというスタンス。

cheerio-httpcliはnodejsのスクレイピング用モジュール。

LambdaにZIPを置いてevent sourceでCloudWatch Events – Scheduleを設定する。

メンテ不要でAWSの他サービスが使いやすい利点がある反面、Lambdaの制限がある。

特にマックス300秒の制約を気にしないといけないかも。

起動以外は取得、整形、格納なんかは全部Lambdaの中で行う。

メリット

実行時間のみ課金されるので使わないときのメンテが不要。

AWSの他サービスを使いやすい（IAM ロールの設定などが簡単）。

デメリット

Lambdaの制約内でやる必要があるので拡張性は低め。

スクレイピング実行部分のサンプル

var client = require('cheerio-httpcli');
client.fetch('http://１つ目のサイト').then(function (result) {
  result.$('DOM#dom').each(function(){
    my_json.a=result.$(this).prop('href');
  });
  return client.fetch('http://２つ目のサイト');
}).then(function (result) {
  result.$('DOM#dom').each(function(){
    my_json.b=result.$(this).prop('href');
  });
}).catch(function (err) {
  console.log(err);
}).finally(function () {
  fs.writeFile(FILE_NAME, JSON.stringify(my_json));
});

var client = require('cheerio-httpcli');

client.fetch('http://１つ目のサイト').then(function (result) {

result.$('DOM#dom').each(function(){

my_json.a=result.$(this).prop('href');

});

return client.fetch('http://２つ目のサイト');

}).then(function (result) {

result.$('DOM#dom').each(function(){

my_json.b=result.$(this).prop('href');

});

}).catch(function (err) {

console.log(err);

}).finally(function () {

fs.writeFile(FILE_NAME, JSON.stringify(my_json));

});

書き方は色々あるけど一番簡単そうなPromise数珠繋ぎで書いている。

cheerio-httpcliに関しては作者さんがかなり丁寧に解説しているので使いやすかった。

まとめと感想

どちらも多少ニッチな知識が必要だけどjavascriptを多少知っていれば難しいとこはないし、ググればすぐに情報が手に入るので実装は簡単だった。

クライアントアプリケーションを途中でかませたりするような場合にはEC2内でやって、AWS内だけで済む処理なら基本Lambdaにするのがいいかなと思う。

今回の組み合わせの他にもEC2でnodejs動かしたり、Lambdaでphamtomjs動かしたりする例も見かけたけど特にそうする理由はなさそう。

kimonoみたいな専用サービスを使うとスクレイピング実施部分はほぼノータイムでできるんだろうけど、利用するサービスが増えると色々と面倒見ないといけなくなりそうなのでしばらくはAWSに依存してみようと思う。

Qiitaのタグ別フォロー数と記事数で技術動向をつかむ

お手軽に技術動向をつかみたい。

気になった分野はさらっと試してみたい。

技術屋にとってはすでに英語は必須になっているとはいえ、いちいち英語の仕様書や掲示板を読むのはしんどいので日本語リファレンスの多さは重要だと思う。

最近はよくQiitaにお世話になってます。

デモやサンプルを動かす際の注意点なんかも多く記事になっており、何かしら新しく手をつけるときに非常に役立っている。

ちょっと思いついたのでQiitaのタグ別フォロワー数、記事数一覧でランキングを作ってみた。

Qitta傾向分析

最近データを取り始めたので、もう少したまってきたら可視化（グラフ化）してみたい。