Wikipedia

スクロールバー

スクロールバー（英: scroll bar）は、主にウィンドウシステムにおいて単一のウインドウ内で収まりきらない情報の部分領域だけ表示し、必要に応じて表示領域を移動するためのGUIパーツ（ウィジェット）のことをいう。縦（垂直）方向と横（水平）方向の二種類があり、前者を単にスクロールバー（或いは垂直スクロールバー）、後者を横スクロールバー（水平スクロールバー）などと呼ぶ。なおスクロールバーはユーザ側からみた呼び名で、プログラム上ではスクローラー（英: scroller）と呼ばれる場合がある[1]。

スクロールの原義は「巻物」のことである。画面を移動する操作が巻物を巻き上げる様子に似ている事から、スクロールと呼ばれるようになった。

概要 編集

 

名称と操作 編集

スクロールバーは複数のパーツからなる複合コンポーネントである。

つまみ（ノブ）
いわゆる「つまみ」。現在表示されている位置や、全体に占める割合などを示す。ノブをドラッグすると表示領域を移動する事ができる。この時内容がリアルタイムで更新される場合（ライブスクロール）と、ノブを放した時に更新される場合がある。
米国などではつまみのバー（棒）をサム (英: thumb) ともいう。このサムには異なる名称があり、Macintoshでは「スクローラー」と呼ばれている。JavaプラットフォームのAWTやSwing、JavaFXでは「バブル」「サム」「スクロールボックス」または「ノブ」[2] [3] [4]、マイクロソフトのMSDNドキュメントでは「スクロールボックス」「サム」「スクロールサム」と称する[5] [6] [7] [8]。他には、「エレベーター」、「クイント」、「パック」、「ワイパー」または「グリップ」とも呼ばれる[要出典]。
矢印（アロー）
上下（左右）の矢印で、クリックするとその方向にノブが1単位移動する。移動量はおおむねテキスト1行である。多くはボタンを押し続けると連続移動を行なう（リピートボタン）。アローの配置には2つの流儀があり、スクロールバーの両端に分かれて配置される場合と、一方の端にそろえて配置される[注釈 1]場合に分かれる。前者の配置は「ノブを上下左右に移動させたい場合は上下左右それぞれの端にあるアローを操作する」という表現となっており、直感的で自然であるが、後者の集中配置型のほうがアロー間の距離が近くなるため、マウス移動の効率は良い。
本体
スクロールバーの本体はノブとアローを適切に配置し、制御している。この部分をクリックするとページ量が充分な場合は、おおむねテキスト1ページ移動する。「Shift」キーを押しながら本体部分をクリックすると、クリックした地点にノブが移動する。ページの一番上から一番下に一気に移動するときは「Shift」を押しながら、矢印（下向き）の少し上を押す。

スクロールバーの配置 編集

スクロールバー本体はウインドウ内の右と下にそれぞれ垂直、水平のバーが置かれるケースが一般的である。この配置はXerox Starで最初に採用され[9]、初期のApple Macintoshから普及した[要出典]。対象となるウィンドウに対して常にスクロールバーが表示されるモードだけでなく、コンテンツのサイズがウィンドウのサイズを超えた場合にのみスクロールバーが自動で表示されるモードもある[注釈 2]。

他にも次のような配置や挙動のパターンがある。

垂直スクロールバーを左側に置くパターン 編集

本記事が対象とするウィジェットとしてのスクロールバー[注釈 3]自体はアラン・ケイらが開発した暫定ダイナブック環境（Altoで動作するSmalltalk）においてウィジェットとしての“ペイン”（ウインドウ表示域を分割する区画）に付属するものとして初めて考案・実装されたものである[10](1976)が、この時点では左側に配置される（ただし後述のとおりウインドウやペインの表示域外に描かれる）方式が採用された[11]。

左側に配置することのメリットは、グラフィカルインターフェイス上の表現では重要な機能が左側に集中する事が多く、ポインタや視線の移動効率が良い点が挙げられる[注釈 4]。Smalltalk-76[12](1976)、-80[13](1981)等の古典的Smalltalk処理系のGUIの他にも初期のLispマシン（Symbolics Genera OS(1982)、Xerox Interlisp-D[14](1983)）やカーネギーメロン大学のAndrewシステム[15](1982)、Unix初のグラフィックターミナル（Blit(1982)）、NeXTSTEP(1988)のGUI等においてスクロールバーの左配置が採用されている。

これとは別に、アラビア語のように右から左に向かって記述する言語版のインターフェイスでは、左から右に向かって記述する他の言語との対称性に配慮して、スクロールバーは左側に配置されるのが一般的である。

なお、水平スクロールバーはほとんどの場合、下側に配置される傾向が強い。

状況に応じて追加描画されるパターン 編集

スクロールバーをウインドウやペイン内部に常時表示することはせず、マウスオーバー（あるいはタッチ操作であればスクロールのアクション）をフックして適宜描き足す場合がある。iOSデバイスやmacOS（OS X Mavericks以降）などを通じ徐々に普及しつつあるオーバーレイ描画のスクロールバーが本パターンに属する。

この方式には、ウインドウ内に固定されたスクロールバー表示領域をとらずにすむという画面効率上の利点がある。表示領域を節約する以外にも、画面表示をシンプルかつスタイリッシュに保つのにも役立つ。一方、トレードオフとして、スクロールバーが表示されない状態ではウインドウやペインがスクロール可能かどうかや全体に対して表示されている内容の割合がどれぐらいかが分からないといったデメリットも生じうる。

このパターンの歴史は古く、前述のとおりSmalltalkにおけるGUI初のスクロールバーは同様の方針（ただしオーバーレイ表示ではなく、当時のモノクロ二値表示でも実装が容易であったウインドウやペインの左脇に瞬時に描き足す方式）で実装されている。

インタフェースとしてのスクロールバー 編集

スクロールバーは画面の固定領域を占有し、また情報を覆い隠してしまうので、利用を可能な限り避けるべきである。とはいえ画面の大きさには限りがあり、必要な大きさが事前に分かっているケースはまれである。またホイールを使えば移動の補助は可能だが、全体の大きさや位置はやはり必要となる。

他に代替手段としては、3次元コンピュータグラフィックスの3Dビューなどにおいてマウスカーソルの移動やドラッグを活用したズームやパンにより全体を拡大縮小・移動するインタフェースなどが考案されている。

モバイルなどのタッチインターフェイス環境では、画面のスクロールは基本的にスワイプやフリックといった操作で行なうため、スクロールバーは単にドキュメント全体に対する現在の表示領域を示す目的で控えめに使われることが多い。

スクロールバーの装飾・意匠 編集

ウェブブラウザの中には、CSSによってスクロールバーの色や形状を変更することができるものが存在し、これを用いてウェブサイト側で独自にスクロールバーのデザインを設定している場合がある。

Internet Explorer（ver.5.5以降）における"(-ms-)scrollbar-○○○○-color"や、"::-webkit-scrollbar"の記述を用いたGoogle ChromeやSafari向けの記述が挙げられる。 たとえば、PC版Gmailの受信トレイページや、「Googleサイト」のサービスを使って開設されたウェブサイトなどを当該ブラウザで閲覧すると、独自デザインのスクロールバーとなる。

また、jQueryなどを用いてスマートフォンを含む全ブラウザ向けに独自デザインのスクロールバーを設定しているケースもある。

マウスとスクロールバー 編集

詳細は「マウス (コンピュータ)#ホイール」を参照

マウスによっては中央にホイール（回転する円盤）を配したものがあり（ホイールマウス）、1996年に発売されたのが最初で[16]、2015年時点ではホイールマウスが主流になっている[17]。ホイールを上下に回すことでページをスクロールできるほか、ホイールを中ボタンとしてクリックすることで、アプリケーションによってはオートスクロールモードに切り替わるものもある[18]。

チルト（横スクロール） 編集

マウスホイールに「チルト」機能が割り振られているものもある。これは、ホイールを左右に傾けることで水平スクロールする機能である。右左にスクロールすることを、右チルト、左チルトともいう。

脚注 編集

注釈 編集

  1. ^ Classic Mac OSでは「スマートスクロール」と呼ばれ、Mac OS 8.5から採用された。“スマートスクロール - 意味・説明・解説 : ASCII.jpデジタル用語辞典”. 2020年6月29日閲覧。
  2. ^ WPFのSystem.Windows.Controls.ScrollBarVisibility.Autoなど。
  3. ^ 「スクロールバー」と称した機構はAltoで動作する初のWYSIWYGワープロアプリとして知られるBravo(1974)にすでに存在したが、これはタブなどのギミックを有さず、単にマウスクリックによるスクロール操作（右クリックで下方向、左で上方向、中ボタンでジャンプ）を行なうための画面上の矩形区画に過ぎなかった。
  4. ^ ただし、Smalltalkの外付けスクロールバーに限っては、右側に配置すると右に隣接するペインの主要な情報を隠してしまうため左側に配置せざるをえなかったという制約がまず存在した。

出典 編集

  1. ^ Scroller - Adobe ActionScript® 3（AS3 Flex）API リファレンス
  2. ^ Scrollbar (Java Platform SE 6)
  3. ^ JScrollBar (Java Platform SE 6)
  4. ^ Using JavaFX UI Controls: Scroll Bar | JavaFX 2 Tutorials and Documentation
  5. ^ WM_VSCROLL message (Windows)
  6. ^ ScrollBar クラス (System.Windows.Forms)
  7. ^ ScrollBar クラス (System.Windows.Controls.Primitives)
  8. ^ Scroll Bar
  9. ^ A. Dix (1998年). “Sinister Scrollbar in the Xerox Star Xplained”. 2017年8月28日閲覧。
  10. ^ Bill Moggridge (2006). Designing Interactions. MIT Press. pp. 69-70. ISBN 978-0262134743 
  11. ^ How To Use the Smalltalk-76 System. Xerox Corporation. (October 1979). http://xeroxalto.computerhistory.org/Filene/Smalltalk-76/.document.press!1.pdf 
  12. ^ Daniel H. H. Ingalls. “The Smalltalk-76 Programming System: Design and Implementation”. 2017年8月28日閲覧。
  13. ^ Goldberg, Adele『Smalltalk-80: The Interactive Programming Environment』Addison-Wesley、1983年。ISBN 0-201-11372-4。 
  14. ^ Interlisp Reference Manual. Xerox Corporation. (October 1983). https://archive.org/details/bitsavers_xeroxinternceManualOct1983_52302609 2017年8月28日閲覧。 
  15. ^ W. J. Hansen (January 1987). “Data structures in a bit-mapped text editor”. Byte Magazine 12 (1). https://www.cs.cmu.edu/~wjh/papers/byte.html 2017年8月28日閲覧。. 
  16. ^ “米Microsoftが新しいポインティングデバイス「IntelliMouse」を11月に発売 マウスにローラーがついて新しいナビゲーションが可能に”. PC Watch. (1996年7月23日). https://pc.watch.impress.co.jp/docs/article/960723/intlms.htm 2015年8月23日閲覧。 
  17. ^ 価格.com - マウスの選び方
  18. ^ オート・スクロール・モードが利用できない場合の対処方法 － ＠IT

関連項目 編集

 

この項目は、コンピュータに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

「https://ja.wikipedia.org/w/index.php?title=スクロールバー&oldid=97474726」から取得