Smalltalkのtは小文字です

id:sumim:about

Smalltalk を本格的に勉強する気はないけれど、うんちく程度に知っておきたいなら→Smalltalkをちょっとかじってみたい人のための、チュートリアルまとめ - Qiita

オブジェクト指向の“モヤッと”の正体を知りたくなったらこちらの記事が役に立つかも→id:sumim:20080415:p1 とか id:sumim:20040525:p1


 | 

2006-08-23

[] Mac のスクロールバーはいかにしてできあがったか


あるいは、両端の矢印+スクロールボックスからなる、現在主流のスクロールバーへの進化の道筋…というような話。


このブログにおいては今さら言うまでもないことですが、Mac の GUI(より正確には、その前身となる Lisa の GUI)は、完全なオリジナルというわけではなく、ALTO を暫定ダイナブックたらしめた Smalltalk の GUI を“たたき台”にして再デザインされたものです。その具体的なところは長らく謎だったのですが、近年、ビル・アトキンソンがいくつかの場所で公開した、Lisa の開発初期のプロトタイプのポラロイド写真により、その一部が明らかにされました。おおざっぱには、3ボタンだった ALTO+Smalltalk での GUI 操作をワンボタンで可能にするためのアレンジメント(もちろん、それ+α)が Lisa・Mac の GUI の特徴(ALTO+Smalltalk との違い)だと言えそうです。


たとえば、ウインドウの GUI デザイン(主にタイトルバーのウィジェット)についてなら、ALTO+Smalltalk(=暫定ダイナブック)でマウスの第三ボタンに割り当てられていたウインドウ操作のためのポップアップメニューの役割を、ウインドウに直に組み込んだのが Lisa・Mac の GUI だと説明できます。

http://squab.no-ip.com/collab/uploads/61/altowindowmenu.png

Smalltalk で第三ボタンクリック時にポップアップするメニュー

より具体的には、この第三ボタンメニューの、ウインドウの移動(move)、リサイズ(frame)、閉じる操作(close)、それぞれを、ウインドウタイトルバーのドラッグ操作、サイズボックス、クローズボックスの機能として割り振ったわけです(collapse=ウインドウのタイトル化 は、Lisa プロトで実装後、いったんは破棄されますが、後に、Mac で、ウインドウシェードとして復活します)。このような創意工夫により、Lisa 開発チームは、ALTO の(NLS から流用の…)3ボタンマウスからボタンをひとつ減らすことに成功します。ちなみに、Lisa プロトタイプは、いっとき、2ボタンマウスでした。さらに、プルダウンメニュー+メニューバーを発明し、これらに、今でいう右クリックでポップアップさせていたメニューを代替えさせることで、最終的にはワンボタン化を実現します(参考:id:sumim:20060510:p1)。


なお Windows のウインドウには、Mac 同様のウィジェットや機能割り振りだけでなく、Mac にはない、ALTO+Smalltalk での第三ボタンの機能をそのまま有するウインドウを操作するためのメニューが加えて別に設けられています。マウスの第二ボタン(右ボタン)クリックメニューも含め、これらは、(そうした機能を持たない Mac から…というよりは) Smalltalk GUI から“じかに”継承されたものだと考えるのが妥当でしょう。なんでもかんでも Mac から…というわけでもないのです。w


このように、ALTO+Smalltalk の知識を持って、Mac の GUI ができあがってゆく過程を見るのは、とても楽しいのですが、個人的に特に興味深かったのが、スクロールバーの変遷です。Smalltalk のスクロールバーと Lisa・Mac のスクロールバーは、見た目がたいへん異なります。両者の違いは、マウスのボタンを減らす過程で云々ということでは説明できません。そこで、Lisa・Mac のスクロールバーが、どのような経緯で Smalltalk のスクロールバーから変化して生じたのかを、アンディ・ハーツフェルドが書いた、次の文書を読み解きながら、そして、ビル・アトキンソンが撮影した Lisa のプロトタイプの映像を引用しつつ、たどってみることにしました。


なお、以下で取り上げる Smalltalk GUI については、Smalltalk-80 のものを前提にしていますので、1979 年にスティーブ・ジョブズたちが PARC を訪れて見た ALTO+Smalltalk システムにおいては、まだ、実装されていなかった機能も含まれている可能性があることを含みおきください。



第0段階:Smalltalk のスクロールバー

まず、ALTO+Smalltalk(=暫定ダイナブック。と、しつこく書くのは、ALTO には、大枠では有名な Star システムを含め、開発グループもルック&フィールも互いに異なる、いくつかの GUI ベースの OS があり、それらとは明確に区別したいからです。同じ ALTO でも、これらは Smalltalk GUI ほどには Mac GUI の成立にはかならずも寄与していません…)のスクロールバーについて。


もし興味があれば、Squeak システムには、まだ Smalltalk-80 だったころの GUI フレームワークが封じ込められているので、簡単な操作でこれを呼び起こして実際に使ってみることできます。具体的には、デスクトップメニューから、開く…(open...)→ MVCプロジェクト(mvc project)で、現われた小さなウインドウ(プロジェクトウインドウ)をクリック(enter 操作)して切り替えます。この GUI フレームワークでは、ウインドウのタイトルバーは Mac 風にアレンジされてしまっていますが、スクロールバーについては、ほぼ、昔のままを体験できます。くしくも、現在主流のホイールマウス(Mighty Mouse を含む…)では、実質、ALTO と同様に3ボタンとして当時のままの利用形態が再現できます。


この、レガシーな GUI フレームワークにおける Smalltalk のスクロールバーでは、ウインドウの左側にポップアップする機構が採用されていました。ウインドウからはみ出してポップアップするのは、限られた画素数を使用しないスクロールバーで占有してしまわないための配慮でしょう。また、ポップアップするのは、限られたマシンパワーの節約と同時に、アクティブなウインドウ(厳密には、さらにその中のアクティブなペイン=枠)を意識させるための配慮でもあるとも考えられます。

http://squab.no-ip.com/collab/uploads/61/altoscroll01.png

Smalltalk のスクロールバーの例

ところで、誰もが疑問に思う、なぜ右ではなく左側なのか…ということについては、実際に右側に付け替えてから、システムブラウザなど、カラム形式のアプリケーションを使ってみれば、すぐに分かります。一般に、ペインの表示内容は左寄せなので、スクロールバーがペイン右側にポップアップすると、右隣のペインの内容の主要な部分を覆い隠してしまい大変不便なのです。左側にポップアップなら、余白の多い右側を隠すだけなので、さほどの不都合は生じません。


http://squab.no-ip.com/collab/uploads/61/altoscrollleft.png

左側だと、左隣のペインの余白をうまく使える可能性が高い

http://squab.no-ip.com/collab/uploads/61/altoscrollright.png

右側だと、多くの場合、右隣のペインの主要な部分を隠してしまう

スクロールバーは縦に3つの領域に区分けされています。左右の領域が今でいうスクロールアロー、中央の領域がスクロールボックスとその可動範囲に相当する役割をはたします。

スクロールボックスにあたるグレイのボックスが、全体に対する表示範囲を反映した大きさに変化するのは、今の Mac や Windows のそれと同じです(ただし、Mac では長らく固定サイズでした)。なお、Mac や Windows では、スクロールバーの余白をクリックすることでページ送りが可能ですが、Smalltalk ではジャンプになります。

スクロールアローはありません。代わりに、左右の領域にマウスポインタを移動すると、それが上下の矢印に変化します(ただし、矢印の方向は Mac や Win などのそれとは逆で、内容が流れてゆく方向、つまり、表示したいものがある向きとは逆の方向を指します)。この領域でマウスボタンをクリック(あるいは、プレス)するとスクロールが断続(あるいは、連続)して行なわれるのですが、このとき、スクロールの速さはスクロールバー上端からの距離に比例します。

http://squab.no-ip.com/collab/uploads/61/altoscroll02.png

スクロールアローの機能を持つ両脇の領域でのマウスポインタの変化

さて、以上のような Smalltalk のスクロールバーのルック&フィールをふまえて、Lisa プロトタイプのスクロールバーの変遷(ひいては、Mac のスクロールバーが出来上がるまで…)をたどってみることにしましょう。


第1段階:Smalltalk タイプのスクロールバー

この頃は、ウインドウの移動すらままならなかったようですので、とりあえず、開発途上の GUI デザインを白紙に戻したうえで、PARC で見た ALTO+Smalltalk の記憶を頼りに見栄えを真似てみただけ…というのが実情でしょう。スクロールアローもなく、どうやら Smalltalk 同様、マウスポインタの形を変化させて対処していたようです。

http://squab.no-ip.com/collab/uploads/61/lisascrollbar01.png http://squab.no-ip.com/collab/uploads/61/lisascroll01.png


第2段階:スクロールアローの追加

ウインドウシステムが動作するようになり、上下にスクロールアローが追加されました。矢印の向きは、今とは逆、つまり Smalltalk と同じ(スクロール時にコンテンツが流れる向き)であったようです。

http://squab.no-ip.com/collab/uploads/61/lisascrollbar02.png http://squab.no-ip.com/collab/uploads/61/lisascroll02.png


第3段階:横方向スクロール

Smalltalk には横スクロールという概念がありませんでした(自動的に折り返さない表示では、隠れた部分へのアクセスの手段がない)。Lisa ではこれを克服するために、横方向のスクロールを担当するスクロールーアローの設置が試みられたようです。

http://squab.no-ip.com/collab/uploads/61/lisascrollbar03.png http://squab.no-ip.com/collab/uploads/61/lisascroll03.png


第4段階:右側への移動(横方向スクロールバーとサイズボックスの追加)

矢印だけでなく、フルスペックのスクロールバーが横方向スクロールのため設置されるのには、さほど時間はかからなかったでしょう。サイズボックスの設置に伴い、縦方向スクロールのためのスクロールバーも右側に移動します。こうして、Lisa・Mac、ひいては現在主流のスクロールバーを備えたウインドウデザインが完成します。矢印の向きが改められたのは、比較的あとになってからだということも分かり、面白いですね。

http://squab.no-ip.com/collab/uploads/61/lisascrollbar04.png http://squab.no-ip.com/collab/uploads/61/lisascroll04.png



参考文献

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

 | 
2004 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 08 | 10 | 12 |
2013 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 11 | 12 |
2014 | 01 | 02 | 05 | 07 | 08 | 09 | 10 | 11 |
2015 | 04 | 07 | 08 | 11 | 12 |
2016 | 02 | 03 | 06 | 07 | 08 |

最近のコメント

1. 06/25 sumim
2. 06/25 山田
3. 08/29 squeaker
4. 08/29 ardbeg1958
5. 10/16 umejava

最近のトラックバック

1. 05/25 プラグインレスでSVGを表示する「SIE」開発ブログ - メッセージをや...
2. 01/30 no_orz_no_life - Erlangとジャンケン
3. 12/31 檜山正幸のキマイラ飼育記 - J言語、だってぇー?
4. 09/04 Twitter / @atsushifx
5. 07/06 みねこあ - オブジェクト指向 と FizzBuzz

この日記のはてなブックマーク数
1634300