といっても仕組みは簡単で、描画するデータ情報を二次元配列にもっておいて、それを<li>タグでfloatで並べて描画するというもの。描画のロジックはJavaScriptで実装しました。
描画するターゲットがcanvasか、HTMLタグかの違いだけなので仕組みはとってもシンプルです。

こちらが完成図です。

二次元配列でドット絵 (Hex Color Codes) – jsdo.it – share JavaScript, HTML5 and CSS

描画データとなる二次元配列マップにHexカラー値を直接書いて渡しているため、このように色は自由に指定できます。

さて、ソースコードの紹介になります。

【1】描画するHTML側でステージ的なものを用意します。

<ul class="group tstList">
    <li id="stage"></li>
</ul>

【2】CSSで見た目を制御します。

* {
	margin: 0;
    	padding: 0;
}
.box {
        width: 10px;
	height: 10px;
	overflow: hidden;
	display: block;
	float: left;
}
.wrap:after,
.box:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}
.wrap,
.group {
	zoom: 1;
}
.tstList {
	width: 240px;
}
.tstList li {
	float: left;
    	list-style: none;
}

【3】描画データを二次元配列で用意します。値にはHexカラー値を文字列でもちます。

/*-------------------------------------------------
* map
*/
var map = [
	['ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','f5b199','f5b199','f5b199'],
	['ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','e10000','e10000','e10000','e10000','e10000','ffffff','ffffff','f5b199','f5b199','f5b199'],
	['ffffff','ffffff','ffffff','ffffff','ffffff','e10000','e10000','e10000','e10000','e10000','e10000','e10000','e10000','e10000','f5b199','f5b199'],
	['ffffff','ffffff','ffffff','ffffff','ffffff','FFFF00','FFFF00','FFFF00','f5b199','f5b199','000000','f5b199','ffffff','05299d','05299d','05299d'],
	['ffffff','ffffff','ffffff','ffffff','FFFF00','f5b199','FFFF00','f5b199','f5b199','f5b199','000000','f5b199','f5b199','05299d','05299d','05299d'],
	['ffffff','ffffff','ffffff','ffffff','FFFF00','f5b199','FFFF00','FFFF00','f5b199','f5b199','f5b199','000000','f5b199','f5b199','f5b199','05299d'],
	['ffffff','ffffff','ffffff','ffffff','FFFF00','FFFF00','f5b199','f5b199','f5b199','f5b199','000000','000000','000000','000000','05299d','ffffff'],
	['ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','f5b199','f5b199','f5b199','f5b199','f5b199','f5b199','f5b199','05299d','ffffff','ffffff'],
	['ffffff','ffffff','05299d','05299d','05299d','05299d','05299d','fb8a10','05299d','05299d','05299d','fb8a10','05299d','ffffff','ffffff','ffffff'],
	['ffffff','05299d','05299d','05299d','05299d','05299d','05299d','05299d','fb8a10','05299d','05299d','05299d','fb8a10','ffffff','ffffff','05299d'],
	['f5b199','f5b199','05299d','05299d','05299d','05299d','05299d','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','ffffff','ffffff','05299d'],
	['f5b199','f5b199','f5b199','ffffff','fb8a10','fb8a10','05299d','fb8a10','fb8a10','EEEEEE','fb8a10','fb8a10','EEEEEE','fb8a10','05299d','05299d'],
	['ffffff','f5b199','ffffff','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','05299d','05299d'],
	['ffffff','ffffff','05299d','05299d','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','05299d','05299d'],
	['ffffff','05299d','05299d','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','ffffff','ffffff','ffffff','ffffff','ffffff'],
	['ffffff','05299d','ffffff','ffffff','fb8a10','fb8a10','fb8a10','fb8a10','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff']
]

【4】描画ロジックをJavaScriptで実装します。

/*-------------------------------------------------
* module
*/
var $ = function(id){
	return document.getElementById(id);
}
var $$ = function(id, tag){
	return document.getElementById(id).getElementsByTagName(tag);
}
var createElement = function(tag){
	return document.createElement(tag);
}

/*-------------------------------------------------
* Elements
*/

//Wrap
var Wrap = function(){
	return this.init();
}
Wrap.prototype = {
	init: function(){
		var div = createElement('div');
		div.setAttribute('class', 'wrap');
		div.innerHTML = '';
		return div;
	}
}

//Dot
var Dot = function(args){
	this.background = args.background;
	return this.init();
}
Dot.prototype = {
	init: function(){
		var span = createElement('span');
		span.style.background = "#" + this.background;
		span.setAttribute('class', 'box');
		span.innerHTML = '';
		return span;
	}
}

//Create
var Create = function(obj){
    var stage = obj;
    var wrap = [];
    for( var i = 0, L = map.length; i < L; i++ ){
	    wrap[i] = new Wrap();
	    for( var j = 0, M = map[i].length; j < M; j++ )
    {
	    wrap[i].appendChild( new Dot({ background: map[i][j] }) );
	    }
	    stage.appendChild(wrap[i]);
    }
}

/*-------------------------------------------------
* initilize
*/
var init = function(){
    new Create( $('stage') );
}
window.addEventListener('load', init, false);

JavaScriptはライブラリは使っていません、ネイティブ実装です。
jQueryとか使えばもっと簡単に実装できると思います。

でもProcessing.js使う方が面白いのでcanvasに描画した方が良いんじゃないかなｗ

Arduinoを使った8×8ドットマトリックスLEDの点滅をやりたいなと思い、そのシミュレーションとしてjsdoitでまずはcanvasに描画してみようと思いたちProcessing.jsで書いてみました。

int[][] p = {
  {0,0,1,0,0,0,0,0},
  {0,1,1,1,1,1,0,0},
  {0,0,1,0,0,0,0,0},
  {0,0,1,1,1,1,0,0},
  {0,1,1,0,1,0,1,0},
  {1,0,1,1,0,0,1,0},
  {0,1,1,0,0,1,0,0},
  {0,0,0,0,0,0,0,0}
};
void setup(){
  size(81, 81);
  frameRate(30);
}
void draw(){
  background(0);
  stroke(0);
  for(int y = 0; y < p.length; y++){
  for(int x = 0; x < p[y].length; x++){
    if(p[y][x] == 0){
      fill(96, 96, 96);
    }
    else if(p[y][x] == 1){
      fill(255, 0, 0);
    }
    ellipseMode(CORNER);
    ellipse(x*10, y*10, 10, 10);
  }}
}

jsdoitにも投稿してあります。
Processing.js 8x8 ドットマトリックスLEDっぽいのつくってみた

Processing.js 8x8 ドットマトリックスLEDっぽいのつくってみた - jsdo.it - share JavaScript, HTML5 and CSS

描画するだけだったら簡単だけど、x軸に対して1ドットずつ横に流してアニメーションさせたいなーと。
アニメーションできたらまたうｐしますん。

そこでProcessingで書いたソースをぺたぺたブログにもはってたのですが、実際に動いてるものをどうにか簡単にはれないかと思い探してみました。

Processing JS WordPress Plugin
http://www.keyvan.net/code/processing-js/

意図も簡単に見つけてしまったので早速導入してみました。

void setup() {
    size(400, 160);
    frameRate(15);
}
void draw() {
    int s = random(100);
    background(#ffffff);
    stroke(random(255), random(255), random(255));
    ellipse(random(width), random(height), s, s);
}

良い感じに動いたー！すてきー！

仕組み

• 2次元配列でマップ作成。
• とりあえずコマをマップ上で動かしてみる。

あたり判定用と見た目用で配列分けようかとも思いましたが、特に必要ないかなと思い配列マップは1つにまとめました。

ソースはこちらです。

桃鉄っぽいもの。 – jsdo.it – share JavaScript, HTML5 and CSS

まだマップは未完成ですが、できたものがこちら。

桃鉄っぽいもの。 – jsdo.it – share JavaScript, HTML5 and CSS

jsdo.it で全部完成できたらいいね！

日常でちょこちょこプログラムは書きますが、脳みそが全然追いついていないため、トレーニングとして基本的なFizzBuzzに挑戦してみました。

言語はいつものJavaScript。
あと最近（今さら）覚えたクロージャーを使って書いてみました。

var rtn = "";
var fizzBuzz = function(fizz, buzz, max){
    return function(){
        max++;
        if( (max % fizz === 0) && (max % buzz === 0) ){
            return "FizzBuzz";
        }
        else{
            if( max % fizz === 0 ){
                return "Fizz"
            }
            else if( max % buzz === 0 ){
                return "Buzz";
            }
            else {
                return max;
            }
        }
    }
}

var FizzBuzz = fizzBuzz(3, 5, 0);
var n = 0;
while(n < 20){
    rtn += FizzBuzz() + "\n";
    n++;
}
console.log(rtn);

実際やってみたもの

10分くらいでできてしまった…。
簡単だったけど面白かった。

javascript:(function(){ setInterval(function(){var dd = new Date(); console.log( dd.getUTCHours() + ":" + dd.getUTCMinutes() + ":" + dd.getUTCSeconds() ); location.reload()}, 5000) })();

これをブックマークレットに登録して使うと、無限リロードしまくります。
（※良い子は悪用しちゃダメだよ！）

ちなみにChromeなどではある程度実行すると悪意のあるスクリプト（？）とみなされて停止して動かなくなったり・・・。

そんなメモでした。

普段はjQuery使いなので、HTMLのパースがネイティブだともの凄い骨が折れます。
なので、ブックマークレットでjQueryを読み込ませてみました。

こちらを参考にしました。
http://h2ham.seesaa.net/article/115498697.html

javascript: (function(){
	var d = document;
	var s = d.createElement('script');
	s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
	d.body.appendChild(s);
	setTimeout(function(){
	//ここに記述
	}, 1000);
})();

jQueryをgoogleAPIから読み込んで、bodyにappendしています。
読み込んだ後に実行させるため、1秒間ウェイトをおいています。
これでブックマークレットでjQueryが使えるようになります。

超便利！

MediaQueries Multi-Device Template.

PC, iPhone, iPad, Android, 各種タブレットに最適化された形でコンテンツが提供できるように開発しました。多分まだ検証不十分でバグがあるかもですが、ベータ版をリリースします。

ワンソース・マルチデバイスとは？

「ワンソース・マルチデバイス」とは、1つのドキュメント(HTML)を、文書構造・内容に手を加えずに、仕様や画面サイズの異なる複数の端末毎に最適化して表示させる技術です。
CSS3のMediaQueryを使って横幅の変化によってCSSの読み込みを変えることで、さまざまな画面サイズのデバイスに対応することができます。

動作検証端末

とりあえず目標として、スマートフォン、PC、タブレットなど、Web標準ブラウザを搭載するデバイスに最適な形でコンテンツを提供することを目指しました。

マルチデバイス対応案件における、開発、運用のハードルや負荷を下げつつ、運用もラクにできればなと。

極力、ユーザーエージェント判別による振り分けはしません。全部CSS！
JSギミックなければ全然いけるよ、うんきっと。

メリット

CSSのみで対応できちゃう。
JavaScriptができなくても、マークアップのみで対応できちゃう。
MediaQueryはウィンドウの横幅でCSSを切り替えるため、未知のデバイスも考慮できる（はず。）

デメリット

複雑なレイアウト、コンテンツの出し分けは難しい。
MediaQueryでのCSS切り替えによるコーディングの取得が必要。

最後に・・・

このブログはマルチデバイス対応まだです！これからこのテンプレートを使ってみようと思います。

ということできちんとブログを買いていこうかなと思い、最近ちょっとやってみようと思ったのが、Titanium Studio によるデスクトップアプリケーション開発！
なんと、みんなが大好きなHTML5+CSS3+JavaScript+Ruby+Python+PHP と、最近流行のweb系言語がだいたい使えちゃいます。Adobe AIRよりもこっちの方が良いんじゃないかって思ってみたり。

Titanium Studio は、Aptanaを買収し、AptanaとTitaniumががっちゃんこしたもの（？）みたいです。
Titanium はiPhone, Android でクロスデバイス開発をするための開発ツールで、iPhoneアプリやAndroidアプリを開発したことある人は知っているであろうと思うのでここでは割愛します。

それでは早速Titanium Studio でHello Worldしてみます。

まずはTitanium Studioをユーザー登録してダウンロードします。
http://www.appcelerator.com/

Titanium Studio を起動し、プロジェクトを新規でつくる

Titanium Desctop Project をつくる

Project Name を設定し、使用言語にRuby, Python, PHP をチェック

アプリケーション情報を設定する

ソースコードを書くために /Resources/index.html を開く

ソースコードを書く

<!Doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style type="text/css">
			body {
				background: #fff;
			}
		</style>
	</head>
	<body>
		<h1>test</h1>
		<script type="text/python">
			def pyFunc(str):
				document.write(str)
			pyFunc("python")
		</script>
		<script type="text/ruby">
			def rbFunc(str)
				pyFunc(str)
			end
			rbFunc("ruby")
		</script>
	</body>
</html>

アプリを実行してみる

デスクトップアプリができちゃった！

Pythonの中にRubyを書いたりJS書いたり何だか何でもアリのカオス状態ですが、面白いことできそうな予感がぷんぷんします。こういうの嫌いじゃない。

JavaScriptを拡張するのはあまり気が進まないのですが、ネイティブ実装がイケてない部分が多いので、もうがっつり拡張しまくったライブラリつくっても良いんじゃないかくらいに思っている今日この頃でございます。

今回は超絶によく使うArrayオブジェクト(配列)の拡張を書いておきます。

まずは配列のシャッフル。

Array.shuffle()

見たまんまです。このまま使います。ネイティブ実装にはないのでprototypeを使って拡張します。
アルゴリズムはシャッフル最速(？)と言われているFisher–Yatesアルゴリズムを使います。

Fisher–Yatesアルゴリズムについて

JavaScriptの実装は下記の通り

Array.prototype.shuffle = function() {
	var i = this.length;
	while(i){
		var j = Math.floor(Math.random()*i);
		var t = this[--i];
		this[i] = this[j];
		this[j] = t;
	}
	return this;
}

これで簡単に配列の中身をシャッフルできます。

次に配列のコピー(クローン)をつくるためのメソッド。

Array.clone()

JavaScriptの配列は別変数に代入した場合、それはコピーになるのではなく単純に元の配列オブジェクトを参照するだけになるので、コピーをつくりたい場合はいちいちループ文の中でpushしたりしなきゃならんのでめんどくさいのです。
それを一発で解決する方法が、Array.clone() をつくっちゃえば簡単だよねってことなのです。

実装はこちら

Array.prototype.clone = function(){
	return Array.apply(null,this);
}

これだけです。とてもシンプル。

Array.shuffle() と Array.clone() を両方の使い方はこちら。

//配列hogeを生成
var hoge = Array(1,2,3,4,5);
//hogeのクローンfooを生成
var foo = hoge.clone();
//fooをシャッフルする
foo.shuffle();

console.log( hoge )     // [1,2,3,4,5]
console.log( foo )       // [2,4,1,3,5]

この2つとても便利ちゃんなのです。
JavaScriptはどんどん拡張しちゃえば良いと思います。