04 | 2017/05 |  06

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

Smooth Scroll の導入

それはSONYのHomepageを見て以来、ずっとやりたいことだった。

SONYのWebサイトでは既に数年前にSmooth Scroll(それをそう呼ぶと言うことを知ったのは今日であるが)を実現していた、と記憶している。その方法として window.scrollTo(x,y) メソッドを使っていることは疑いようもなかったが、どの様すれば Smooth Scroll が実現できるのか、それ以来、時々ふと思案したりしていた。(因みにSONYのWebsサイトからjsファイルはダウンロードできるが、Smooth Scrollを実現しているコードは見つけられなかった。)

スクロール済み座標値のその大きさに応じて、加速度的にスクロール速度を減らせば良いのだから、例えば何らかの幾何関数を使うのか、とまず考えた。しかし、それで加速度的にスクロール速度を減速できるだろうか?、否、setTimeoutに設定する時間間隔を加速度的に減らしていけば次第に動きは遅くなるが・・・とも考えた。入浴中にサインカーブを思い浮かべながらどうすれば良いのだろう、と考えたりもした。

そして今晩。

通常配置要素のoffset値取得問題が解決したので、次の課題としてSmooth Scrollを実現しようと意気込み、その方法を探るためにグーグったら、数日前に触れたあの「youmos」サイトがTopにヒットした。ここならば間違いなく欲しいものがあるだろうと期待して覗いてみたところ、期待に違わず、まさしくそこにはあるべき回答が存在した。感謝!youmos! Smooth Scroll して画面の上に戻るJavaScript - youmos

しかし、idを設定した要素に適用するのでは困る・・・

そこをクリックすれば「ページトップに戻る」仕掛けは多くのサイトで採用している。拙サイトでも随所にそれを設けているが、これまではいきなりページトップにジャンプする(window.scrollTo(0,0)メソッドに等しいAタグを用いた)原始的・古典的方法を採用していた。

だから、やっと欲しいものを手にした子供のような心境で、youmosで紹介されていた方法を早速検討したことは言うまでもない。

さて、それはHTML内の必要な要素内にその属性としてonclick="イベントハンドラー関数"を設置するのではなく、script内で全てを処理する手法によって書かれた素晴らしいコードなのだが、致命的だったのはid名を振った要素を対象としてイベントハンドラーを設置する仕様だったことだ。

「ページトップに戻る」機能は一つのページに複数設置することが多い。その全てに固有名とならざるを得ないidを振るのはいかにも面倒だ。願わくば同一の性格を有する(class名を振った)複数の要素に対して一律に必要な仕掛けを設置できることが好ましい。

▲ToTop

そこで固有のclass名を振った特定要素群に対して、ページトップにスクロールするイベントハンドラーを設置することにした

しかし、getElementById(ID)に類する「getElementsByClassName(CLASSNAME)」なるメソッドはDOMには存在しない。だからこそ、目的を達するための関数があれこれと作成されている。特定要素群に対して「ページトップへ戻る」イベントハンドラーを設置するには、まず特定のclass名を付した要素集合を、設定対象として取得できなければならない。Smooth Scroll実現のためには、まず適切な「getElementsByClassName()」関数をゲットしなければならない。

そしてそれもグーグって最適解を見いだした。

それはRobert’s talk内のThe Ultimate getElementsByClassName - Robert’s talkである。

それは「Ultimate」を自称するにふさわしい素晴らしいものだ。何故ならばDocument全体を対象にするだけではなく、対象要素群をページの任意の一部の任意のタグ名に絞り込むことが出来るからである。そのためここ:The Ultimate getElementsByClassName - Robert’s talkでダウンロードできるgetElementsByClassName関数は引数を3つ持つ。ページ内の任意の要素の塊、その中の任意の要素、そしてクラス名である。

このUltimateなgetElementsByClassName関数は、Document全体を走査する同目的の関数が多い中で、秀逸のものと言えるだろう。但し正規表現に係るバグが有るためそのままでは支障を来す場合がある。この点については後述する。

なお、グーグったもう一つの成果としてgetElementsByClassNameがFirefox3から実装されるらしいことが分かった。

Gecko に Web Applications 1.0 の getElementsByClassName メソッドが実装されました (Bug 357450)。Firefox 3 から使用可能になります。document.getElementsByClassName で文書全体から、または element.getElementsByClassName である要素の子孫要素から、特定のクラス名を含む要素を探し出すことができます。───getElementsByClassName on Gecko: Days on the Moon

▲ToTop

次に問題となるのはFc2ブログ固有の問題だ。

Fc2ブログではブロック変数を用いることにより、windowでload時の動作において、表示するContentsに応じて様々な使い分けが出来るため、Javascriptによるwindow.loadは使いにくい、という問題がある。

だからJavascriptコード内でwindow.loadはしないこととした。

また、特定のclass群を頁トップへのSmooth Scroll起動のイベントハンドラー設置対象にするためには、id要素を対象にした場合に較べてコードは複雑にならざるを得ないが、やむを得ず必要な改変を行った。

更に問題としたのはカクカク感の解消である。

オリジナル版のようにタイマーを使った使用にすると、たとえそれが1mm秒の設定であっても、どうしてもタイマー起動時にカクカクと動作することは否めない。そしてこれが気にくわない。もっとスムースにスクロールして欲しいのである。その名もSmooth Scrollなのだから・・・。

そのため、タイマーを使わずにSmooth Scrollを実現する方策を模索した。具体的にはふさわしい関数がないものかと検討を重ねた。

なかなかオリジナルで使われていた比較的単純な関数(y-y/const)より以上に適切なものを見いだせなかった。途中で投げ出して昨日(1日夜)は、結局タイマー仕様に戻してしまった。ところが、カクカク感が解消されない問題はずっと引っかかり続け、7/2にまたタイマーを使わない計算式に戻した。その時使用関数は、何とオリジナルそのものであり、constをあれこれ入れ替えてみて、一定値=80を選択して最終決着とした。

しかしどうも気にくわないので、エクセルで適当に表を作成しその近似曲線を求めて新たな関数を設定することにした。その関数を適用して現在はBackScrollしている。

スクロール速度はパソコンの性能や好みに依存するから、そもそもどのようなスクロールが「Smooth Scroll」と感じられるか、最も心地良いか、決定的に個人に依存するだろう。しかし私はこれが良い。

まだ問題はあった───それはゲットしたgetElementsByClassNameにバグがあったのだ。

class名は一般に複数指定されている場合がある。class="name1 name2"のようにだ。

ゲットしたUltimate getElementsByClassName には、複数名対応を考慮している式があるのだが、残念ながらそれが間違っている。

そのため、そのバグフィックスを考慮しなければならなかった。

なお、どこをどう修正したのかは下記のコード説明で行うことにする。

▲ToTop

任意のclassに適用するSmooth Scrollの完成

こうしてこのエントリイにも実装している頁トップへのSmooth Scrollを実現した(そのコードは以下の通り)。

またテンプレート(HTML及びCSS)においても、「頁トップへのSmooth Scrollイベントハンドラー設置箇所」に対して必要な修正を加えたので、過去にさかのぼって全てのエントリイに対して、Smooth Scrollを設置することが出来た。(こうしたことが出来るのも、テンプレートのテンプレートたる所以であり、ブログテンプレートの大きなメリットだ。)

▲ToTop

 

● コメント ●

smoothScroll (youmos)

記事を拝見させていただいて、
SmoothScrollのニーズはまだまだ存在すると思いました。以前サンプルで紹介したJavaScriptコードは、参考程度に作ったので、そのうち改めて作成してみます。


■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/505-f90a5995

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
200707010358
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。