NULL::mabinogi:Tailoring むしゃくしゃしてやった。

無駄だなぁ。無駄っていいなぁ。

canvas 使用なので Firefox 1.5 を要求します。

  • タイムリミット
  • 針の大きさ可変
  • 裏を縫うとき点線になるように(というかマビノギの縫い方おかしい気がする)
  • 針の落ちる位置のランダム化

壮絶なスペルミスしてた。

setInterval を使ってもマルチスレッドになるわけじゃないからタイムリミットつけるのは無理くさい。

setInterval でのみ描画させるようにすればいけるか。つまり普通のゲームと同じような Frame ずばば式。

これだとページ開いてる間ずっと重くなるけどなぁ。

タイマー実装。

  1. トップ
  2. javascript
  3. canvas を使った mabinogi 裁縫練習機
  1. トップ
  2. game
  3. canvas を使った mabinogi 裁縫練習機
  1. トップ
  2. mabinogi
  3. canvas を使った mabinogi 裁縫練習機

ブラウザ上でコードを読もうとしても頭に入らない。

たとえばデザインパターンの例なんかをブラウザ上で見たりする機会は結構あるけど、そういうのってまったく頭に入ってこない。頭が理解しようとしない。

どんなコードでもそうかっていうと違う (Ruby のリファレンスのサンプルコードは頭に入る) んだけど、なんでだろう。なんかただたんにコードの長さと必要性の問題な気がしてきた。

  1. トップ
  2. prog
  3. ブラウザ上でコードを読もうとしても

Canvas を使った gimp like な Triangle Color Selector

ぐるぐる回ります。透過 PNG 版より正確です。正確さなんてどうでもよさそうですけど。

サイズを初期化時に自由に決められるのはいいっすね。似非 Flash

最初 GIMP の描画関数をそのままやってみたんだけど、さすがに重過ぎて使えなかった。頭悪いのでグラデーション系のメソッドでてきとー描画。で実用レベルに。それでも重くてファンの回転数あがるんだけど。

Canvas 使ってる時点でブラウザ限られるわけですけど、Firefox 1.5 でしか見てないです。

中途半端に prototype.js に依存してます。内部的には依存してないけれど、めんどい部分をてきとーに済ませてある。

円形グラデーションは 360 度を色を変えつつ同じ大きさの円で fill しまくって作ってます。案外きれいにいけた。(ただしループ数というか処理がかなり重いので最初の一度だけ描画)

なんか三角形のグラデーションが偽者っぽい

lighter で合成するようにした。

lighter ってなんか変な気もするんだけど……

ぐるぐるしないほうがいい、と思った。

lighter がおかしいんじゃなくて、darker がおかしいんだ。

  1. トップ
  2. web
  3. Canvas を使った gimp like な Triangle Color Selector
  1. トップ
  2. javascript
  3. Canvas を使った gimp like な Triangle Color Selector

null == undefined; //=> true
null === undefined; //=> false
"1" == 1; //=> true
true == 1; //=> true
new String("aaa") == new String("aaa"); //=> false
String("aaa") == String("aaa"); //=> true
String(new String("aaa")) == String(new String("aaa")); //=> true
typeof (new String("aaa")) //=> "object"
typeof String("aaa") //=> "string"
typeof "aaa" //=> "string"
var aaa = "aaa";
aaa.prop = "aaa";
aaa.prop //=> undefined;
var aaa = new String("aaa");
aaa.prop = "aaa";
aaa.prop //=> "aaa";

nullundefined の関係がちょっと意外だった。true == 1 はキモい。

String 周りがちょっとよくわかってなくて一応いろいろやってみた。別に否直感的ではない感じ。

  1. トップ
  2. ecmascript
  3. ECMAScript メモ
  1. トップ
  2. javascript
  3. ECMAScript メモ
  1. トップ
  2. script
  3. ECMAScript メモ

この日記同じ日の別セクションをブックマークされても概要が同じになるんだけど、naoyaのはてなダイアリー - はてなブックマークの概要取得の処理 を見てなんとなくわかった。

個別ページの alternate を設定して、個別ページ用の XSLT を書いといた。

けど微妙にうまくいってない気がする。まぁブックマークなんてされないからだいぶ関係ない

  1. トップ
  2. net
  3. for Hatena::Bookmark
  1. トップ
  2. web
  3. for Hatena::Bookmark

寮のようなアパート 異様に汚い炊飯器 大掃除 台所周りを徹底的に綺麗に

AWO拒食症 (何の略か知らん) 食わないうちに食えなくなる。

博物館のような場所。負け犬の視点とスタイルシートの視点がある。負け犬もスタイルシートもたくさんある。俺はそのなかの一つずつに過ぎない。負け犬視点はこれから起こることがどれだけ怖いかわかってない。スタイルシートは自分にマッチする要素をひたすら機械的に探している。

高架下の広場のような場所。少し薄暗い。曇り。バス。カレーハウス。心底むかつくおばさん。制服

  1. トップ
  2. dream
  3. 夢 アパート スタイルシート

あぶないあぶない。15日から無料化するようだ。とはいえエクストラストレージはないと無理なので 500 円は払うことになるけど……

  1. トップ
  2. game
  3. mabinogi G3 から無料化
  1. トップ
  2. mabinogi
  3. mabinogi G3 から無料化

第三 (神) 視点と、第一 (私) 視点がスイッチされる。第三視点ではモニタから RPG ゲームを見ているように。第一視点では黒い雲が覆う世界で、Yシャツ (ではない気がする。とにかく小奇麗な格好) を着た女性とよくわからない、遠回りな話をしていた。城のようなところの展示会で会う。あちらには思惑がある。第一視点は自分があっちの思惑に気づいていることを気づかれないようにしている。第三視点は城を遠くから見ている。時代がズレているか、混ざり合っている。

  1. トップ
  2. dream
  3. 夢 : RPG 黒 Yシャツガール

現実逃避したくなってきた。12-03 で放置してるキャラが40歳 (2005-09-24 + 7 * 10) だからとりあえずログインするだけしてみるかとか考えつつ、ログインしてもやることないなぁと思ったりするんです。

公式ページからログインしてギルドのアレを見つつ、あー精霊武器とか実装されてんのかーみたいな。でもあれって普通にめんどくさいよなぁ。よなぁ。ハンディクラフトぐらいかなぁ。

  1. トップ
  2. game
  3. mabinogi 12-03
  1. トップ
  2. mabinogi
  3. mabinogi 12-03

前に書いた気がするけど、ECMAScript の var は Io の setSlot に似ている。

var foo; と書くと、既存のスコープの変数オブジェクトのプロパティに foo が作られる。そして foo = "1"; を書くと、スコープチェインの最初に、作られた foo プロパティを発見するため、そこに代入される。

一方 foo = "1";var 無しにいきなり書いた場合、スコープチェインの末 Global オブジェクトにいきつき Global オブジェクトのプロパティに新たに勝手に foo が作られて代入される。

// Global Code の開始
// Scope Chain: [Global]
// Variable Object: Global
//----
// Variable Object (Global)
// のプロパティ foo に "foo" が代入される。
var foo = "foo";
// 上に同じ
var bar = "bar";
function foobar() {
// Function Code の開始
// 新たに Activation Object (=このコンテキストでのVariable Object) が作られる。
//   (このとき arguments プロパティが自動的にセットされる。)
// Scope Chain: [foobarActivationObj, Global]
//     foobarActivationObj は仮の名前で実際にはアクセスできない。
// Variable Object: foobarActivationObj
// Variable Object (foobarActivationObj)
// のプロパティ foo に "fbfb" が代入される。
var foo = "fbfb";
// Identifier があると Scope Chain を辿る。
// この場合最初の foobarActivationObj に foo を発見できる。
foo = "bfbf";
// この場合最初の foobarActivationObj に bar を発見できないため
// Scope Chain を辿り、Global で bar を発見する。
bar = "bzbz";
// この場合 Scope Chain をたどって、Global に行き着いても発見できないため
// 勝手に Global に baz プロパティを作る。
baz = "baz";
baz.foo = "foo";
with (baz) {
// with は Scope Chain の先頭に
// 指定オブジェクトを突っ込む
// Scope Chain : [baz, foobarActivationObj, Global]
foo = "bar";
// Variable Object は変わらない
var f = "!!!";
}
baz.foo; //=> "bar"
baz.f //=> undefined
f; //=> "!!!"
}
foobar();
foo; //=> "foo" 最初にグローバルで代入したまま
bar; //=> "bzbz" 書き換えられている
baz; //=> "baz" グローバルで一切でてきていないのに存在する

Io の場合 = (updateSlot) はスコープチェインに Identifier を発見できない場合例外が発生する。現在の変数オブジェクトのスロットに突っ込むときは := (setSlot) を使用する。Io は明確な決まりがあるんだけど、ECMAScript は曖昧。気が付くと Global オブジェクトにプロパティがだらだらできたりする。

微妙にわかりにくいのは、Global Code においての Variable Object が Global で、変数に this.foo というようにアクセスできるのに対し、Function Code の Variable Object には一切触れないこと

ときどき関数中で var a = b = c = 0; って書いているのを見かけるけど、この場合の b, c は Global オブジェクトのプロパティ (または途中であるならその変数オブジェクトのプロパティ) になる。var a, b, c; a = b = c = 0; とか書くのが正解。

Prototype Chain もそうだけど、「見えないオブジェクト」がいくつかあってなかなか怖い。

  1. トップ
  2. javascript
  3. ECMAScript での var
  1. トップ
  2. script
  3. ECMAScript での var
  1. トップ
  2. prog
  3. ECMAScript での var

each 使えないから最新の RC を試したんだけど、思ったより使えない。Event.observe って、もうちょっとクロスブラウザに考慮していると思ってた。

軽くテストスクリプト書いてごちゃごちゃやってた script.aculo.us の effects.js を使ってみたかっただけとかなんとか。

Event.observe で function (e) {} とか渡しても IE では e にイベントオブジェクトが入らない。

_observeAndCache: function(element, name, observer, useCapture) {
var eEvent = function () {
this.type            = window.event.type;
this.target          = window.event.srcElement;
this.currentTarget   = this;
this.clientX         = window.event.clientX;
this.clientY         = window.event.clientY;
this.pageX           = document.body.scrollLeft + window.event.clientX;
this.pageY           = document.body.scrollTop + window.event.clientY;
this.shiftKey        = window.event.shiftKey;
this.altKey          = window.event.altKey;
this.ctrlKey         = window.event.ctrlKey;
this.which           = window.event.keyCode;
this.stopPropagation = function() { window.event.cancelBubble = true }
this.preventDefault  = function() { window.event.returnValue = false }
}
if (!this.observers) this.observers = [];
if (element.addEventListener) {
this.observers.push([element, name, observer, useCapture]);
element.addEventListener(name, observer, useCapture);
} else if (element.attachEvent) {
this.observers.push([element, name, observer, useCapture]);
element.attachEvent('on' + name, function () {
observer(new eEvent());
});
}
},

みたいに prototype.js を直接書き変えて使ってみた。けど、なんか楽しくない。

なんかわくわくしない。つまらない。

ちなみに prototype.js における each の break, continue の実装は、あらかじめ $break$continue にオブジェクトを代入しておいて、それを投げるというものだった。なるほど文字列投げるよりこっちのほうがいいな。

[1, 2, 3, 4, 2, 6].collect(function (v, i) {
if (v == 2) throw $continue;
if (i > 4) throw $break;
return v;
}); //=> [1, 3, 4]

なんで _each を定義させるんだろうと思っていたけどこれのためだね。_eachEnumerable.each からのみ呼び出される。Enumerable の各メソッドは each を使用する。

each_with_index 相当がねぇよとか思ったけど、each 自体がその役目を負ってる。[1].each(function (value, index) {}) とかける。

あー Event.element とか使うのか。

  1. トップ
  2. javacript
  3. prototype.js
  1. トップ
  2. ajax
  3. prototype.js

$H()inspect() の組み合わせが微妙に便利だ。普通の object って toString() しても [object Object] とかになって中身がわからんから、$H(obj).inspect() とかやると中身が見れて便利。

Object.prototype.p = function () {
var t = Object.inspect(this);
if (t == "[object Object]")
t = $H(this).inspect().replace(/^#<Hash/, "#<Object");
if (navigator.userAgent.match(/Firefox/)) {
window.dump(t + "\n");
} else {
window.status = t;
}
return this;
};
({aa:"aabb"}).p().aa.p().replace(/^a/, "b").p();
//=> #<Object:{'aa': 'aa'}>
//   'aabb'
//   'babb'
  1. トップ
  2. javascript
  3. prototype.js .inspect $H()
  1. トップ
  2. prototype
  3. prototype.js .inspect $H()

先に UI 作ったほうがやる気が出る。さきに機能を実装すると UI 作るのが面倒くさくなって UI がおろそかになる。そして UI が悪いものはいくら内部実装がかっこよくても使わない。

  1. トップ
  2. prog
  3. UI -> 機能

NULL::colors2 飽きるまでいぢる。

とりあえず、クッキーからの自動復帰を適当に実装。無駄に JSON 使ってる。このへん実装しなおすかもしれない。

んで URLハッシュからの復帰を実装。TCS のターゲット色と、プレビューエリアの4箇所8色 (前景・背景) を保存する。Result をクリックした後でてくる Static Link にリンクを貼ってある。要 UI 改良。ハッシュから復帰すると問答無用で Cookie がリセットされるのは挙動としてどうなんだ。

あとは、気に入った配色ができたら保存して、サムネイル付で読み込みできるようなのが欲しい。ついでに、コレ!ってのができたらサーバー上に保存しておくとか、そういうの。

Cookie ってどれぐらいの大きさまでいけるのかなぁ。

クッキーの最大サイズ制限について

  1. トップ
  2. color
  3. NULL::colors いろいろアップデート
  1. トップ
  2. web
  3. NULL::colors いろいろアップデート
  1. トップ
  2. design
  3. NULL::colors いろいろアップデート
  1. トップ
  2. javascript
  3. NULL::colors いろいろアップデート

NULL::colors2 飽きるまでいぢる。

でもってプレビューつきセーブ・ロードを実装。スロット9箇所。クッキーサイズが 2k ぐらいになるので調度よさげ。

Firefox 1.5 で outline が使えるようになったので使ってみた。既に Firefox 1.0.7 とか過去のもの扱い。だんだん俺の俺による俺のためのカラージェネレータに。最初はてきとーに作って放置する気だったけど微妙に自分でも使おうという気になってきた。

Result で明度差・色差と、WCAG1.0 による判定を表示するように。

上から3番目がコンテンツ本文なので、それが false でなければ気にしなくてもいいと思う。

  1. トップ
  2. color
  3. NULL::colors 色セットの保存
  1. トップ
  2. web
  3. NULL::colors 色セットの保存
  1. トップ
  2. design
  3. NULL::colors 色セットの保存
  1. トップ
  2. javascript
  3. NULL::colors 色セットの保存