macOSアプリケーションのUI形態の主な分類
概要
このノートでは、macOSのアプリケーションの種類と特徴、そしてMacらしいネイティブアプリケーションの設計のための基本知識を説明します。紹介する内容は、macOSネイティブアプリケーションを設計する際に役立てられるかと思います。
macOSの主なアプリケーション形態
まずmacOSにおける主要なアプリケーション形態について簡単に説明します。この前提で開発方針を立てれば、アプリケーション開発の際のアーキテクチャやUI形態の選択、細かなUI設計や挙動に対する対処等を行いやすくなるかと思います。
macOSで駆動するネイティブアプリケーションにはいくつかの種類が存在します。UIの挙動と形態でそれらを区分すると、大きく、 単体型、ブラウザ／クライアント型、Document-Based App型、常駐／システムプラグイン型 と区別できます。もちろんこれらに当てはまらない分類のアプリケーションもありますが、取っ掛かりとしてはこの捉え方で大丈夫だと思います。
-
単体型
…扱うコンテンツが少なく、UIが単純なユーティリティ系アプリケーション。 -
ブラウザ／クライアント型
…データをひとつのブラウザUIに集約して閲覧したり、Webから取得したコンテンツを表示したりするもの。 -
Document-Based App型
…クリエイティブツール系で、制作した内容をドキュメントファイルに保存して復元できるもの。 -
常駐／システムプラグイン型
…目立ったUIを持たず、バックグラウンドに常駐するもの。
アプリケーション形態によってUIの型もある程度決まってくるので、まずどの形態を目指すのかを吟味してから、それに適するUIのパターンを当てはめてゆくのがアプリケーションデザインの大まかな進め方になります。UIのパターンは、各形態において代表的なアプリケーションをよく観察して真似てみることから始めてみると良いでしょう。Apple純正のアプリケーションを眺めることは基本として、有名どころのソフトウェアを参考にするのも良いでしょう。このノートではUIの参考になりそうなアプリケーションもいくつか列挙していきます。
ではそれぞれの特徴を簡単に説明します。
単体型
「単体型」という名前は筆者が便宜的にそう名づけたものです。界隈では“Simple App”, “Single Window App”とかそう呼ばれることもあるかと思いますが、この後説明する“ブラウザ／クライアント型”や“Document-based App型”に対して、そうではないもっとシンプルな形態のUIを備えたApp区分くらいの認識で良いかと思います。
ちょうどXcodeのNew Projectダイアログで選択できる“App”テンプレートで実装したようなアプリケーションです。
Xcode
主だった特徴はなく、一般的なメニューバーを備え、メインウインドウが1枚だけ存在するだけのシンプルなUIを提供します。常駐型の場合はメニューバーやDockアイコンを持たないため、それらとも区別します。小規模なユーティリティ系Appでは単体型を採用するケースが多いように思います。
Calculator（計算機）
Keka
そのほかのアプリケーション例：
- Activity Monitor
- Dictionary
- Optimage
- HandBrake
- VLC
- Things
ブラウザ／クライアント型
ブラウザ／クライアント型Appは、macOSプラットフォームにおいて多く見かける形態です。ファイラーやWebサービスのクライアントに採用される例が多く、UIの傾向もある程度似通ってきます。UIは基本的には単一のウインドウを備えますが、場合によってはこの後説明するDocument-based App型とのハイブリッドで設計されることもあります。コンテンツの閲覧や整理、検索を目的としており、そのためナビゲーションの仕組みや検索機能が多く備わっています。対してコンテンツの制作に関する機能やUIはほとんど備わっていないことが特徴です。
ブラウザ／クライアント型の主だった特徴：
- コンテンツの閲覧、整理、検索が主目的
- ナビゲーション機能が充実
- ナビゲーションによってコンテンツ表示部分が大きく変化
- コンテンツの検索機能
- コンテンツの制作が目的ではない
- 書類（ドキュメント、ファイル）を開いて操作する仕組みを基本的に持たない
- 書類専用のエディタウインドウを持たない
- Finderでコンテンツを直接参照しにくい（できない）
- 単一ウインドウでUIが成り立つ場合が多い（複数であっても良い）
- クライアントの場合、コンテンツはサーバが管理し、AppではWeb API経由でCRUD
macOSだと、Finder、iTunes / Music、SF Symbols.appなどがブラウザ／クライアント型に分類できます。システム環境設定 (System Preferences)は単体型とどちらに区分するか微妙なところですが、UIの特徴を見るとブラウザ型と分類しても良さそうに思えます。
Finder
SF Symbols.app
Fork
そのほかのアプリケーション例：
- App Store
- Messages
- FaceTime
- System Information
- Disk Utility
- Safari
- Calendar
- Maps
- Font Book
- Chrome
- Doppler
- Tower
- BathyScaphe
- Notes
- Bear
- 1Password
Document-Based Application型
Document-Based App、ドキュメントベース、などと表記することもあります。Document-Based App型では、書類（ドキュメント）を開くと書類ごとに閲覧・編集のためのウインドウが個別に展開するタイプのUIを備えています。macOSだと、Preview.app、QuickTime Player、Keynoteが該当します。
Finderで扱えるさまざまなファイルは、何かしらのアプリケーションによって開くことができます。中にはJPEGのように共通の形式のものもあれば、.xcodeprojのように特定アプリケーションによって定義されたものもあります。どちらにせよ、ファイルは「書類（ドキュメント）」として抽象化し、Cocoa document architectureの仕組みに従って駆動するようデザインします。
Cocoa document architecture from developer.apple.com
Xcodeでは“Document App”テンプレートを使って開発を始めると、取っ掛かりとなる実装があらかじめ用意されるので便利です。（このテンプレートを使わなくてもDocument-Based Appの開発は可能です。）
Xcode
Document-Based Appの主な特徴：
- 書類ごとにドキュメントウインドウ（エディタ／ビューアのUI）が展開
- 同時に複数のドキュメントウインドウを展開可能
- ドキュメントウインドウはシステム標準の仕組みに従って、タブで結合可能
- 任意の拡張子を持ったドキュメントファイルに保存可能
- ドキュメントファイルは、システムで設定されたデフォルトAppで展開
- 自動保存やローカルタイムマシンなどのシステム機能に対応可能
- iCloud Documentに対応可能
そのほかのアプリケーション例：
- Text Edit
- Numbers
- Pages
- Terminal
- Safari
- Sketch
- Pixelmator Pro
- CotEditor
- MindNode
関連資料：
Developing a Document-Based App – developer.apple.com
常駐／システムプラグイン型
ステータスメニュー／メニューバーエクストラ、バックグラウンド常駐型App、システムプリファレンス・ペイン、その他システムプラグイン系のものをまとめた分類です。メニューバーやDockアイコン、Dockメニューを持たず、最小限の環境設定UIを提供する場合があります。
Xcodeではシステムプラグインのためのテンプレートがいくつか用意されているので、実際に開発する場合はこれらを取っ掛かりにすることになると思われます。設計面では、システムプラグインの場合は提供されるAPIに従うことが比較的強く求められるため、ドキュメントやAPIの仕様に従うようにしてください。
Xcode
メニューバーエクストラ、ステータスメニューたち
そのほかのアプリケーション例：
- iStat Menus
- Little Snitch
- Karabiner-Elements
関連資料：
Discussion