スクロール考察その３

FixScroll

スクロールに関して、いろいろな方が取り組んでいるので、それらを見て回ることにしました。何を問題に思って、どういう解決策を取っているのかを中心に見ていくことにします。

現在整理中。

スクロール系アドオンを比較してみた。まずはFirefoxから。

Yet Another Smooth Scrolling

タイプ：スムーズ系
特徴：細かい設定ができる。加速度も調整できる。

通常だとカタカタスクロールするのが不連続で見にくい。その解消の代表策。

fixed scroller anywhere

タイプ：スクロールボタン追加系
特徴：スクロールのページダウン/アップ、Home,Endのボタンを右側に表示する。

マウスが主なユーザにブラウザは不便。良く使う機能をまとめた。

Scrolling headers

タイプ：スクロール幅任意系
特徴：

過去バージョンのみのため、未確認。

Grab and Drag

タイプ：UI追加系、スムーズ系
特徴：Adobe Readerの手での文書のスクロール操作を再現。

ホイールがないマウスだと、スクロールが大変。直感的かつ、細かい動きと大きな動きに対応できるUIを追加。

ScrollyFox

タイプ：自動スクロール系
特徴：設定した速度でスクロールを行う。

操作が面倒。自動化。

NewScrollbars (aka NoiaScrollbars)

タイプ：ビジュアル変更系
特徴：mac風なスクロールバーに変更する。

ダサい。かっこよく。

Scroll to Top/Bottom

タイプ：スクロールボタン追加系
特徴：スクロールのHome,Endのボタンをツールバーに表示する。

マウスが主なユーザにブラウザは不便。良く使う機能をボタンに。


SnipeScroll(自作)

タイプ：スクロール幅任意系
特徴：好きな位置をページトップに表示する。

スクロール幅を場合によって調整できない。マウスの位置で自由に調整。

FixScroll(自作)

タイプ：表示変更系
特徴：スクロールする主体を変更。like ワイプ

文字が動く。表示エリアを動かして、文字を固定化。

同時に有効化した場合の競合を確認
  • fixed scroller anywhere：FixScrollしない。
  • Yet Another Smooth Scrolling：スムーズスクロールしない。
  • Grab and Drag：スクロールがおかしくなる。
  • ScrollyFox：表示がガタガタになる。
  • NewScrollbars：スクロールバーの表示幅が小さくなるため、表示エリアに空白ができる。

*1

番外

Find To Center

検索補助

FireFoxのページ内検索の検索対象を中央に表示するようにスクロールする。

*1:今のところ、ほとんどダメだった。。。

複数の同一のイベントリスナーの登録について調べた

javascript Firefox addon

FixScrollアドオンで、複数の同一のイベントリスナーを登録すると、複数回リスナーしない。（勘違いだったことが分かった）


EventTarget.addEventListener() - Web API | MDNを改めてみてみると以下のように記載してあり、そのとおりの動作をしていた。

複数の同一のイベントリスナー

複数の同一の EventListener が、同じ EventTarget に同じ引数で登録された場合、重複するインスタンスは反映されません。EventListener が 2 度呼び出されることはなく、重複するインスタンスは反映されないので、removeEventListener で手動で削除する必要はありません。


同一という文言がどこからどこまでなのか調べることにする。


環境はFirefox10.0のgBrowser上。

結果 記載のとおり。

listener部分が==であれば、2度呼び出されませんでした。

function hoge(){alert("hogehoge");}
var haveHandle ={
    handleEvent :function(aEvent) {
        switch (aEvent.type)
        {
            case 'command':
                alert("haveHandle");
        }
    }
}

という関数およびobjectをelement.id="button1"のlistenerにしました。

[OK] functionを直接listenerに指定（非推奨）
button1.addEventListener("command", hoge ,false);
button1.addEventListener("command", hoge ,false);
var onlyFunc = hoge == hoge;
Application.console.log("hoge == hoge -> " + onlyFunc);//true
[NG] function(){}内に関数指定してlistenerに指定（推奨）
button1.addEventListener("command", function(){hoge();},false);
button1.addEventListener("command", function(){hoge();},false);
var methodInFunc = function(){hoge();} == function(){hoge();};
Application.console.log("function(){hoge();} == function(){hoge();} -> " + methodInFunc);//false

こちらは2度呼び出されることになります。

[OK} objectをlistenerに指定
button1.addEventListener("command", haveHandle ,false);
button1.addEventListener("command", haveHandle ,false);
var objectNoChange = haveHandle == haveHandle;
Application.console.log("haveHandle == haveHandle -> " + objectNoChange);//true

FixScroll0.9をリリースしました。

FixScroll Firefox addon

またもバグフィックスのみですが、FullReviewで出たポイントと先日書いた処理が重くなる部分の修正となります。

修正内容
  • Fix judge to show page last bar.

ページ最下部のときに太いバーを表示するようにしたのですが、判定が甘かったので修正しました。

  • Fix not to slow down when you use "here to top" function several times.

こちらが処理が重くなる部分の修正。addEventListnerに同じObjectを突っ込んでいたら、複数Listnerがある状態になっていました。

-Fix 3 review points.(centering dialog, ID naming, Error massage)

指摘その１　以下のエラーメッセージが出る。

Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIWebNavigation.sessionHistory]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: chrome://global/content/bindings/browser.xml :: :: line 755" data: no]
Source file: chrome://global/content/bindings/browser.xml
Line: 762


原因はbrowser要素を作成していたのですが、Attribute「disablehistory」をtrueにし損ねていたため、sessionHistoryの処理に入りExceptionが飛んでいました。

指摘その２ ダイアログはセンタリングしなさい。

2) Your first run dialog and preferences dialog should be opened with the "centerscreen" option.

指摘その３ Global領域のIDはprefixをきちんとつけなさい。

3) Please prefix your globals and DOM IDs with FixScroll and fixscroll- respectively, rather than alternating with 'fxsl' and 'fxsl.'


当たり前ができてないのできちんと指摘していただき感謝です。


これからaddEventListenerを見てみます。

Not Working 解消しました。

SnipeScroll

しばらく触っていなかったら動かない状態になっていました。すいません。
しょうもないミスだったので、先ほど修正してReview申請しました。
（FixScrollと共存していない環境だとエラーになります。）

Review Queの42ぐらいだったので、早めにレビューされると思いますが、GitHub - ono4ji/SnipeScroll: Firefox addon scroll support念のためGithubにもアップしました。


あわせてFixScrollのソースをいじっていたら、相当に速度が遅くなる処理になっていたに気づいて修正しました。Javascriptへの認識が誤っていたのが原因です。お恥ずかしい限りですが共有すると、
element.addEventLister('XXXX', object);
を複数回した場合、objectが同じであれば複数登録されないと思っていましたが、誤りでした。どんどん追加されていく状態だったため、時間経過によってFirefoxが重くなるようになっていました。（ページリフレッシュでクリアされる。）他にも修正ポイントがあるため、早めに修正してリリースできるように進めていきます。eventListerの正しい仕様も調べて勉強して共有したいと思います。functionだと大丈夫？objectが同じという判定がグレイ？など。

2012/1/24 勘違いだったので削除

Google検索で表示ががたつく

FixScroll

Google検索で表示ががたがたずれるのが気になる。


FixScrollじゃなくてもブラウザの大きさを変更しても同じことが起きた。600pxぐらいを境目にしてコンテンツの行間の自動補正が入る様な感じ。FirefoxだけでなくChromeでも同様だった。


他のサイトでは同じ状況にはなっていないので、Google先生の作りのはず。CSSなのだろうが、まだ原因が突き止められず。

FixScroll0.8を再リリースしました。

FixScroll Firefox addon

変更点は１つです。


早速Adblock Plus アドオンに関わっているk2jpさんからフィードバックいただきまして、不具合がみつかりました。レビューいただいたり、変なところを見つけてもフィードバックいただけて本当に感謝です。ありがとうございます。

常時FixScrollモードのときに、複数タブだと他のタブ内の要素の影響でFirefoxのResizeがうまく働かなくなっていました。それにより、検索バーが中途半端に表示されたりしていました。

タブ遷移時に遷移前のタブを初期化することで修正できました。


なぜこんなことがおきるかというと、FixScrollではタブ内のBrowserと追加したCanvas要素を独自に位置・大きさを指定して表示しています。初期化していなかった時点では、Browserの位置・大きさが遷移前の状態で残ってしまい、他のタブでリサイズをしてもBrowserの位置・大きさ以下には変更できないようになっていました。


最新版は同じようにGitHub - ono4ji/fixscroll: 読みやすいスクロールを目指すFirefoxのアドオンにアップしました。