よくメニューがスクロールと一緒にくっついてくる、あれです。



<a href="http://www.110chang.com/lab/scrollchaser/">サンプル</a>

# Element.offsetTopというプロパティ

この機能を作るにあたっては移動する要素の`body`上の位置を取得することが必要です。`offsetTop`（並びに`offsetLeft`、`offsetHeight`、`offsetWidth`、`offsetParent`）はIE5の時に独自に拡張されたプロパティで、他のブラウザも追随して実装したようです。渡りに船のようなプロパティですが、これがブラウザごとにまるで解釈が違うと言うとんでもない厄介者でした。

<a href="http://d.hatena.ne.jp/susie-t/20061004/1159942798">offsetTop/offsetLeft/offsetParentの闇</a>でかなり掘り下げて検証されているのですが（引用しといて失礼な話ですが、正直な所、じっくり読む気にはなりません・・）、例えば、IE6では指定要素の親要素から何pxオフセット（？）しているかを返しますが、Firefoxでは`body`要素からの値を返します。

実は、これは<a href="http://mootools.net/">mootools</a>などのJavaScriptライブラリを使うとそのための関数とかあったりします。が、今回は勉強のために自力でやってみますた！！！

<del datetime="2008-02-12T00:00:00+09:00">コード中のgetTop()という関数がそれです。関数が呼び出されるとbodyに到達するまでtopにoffsetTopを加え続けます。しかし、どうもbodyのmargin指定があるときうまく取得できないんですよねー。ここはbody{ margin: 0 }が前提と言うことで・・</del><ins datetime="2008-02-12T00:00:00+09:00">IEだとエラーが出て動かない。先にposition="absolute"を指定すればoffsetParentがHTML要素になるのでその方法で回避することにした。→<a href="http://www.110chang.com/blog/2008/02/divjavascript_1.html">div要素などをスクロールに追随させるjavascript【その２】</a></ins>

# IE6はDTDがxhtmlだとbody.onscrollが動かない

`attachEvent`で回避。

# IE6だとホイールでスクロールしたとき動きが変

FirefoxやSafariだとスクロールバーをドラッグしても、ホイールでスクロールしても、要素がスムースに動くんですが（`scrollTop`をターゲットに収束させている）、IE6がこれを無視しやがるので`onmousewheel`イベントを使って直した気になってた。

今見ると`onscroll`でも`onmousewheel`でもスムースに動く時とぎこちない時があるようなので`onscroll`のみにした。

# 内容とは直接関係ないけど、JavaScriptでクラスっぽいの作るのって難しいな

ActionScriptでクラス化する書き方はだいぶ分かってきたんだけど、JavaScriptは明示的なクラスがないのでどうもよくわからん。ホントは

```js
var sc = new ScrollChaser('side')
```

とか、引数を渡すだけでいいようにしたいんだけどな。隠蔽できるようにがんばる。

```js
//
// scrollchaser.js
//
// 2008.2.4
//
var el;
var initTop;
var interval = 200;
//
function setting()
{
	el = document.getElementById('side');
	initTop = el.offsetTop||getTop( { el:el } );
	el.style.position = 'absolute';
	try {
		window.addEventListener('scroll', scrollEvent, false);
	} catch (e) {
		window.attachEvent('onscroll',scrollEvent);
	}
}
function scrollEvent()
{
	var myInt = setInterval(function()
		{
			var cur = (document.body.scrollTop||document.documentElement.scrollTop)+20;
			var myTop = el.offsetTop||getTop( { el:el } );
			var d = cur-myTop;
			if(Math.abs(d)>1) {
				if( cur >= initTop )
				{
					var y = myTop + d/3;
					el.style.top = setPx(y);
				} else {
					el.style.top = setPx(initTop);
					clearInterval(myInt);
				}
			} else {
				el.style.top = setPx(cur);
				clearInterval(myInt);
			}
		},interval);
}
function getTop( args )
{
	var el = args.el;
	var tagName = el.tagName;
	var top = args.top||0;
	if(tagName=='body'||tagName=='BODY')
	{
		return top;
	} else {
		return arguments.callee( { el:el.offsetParent, top:top += el.offsetTop } );
	}
}
function setPx( num )
{
	return num+'px';
}
try {
 window.addEventListener('load', setting, false);
} catch (e) {
 window.attachEvent('onload', setting);
}
```

div要素などをスクロールに追随させるJavaScript

今週めっちゃ忙しいんだけど、合間を縫って税務署行ってきた。仕事上はこれといって変わったことはないけど、がんばって課税所得を低くしてみる。複式簿記も<a href="http://www.magrex.co.jp/products/aomac/index.html">Macの青色申告４</a>でやってみる。

手続きは至極簡単で、書類を２枚、所轄の税務署に提出するだけ。

個人事業の開廃業等届出書

屋号は「ziyotoy.net」にしました。ホントはサイトも作りたいんですけどね・・迷ったのは次の３つの項目。

【納税地】 
『該当するものを○で囲んでください』って書いてあるけど囲まなくていいらしい。

【届け出の区分】 
新規開業の場合は「開業」に丸をするだけでいいらしい。

【給与等の支払の状況】 
「自分以外の従業員の給与」と解釈して０人（無記入）にしたのですが、それで良いようです。よくわからん。

所得税の青色申告承認申請書

【事業所又は所得の基因となる資産の名称及びその所在地（・・ほげほげ・・）】 
ここは屋号と住所らしい。

【備付帳簿名】 
「参考事項」です。ググったら最低限「総勘定元帳」と「仕訳帳」が必要って書いてあったのでそう書いて持って行った。実際どうなんでしょ。入力は振替伝票でやってるから振替伝票も要るのかな。売掛があるから売掛帳も要るのかな。

なんかいい加減ですね。手続きよりも、大変なのは今年の申告の時かな。複式簿記について何もわかってないからな。ソフト頼み。

ところで去年、住民税が４倍になってブーブー文句言ってたんだけど、節税に関しては個人事業主の方が断然有利みたいですね。上に書いたように青色申告もあるし、経費も計上できるし。使えるものはガンガン使って行きますです。

<a href="http://www.motoharusumi.com/jobs/freelance/scheme_for_tax_avoidance_for_small_business.html">零細企業経営者・個人事業主のための凄い節税対策</a>

個人事業の開廃業等届出書と所得税の青色申告承認申請書を出してきた

さよならWindows、あるいはDOS/V機と言った方がいいのか。 <a href="http://www.vmware.com/jp/">VMWare FUSION</a> でWindowsをMac上で仮想化。

VMWare FUSIONとWinodws XP Professionalを買ってきてVMWareをインスコしてVMWare上でWindows XPをインスコするだけ。

今年はそろそろVISTA+IE7環境も用意しないといけないので、昨年からBootCampとか<a href="http://www.proton.co.jp/products/parallels3-mac/">Parallels</a>とか、マシンは１台なのか２台なのかとか悩んでいたわけですが、ParallelsのVISTA対応が自信なさげだったのでVMWareにしてみた。

仕事上は、IEのチェックとOffice書類のプレビューができれば、Windowsを使う必要はないので、しばらく使ってみて問題なかったら新しいMacBookProを買ってOSX+XP+VISTAのオールインワン環境にしてしまう予定。ていうか、何の問題もないと思っている。

<img alt="vmware_1.png" src="vmware_1.png" width="450" height="408" /> 
インストール開始。実はOSをインストールするのは初めてだったりする。

<img alt="vmware_2.png" src="vmware_2.png" width="450" height="281" /> 
Windowsっぽくなってきた（謎

<img alt="vmware_3.png" src="vmware_3.png" width="450" height="408" /> 
起動しますた！！！

<img alt="vmware_5.png" src="vmware_5.png" width="450" height="281" /> 
全画面表示。上にMacのインターフェースが表示されています。

<img alt="vmware_6.png" src="vmware_6.png" width="450" height="281" /> 
ユニティ表示。Macの中でInternet Explorerが起動しています。

<img alt="vmware_7.png" src="vmware_7.png" width="450" height="138" /> 
Quick Silver（Mac用ランチャー）からも起動できます。

文字入力は「ひらがな」と「半角英数」以外のIMEモードにするときに言語バーをクリックしないといけないけど、Windowsでタイプする必要はないので無問題。両方のOSをばりばり使う人は文字入力には注意した方がいいかも。

仮想化Windows上からMacのファイルを参照することも可能です。もしかしたら文字化けとかする場合もあるかも知れませんが今の所問題なし。

隣にあるVAIOノートが無くなると、それはそれで淋しい気もするが。出来の悪いやつほどかわいいって言うしね！

出会った頃はこんな日が来るとは思わなかったけど、君のことはずっと忘れない

<a href="http://www.110chang.com/lab/scratch/index.html"><img alt="scratch_flash.jpg" src="/legacy/images/scratch_flash.jpg" width="450" height="300" /></a>

<a href="http://www.110chang.com/lab/scratch/index.html">スクラッチのテスト</a>



flaファイル側で、親のMovieClipとマスク対象のMovieClipを指定してScratchクラスのクラスインスタンスを作成、createメソッドでattachするブラシのシンボルリンケージとブラシの最小サイズを指定してマスクを開始します。

scratch.fla

```js
var scratch = new Scratch( _root, target_mc );
scratch.create("BRUSH",30);
```

<img alt="scratch_lib.jpg" src="/legacy/images/scratch_lib.jpg" width="450" height="328" />

ブラシはこんな感じで不整形にしておくといいと思う。

クラス内部では主にattachしたマスクをポインタ（マウス）の動きに合わせて変形する処理をしています。現在のポインタ位置と１フレーム前のポインタ位置から距離と角度を計算して、

* マスクの幅＝ポインタの移動距離
* マスクの角度＝ポインタの移動角度

としています。また、より「らしさ」を演出するために

* 速度が20px以下の時はマスク描画しない
* 一定速度以上のときはマスクの幅を広げる

処理をしています。

最後のdrawSightはおまけでブラシの大きさを矩形で表示します。

Scratch.as

```js
import flash.geom.Point
class Scratch extends MovieClip
{
 private var mc:MovieClip;//_root
 private var tar_mc:MovieClip;//マスクの対象
 private var mask_mc:MovieClip;//マスク自身
 private var linkage:String;//ブラシのリンケージシンボル
 private var size:Number;//ブラシの最小サイズ
 //
 function Scratch(_mc:MovieClip,_tar:MovieClip)
 {
 mc=_mc;
 tar_mc=_tar;
 }
 public function create(_linkage:String,_size:Number):Void
 {
 linkage=_linkage;
 size=_size;
 mask_mc = mc.createEmptyMovieClip("mask_mc",mc.getNextHighestDepth());
 tar_mc.setMask( mask_mc );
 beginDraw(drawMask,this);
 }
 public function resetMask():Void
 {
 mask_mc.removeMovieClip();
 mask_mc = mc.createEmptyMovieClip("mask_mc",mc.getNextHighestDepth());
 tar_mc.setMask( mask_mc );
 beginDraw(drawMask,this);
 }
 private function beginDraw(callback:Function,scope:Scratch):Void
 {
 var id:Number;//一意の番号
 var cur = new Point( mc._xmouse, mc._ymouse );//現在のポインタ位置
 var old = new Point( mc._xmouse, mc._ymouse );//１フレーム前のポインタ位置
 mc.onEnterFrame = function()
 {
 id = getTimer();
 cur = new Point( this._xmouse, this._ymouse );
 var sx:Number = cur.x-old.x;//X軸速度
 var sy:Number = cur.y-old.y;//Y軸速度
 if( Math.abs(sx)>20||Math.abs(sy)>20 )
 {
 callback.call(scope,old,cur,sx,sy,id);
 }
 old = new Point( this._xmouse, this._ymouse );
 }
 drawSight(mc);
 }
 private function drawMask(cur:Point,old:Point,sx:Number,sy:Number,id:Number):Void
 {
 var piece_mc:MovieClip = mask_mc.attachMovie(linkage,
 "piece_"+id+"_mc",
 mask_mc.getNextHighestDepth()
 );
 var r:Number = Math.atan2(sy, sx);//ポインタの移動角度（ラジアン）
 var a:Number = r*180/Math.PI;//ポインタの移動角度（°）
 var d:Number = Math.sqrt(sx*sx+sy*sy);//ポインタの移動距離
 piece_mc._x = cur.x;
 piece_mc._y = cur.y;
 piece_mc._width = (d>size)?d:size;
 piece_mc._height = (d/5>size)?d/5:size;
 piece_mc._rotation = a;
 }
 private function drawSight(scope:MovieClip)
 {
 var sight_mc:MovieClip = mc.createEmptyMovieClip("sight_mc",mc.getNextHighestDepth());
 sight_mc.lineStyle(1,0x99FFFF,50,true,"normal","none","miter",1);
 sight_mc.moveTo(-size/2,-size/2);
 sight_mc.lineTo(-size/2,size/2);
 sight_mc.lineTo(size/2,size/2);
 sight_mc.lineTo(size/2,-size/2);
 sight_mc.lineTo(-size/2,-size/2);
 //
 sight_mc.onEnterFrame = function()
 {
 this._x = scope._xmouse;
 this._y = scope._ymouse;
 }
 }
}
```

FLASHでスクラッチカードっぽいもの

今日やっと出してきた。今年は返信のみです。

<img alt="IMG_2635.jpg" src="/legacy/images/IMG_2635.jpg" width="450" height="337" />



<a href="http://www.linotype.com/13205/din1451mittelschrift-font.html">MittelSchrift</a>を購入しました。気に入ったので、ことあるごとに使っています。

<img alt="IMG_2630.jpg" src="/legacy/images/IMG_2630.jpg" width="450" height="337" />

この部分だけ「<a href="http://www.hinodewashi.co.jp/">はんけしくん</a>」で作りました。昨年のクリパのプレゼント交換でもらったものです。

<img alt="IMG_2638.jpg" src="/legacy/images/IMG_2638.jpg" width="450" height="337" />

「元旦」を無駄に押しまくってみた。

2008年の年賀状

いずみのしょう１ねん３くみ　しヽとぅ　ゅぅし〃

<a href="http://www.110chang.com/lab/blur/index.html"><img alt="a_happy_new_year_2008.png" src="/legacy/images/a_happy_new_year_2008.png" width="450" height="225" /></a>

<a href="http://www.110chang.com/lab/blur/index.html">http://www.110chang.com/lab/blur/index.html</a>



ふらっしゆをつかって、2008ねんのあいちつをひよううし”しました。
グロフイルターというあたらしい、きのうおつかつてみました。
とまってぃるときでも、さよつとチカチカしたり、ちよっとパーちくるが出るとおころ工ふうしました
おとうさんはてつだつてくれませでした。

Archive for 2008

div要素などをスクロールに追随させるJavaScript

個人事業の開廃業等届出書と所得税の青色申告承認申請書を出してきた

出会った頃はこんな日が来るとは思わなかったけど、君のことはずっと忘れない

FLASHでスクラッチカードっぽいもの

2008年の年賀状

ふゆやすみのじゆうけんきゅう