いつきの技的日記 RSSフィード Twitter

2018-10-27

ramdajsメモ

/**
* R.prop
*/
//存在していればその値を返して、なければundifinedを返す
R.prop('x', {x: 100}); //=> 100
R.prop('x', {}) //=> undefined

/**
* R.assoc
*/
//associateの略なきがする。要は新しい要素を既存の奴に関連づけるって感じ
//R.assoc('a', 4,  {a: 1, b: 2}); //こうすると値の更新になるし、第一引数を帰ると追加になる
var hash = {a: 1,  b: 2};
R.assoc('x', 4, hash); // ->{"a": 1, "b": 2, "x": 4} //新たに追加するxは一番後ろに入る


/**
* R.set
*/
//単純に注目した値ををセットする 同じkeyなら上書きになるし、初出のkeyならaddになる
R.set(R.lensProp('a'), 4, hash);  //=>{"a": 4, "b": 2}
R.set(R.lensProp('c'), 4, hash);  //=>{"a": 1, "b": 2, "c": 4}

/**
* R.lens
*/ 
R.lens(get対象, set対象)としてまとめて定義できる

//例えばgetterをx, setterをyとする
var xLens = R.lens(R.prop('x'), R.assoc('y'));

R.view(xLens, {x: 1, y: 2});            //viewはgetな関数なのでprop('x')が評価されて1が表示される
R.set(xLens, 4, {x: 1, y: 2});          //setはsetな関数なのでyに対して4が代入されて {"x": 1, "y": 4}が表示される
R.over(xLens, R.negate, {x: 1, y: 2});  //=> {x: -1, y: 2}

/**
* R.over と R.set
*/
//overはmap, setはmapTo.   overは第二引数に関数をいれれて、 setは第二引数は値である。
//例えば R.over(R.lensProp('a'), 4, hash); とやってもhashの中身のaは4にならずにエラーになる.
//また、 R.over('a', R.negate, {a:1, b:2}) もエラーになる。 overの第一,第二引数は関数であるからである。
//正しく書くならば、R.over(lensProp('a'),  () => 3,  hash);   R.over(lensProp('a'), R.negate, hash); などと書く

2018-03-27

ramdajsメモ

/**
* R.prop
*/
//存在していればその値を返して、なければundifinedを返す
R.prop('x', {x: 100}); //=> 100
R.prop('x', {}) //=> undefined

/**
* R.assoc
*/
//associateの略なきがする。要は新しい要素を既存の奴に関連づけるって感じ
//R.assoc('a', 4,  {a: 1, b: 2}); //こうすると値の更新になるし、第一引数を帰ると追加になる
var hash = {a: 1,  b: 2};
R.assoc('x', 4, hash); // ->{"a": 1, "b": 2, "x": 4} //新たに追加するxは一番後ろに入る


/**
* R.set
*/
//単純に注目した値ををセットする 同じkeyなら上書きになるし、初出のkeyならaddになる
//R.set(R.lensProp('a'), 4, hash);  //=>{"a": 4, "b": 2}
//R.set(R.lensProp('c'), 4, hash);  //=>{"a": 1, "b": 2, "c": 4}

/**
* R.lens
*/ 
//R.lens(get対象, set対象)としてまとめて定義できる

//例えばgetterをx, setterをyとする
//var xLens = R.lens(R.prop('x'), R.assoc('y'));

//R.view(xLens, {x: 1, y: 2});            //viewはgetな関数なのでprop('x')が評価されて1が表示される
//R.set(xLens, 4, {x: 1, y: 2});          //setはsetな関数なのでyに対して4が代入されて {"x": 1, "y": 4}が表示される
//R.over(xLens, R.negate, {x: 1, y: 2});  //=> {x: -1, y: 2}

/**
* R.over と R.set
*/
//overはmap, setはmapTo.   overは第二引数に関数をいれれて、 setは第二引数は値である。
//例えば R.over(R.lensProp('a'), 4, hash); とやってもhashの中身のaは4にならずにエラーになる.
//また、 R.over('a', R.negate, {a:1, b:2}) もエラーになる。 overの第一,第二引数は関数であるからである。
//正しく書くならば、R.over(lensProp('a'),  () => 3,  hash);   R.over(lensProp('a'), R.negate, hash); などと書く

2013-12-05

日記

研究室決まってから色々な先生と話す機会が増えて来た.

一緒に色々やれそうなこともあるので今後が楽しみです.

今やってる共同研究とかも年明けには公表できる,かも.

あと

ドメインを,再取得しました.

http://www.itsukichang.com/

ブログワードプレスに移行するかも.

ポートフォリオページみたいなのを作りたい.

2013-11-25

日記

ブログ放置から5ヶ月.

大学の前期が終わり後期になり,研究室が決まり,歳を取りました.

学類の影響か,データマイニングとかに興味が出て細々とやっているけど,やっぱり研究はHCI系の方へ進む事にしました.

最近生産性も低いのでまた少しずつ再開していきます.

勝負はこれからだ.

2013-06-12

HaxeではじめるCreateJS

とりあえずJSFlashっぽいことすれば喜ばれる世の中なので,CreateJSをつかってFlashのようなものを作ろう!!

Haxeを使えばAS3っぽいCreateJSを更にAS3っぽく書けます!

というわけで,FDTを使ったHaxe&CreateJSをはじめるまでのまとめ.

必要なもの

  • FDT
  • CreateJSなhaxelib

FDTの準備

インストールしましょう.

http://www.fdt.jp/

FDTはデフォルトHaxeをサポートしています.便利!

インストーラHaxeを入れるかどうか聞かれるので入れましょう.

HaxeでCreateJSを使う準備

HaxeでCreateJSを使う為にライブラリを導入します.

CreateJSはHaxeリポジトリHaxelib - the Haxe package manager に用意されているのでコマンドで簡単に導入可能です.

ターミナル

haxelib install createjs

と入力して実行しましょう.

FDTで開発してみる

FDTを開いて,File->New->New FDT Projectを選択.

以下のような画面になるので,ProjectNameと作業ディレクトリを入力して,templateで Haxe->BasicJSを選択してFinish!

f:id:itsuki_kosen:20130611232627p:image

プロジェクト階層は,

ProjectName
|- bin
|    |- index.html
|    |- js
|        |- App.js
|- src
|    |- Main.hx
|
|- ProjectName.hxml

となってます.

bin/js/App.jshaxeからコンパイルされた後のjsファイルとなります.またそれを実行してくれるのが bin/index.html

開発は src/ 以下に.hxファイルを作って行います.

また,ProjectName.hxmlというのはHaxeの設定ファイルで,MainClass(Flashで言うドキュメントクラス)の設定やアウトプット先(デフォルトはbin/js/App.js)の設定ができます.

ここでCreateJSを使うために,ProjectName.hxml内のArgumentに一文追加する必要があります.

以下の画像のように,[ -lib createjs ]を追加しましょう.

f:id:itsuki_kosen:20130611233505p:image

これはHaxeコンパイルするときに使うコマンドライン引数です.他にも色々あるので必要に応じて追加しましょう.

no title

コードを書く.

src/Main.hxを開きましょう.デフォルトではこれがMain class (ドキュメントクラス)です.要は実行時に一番はじめに呼ばれます.

Haxeコンストラクタは new()関数です.が,Main classだけmain()関数コンストラクタより先に呼ばれます.

とりあえず何もいじらずに実行すると,[Hello From FDT HaXe!] みたいな表示がでます.

それだけじゃつまらないので,何かAS3っぽいことをしてみましょう.Main.hxとindex.htmlを書き換えてCreateJSなコードを書いてみます.

  • Main.hx
package;

import createjs.easeljs.Shape;
import createjs.easeljs.Stage;
import createjs.easeljs.Ticker;
import js.Lib;
 
class Main {
	
	private var stage:Stage;
	private var _sp:Shape;
	
	public static function main():Void {
		new Main();
	}
 
	public function new() {
		Lib.window.onload = init;
	}
 
	private function init(_):Void {
		Ticker.useRAF = true;
		Ticker.setFPS(60);
		Ticker.addListener(onTick);
		stage = new Stage(cast js.Lib.document.getElementById("canvas"));
 
		_sp = new Shape();
		stage.addChild(_sp);
		drawBall("#FF0000");
		
		_sp.onClick = onClick;
	}
	
	private function onClick(e):Void {
		var col:String = "#" + StringTools.hex(Std.int((Math.random()*0xFFFFFF)),6);
		drawBall(col);
	}
	
	private function drawBall(s:String):Void {
		_sp.graphics.clear();
		_sp.graphics.beginFill(s);
		_sp.graphics.drawCircle(100, 100, 100);
		_sp.graphics.endFill();
	}
	private function onTick():Void {
		stage.update();
	}
}
<!DOCTYPE html>
<html>
	<head>
		<title>HelloCreateJS</title>
		<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
		<script type="text/javascript" src="js/App.js"></script>
	</head>
	<body>
		<div id="content">
			<div id="head"></div>
			<div id="body"></div>
			<div id="footer">
				<div id="haxe:trace"></div>
			</div> 
		</div>
		<canvas id="canvas" width="500" height="500"></canvas>
	</body>
</html>

クリックすると!色が!!変わる!!!

コード解説

ほぼAS3っぽいですね.

TickerはENTER_FRAMEみたいなものです.上記コードだと60fpsでonTick()が呼ばれます.

graphicsとか完全にAS3ですが,色指定だけ何故かStringになっています.

そのため,単純に Math.random()*0xffffff では駄目で,これを文字列に変換してやる必要が.

それをやっているのが,

var col:String = "#" + StringTools.hex(Std.int((Math.random()*0xFFFFFF)),6);  

これ.めんどいね.

index.htmlでは,createjsを使う為に,

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

<canvas id="canvas" width="500" height="500"></canvas>

の追加を行いました.

まとめ

Haxe&CreateJSを使えば,ほぼAS3っぽいコーディングJSアニメーションやゲームが作れる!

DOMもいじれるので結構応用効きます.

Haxeの文法は若干クセがある気がするので以下のページを見つつ慣れましょう!

no title


最近はまってきたので,jsdo.itによく投稿すると思います.

itsukichang - jsdo.it - Share JavaScript, HTML5 and CSS

jsdo.itのHaxe対応を期待してます!!!

参考

参考にしたページ&&&参考にすると勉強になるページ.

404 Not Found

no title

補足

なんか実行できないんだが!!?

FDTのRun->Run Configurations を開いて,FDT Haxe Viewerをダブルクリックしましょう.

New_Configurationってのが出来るので,そこで実行したいProjectと動かすhtmlファイルの指定を行ってください.

f:id:itsuki_kosen:20130612001655p:image

これでFDTのRunボタンを押したときにFDT内でプレビューされます.

別に設定しなくてもコンパイルはされてます.