:zeroviewを公開しました - Underconstruction by Taiyo

Safari、iCab、OmniWeb、シイラなどのWebKitを用いているブラウザで使用できるブックマークレット、[0]:zeroviewを公開しました。
[0]:zeroview
ブックマークレットを起動すると、ページ（body要素）を縮小します。
縮小されたページの上にウインドウサイズを示す枠が表示されますので、この枠を見たい場所に合わせてクリックすると、ページの拡大率が元に戻って枠を合わせた位置を表示します。
ブックマークバーの左側に追加すると、Command＋数字キーで起動することができます。tumblrやFlickrなどの縦に長いページのナビゲーションに使うといいかもしれません。
使い方は以下の動画を見てください。

Adobe系アプリケーションのCommand+0が全体表示するところから、[0]:zeroview（ゼロビュー）という名称にしています。
実はこの表示、Nokia E61などのS60 WebKitブラウザにはアニメーションこそないものの、標準搭載されていて、表示領域の小さな携帯電話ではとても重宝している機能です。

技術情報

ページの縮小表示アニメーションにはWebKitで実装されている~~CSS Animation~~CSS Transitionsを用いています。そのため、FirefoxやOperaでは[0]:zeroviewは動作しません。
スクロールが若干もたつきますが、これは通常のJavascriptを用いています。

将来の予定

[0]:zeroviewはiPhone 2.0でもサポートされている~~CSS Animation~~CSS Transitionsによるユーザーインターフェイスのテストと、~~CSS Animation~~CSS TransitionsのバグをAppleに報告するためのサンプルを兼ねて作成したのですが、使ってみるとこれがなかなか気持ちいいので左右の余白スペースに情報表示などを行ってみようかと考えています。
グリモンの勉強にも使ってみようかな。
CSS Animationといい、SQL APIといい、Safari楽しいよ。

自分で登録

Digg - [0]:zeroview (Safari's CSS Animation)

追記

ソースを整理して掲載。
CSS AnimationのトリガーをJavascriptで引くには、属性を付与するだけで良い。

javascript:
//Variables
var target = document.body;
var target_height = window.innerHeight;
var original_page_height = <del>target.offsetHeight</del><ins>target.scrollHeight</ins>;
var original_page_scroll = window.pageYOffset;
var orgiginal_page_width = <del>target.offsetWidth</del><ins>target.scrollWidth</ins>;

//Calculating scale
var target_scale = Math.max(target_height/original_page_height, 0.2);

//CSS Animation
target.style.webkitTransition = '-webkit-transform 0.5s ease-in';
target.style.webkitTransformOrigin = orgiginal_page_width / 2 + 'px 0';

//Scrolling to top
goSmooth = setInterval('go_smooth(0)', 10);
setTimeout('stop_scroll\(0\)', 500);

//Creating target frame
var target_frame = document.createElement('div');
target_frame.style.position= 'absolute';
target_frame.style.width = orgiginal_page_width + 'px';
target_frame.style.height = target_height + 'px';
target_frame.style.top = original_page_scroll + 'px';
target_frame.style.border = 'solid ' + 2/target_scale + 'px rgb(40, 20, 10)';
target_frame.style.backgroundColor= 'rgba(255, 120, 10, 0.2)';
target_frame.style.zIndex = '99999';
target_frame.style.webkitBorderRadius = 5 / target_scale + 'px';
target.appendChild(target_frame);
target.Target_frame = target_frame;

//Webkit scaling CSS to target frame
target.style.webkitTransform = 'scale('+target_scale+')';

//Adding event for recovering normal view
target.Target_frame.addEventListener('click', function(e){reset(e, target_scale)}, true);
target.addEventListener('mousemove', function(e){moveTarget(e, target_scale);}, true);

//Recovering page view style
function reset(e, target_scale){
	var target=document.body;
	var scrollY = t_frame=document.body.Target_frame.style.top.replace('px','');
	document.body.removeChild(target_frame);
	
	//CSS Animation for recovering
	target.style.webkitTransform = 'scale(1)';
	goSmooth = setInterval('go_smooth('+scrollY+')', 10);
	setTimeout('stop_scroll\('+scrollY+'\)', 500);
	target.removeEventListener('mousemove', function(e){moveTarget(e, target_scale);}, true );
	e.stopPropagation();
}

//Target frame mover
function moveTarget(e, target_scale){
	var page_offset=window.pageYOffset;
	var t_frame　=　document.body.Target_frame;
	var t_frame_height　=　document.body.Target_frame.offsetHeight;
	var pageHeight = <del>target.offsetHeight</del><ins>target.scrollHeight</ins>;
	var topHeight = (e.clientY / target_scale) - (t_frame_height / 2) + (page_offset / target_scale);
	if(topHeight < 0)topHeight = 0;
	if( (topHeight + t_frame_height) > pageHeight)topHeight = pageHeight - t_frame_height;
	t_frame.style.top = topHeight + 'px';
}

//Scrolling functions
function go_smooth(goal){
	var page_offset=window.pageYOffset;
	var increment = (goal - page_offset) / 50;
	if(increment > goal){
		increment = 0;
		clearInterval(goSmooth);
	}
	window.scrollBy(0, increment);
}

function stop_scroll(goal){
	clearInterval(goSmooth);
	window.scrollTo(0, goal);
}

勘違いしてた

id:vantguardeさんのブクマコメント

拡大するのはCSS AnimationじゃなくてCSS Transform/Transitionかなと。

すっかり勘違いしてました。CSS TransitionはCSS Animationに含まれるわけじゃないのですね。
CSS Animation
CSS Transitions
というわけで、このページで書いてあるCSS AnimationはCSS Transitionsとなります。
んで、次回アップデートでホンモノのCSS Animationを実装します。

バグフィックス

[0]:zeroviewのバグフィックス - Underconstruction by Taiyo@hatena

昨日登録した方は、ブックマークレットを更新して下さいませ。