2010-11-17

emacsの設定を新しく

emacs

emacsの設定は以前使っていたマシンのをそのまま使っていたのだけれども、その時は超遅いマシンで、anything.elとかの便利そうなものがいまいち使いづらかったので未導入だった。

今はそんなに遅いマシンでもないのでこのあたりの便利そうなものをいれたい。それとしばらくEcpliseでphpを書いていたのだけれどもどうも慣れない、というのもある。

やったこと

init-loader.elで設定ファイルをまとめる
- Cocoa Emacs向けの設定はcocoa-emacs-*.elに書けばOK
auto-install.elでインストールできるものはそっちで入れるようにする
anything.el（auto-install-batchで）
espresso（これもauto-install-batchで）
php-completion（auto-install-from-emacswiki）
customize-variableとかで設定できるものはそっちで設定

JavaScript書きにはjs2-modeを使っていたけれども、試しにespressoを導入してみた。

はまった点

auto-install-batchでエラーになる。auto-install-from-urlとかを使うと、ダウンロードしてきたファイルの前に、HTTPヘッダがくっついていて、それが原因っぽい。

auto-install.elのダウンロード処理はauto-install-downloadにあって、自分の環境だとwgetを使うようになっていたので、macportsで入れたのを使うようにしたらうまくいった。↓こんな感じの設定。

(setq auto-install-wget-command "/opt/local/bin/wget")

wgetのオプションを適切にするだけでもいいのかも。

2010-11-16

最近jsdo.itに投下したもの

html5 canvas css3

最近ネタ色強め。次からはちゃんと一つ作るごとにこっちにも書くようにしよう。

2010-10-07

canvas要素の面倒なところ

html5 canvas

面倒かどうかだけで、優劣とかとは別の話。間違い・勘違いがあるかもしれません。

動的な色の指定が面倒くさい

context.fillStyle = 'rgba(255,255,255,' + alpha + ')';
context.strokeStyle = 'rgb(' + v + ',' + v + ',' + v + ')';

文字列連結とかきれいじゃないように感じる。素直に関数なりライブラリなりを使えばいいのだけれども、書き捨てコードでは面倒くさい。

楕円が描けない

arcでは正円しか描けない。
scale(1,2)とかで楕円っぽくなるけれども、strokeの場合は線の太さも変わってしまう。ベジエで近似すればいいけど面倒くさい。

別ドメインの画像を一度でも書き込むとgetImageDataできなくなる

この辺り。セキュリティ上、別ドメイン（別オリジン）の画像をdrawImageで描画することはできるけれども、そこからgetImageDataとかでピクセル単位のデータをとることはできない。createPatternでパターン化したりはできるが、そのパターンで別のcanvasに書き込んだらそっちも道連れになる（はず）。面倒くさい。

アンチエイリアスを制御できない

たまにアンチエイリアスなしの線とか文字、補間しない画像拡大とかを使いたい時もある。ビットマップフォントとか。ピクセル操作を使えばなんとかなるけれども面倒くさい。

2010-09-27

掃除機のあのボタン

html5 jsdo.it

JAM Session 3 「思わず押したくなるボタンをつくってください」向けのもの。

たぶん、「押したくなるボタン」というのはこういう意味ではないとは思うのだけど、思いついたのだからしょうがない。掃除機がしょぼすぎ。

css3だけで装飾したそれっぽいボタンも一応作っておいた。

以下没ネタ。

「こんなボタンは嫌だ」真面目なものからネタ的なものまでをスライドで表示。主旨が違うのでやめた。
ボタンが複数並んでいて、どんどんクリックされていくが、ひとつだけのこされてしまう。残ったものを押したくなる。ボタンを顔とかにして涙ぐませるとか考えたけれども、なんかかわいそうすぎたのでやめた。
ピタゴラスイッチのおとうさんスイッチのマネ。それっぽいボタンを五つ用意。押されたボタンに対応する映像を表示。映像はあらかじめ自分でYouTubeにアップしておく。面倒すぎてやめた。
不都合なものを消すボタン。ネタすぎるので却下。
- 「世界すべてのIE6以前を削除する」
- 「WindowsからQuickTimeを削除する」
送信ボタンを押すと、ボタンが変身してフォームの内容を食べてしまう。もう方向性が違うし作るのが面倒なので却下。
ボタンを押すといかにもそれっぽい機械が動きそうなもの。それっぽい機械が作れず断念。

2010-09-15

直感的すぎるグラデーションエディタを作った

html5 css

css3向けのグラデーションエディタを作ってみた。

http://jsdo.it/gct256/gz0u

動機

角度を指定したグラデーションを簡単に作りたい。
カラーストップを簡単に追加・削除したい。位置の指定や順番の入替も楽にやりたい。
既存のものへの不満
- スライダで角度を指定するとかわかりにくい。
- カラーストップを追加すると追加した順にしかならなかったり。カラーストップを作ってから順番変えたい時に面倒。
- -moz-linear-gradientのパラメータがわかりにくい。それをスライダで設定するのはもっとわかりにくい。

ToDo

Firefox(Gecko)に対応したい。
色の指定がぜんぜん直感的じゃない。
垂直・水平に固定したい。
複数のカラーストップを等間隔にきれいに配置したい。

2010-09-07

CANVAS要素を使ってCSS向けの色表現からRGB値を得る

html5 javascript

CSS向けの色表現はいろいろある

red
ActiveBorder
#123
#112233
rgb(11,22,33)
rgb(11%,22%,33%)
rgba(11,22,33,0.4)
rgba(11%,22%,33%,0.4)
hsl(11,22%,33%)
hsla(11,22%,33%,0.4)

これからRGBの値を取得したかったので、解析して割り出すコードを書いたりしたけれども、とても面倒くさい。特にHSLからRGBにするところとか。それにActiveBorderみたいなシステム色はたぶん無理。

でも、canvas要素を使うと簡単に取得できることに気づいた。

function getColor(color) {
  var cv = document.createElement('CANVAS');
  var cx = cv.getContext('2d');
  cv.width = cv.height = 1;
  cx.fillStyle = color;
  cx.fillRect(0, 0, 1, 1);
  var d = cx.getImageData(0, 0, 1, 1).data;
  return [d[0], d[1], d[2]];
}

単にcanvas要素を作って指定色で描画して、ImageDataを取ってくるだけ。これは便利。

追記

createElement('CANVAS')とCANVASが大文字だとXHTMLでうまく動かなくなるとの指摘を受けたので修正。id:os0xさんありがとうございます。ついでに透明度も返してなかったのも修正。

function getColor(color) {
  var cv = document.createElement('canvas');
  var cx = cv.getContext('2d');
  cv.width = cv.height = 1;
  cx.fillStyle = color;
  cx.fillRect(0, 0, 1, 1);
  var d = cx.getImageData(0, 0, 1, 1).data;
  return [d[0], d[1], d[2], d[3]];
}

2010-08-31

JAM -HTML5♥Flash- について

javascript html5

JAM http://jsdo.it/event/jam/ という、毎月テーマにそったものをつくるイベントで、七月分に応募？したカンフー時計 http://jsdo.it/gct256/9VVg が入賞。ありがとうございました＞各位

そして八月はMediaRSSでフォトビューアというのがテーマ。アンビリーバボーか何かでみたフェリチェ・ヴァリーニの作品から思いついた、「一点から見ると平面に見えるけど実は立体」という感じのものを作ろうと思ったのだけれども。

結局できたのは、~~変態的~~奇抜なトランジション付きの画像ビューア http://jsdo.it/gct256/iO9K

時間がなくてかなりやっつけになってしまったし、最初に考えていたものとはまったく違うものができてしまった。でも応募しないよりましだし。

以下没ネタ。

ビルの看板に特化したスライドショー。ビルと空を自動生成。「不景気モード」にすると白い看板が多くなるとか。
道路を自動生成してそこに車==画像を走らせてスクロール追従。画像の切り替えは対向車線をうまく利用する。車の移動に使えるかと思って曲線に沿う http://jsdo.it/gct256/vono を作った。
アウトランみたいなドライブゲームっぽい感じで道路脇の看板が画像。分岐点でタグを二つ提示して、それに沿った画像を使う。

この三つは MediaRSS City http://wonderfl.net/c/suNP2 を見て心が折れた。

写真をもとにして中の人が絵を描く。画像のピクセル色がとれなくて諦めた。
写真をもとにして中の人がちぎり絵を（以下略）。ドロネー分割 http://jsdo.it/gct256/3qQG はこのために作ったのに。
木を生やして写真やタグが実のようになる。写真をクリックすると写真に関連した情報をなんとかして取得して、新しい木を生やす。タグも同じく。なんで没にしたんだか忘れた。というか今さっき没ネタフォルダから見つけた。