ここに書くのが適切か分かりませんが、酔ってて忘れそうなので、メモ。
こんばんは。へべれけmuchoです。
本日、Cinder勉強会#1に参加してきました。
コレは勉強会後の話です。

モック／プロトタイプを提案時に制作するという話から、
デザイナーってなんだ？という話になりました。
WEBに関わる業界内では、WEBデザイナー、グラフィックデザイナー、
モーションデザイナー、インタラクティブデザイナーと
いろいろな肩書きがありますが、
バックエンドだって、変数名ひとつにしても、
担当する人間は気を配って決めています。
つまりデザインしているんです。
一方で、リッチなインタラクティブコンテンツの完成図を伝えるにあたって
photoshopで作られた静止画ベースではカバーしきれなくなってきていると感じます。
漠然とそんな風に思っていましたが、今日の勉強会に参加された方々も
そういう認識で、やっぱりそういう流れなのかなと改めて考えさせられました。

組織によってはすでにそうなってるかもしれないが、
インタラクティブコンテンツに関しては、表現や仕組みがリッチであればあるほど、
デザインしなければならない要素は、psdだけではなく、もっと多岐に渡り、
今後のデザイナーはそれらを俯瞰的、総合的に把握できる能力が
求められるのかもしれない。お話を伺いながらそんな風に思いました。

とはいえ、そんな人材はそうそういないので、
どこもグラフィック、インタラクティブ、システムと
それぞれ担当が分かれがちだと思いますが、、
その結果、たとえばモーションだけが突出したような、
いびつなアウトプットになってしまいがちな気がします。

個人的には、モック／プロトタイプを作る立場が統括的にデザインするのが、
インタラクティブコンテンツに関しては自然かなと。
そんな風に思った勉強会アフターでした。

主催の糸数さんをはじめ、参加者のみなさんお疲れさまでした。
また情報共有等々してきましょう！

こんにちは、muchoです。
たまたま見かけたソースの中に便利なものがあったのでメモ。

配列から指定した値を取り除く!というものです。
spliceの変形です。

  Array.prototype.remove = function() {
    var i, j, l, m;
    l = arguments.length;
    i = 0;
    while (i < l) {
      m = this.length;
      j = 0;
      while (j < m) {
        if (arguments[i] === this[j]) {
          this.splice(j, 1);
          m--;
        } else {
          j++;
        }
      }
      i++;
    }
    return this.length;
  };

これだと、prototypeを書き換えてしまうので、それもどうかと思いつつ、
この機能がもともと実装されてたらいいのになーと思ったり。

使う時はこんな感じで。

  var ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  ary.remove(5);
  ary.remove(8, 9, 0);
  console.log(ary); //[1, 2, 3, 4, 6, 7]
  

今年もあと2ヶ月となりました。
こんばんはmuchoです。
3ヶ月ぶりのエントリーです。

いくつかの案件で、カードを敷き詰めたような、
いわゆるMasonry Layoutを実装したのですが、
それが有名なライブラリではうまくいかず、自作してみました。

参考にしたのはこの3つ
jQuery Masonry
http://masonry.desandro.com/

Isotope
http://isotope.metafizzy.co/

jquery.vgrid.js
http://blog.xlune.com/2009/09/jqueryvgrid.html

どれもソートが可能な反面、隙間がところどころに発生してしまい、
そこを詰めたいな、ということになり、そこそこ詰めるように
作り直してみました。
言葉では美味く説明できませんが、
サンプルを見て頂くと分かりやすいと思います。
http://devjam.github.com/jquery.cram.js/

なるべく隙間を埋めてしまう仕様上ソートはできません。
順番が変わっても隙間を無くしたいという方はどうぞ。

ソースはこちら
https://github.com/devjam/jquery.cram.js

夏の暑さに負けるのは困るけど、勝てる見込みもなく。
こんにちは、muchoです。
以前、若きホープのきょんたろ君がアップしたHtml5 Canvas Templete ver.1を
クラスっぽく作り直してみました。
ついでにcoffee scriptで書いてみました。

Processing.jsを試してみたんですが、IE8でエラーが出て動かなかったため、
簡易Processing風なテンプレートを自作することにした次第です。
そんな背景があるので、記述の仕方はProcessingになるべくあわせています。

基本となるCanvasクラスを拡張して書くことを前提にしています。
coffee scriptだとこんな感じ

class Canvas1 extends Canvas
	#---------------------------------------------------
	setup: ->
		@fillColor = "#202020"
		@strokeColor = 'rgba(0, 0, 0, 0.1)'
		@backgroundColor = 'rgb(240, 240, 240)'

		@pi = Math.PI * 2
		@pointMin = 5
		@pointMax = 60
		@Num = 0

		@play()

	update: ->
		pointNum = (@mouseX / @width * @pointMax + @pointMin)
		@Num += (pointNum - @Num) * 0.1

	draw: ->
		@background()
		points = @getPoints()

		l = points.length
		i = 0
		while i < l
			j = i + 1
			while j < l
				@line points[i][0], points[i][1], points[j][0], points[j][1]
				j++
			i++

吐き出されたJSはこんな感じ

(function() {
  var Canvas1,
    __hasProp = {}.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

  Canvas1 = (function(_super) {

    __extends(Canvas1, _super);

    function Canvas1() {
      return Canvas1.__super__.constructor.apply(this, arguments);
    }

    Canvas1.prototype.setup = function() {
      this.fillColor = "#202020";
      this.strokeColor = 'rgba(0, 0, 0, 0.1)';
      this.backgroundColor = 'rgb(240, 240, 240)';
      this.pi = Math.PI * 2;
      this.pointMin = 5;
      this.pointMax = 60;
      this.Num = 0;
      return this.play();
    };

    Canvas1.prototype.update = function() {
      var pointNum;
      pointNum = this.mouseX / this.width * this.pointMax + this.pointMin;
      return this.Num += (pointNum - this.Num) * 0.1;
    };

    Canvas1.prototype.draw = function() {
      var i, j, l, points, _results;
      this.background();
      points = this.getPoints();
      l = points.length;
      i = 0;
      _results = [];
      while (i < l) {
        j = i + 1;
        while (j < l) {
          this.line(points[i][0], points[i][1], points[j][0], points[j][1]);
          j++;
        }
        _results.push(i++);
      }
      return _results;
    };
  this.Canvas1 = Canvas1;

}).call(this);

ソースをGithubにアップしてみました。まだ慣れてないのでgitドキドキ
https://github.com/devjam/canvas.js

こんばんは。muchoです。
超超簡易版ですが、
Socket.IOを試してみました。
ひな形のひな形用のひな形用にメモ。

こちらのページを参考にしました。
Socket.IO API 解説

Socket.IO 0.9.5ってばJSON形式を標準でサポートしてる！
こりゃ素敵！

server.js

var io = require('socket.io').listen(3000);
io.sockets.on('connection', function (socket) {
  //log('connected');
  socket.on('msg send', function (msg) {
    //socket.json.emit('msg push', msg);
    socket.json.broadcast.emit('msg push', msg);
  });
  socket.on('disconnect', function() {
    //log('disconnected');
    msg= {"type": "disconnect"};
    socket.json.broadcast.emit('msg push', msg);
  });
});

ターミナルでNode.js起動

$ node server.js

client.js（socket.io.jsも別途読み込む必要があります）

(function() {
document.writeln('');

  jQuery(function() {
    var sendSocket, socket;
    socket = io.connect('http://localhost:3000');
    socket.on('error', function(reason) {
      console.log(reason);
    });
    socket.on('connect', function() {});
    socket.on('msg push', function(msg) {
      console.log(msg.type);
    });
    sendSocket = function(type, arg) {
      var data;
      data = {
        "type": type,
        "data": arg
      };
      return socket.emit('msg send', data);
    };
    return null;
  });

}).call(this);