UI考：縦タイトルバー型ウインドウという絶滅危惧種

# 縦タイトルバー型ウインドウとは

その昔、Mac OS 9と呼ばれていた時代の Mac のウインドウには縦タイトルバーというスタイルがありました。これは通常上にあるタイトルバーとボタンが左側に縦向きに並んでいるものです。主にフローティングウインドウやユーティリティウインドウで使われていました。下の画像のようなウインドウは確かに昔どこかで見たことがありますね。しかし OS X ではあまり見かけなくなってしまいました。なぜなら Carbon フレームワークにはこれらが継承されていますが、Cocoa の NSWindow には実装されませんでした。なので OS X アプリではあまり見かけない絶滅危惧種となっています。

![04image05.gif](https://qiita-image-store.s3.amazonaws.com/0/3603/fe12133b-66a1-b0c8-1876-1519138da699.gif)
*http://www.mactech.com/macintosh-c/chap04-1.html*

## Finder の事例

Finder のデスクトップではないところ、例えばフォルダーで何も文字入力できるところがない状態で日本語入力すると、このようなテキストボックスがフロートされて入力内容が確認できるようになっています。通常はもっと細長いものですが、わかりやすいようにマウスで無理やり引き伸ばしてあります。このフローティングウインドウは Mac OS 9 以前から実装されている伝統的なものですが、デスクトップでフロートされなくなったのはごく最近の OS X からのようです。（バグ？）

よく見るとこのフローティングウインドウは縦タイトルバー型ウインドウになっています。以前の OS X ではクローズボタンのみを持ったウインドウだったと記憶していますが、少なくとも10.11ではボタンなしスタイルに変更されているようです。

OS X の Finder は元々 Carbon アプリだったので、このような縦タイトルバー型のウインドウは Carbon で実現しているのだろうと予想できます。そして現在でも内部では Carbon API を呼び出しているのかもしれません。

<img width="637" src="https://qiita-image-store.s3.amazonaws.com/0/3603/bc5718a0-d607-fa9b-f9ee-6e1725bf3750.png">
*Finder で日本語入力すると現れるフローティングウインドウ*

## ことえり の事例

一昔前のことえりの変換ウインドウはこのような縦タイトルバー型のフローティングウインドウでした。10.11では見る影もありません。

![ko2.jpg](https://qiita-image-store.s3.amazonaws.com/0/3603/65d0c1d5-b573-f3e5-2902-5ba0cc5ff60b.jpeg)
*http://igallery.sakura.ne.jp/iphoto69/iphoto69.html*

![](https://qiita-image-store.s3.amazonaws.com/0/3603/48925881-273e-71e7-b176-9975262bf00c.png)
*OS X 10.11 の“ことえり”こと「日本語入力プログラム」*

## iTunes の事例

iTunes のミニプレイヤーには従来からこのような縦ボタン（団子ボタンと呼ぶことにする）が採用されていました。
![](http://www.guidebookgallery.org/pics/apps/itunes/usage/modes/miniplayer/20-1-1.png)
*iTunes 2: http://www.guidebookgallery.org/apps/itunes/miniplayer*

iTunes は元々 Mac OS 9 向けのアプリを改造したのが始まりで、iTunes 2 ぐらいまでは Mac OS 9/Mac OS X 二つのバージョンが存在していました。そういった経緯から Mac OS X 版もしばらくは Carbon アプリとして開発されていたようです。そういった経緯から（？）ミニプレイヤーは Mac OS 9 の縦タイトルバー型のフローティングウインドウを意識していた可能性があります。

iTunes のUIデザイナーは <del>度々調子に乗る</del> よく新しいUIを実験することは有名ですが、iTunes 10 では縦タイトルバーでもないのに通常のウインドウにもこの団子ボタンが採用されてしまいました。不評だったのかその後元に戻っています。

![itunes_comparison.jpg](https://qiita-image-store.s3.amazonaws.com/0/3603/d632c691-504a-e1b2-64f9-20644bf2038d.jpeg)
*http://www.cooper.com/itunes_comparison.jpg*

# Carbon API を駆使して縦タイトルバー型ウインドウを召喚してみる

Carbon なんて古臭いものを今更触りたくはないものですが、縦タイトルバー型ウインドウは Cocoa の力だけでは独自実装でもしない限りは実現することができません。なので次のようにして縦タイトルバー型ウインドウを召喚します。

```objc
	WindowRef window = NULL;
	HIRect bounds = (HIRect)CGRectMake(20, 0, 400, 300);
	int attributes[] = {kHIWindowBitStandardHandler, kHIWindowBitLiveResize, kHIWindowBitHighResolutionCapable, kHIWindowBitCompositing, kHIWindowBitSideTitlebar, kHIWindowBitCloseBox, kHIWindowBitZoomBox, kHIWindowBitCollapseBox, kHIWindowBitResizable, 0};
	OSStatus status = HIWindowCreate(kUtilityWindowClass, attributes, NULL, kHICoordSpaceScreenPixel, &bounds, &window);
		
	SetWindowTitleWithCFString(window, CFSTR("縦向きウインドウをCarbonで作ったぜ"));
	RepositionWindow(window, NULL, kWindowCascadeOnMainScreen);

	// WindowRef を NSWindow 化する	
	NSWindow *carbonWindow = [[NSWindow alloc] initWithWindowRef:window];
	win = carbonWindow; // retain
	[carbonWindow makeKeyAndOrderFront:self];
```

<img width="498" src="https://qiita-image-store.s3.amazonaws.com/0/3603/3d4b6132-a3f0-539e-0ed9-d676be045d81.png">
*Carbon で作った縦タイトルバー型ウインドウと通常の NSWindow を並べた例*

El Capitan 時代でも Carbon という古典的な手法で縦タイトルバー型ウインドウを呼び出すことに成功しました！今更何の役に立つのかという話ですが、このように UI の歴史を遡ってみるのも面白いものですね。

# 資料

GitHub
- https://github.com/usagimaru/SideTitlebarWindow

資料
- [Cocoaの横タイトルバーウィンドウ](http://www.cabinetwork.jp/blog/archives/000362.html)
- [Utility/Floating window with titlebar on left side](http://www.cocoabuilder.com/archive/cocoa/218396-utility-floating-window-with-titlebar-on-left-side.html)