見出し画像

Segmented Controlのちょっとした歴史

Segmented Control(セグメンテッド・コントロール、分割コントロール)というと、複数のボタンが連なったような見た目をした、カプセル型のコントロールを指しますが、これの始まりは(少なくともそれが「Segmented Control」と命名された起源としては)初期Mac OS Xにあるようです。

「Segmented Control」はその名前が示すように、「分割されたコントロール」です。そもそもUI用語としての「コントロール」とは、ボタンやスライダーなどの、ユーザー操作によって何かしらのアクションを実行できるようデザインされた部品の総称なので、この名前は『なんか分割された、アクションを実行するための部品』くらいのふわっとした説明に留まっています。

そう考えると、「Segmented Control」の名前はなんだかはっきりしなくて不思議に感じられますが、Segmented Controlは他のコントロールよりも広い用途に対応できる汎用性の高いコントロールなので、「ボタン」とか「スイッチ」のような、その性質を一つに言及し切るような命名は避けられたようです。

Segmented Controlの挙動タイプには、セグメントそれぞれが個別にオンオフできる集合スイッチモードと、全体で一つだけが排他選択されるラジオボタンモードと、それぞれがプッシュボタン的に機能するモメンタリーモードがあります。さらに、セグメントを長押しするとメニューを表示するような派生型もあり、一つのコントロールで多様な用途に対応できます。このような多くの用途を想定できるものを「〜スイッチ」とかの名前で言い切るのは、確かに適切ではないようにも思います。

ラジオボタン/出典:https://dime.jp/genre/1426002/

macOS(Mac OS X)の開発環境では、Segmented Controlを「NSSegmentedControl」と言います。NSSegmentedControlはMac OS X 10.3 (Panther)で公開APIになりましたが、それ以前からFinderなどではすでに独自に実装されていて、デザイン自体はユーザーにも知られていました。ただ、まだ「Finderのビューセレクタっぽいやつ」「例のスイッチするアレ」くらいの呼ばれ方をされていて、デザインパターンとしては定着していませんでした。

New Control—“That Switcher Thing”

Pantherが発表されたWWDC 2003の「410 Cocoa Update」セッション内にて、この新コントロールの公開APIがMac OS Xに実装される旨が発表されましたが、まだその正式名称(クラス名)が定まっておらず、当時はデベロッパーから命名のアイディアを募っていたようです。

出典:https://web.archive.org/web/20220224235838im_/https://pbs.twimg.com/media/EdozIQJU4AAmjm8.jpg

この時に実際に命名候補を送ったデベロッパーの投稿を見ると、興味深いです。


Mac OS X Public Beta

出典:https://512pixels.net/projects/aqua-screenshot-library/

Mac OS X Public Beta(v10.0より前のバージョン)のFinderですでにSegmented Controlのようなラジオボタン型コントロールを確認することができますが、まだ採用例は限られていたようです。

Mac OS X Panther (10.3)

出典:https://512pixels.net/projects/aqua-screenshot-library/
出典:https://512pixels.net/projects/aqua-screenshot-library/
出典:https://512pixels.net/projects/aqua-screenshot-library/
出典:https://512pixels.net/projects/aqua-screenshot-library/
出典:https://512pixels.net/projects/aqua-screenshot-library/

Mac OS X Panther (10.3)になると、Segmented Controlの採用例が一気に増えます。ビューの切り替えを行うラジオボタン型コントロールとしての例や、ブラウザの戻る/進むを統合した分割ボタンが目立ちます。ほぼ現代のSegmented Controlと同じ使い方です。

Pantherでタブが「プルタブ」ではなくなった

Segmented Controlの用途を考えるのに、タブの存在は無視できないと個人的に考えています。現代の抽象化されたUIの潮流では、以下のイメージのようなカプセル型のタブバーはよく見慣れた表現ですが、Pantherが登場した当時としては、これまでの「プルタブ」のメタファーを無視していて新鮮味がありました。

出典:https://512pixels.net/projects/aqua-screenshot-library/

Pantherより前のMac OS X Jaguar (10.2)では以下のようなタブバーをしていたので、NSSegmentedControlがデビューしたPantherで同時にプルタブ表現を廃したことは、Segmented Controlとのデザイン統合を意識してのことだったのかもしれません。

出典:https://512pixels.net/projects/aqua-screenshot-library/

Segmented Controlのデザインは、その後のiOSにも引き継がれていきます。当初Segmented Controlで実装されていたステッパーは、この頃から別のコンポーネント/クラスである「Stepper」として定義されるようになりました。

出典:https://www.kodeco.com/2847-user-interface-customization-in-ios-6/page/2
iOS 18の標準的なSegmented Control
iOS 18「写真」のカスタムSegmented Control

その他の資料

以下のメーリングリストを読むと、まだ当時は「スイッチするやつ」と呼ばれていたことがわかります。

switch thing
https://lists.apple.com/archives/cocoa-dev/2003/Oct/msg01191.html

当時のNSSegmentedControl名称候補をランク付けするYouTubeビデオを見つけたので、ついでに紹介しておきます。


いいなと思ったら応援しよう!