Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

6ページ目

Bacon.jsで四則演算をしてみた。

Bacon.js

Bacon.js


Bacon.jsを使って、今はやりのFRPと呼ばれるものにチャレンジしてみました。
FRPとはFunctionalReactiveProgrammingのことで、イベント等によって動的に変わる値を、ストリームとして、関数に流し込んで演算値を取得することができます。
今回は簡単に下のような四則演算マシンをBacon.jsを使って作ってみました。

See the Pen Bacon.js 四則演算 by Hori Godai (@steelydylan) on CodePen.

HTML

<select class="operand1">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<select class="operator">
	<option value="+">+</option>
	<option value="-">-</option>
	<option value="*">*</option>
	<option value="/">/</option>
</select>
<select class="operand2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>
<input type="text" class="input">

JS

$(function(){
	//operand1に入力された値のマッピング
	var stream1 = $(".operand1")
	.asEventStream("input")
	.map(function(e){
		return {operand1:parseInt($(e.target).val())};
	});
	//.operatorに入力された値のマッピング
	var stream2 = $(".operator")
	.asEventStream("input")
	.map(function(e){
		return {operator:$(e.target).val()};
	});
	//.operand2に入力された値のマッピング
	var stream3 = $(".operand2")
	.asEventStream("input")
	.map(function(e){
		return {operand2:parseInt($(e.target).val())};
	});
	//それらのストリーミングのマージ
	var stream4 = stream1.merge(stream2).merge(stream3);
	//オブジェクトの初期値
	var initialValue = {operand1:1,operator:"+",operand2:1};
	//オブジェクトを拡張するための関数
	var extendObj = function(curr,v){
		return $.extend(curr,v);
	}
	//オブジェクトから四則演算を行うための関数
	var calcFromObj = function(curr,v){
		if(v.operator == "+"){
			return v.operand1 + v.operand2;
		}else if(v.operator == "-"){
			return v.operand1 - v.operand2;
		}else if(v.operator == "*"){
			return v.operand1 * v.operand2;
		}else{
			return v.operand1 / v.operand2;
		}
	}
	//マージされたストリーミングから流れてきたオブジェクトで初期値を拡張
	var stream5 = stream4.scan(initialValue,extendObj);
	//拡張されたオブジェクトから四則演算の結果値を取得
	var stream6 = stream5.scan(2,calcFromObj);
	//取得した結果値を.inputにアサイン
	stream6.assign($(".input"),"val");
});

感想

これくらいだったら普通にjQueryで値をイベントリスナーで受け取って計算する方が速いかもしれませんが、Ajaxで取得した値のストリーミングや、画面のスクロール時の値のストリーミングなど考慮しなければならないことが増えると、それらのストリーミングをマージして、関数の世界に落とし込んであげた方が便利かもしれませんね。


フォームの自動入力に便利なBookmarkletを作った

フォームをテストするのに毎回同じデータを入力するのってめんどくさいですよね?
そこで、フォームに一度入力した値をlocalStorageに保存し、次回からはそのデータを自動入力するためのBookmarkletを作りました。


使い方


まずは、サイト「http://steelydylan.github.io/FormCompleter/」にアクセスし、上の図のようにオレンジのボタンをブックマークバーにドラックし、ブックマークレットとして登録します。


次に自動入力したいフォームのあるページに移動し、普段通りフォームに値を入力します。


次に、登録したブックマークレットをクリックすると、「FormCompleter」が出現します。最初に上の図のように自動入力したいフォームをQuery Selectorの方式で入力します。たいていフォームはformタグで出来ていますので、defaultでは「form」がセレクターとして設定されていますが、例えば、ページにフォームが二つ存在する時等は、「.form1」、「.form2」などのように指定することができます。


次に「Get Code」というボタンを押す事でフォームのデータがシリアライズ化されます。


シリアライズ化されたデータを「Save」というボタンを押す事で、ローカルストレージに保存できます。


ローカルストレージに保存された、シリアライズ化されたデータは、「Load」というボタンを押す事で呼び出す事ができます。


呼び出されたデータを、「Auto Fill」とかかれたボタンを押す事で、フォームの入力に反映させる事ができます。

使い方は以上になります。下のリンクよりダウンロードできますので、皆さん是非使ってみてください。



2016年、僕のおすすめgulpプラグイン


これは、2015/01/18の公開アップルップル社内勉強会発表用資料です。


gulpはみなさんご存知ですよね?ファイルを圧縮したり結合したりするときに便利なやつです。今回は2016年にどんなプラグインを使っていこうか考え、整理してみました。
今回は、以下の4つの項目に分けて、自分のおすすめのプラグインを紹介します。


「2016年、僕のおすすめgulpプラグイン」の続きを読む

使われていないモジュールIDを調べるためにgulpのpluginを作った

a-blog cmsの話ですが、サイトにモジュールIDが100個ほど存在すると、どれが現在サイトで使っている物でどれが使っていない物なのかが把握しづらくなります。昔使っていて今は使っていないモジュールIDなどもきっとあるのではないでしょうか?
これまで、モジュールIDを使っているかいないかをSublimeTextを使ってthemesディレクトリの中を検索していましたが、それでもこれだけ大量にあると大変になってきました。
そこで今回作成したのが、str-finderというgulpのプラグインです。
これを使うと以下のように、どこのファイルでその文字列が使われているかという事を抜き出してくれます。
また文字列が見つからない場合は[not Found]と出力されます。
以下は出力結果例です。

name,path
categoryList,moduleid.csv
categoryList,blog2015/index.html
categoryList,cart@blog2015/order.html
categoryList,site2015/include/module/category/list.html
categoryList,system/admin/tooltip/config/category/list.html
categoryEntrySummary,moduleid.csv
categoryEntrySummary,site2015/include/module/category/summary.html
categoryEntrySummary,system/admin/tooltip/config/category/entry-summary.html
testtestEntrySummary,not Found

また、[notFoundOnly]というオプションを使えば、見つからなかった文字列だけをリスト化して表示してくれます。

testtestEntrySummary,not Found
steelydylanModuleField,not Found
SearchField,not Found

インストール方法

コマンドラインで以下のように入力するだけでダウンロードできます。

npm install str-finder

使い方

以下がソース例になります。今回の例では、moduleid.csvというファイルから、dist.csvというファイルを出力しています。

gulpfile.js

var gulp = require("gulp");
var finder = require("str-finder");
var rename = require("gulp-rename");
gulp.task('module_search',function(){
     gulp.src("./moduleid.csv")
          .pipe(finder({dir:"themes",notFoundOnly:false}))
          .pipe(rename({basename:"dist",extname:".csv"}))
          .pipe(gulp.dest("./"));
});
 
gulp.task('default',['module_search']);

moduleid.csv(入力用ファイル)

カンマ区切りで文字列を記述していきます。
[delimiter]というオプションに["\n"]をしていすれば改行区切りも可能です。

categoryList,categoryEntrySummary,testtestEntrySummary,steelydylanModuleField,SearchField

オプション

finder({
    dir:"./",//検索するディレクトリ
    notFoundOnly:false,//見つからなかった文字列だけを表示する
    delimiter:","//ソースファイルの文字列の区切り文字
});

堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド