Horic Design

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

5ページ目

【a-blog cms】組み込みJSの今後

ただの願望ですが組み込みJSが今後こうなって欲しいという要望を以下にまとめてみました。

欲しい機能一覧

  • config.jsの上書き機能の強化
  • スクロールイベントやリサイズイベントの追加機能
  • Browserifyに対応
  • 独自のプラグインを入れやすくする
  • フロント側でもa-blog cmsと同じように使えるテンプレートエンジン

「【a-blog cms】組み込みJSの今後」の続きを読む

【a-blog cms】SetTemplate SetRenderedを使った新しいサイト制作

SetRendered

通常だと同じモジュールを何度も実行しないと実現できないような表示を実現する際に効果を発揮します。例えば、下の図のように、ユニットを画面の右側、もしくは左側、もしくは全体に表示したい場合、SetRenderedは非常に有効な手段です。



「【a-blog cms】SetTemplate SetRenderedを使った新しいサイト制作」の続きを読む

ペッパーにイベント情報や、会員情報を喋らせてみた

ベースキャンプ名古屋の下記のイベントにて、はじめてペッパーのプログラミングに挑戦してみました。


今回チャレンジした事

今回は、「ペッパー教えて?」と話しかけると、「はい」とペッパーが応答し、「今日のイベントは?」と聞くと、ベースキャンプの今日のイベントを、「イベントは?」と聞くと、直近のイベントを、「誰が来てるの?」と聞くと、ベースキャンプにチェックインしている会員の情報を教えてくれるプログラムを作成しました。

環境整備

まずは下記のサイトよりペッパーの開発環境をダウンロードします。
https://community.aldebaran.com/en/resources/software/language/en-gb

ダウンロード後、さまざまなアプリがインストールされますので、そのなかから、下の図のように、Cのマークのアプリを立ち上げます。


「ペッパーにイベント情報や、会員情報を喋らせてみた」の続きを読む

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


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド