Home > 2009年02月

2009年02月

WYSIWYGエディタが嫌い

2009-02-09 (Mon)
JavaScript

です。
いらんタグとか勝手に挿入するし。

IDEも重いので嫌です。

やっぱテキストエディタですよね。

（とかいってこのブログのソースもボロボロだし、
Flexの時はFlashDevelopに頼りっきりなんだけどね。。。）

個人的には、Crescent Eveが最強だと思ってます。

HTMLとCSSの入力補完が最高だし、動作もメモ帳並に軽い。
これがオープンソースになって、JavaScriptに対応して、インストール不要になれば、
世界のHTMLエディタを駆逐できるんじゃないかと。
（notepad++もよさげだけど、僕には高機能すぎる）

というわけで、オンラインでもこの使い勝手が欲しくて、
JavaScript製のエディタを探してみました。

※ 僕はブログをタグ打ちしてから貼り付けてるので、
　　どこでも使える補完付きエディタがないと困るんです^^

結論

なさそう。

まとめ記事が既にあったのであげときます。

Javascriptで作られたエディタまとめ - 空繰再繰
 ブラウザ上で動く12のリッチテキストエディター:phpspot開発日誌

予想通りWYSIWYGだらけ。

※ Codepressも（！）だけど結構ドメインが無くなって（変わって？）ますね。
　　オンラインエディタブームが去ったからからなぁ…。

一番理想に近かったのはPostEditor。
a + tabで<a href="http://" title="desc">text</a>を入力等、補完がステキ。

ただ、IEだとtabが普通に効いちゃって動かず。
そしてなんとなくしっくりこない。

…なら作ればいいじゃん。

というわけで、作ります。
次のエントリからスタートです。
目指せCrescent Eve Online！！

以上、前フリでした。

Comments: 0
TrackBack: 0

canvasで虹を描いてみた

2009-02-08 (Sun)
JavaScript

引き続きuupaa-excanvas.jsをいじって遊んでます。

グラデーションがかなり綺麗にできるっぽかったので、試しに虹を作ってみる。
結果がこれ↓

予想以上にうまくいったので、bornneet.comの背景（？）として使うことにしました。

ソースは以下のような感じ。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>rainvow</title>
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	
	<script type="text/xaml" id="xaml"><?xml version="1.0"?><Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-color.js/uupaa-color.mini.js"></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/uupaa-excanvas.js"></script>

	<!--[if lt IE 7]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
	<![endif]-->

	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<!-- cssでのサイズ指定はうまくいかない（？）ので属性で指定  -->	
	<canvas width="200" height="200"></canvas>
	<div id="test"></div>
</body>
</html>

js

uuClass.Canvas.ready(function() {

	var canvas = document.getElementsByTagName('canvas')[0];
	var ctx = canvas.getContext('2d');

	var r = canvas.width;
	var x = canvas.width;
	var y = canvas.height;

	var grd = ctx.createRadialGradient(x, y, 1, x, y, r);

	var colors = ['255,255,255', '255,0,0', '255,165,0', '255,255,0', '0,255,0', '0,0,255', '0,0,128', '128,0,128', '255,255,255'];

	var margin = 0.05;
	var base = 1 - margin * colors.length;

	for(var i = 0; i < colors.length; i++) {
		grd.addColorStop(base, 'rgba(' + colors[i] + ',0.6)');
		base += margin;
	}

	ctx.fillStyle = grd;
	ctx.fillRect(x - r, y - r, r * 2, r * 2);

});

css

@charset "UTF-8";

canvas {
	border: 1px solid black;
	position: fixed;
	right: 0;
	bottom: 0;
}

ちなみに、ExplorerCanvasでやると、

こうなっちゃうので円形グラデーションを使う時は注意。
（Canvas - 円形グラデーションを指定する - HTML5.JP）

Comments: 0
TrackBack: 0

マウスとキーボード買った

2009-02-03 (Tue)
日記

PCを起動する度に抜き差ししなきゃ認識しない症状に悩まされて買ってしまった。
おかげさまで無事解決。相性問題なのかな？？

買ったのはこれ↓

ELECOM USB&PS/2接続ホイール付光学式マウスブラック M-M2UP2RBK

Amazonで詳しく見る by G-Tools

ついでにキーボードも。
コードレスキーボードはランニングコストが気になるので。

ELECOM USBフルキーボード TK-U08FYSV

Amazonで詳しく見る by G-Tools

うまい具合に送料無料。
これで次の日に届くんだから、やっぱりAmazonはやめられない。
※ 家の近くにセンター？があるらしく（お急ぎ便じゃなくても）ホントすぐ届く。

そういえば今回初めて、「お客様の手元に早く届けるため」とかで別配送になった。
予定では1日違いになってて、それぐらいなら一緒でいいのになぁとか思ってたら、結局一緒に届いた。
Amazon何がしたいんだ。。。

Comments: 0
TrackBack: 0

(uupaa-ex)canvasの練習に星空風の個人サイト作った

2009-02-02 (Mon)
JavaScript

こんなんです。

tnantoka.net
※ PCが悲鳴をあげかねないので長時間の閲覧は注意して下さい。

こうなっちゃいます↓

最近地味に使い始めたtnantoka.netドメインですが、
bornneet.comとどう使い分けるか決まってません。
（今のところサーバサイドスクリプト使うときはこっちで公開しようと思ってたりします）

いつまでも準備中じゃあんまりなのでとりあえず飾ってみました。

faviconも一応。
（実はこれが一番苦労した。作るのは一瞬だったんだけどIE7で表示されず。
ファイルの作り直しとか、キャッシュのクリアとかいろいろやっちゃったけど、
結論はHTMLの更新が漏れててfaviconの指定ができてなかったという単純ミス。
Firefoxは指定しなくても勝手に取ってくるんだね。。。）

技術的なこと

初uupaaです。

ずっと気になってて0.7がリリースされたら触ってみようと思ってたんですが、
我慢できずにspinoffを先に使っちゃいました。

予想はしてましたが、かなりいいです！
プレゼンツールを作った時に本家のexcanvasも使いましたが、
こっちの方が癖がない上にサクサク動くし、エラーに悩まされることもありませんでした。

※ IEで grd.addColorStop(0, 'rgba(255, 255, 255, 0.5)') とかやったら動かなかった。
　　仕様かな？？…なのでブラウザ判別してIEでは半透明にしてません。
　　⇒ ウソでした、すいませんm(_ _)m
　　　　IEでも半透明グラデーションできました。
　　　　ただランダム&大量描画のせいか、たまにエラーが出るのでそのままにしてます。

ラッパ関数も便利そうなんですが、canvasの勉強にならない気がしたので今回はあえて使いませんでした。

これはcanvasにはまりそう！！

さて何作ろーかなー。。。