Intro to OOUI

上野 学
2020年10月20日
この記事は、2020年9月7日に開催された HCD-Net 関西フォーラム 2020 における講演「オブジェクト指向UI入門」をもとにしています。

Intro to OOUI - Manabu Ueno, Sociomedia

これはソフトウェアデザインの話ですが、近年、ソフトウェアをデザインするということの意味が変化してきていると思います。今や私たちは一日の多くの時間をソフトウェア世界の中で過ごしています。UIはバーチャル(仮想的)なものからリアル(実在的)なものになっているのです。

OOUI が興味深いのはそれが、ユーザーに関する認知科学的なテーマと、プログラマーにとってのソフトウェア工学的なテーマと、デザイナーにとっての存在論的なテーマの、接続点だからです。現代の道具論を考える上で重要な示唆がそこにあるのです。

これはケニアでの発掘プロジェクトで発見された330万年前の石器の写真で、これまで見つかっている中で最も古いものと言われています。330万年前というと、ホモ・サピエンスが登場する遥か前の猿人の時代です。道具の歴史は、現生人類の歴史よりもずっと古いのです。

技術は人間によって発明されたのではない。むしろその逆である。- ジャン・フランソワ・リオタール

人が道具を作ったではなく道具が人を作った。道具を作り使う中で、我々の知性や文化は生まれてきたのです。

技術は人間によって発明されたのではない。むしろその逆である。- ジャン・フランソワ・リオタール

これは有名なラスコーの洞窟画で、クロマニヨン人が描いたとされます。ここには彼らがすでに持っていた見立ての能力が現れています。馬や牛の絵が描かれていますが、洞窟の中にそれらがいたわけではありません。つまり馬や牛といった観念を持ち、共有していたということです。

彼らは岩の窪みや沁みを観念上の馬や牛に見立て、そしてそれを絵として外在化させる技術を作り上げていたということ。目の前に無い事柄について観念を通じて外在化し、目に見えるようにする。人としてのコミュニケーションが始まっていたのです。

技術は人間によって発明されたのではない。むしろその逆である。- ジャン・フランソワ・リオタール

これはチンパンジーが描いた絵と人間の子供が描いた絵を比較した実験です。絵を描くことを覚えたチンパンジーに、あらかじめ輪郭らしきものが下書きしてある紙を渡して、そこに何を描くか観察します。左のものがそれで、チンパンジーは元の輪郭をなぞるように線を描きこみました。

右は人間の3歳児によるものです。人間の子供もはじめは描線を楽しむだけですが、3歳ぐらいの語彙が増える頃になると、表象を描くようになるそうです。輪郭線を顔に見立て、そこに足りない目や鼻を描き加えだすのです。観念、見立て、表象。これらによる人のコミュニケーションを獲得するのです。

さてオブジェクトに話を移します。オブジェクトは日本語にしづらい単語で、物体、対象、目的、客体、といった意味ですが、英語の Object の語感にはそれらが同時に含まれているのです。また原義としては「その方に対して投げ狙うもの」といったニュアンスで、この右の図のようなイメージかと思います。

オブジェクト指向について考える上では、プラトンのイデアリズムを思い出すとよいでしょう。それは、我々が見ているものは全てイデアの影に過ぎないというものです。ものというのは、永遠の実在であるイデアがまずあり、それを原型として個物が現れている、という世界観です。

オブジェクト指向プログラミングで採用されている「クラス/インスタンス」方式は、イデアリズムにおける「一般/個別」の考え方に対応しています。プログラムの中で「車」という対象を扱いたければ、先に型としての車クラスを用意しておき、そこから実行時に実体としての車インスタンスを作るのです。

オブジェクト指向UIはクラス/インスタンスを反映します。例えばドキュメントクラスからひとつのドキュメントインスタンスが作られると、それをひとつのウインドウとして視覚化します。そのウインドウがフォーカスされている時には、ドキュメントクラスが持っているアクションがメニューに現れます。

ダン・インガルスは言います。人と人のコミュニケーションでは、発話や動きといった身体を通じての顕在的なものと、あらかじめ観念が共有されているという精神を通じての潜在的なものが、同時に起こる。これを人とコンピューターの間にも用いて対話的にするのが、Smalltalk のコンセプトでした。

私たちはドーナツが目の前にある時それに関心を寄せますが、ドーナツが目の前になくても、ドーナツを話題にすることができます。ドーナツの観念をあらかじめ共有して対象化しているからです。オブジェクト指向とは、そうした人が知っている観念をコンピューターの中に共有し、対象化することです。

コンピューターというものを、ユーザーの命令に従って処理をする機械であると考えると、UIはその処理の実行ボタンを並べたものになるでしょう。例えば「蔵書管理アプリ」では、このようにタスクの入り口がいくつも並んでいるような形です。

このUIの問題は、ユーザーが関心を寄せている当のものが見えていないことです。このアプリがいったい何なのか、わかりづらいのです。また処理の数が増えるとその分の入り口が増えて、情報の構成を変化させてしまいます。

一方、オブジェクト指向UIとはこのようなものです。ユーザーが関心を寄せている「本」というものが、一覧表示や詳細表示のかたちで現れています。ユーザーとコンピューターの間で「本」の観念が共有され、対象化されてそこに在るのです。

ソフトウェアのデザイン性について、プログラマーは「その中が何でできているのか」を問い、UIデザイナーは「それが世界の中の何であるか」を問うでしょう。しかし道具が本有する「作り使うもの」という存在性において、それら二つの側面が別々にあるのではないのです。

オブジェクト指向は、二つの問いを統合しているソフトウェアデザインの単一原理です。それが世界の中の何であるかという問いを通じて、その中が何でできているかを問う。あるいはその逆も同様。オブジェクト指向において、両者は同じことなのです。

オブジェクト指向とは、オブジェクト自身が自分が何をできるのか知っているという意味である。(中略 … UI操作の構文とプログラム記述の構文の)どちらの場合でも、オブジェクトが先であり、やりたいことがその次となっている。これは具体的なものと抽象的なものとを高い次元で統合している。- アラン・ケイ

アラン・ケイは言います。オブジェクト指向は「名詞 → 動詞」の構文によって、具象と抽象を統合しているのです。

Abstract - PHP: strtoupper('hello')

Abstract - JavaScript: 'hello'.toUpperCase()

例えば抽象的なものとしてのプログラム記述について。「hello を大文字にする」というプログラムを PHP で手続き型に書くと、動詞(strtoupper)が先で名詞(hello)が後になります。一方 JavaScript でオブジェクト指向型に書くと、名詞(hello)が先で動詞(toUpperCase)が後になります。

Concrete - Unix Command-Line: $ more helloworld.txt

Concrete - GUI (まずデスクトップにある helloworld.txt というファイルを選択し、次にメニューから Open を選んでいる様子の図)

次に具象的なものとしてのUI操作について。「helloworld.txt というファイルを開く」という操作を CLI で行うと、動詞(more をタイプ)が先で名詞(helloworld.txt をタイプ)が後になります。一方 GUI で行うと、名詞(helloworld.txt を選択)が先で動詞(Open を選択)が後になります。

その GUI のベースにある考え方が、OOUI(オブジェクト指向ユーザーインターフェース)です。オブジェクトを手がかりに操作設計されたユーザーインターフェースということです。OOUI には、次の4つの原則があると考えています。

オブジェクトを知覚でき直接的に働きかけられる ― OOUI では、ウインドウ、アイコン、項目のリスト、メニューなどが操作対象として見えていて、それらをマウスや指で直接指し示せます。一方、例えば CLI では、基本的に操作の対象が見えておらず、入出力のログがテキストで表示されるだけです。

オブジェクトは自身の性質と状態を体現する ― OOUI では、各オブジェクトが、それは何で、今どういう状態かを、リアルタイムに現し続けます。それらによってユーザーは、自分が今何をしているか、それはどのような意味を持つのかを把握し、オブジェクトを実在的なものとして感じ取れるようになります。

オブジェクト選択 → アクション選択 の操作順序 ― OOUI では、まず対象物(名詞)を選択し、次にそれに対する処理(動詞)を選択する、という順序で操作を行います。これにより作業手順や画面遷移が減り、操作全体がモードレスになります。

すべてのオブジェクトが互いに協調しながらUIを構成する ― OOUI では、作業に必要なあらゆる観念が対象化され、それら各オブジェクトが相属しながら論理的に空間を構成します。そして一貫した形と振る舞いによって、ソフトウェア世界の在り方が示されます。

さて、コンピューターのデータを直接操作可能な形に対象化するという発想はどこから来たのでしょうか。1950年代、アメリカの防空レーダーシステム用に、デジタル情報をスクリーンに表示してそれをポインティングデバイスで操作する仕組みが作られました。これは GUI の原型が誕生した瞬間の写真です。

1963年にサザランドが開発した Sketchpad では、ペン型のポインティングデバイスを使ってベクターグラフィックを作成できました。描かれた図形はオブジェクトとして拡大縮小や変形が可能でした。手続き的な事務処理ではなく自由で創造的な作業のための道具としてコンピューターが再定義されたのです。

1968年にエンゲルバートが発表した NLS では、スクリーンを仕事空間に見立て、表示された情報オブジェクトにマウスとキーボードで操作を行うというスタイルが作られました。そこにはハイパーリンクやネットワーク上での共同作業といったコンセプトも含まれていました。

1970年代にアラン・ケイを中心に開発された Smalltalk は、オブジェクト指向プログラミング環境を含む GUI ベースの OS でした。重なり合うウインドウ、カット&ペースト、ペイントツールなど、後の Mac や Windows に繋がる多くの表現が作られ、OOUI の在り方がひとつの完成を見ました。

ただし OOUI(オブジェクト指向ユーザーインターフェース)という言葉が最初に使われたのは、Xerox PARC から Apple に移ったラリー・テスラーが1983年に発表した講演論文 “Object-Oriented User Interfaces and Object-Oriented Languages” においてだと言われています。

1984年に発売された Macintosh は、より洗練されたUIを備え、商業的に成功した最初の GUI システムとなりました。Apple はサードパーティ向けに各種 API やデザインガイドラインを提供し、アプリケーション間で表現や操作性の一貫性が保たれるようになっていました。

2007年に発売された iPhone は OOUI の新しい時代を作りました。このスマートフォンは前面のほとんどがスクリーンで占められ、指でのタッチ操作が前提となっていました。そこに見えているオブジェクトを直接触るような操作感は人気を博し、パーソナルコンピューターの新しい標準となりました。

そうして今や OOUI は私たちにとって自然なものになりました。オブジェクト指向でソフトウェアをデザインするということは、コンピューター内のデータ、プログラム、UIが一貫してユーザーのメンタルモデルを反映し、またそれがメンタルモデルを更新するという、ひとつのレゾナンスを作ることなのです。

MVC パターンを考案したリーンスカウクによるこの図も同様のことを示しています。ユーザーのメンタルモデルとコンピューターのデータモデルが同期し、それを操作するツールとして両者の間にビューとコントローラーがあるというものです。ユーザーは OOUI を通じて自分の頭の中を操作できるのです。

似た考え方として IBM によるこの図では、デザイナーの視点からソフトウェアというものを「オブジェクト」「インタラクション」「プレゼンテーション」の三層で説明しています。そして一番下のオブジェクト層が全体の60%を占めるとしています。

私は IBM の図を参考に、ソフトウェアデザインを「モデル」「インタラクション」「プレゼンテーション」のレイヤーで捉えることにしました。ユーザーは、その関心対象をモデル化され、構造や機能とインタラクトし、スタイルやレイアウトをプレゼントされる。ユーザーは抽象度の各段階と接続している。

ユーザーインターフェースの概念はよく、ユーザーとコンピューターの間の界面として説明されます。ユーザーの操作を受け取ってコンピューターに伝え、コンピューターの出力を受け取ってユーザーに伝えるというものです。これは機械を間接的に運転する操作盤のイメージから来ているのだと思います。

しかし OOUI の概念は、この図のように、ユーザーがオブジェクトと出会うためのレンズのようなものと言えます。UIの向こうに本来のコンピューターがあってそれを操作するのではありません。ユーザーは自らのメンタルモデルとして、そこに在るオブジェクトを直接的に操作するのです。

UIをフロントエンドとして捉えると、ユーザーとバックエンドを仲介するグラスのような存在になります。しかし OOUI の在り方というのは、両者を直接つなぐストローのようなものです。吸えばそのまま吸い出され、吹けばそのまま吹き込まれる。システムに表裏はなく、ユーザーの身体性と結合している。

システム全体の設計においてUIはそのごく一部かもしれませんが、ユーザーから見ればそれはシステムそのものです。例えば我々にとって上水道システムとは蛇口のことです。いつでもそこから綺麗な水が出るというイリュージョンが先にあり、その実現のためにシステム全体が作られるのです。

タスク指向UIではユーザーの目当てであるオブジェクトがタスクの中に閉じ込められていて外から見えません。オブジェクト指向UIではオブジェクトを前面に出します。ユーザーはタスクを特定する前にオブジェクトに触れられます。タスクはオブジェクト同士の間にある行為の可能性として示唆されます。

オブジェクトを操作して何をするか、つまりそのアプリケーションをどのようなコンテクストに適合させるかは、ユーザーに委ねられています。道具は使用者の身体性の内に現れます。誰かがいて、ハンマー様の何かがある。その誰かがその何かで槌打つ時、そこにはじめてハンマーの道具性が展開するのです。

道具の道具性というものが、道具がそこに在ることによってダイナミックに現れるのだとするなら、そのような創造的なものをデザインするプロセスはどうあるべきなのでしょうか。

Human-Centered Design (ISO 9241-210)

Design Thinking (Stanford d.school)

Double Diamond (Design Council)

デザインプロセスとして知られるもの、例えば人間中心設計、デザイン思考、ダブルダイヤモンドなどは、横に伸ばせば順次的な工程の連なりです。これはデザインを製造と捉えた場合には有用ですが、創造として捉えた場合には本質を欠いています。創造は抽象から具象への段階的な手続きではないからです。

デザインは抽象と具象がひとつのパースペクティブに統合された現象です。段階ではなく、インテグリティとして、全体と部分が相互包摂されたものです。だから制作はどの抽象レベルから始めてもよいのです。好きな抽象度で着想し、インテグラルな形を目指して抽象と具象を行き来するのです。

つまり創造としてのデザインプロセスは、逆説的ですが、プロセス(工程)ではありません。抽象から具象へと段階的に意思決定することで形が出来上がる、というものではないのです。

経験豊かなデザイナーは、抽象から一気に具象を掴み、後からその間のロジックを紡ぎます。ひとつのきっかけから経験的直観によっていくつかの着想を得て、そこで形の蓋然性をリバースエンジニアリングする。これを高速に何度も繰り返すのです。

創造に関するデザイナーの身体知とは、矢を射ってみなければ的のありかはわからないということです。的に矢を当てる(問題を解決する)確実な方法は、矢を射ってからそのまわりに的を描くこと。形を先行させ、そこに行為の可能性を開くこと。デザインの目的は形であるということです。

行為と道具の関係について考えてみましょう。皮がむかれていないりんごから皮がむかれた目標状態のりんごを得るというタスクにおいて、専用のりんご皮むき機は作業の大部分をサポートします。しかしそのような使役的な観点で作られた道具はそれ以上の意味を持たず、キッチンを手狭にするだけです。

一方、道具としての抽象度が高い果物ナイフは、使い手の技量を必要とするものの、同時に、行為の可能性を素直に反映しながら、様々な用途に適合しはじめます。つまり矢のまわりに的が描かれる。そしてそれは食材への感覚や料理をすることの体験をもたらし、使う者の中に新たな意味空間を広げるのです。

コンピューターというものを使役的に捉えると、人(サブジェクト)が人工物を操って自然を徴用する、という古い機械化の構図にデザインを回収してしまうでしょう。これは人と道具の発展スパイラルを立て塞いでしまいます。

そうではなく、すべてを一律に対象(オブジェクト)として捉え、それらが鎖のように連なる世界をイメージする。その意味連関の中の生き生きとした存在者としてソフトウェアをデザインする。これが OOUI のパースペクティブなのです。

スプレッドシートは OOUI の手本です。知覚された各セルは、観念を表象するオブジェクトとして文字どおり細胞のように自立し、また全体で協調しています。ユーザーは決められた手順に従うのではなく、オブジェクトの性質を自身の文脈の中に連結させながら、創造的に仕事をデザインしていけるのです。

人と道具の関係は、創造性(ポイエーシス)において未分化されます。使うことは作ることであり、作ることは使うことなのです。だからデザインの行為は、具象と抽象、部分と全体、分解と統合、Catch と Try を同時的に共振させる活動と言えるでしょう。

以上、OOUI へのハードコアなイントロでした。OOUI とは、オブジェクトの表象を通じた世界の見方です。それはソフトウェアデザインというものを、単に与えられた問題への解法としてではなく、問題そのものに関する視点の転回として捉えなおすことなのです。

OOUI www.sociomedia.co.jp/ooui 2020. Sociomedia, Inc.