Horic Design

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

2ページ目 | js

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で取得した値のストリーミングや、画面のスクロール時の値のストリーミングなど考慮しなければならないことが増えると、それらのストリーミングをマージして、関数の世界に落とし込んであげた方が便利かもしれませんね。


aTemplate.jsの紹介

a-blog cmsのテンプレートエンジンに非常によく似たテンプレートエンジンをJavaScriptで作成してみました。名付けてaTemplate.jsです。
今回は、友人に使い方を聞かれるので、現在出来る機能をまとめてみました。すべての機能は網羅できていませんが。


このテンプレートエンジンは、a-blog cmsのカスタムフィールドメーカーを一から作り直そうという話になって作ったテンプレートエンジンです。フロント側でもa-blog cmsのようなテンプレートエンジンを使いたいという人はこのままお読み下さい。これから、このテンプレートエンジンの導入方法、またどういったことが出来るのかを説明していきたいと思います。


「aTemplate.jsの紹介」の続きを読む

Pace.jsでローディング時にかっこいいエフェクトをつけてみた


Pace.js

こんばんは。stelydylanです。みなさん、Pace.jsをご存知でしょうか?Pace.jsを使うと、ページの読み込み時やAjaxによるデータの読み込み時にかっこいいエフェクトをつけることが出来ます。
現在このブログに使っているエフェクトにもこのPace.jsを使っています。
下記のようにJavaScriptとCSSを読み込むだけで使えますのでとても導入が簡単です!!

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

エフェクトの変更など

公式サイトよりダウンロードできるCSSはエフェクトごとに用意されていて、エフェクトを変えたければ読み込むCSSを変えることで別のエフェクトを実現できます。
ボールがバウンドするエフェクトや、ローディングバーが表示される物などバラエティ豊かなローディングエフェクトがあります。

また、エフェクトが物足りない場合、エフェクトのスタート時や終了時にフック処理を書くことができます。終わった後にクラスを追加するだとかそういった処理を使うことで、もうひと味加えることができます。

Pace.on("done",function(){
	$(".landLoadingBg")
	.addClass("done")
	.delay(300)
	.queue(function(){
		$(this).remove();
	});
});

詳しくはドキュメントをご覧ください



[JavaScript]デバイスの傾きを取得するAPIが面白い

Screen Orientation API


Screen Orientation APIをご存知でしょうか?Screen Orientation APIは画面が横向きか縦向きかを判定してくれるだけでなく、deviceorientationというイベントハンドラーが用意されていて、これを使うことで画面の傾き具合を取得することができます。ただし、iPhoneiPad一部のAndroidといった、モバイル端末に限られます。
イベントハンドラから引き数として取得出来るイベントオブジェクトはbetagammaというプロパティを持っています。左の図のように、betaは縦向き回転の角度,gammaは横向き回転の角度を取得できます。
下がそのサンプルコードになります。


window.addEventListener("deviceorientation",function(e){
    ball.sx += parseInt(e.gamma/10);
    ball.sy += parseInt(e.beta/10);
});

デバイスの傾きに応じてボールを転がしてみよう

このAPIを使ってゲームになりそうなひな形を作ってみました。画面の傾きに応じてボールを転がすことが出来ます。
下にサンプルのページを用意しましたので是非ご覧ください。


休日の楽しみとしてScreen Orientation APIで是非遊んでみてはいかがでしょうか?


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド