ひろぽっぽれす » (X)HTML+CSS http://hiropo.co.uk Web系エンジニアの適当なブログです。どうでも酔いものばかり作ってます。 Mon, 12 Mar 2012 06:10:01 +0000 ja hourly 1 http://wordpress.org/?v=3.3 HTMLとCSSで二次元配列でドット絵 (Hex Color Codes) http://hiropo.co.uk/archives/886 http://hiropo.co.uk/archives/886#comments Mon, 06 Feb 2012 05:45:22 +0000 hirohi http://hiropo.co.uk/?p=886 続きを読む →]]> これからcanvas盛り上がっていくという中、あえてHTMLタグとCSSを使ったドット絵を描いてみました。
jsdoitに投稿したものなのでちょい古いですけど紹介します。

といっても仕組みは簡単で、描画するデータ情報を二次元配列にもっておいて、それを<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に描画した方が良いんじゃないかなｗ

]]> http://hiropo.co.uk/archives/886/feed 0 Titanium Studio でデスクトップアプリ開発に入門してみた http://hiropo.co.uk/archives/693 http://hiropo.co.uk/archives/693#comments Fri, 02 Sep 2011 10:05:09 +0000 hirohi http://hiropo.co.uk/?p=693 続きを読む →]]> こんぬつわ。ブログを放置してから早半年弱…。完全に放置してしまいました。
技術的にはいろんなことできるようになったのですが全然メモってませんでした…。
反省してます…。

ということできちんとブログを買いていこうかなと思い、最近ちょっとやってみようと思ったのが、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書いたり何だか何でもアリのカオス状態ですが、面白いことできそうな予感がぷんぷんします。こういうの嫌いじゃない。

]]> http://hiropo.co.uk/archives/693/feed 0 .haribote CSS画像置換 http://hiropo.co.uk/archives/201 http://hiropo.co.uk/archives/201#comments Thu, 13 Aug 2009 02:10:21 +0000 hirohi http://hiropo.co.uk/?p=201 続きを読む →]]> CSSでの画像置換にはやり方がたくさんあるが、その中でもこの .haribote は最も強力な画像置換CSSと言えるだろう。
画像オフの場合でもテキストが表示され、ロールオーバーも実現出来、かつ、SEO対策もばっちりである。

text-indent: -9999em; や、spanでテキスト囲ってを visibility: hidden; にしたりといった従来のテキストを無理やり飛ばしたり隠したりするのではなく、テキストはそこに残したままなのである。
テキストの上に画像を被せることによって .haribote は画像置換を実現している。

#画像は200px×80pxで、上にロールオーバー前の画像、
#下にロールーオーバー後の画像を上下にくっつける形で用意する。

<div id="replace_img"><a href="#dummy" class="haribote">バナーボタン<span></span></a></div>

/*
*    haribote
*/
.haribote,
.haribote span {
    display: block;
    overflow: hidden;
}
.haribote {
    position: relative;
}
.haribote span {
    position: absolute;
    top: 0; left: 0;
    cursor: pointer;
}

/**/
#replace_img a,
#replace_img a span {
    width: 200px;
    height: 40px;
}
#replace_img a span {
    background: url(replace_img.gif) no-repeat 0 0;
}
#replace_img a:hover span {
    background-position: 0 -40px;
}

ソースをみてもらえばわかるが、テキストの上に、positionで画像をのっけているだけの非常にシンプルな構造になっている。

個人的な見解ですが、今のところ .haribote を越えるCSS画像置換には未だ出会っていない。
他に素晴らしいソースがあればぜひ教えてくださいませ。

]]> http://hiropo.co.uk/archives/201/feed 0 モジュールCSS http://hiropo.co.uk/archives/199 http://hiropo.co.uk/archives/199#comments Tue, 11 Aug 2009 07:05:47 +0000 hirohi http://hiropo.co.uk/?p=199 続きを読む →]]> CSSでよく使うモジュールをまとめてみた。
とりあえず基本的なクラスだけ。

/**
*
*    module.css
*/

/*    font
----------------------------------------------*/
.xlf {font-size: 125% !important;}
.lf {font-size: 115% !important;}
.sf {font-size: 85% !important;}
.xsf {font-size: 75% !important;}

.fb {font-weight: bold !important;}
.fn {font-weight: normal !important;}

/*    margin padding
----------------------------------------------*/
/* margin */
.m10 {margin:10px !important;}
.m20 {margin:20px !important;}
.m30 {margin:30px !important;}
.m40 {margin:40px !important;}
.m50 {margin:50px !important;}
/* padding */
.p10 {padding:10px !important;}
.p20 {padding:20px !important;}
.p30 {padding:30px !important;}
.p40 {padding:40px !important;}
.p50 {padding:50px !important;}

/* detail */
.mt0 {margin-top:0 !important;}
.mt1 {margin-top:1px !important;}
.mt2 {margin-top:2px !important;}
.mt3 {margin-top:3px !important;}
.mt4 {margin-top:4px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt11 {margin-top:11px !important;}
.mt12 {margin-top:12px !important;}
.mt13 {margin-top:13px !important;}
.mt14 {margin-top:14px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}
.mt55 {margin-top:55px !important;}
.mt60 {margin-top:60px !important;}
.mt65 {margin-top:65px !important;}
.mt70 {margin-top:70px !important;}
.mt75 {margin-top:75px !important;}
.mt80 {margin-top:80px !important;}
.mt85 {margin-top:85px !important;}
.mt90 {margin-top:90px !important;}
.mt95 {margin-top:95px !important;}
.mt100 {margin-top:100px !important;}

.mb0 {margin-bottom:0px !important;}
.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb45 {margin-bottom:45px !important;}
.mb50 {margin-bottom:50px !important;}

.ml0 {margin-left:0 !important;}
.ml1 {margin-left:1px !important;}
.ml2 {margin-left:2px !important;}
.ml3 {margin-left:3px !important;}
.ml4 {margin-left:4px !important;}
.ml5 {margin-left:5px !important;}
.ml6 {margin-left:6px !important;}
.ml7 {margin-left:7px !important;}
.ml8 {margin-left:8px !important;}
.ml9 {margin-left:9px !important;}
.ml10 {margin-left:10px !important;}
.ml15 {margin-left:15px !important;}
.ml20 {margin-left:20px !important;}

.mr0 {margin-right:0px !important;}
.mr1 {margin-right:1px !important;}
.mr2 {margin-right:2px !important;}
.mr3 {margin-right:3px !important;}
.mr4 {margin-right:4px !important;}
.mr5 {margin-right:5px !important;}
.mr6 {margin-right:6px !important;}
.mr7 {margin-right:7px !important;}
.mr8 {margin-right:8px !important;}
.mr9 {margin-right:9px !important;}
.mr10 {margin-right:10px !important;}
.mr15 {margin-right:15px !important;}
.mr20 {margin-right:20px !important;}

.pt0 {padding-top:0px !important;}
.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pt15 {padding-top:15px !important;}
.pt20 {padding-top:20px !important;}
.pt25 {padding-top:25px !important;}
.pt30 {padding-top:30px !important;}
.pt35 {padding-top:35px !important;}
.pt40 {padding-top:40px !important;}
.pt100 {padding-top:100px !important;}

.pb0 {padding-bottom:0px !important;}
.pb5 {padding-bottom:5px !important;}
.pb10 {padding-bottom:10px !important;}
.pb15 {padding-bottom:15px !important;}
.pb20 {padding-bottom:20px !important;}
.pb25 {padding-bottom:25px !important;}
.pb30 {padding-bottom:30px !important;}
.pb35 {padding-bottom:35px !important;}
.pb40 {padding-bottom:40px !important;}
.pb45 {padding-bottom:45px !important;}
.pb50 {padding-bottom:50px !important;}

.pl0 {padding-left:0 !important;}
.pl5 {padding-left:5px !important;}
.pl10 {padding-left:10px !important;}
.pl15 {padding-left:15px !important;}
.pl20 {padding-left:20px !important;}
.pl25 {padding-left:25px !important;}
.pl30 {padding-left:30px !important;}
.pl35 {padding-left:35px !important;}
.pl40 {padding-left:40px !important;}
.pl45 {padding-left:45px !important;}
.pl50 {padding-left:50px !important;}

.pr0 {padding-right:0 !important;}
.pr5 {padding-right:5px !important;}
.pr10 {padding-right:10px !important;}
.pr15 {padding-right:15px !important;}
.pr20 {padding-right:20px !important;}
.pr25 {padding-right:25px !important;}
.pr30 {padding-right:30px !important;}
.pr35 {padding-right:35px !important;}
.pr40 {padding-right:40px !important;}
.pr45 {padding-right:45px !important;}
.pr50 {padding-right:50px !important;}

/*    visual
----------------------------------------------*/
.pointer {cursor: pointer !important;}

/*    collum
----------------------------------------------*/
.pane2 {width: 48% !important;}
.pane3 {width: 32% !important;}
.pane4 {width: 24% !important;}

/*    position
----------------------------------------------*/
.fl {float: left;}
.fr {float: right;}
.ft {
    overflow: hidden;
    zoom: 1;
}

.vt {vertical-align: top !important;}
.vm {vertical-align: middle !important;}
.vb {vertical-align: bottom !important;}

.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}
.center  > *{
    margin-left: auto;
    margin-right: auto;
}
.right {text-align: right !important;}
.right  > *{
    margin-left: auto;
    margin-right: 0;
}
.left {text-align: left !important;}
.left  > *{
    margin-left: 0;
    margin-right: auto;
}
/* visual none */
.none {
    display: none !important;
}
.vnone {
    visibility: hidden !important;
}
/* nobr */
.nobr {
    white-space: nowrap !important;
}
]]> http://hiropo.co.uk/archives/199/feed 0 原付改造ブログ MovableType（MT）で構築 http://hiropo.co.uk/archives/129 http://hiropo.co.uk/archives/129#comments Tue, 03 Feb 2009 16:13:45 +0000 hirohi http://hiropo.co.uk/?p=129 続きを読む →]]> こんぬつわ。久しぶりの更新です。

wordpress大好きな僕としては、個人的にMovableTypeとかアンチだったんですが、MTを組み込む仕事があったことをきっかけにMTにはまっちゃいました！

そこで、専門学校の時につくったサイトをMTに組み込んで再構築してみました。

当時、「原付改造日記」というものをフルスクラッチで作っていました。
（その頃、ブログはまだ一般的でなかったのです。）

MT組み込んだら更新もめちゃめちゃ簡単だし、もうラクっていうかなんていうか…。
今の世の中って凄いです。

]]> http://hiropo.co.uk/archives/129/feed 0 気になっちゃうシリーズ。 – youtube編 http://hiropo.co.uk/archives/55 http://hiropo.co.uk/archives/55#comments Wed, 10 Dec 2008 17:05:25 +0000 hirohi http://hiropo.co.uk/?p=55

↑の画像の「チャンネル登録」をクリックすると・・・、

はい崩れた！今クリックしたら崩れたよ！！

]]> http://hiropo.co.uk/archives/55/feed 0