:zeroviewを公開しました

Safari、iCab、OmniWeb、シイラなどのWebKitを用いているブラウザで使用できるブックマークレット、[0]:zeroviewを公開しました。

[0]:zeroview

ブックマークレットを起動すると、ページ(body要素)を縮小します。

縮小されたページの上にウインドウサイズを示す枠が表示されますので、この枠を見たい場所に合わせてクリックすると、ページの拡大率が元に戻って枠を合わせた位置を表示します。

ブックマークバーの左側に追加すると、Command+数字キーで起動することができます。tumblrやFlickrなどの縦に長いページのナビゲーションに使うといいかもしれません。

使い方は以下の動画を見てください。


D

Adobe系アプリケーションのCommand+0が全体表示するところから、[0]:zeroview(ゼロビュー)という名称にしています。

実はこの表示、Nokia E61などのS60 WebKitブラウザにはアニメーションこそないものの、標準搭載されていて、表示領域の小さな携帯電話ではとても重宝している機能です。

技術情報

ページの縮小表示アニメーションにはWebKitで実装されているCSS AnimationCSS Transitionsを用いています。そのため、FirefoxやOperaでは[0]:zeroviewは動作しません。

スクロールが若干もたつきますが、これは通常のJavascriptを用いています。

将来の予定

[0]:zeroviewはiPhone 2.0でもサポートされているCSS AnimationCSS Transitionsによるユーザーインターフェイスのテストと、CSS AnimationCSS 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を実装します。

バグフィックス

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

%d人のブロガーが「いいね」をつけました。