Max チュートリアル

チュートリアル45：
ユーザインターフェイスの設計

他のユーザのためのアプリケーション作成

面白い Max プログラムを書いたとき、他の人々にそれを提供したいことがあるかもしれません。そのプログラムが、独自のオブジェクトやグラフィックファイル等、数多くの様々なファイルからできている場合、おそらく、File メニューの Save As Collective... コマンドを使ってすべての必要なファイルを一つのコレクティブとして保存する必要があるでしょう。また、Max や Max/MSP Runtime を持っていない人々のために、そのコレクティブをスタンドアロン・アプリケーションとして保存することもできます。あなたのプログラムをコレクティブ、あるいはスタンドアロン・アプリケーションとして保存することに関してのより詳しい情報は、このマニュアルのトピックスセクションにある「コレクティブ」の章を参照して下さい。

訳注：現在の版では、Max トピックスマニュアルに「コレクティブ」の章があります。

あなたのプログラムを他の人々の使用のために提供する場合、そのユーザインターフェイスが、可能な限りうまく組織化された、興味をそそられるような、直観的でわかりやすい、ユーザフレンドリーなものになるように、ユーザインターフェイスの設計やデザインにも時間を費やしたいと考えるのではないでしょうか。この章では、Max 環境で書かれた完全なアプリケーションを提示し、アプリケーションの設計やユーザインターフェイスのデザインを行なう際に考慮すべき様々な問題について検討します。

このパッチは、チュートリアルで示されている他のサンプルパッチに比べかなり複雑なものになっているため、その動作の詳細な説明にはあまり深くは立ち入りません。興味があれば、あなた自身で調べてみて下さい。むしろここでは、使用された視覚的なデザインや、特定のユーザインターフェイス機能を実装する方法について取り上げます。この章では、プログラムのレイアウトの設計方法、ウィンドウやメニューバーを望むように変更する方法、プログラムの外観をカスタマイズするためにグラフィックを追加する方法、そして、ユーザに情報を示し、ユーザから情報の入力を得るための最適な手段を決める方法について述べたいと思います。

Note Modifier プログラム

Note Modifier と呼ばれるサンプルのアプリケーションは、4 つのトラックを持ち、MIDI ノートメッセージに対するルータ、チャンネライザ、トランスポーザ、インバータ、ランダマイザ、ディレイの機能を持っています。４つのトラックの変更作業は並行して（個別に、そして同時に）行われ、個々にオン／オフを切り替えることができます。4 つのトラックの各々で行なわれる実際の変更は連続して（ある項目の出力が次の項目の入力になるという方法で）行なわれ、個別にオンにしたり、バイパスしたりすることができます。さらに、このプログラムはスクリーン上に仮想のキーボードを表示し、マウスによってノートを演奏し Note Modifier に送ることができます。

・MIDI ノートの変更を始めるためには、Track A ボタンをクリックしてトラックをオンにします（Modify メニューから Track A を選ぶことによって、あるいは、Macintosh では [Command] キーと 1 、Windows では [Contorol]キーと 1 を入力することによってもトラックのオンとオフを切り替えることができます）。

・In と Out というポップアップメニューを使用して、MIDI ノートを受信する入力ポートと、変更した音を送信する出力ポートを選んで下さい。ポップアップメニューには、現在MIDI Setupで設定されているデバイスのリストが表示されるはずです。

・Track A ウィンドウのナンバーボックスが 0 になっている場合、その変更項目はバイパスされ、ノートはそのまま送信されます。ナンバーボックスをマウスでドラッグして（また、Inversion と表示された toggle をクリックして）任意に変更の設定を行なって下さい。その後、 MIDI キーボードの演奏を開始して下さい。様々な変更の組み合わせを試してみて下さい。

・ノート変更のストリームを増やしたい場合には、追加のトラックをオンにして、そのトラックのパラメータに様々な値を設定して下さい。

・Modify メニューから Keyboad を選ぶことによって、スクリーン上で仮想のMIDI キーボードを使用することができます。この仮想キーボードは選択された出力ポートに直接ノートを送信すると同時に、Node Modifier のトラックにもノートをを送信します。この方法によって、利用可能な MIDI キーボードを持っていない場合でもアプリケーションを使用することができます。

Note Modifier は、 Richard Teitelbaum が開発した PCL ソフトウェアをもとにして、1983年に Mark Bernard によって 68000 用のアセンブラ言語でコード化され（Richard Teitelbaum の「Digital Piano and Patch Control Launguage　(The Proceedings of the ICMC,Paris 1984)」を参照して下さい）、その後、1990年に Teitelbam の仕様に基づきChristopher Dobrian によって Max で再開発されたものです。

アプリケーションの設計計画

良いプログラムや良いインターフェイスを設計するためには、プログラミングの前に計画を立案し、次のことを確認する必要があります。

プログラムに何を実行させたいのか、そして、それをどのように実行するか。
ユーザーにどのような情報を提供する必要があるか、そして、それをどのように表示するか。
ユーザーからどのような情報を得る必要があるか、そして、ユーザがその情報を提供できるようにするには、どのような方法が最も良いか。

アプリケーションが実行すること（4 つのトラックを使った MIDI のルーティング、チャンネル指定など）、および、それがどのようにしたら達成できるかについて決定した後、その次に考えるべきことは「何をユーザに知らせる必要があるか」です。

ユーザには、現在どのトラックがオンになっているか（トラックごとのオン／オフの表示）、個々のトラックの設定がどうなっているか（パラメータ名とその値をセットにして表示）を示す必要があります。 4つのトラックは、トラック毎に 8 個の変更可能なパラメータとオン／オフのインジケータを持つため、合計 36 項目の情報と、それらの項目を識別するためのラベルをユーザに提示する必要があります。情報には、数値で表示するもの、単にオン／オフを表示するもの、テキストで表示するもの（ポート名やラベル）があります。提示する場合の前提として、これらはすべて一度に見ることができる必要があり、ユーザがいつでも任意の値を変更できるような方法で行なわれるべきです。

これらの考慮すべき点は、スクリーン上のレイアウトや、使用するユーザインターフェイス・オブジェクト、ユーザから情報を得るために最適なキーボード入力とマウス操作の組み合わせ（メニュー、ダイアログ、ポップアップメニュー、ボタン、トグル、スライダ等）の決定に影響を及ぼします。これらの決定においては、他の効率よいアプリケーションを観察することが助けとなるでしょう。また、現実の世界にあるモデルを考えてみることによって、よい例を見つけることができるかもしれません。

オリジナルボタンのデザイン

チュートリアル 19で示したように、マウスクリックに応答するMax の button オブジェクトやメッセージボックスの使用には制限がありません。ペイントやドローイングを行なうプログラムによって独自のボタンをデザインし、fpic オブジェクトや Edit メニューにあるPaste Picture コマンドによってパッチャーウィンドウに配置して、その上に透明な ubutton を置くことができます。このプログラムでは、トラックのオン／オフのボタンにこの方法を用いています。4 つのボタン用の画像を作り、fpic を用いてその画像を表示させ、その上に 4 つの ubutton オブジェクトを配置しています。fpic を確実に ubutton の背後に置くためには、単にfpic を選択して Object メニューから Send to Back を選ぶだけです。このようにすると、マウスクリックは fpic ではなく、ubutton に送られます。

ubutton を選択し、Object メニューから Get Info... を選ぶと、Toggle Mode と呼ばれるオプションの設定があることがわかります。ubutton が Toggle Mode になっている場合、最初に bang、あるいはマウスクリックを受信すると、ubutton はハイライトし、右アウトレットから bang を送信します。そして、次の bang またはマウスクリックによってハイライトをやめ、左アウトレットから bang を送信します。この機能によって、ubutton は、オン／オフを行なうスイッチや、オン／オフを表示するインジケータのような幅広い用途に使えるようになります。モニタが白黒表示の場合、ubutton は、背後にある画像の色を反転させます。モニタがカラーの場合、ubutton は画像の白または黒の部分だけを反転させます。

このアプリケーションでは、どのようなモニタでもうまく動作するように、淡色やグラデーションではなく単一の暗色を使うことを選択しました。また、4 つのトラックにはそれぞれに異なった基本色を選びました。この色彩設計は装飾的であると同時に機能的な役割を果たし、ウィンドウを区別しやすくしています。

カラーモニタと白黒モニタに関して考える必要があるもう１つの問題は、テキストとグラフィックスのアンチエイリアスの使用です。ほとんどのペイントソフトで作成することができるアンチエイリアス処理を行なわれたテキストは、スクリーン上でプレインテキストより美しく表示されます。しかし、白黒モニタ上では、非常に荒れた、美しくないものとして表示されてしまいます。したがって、多くの場合、特にテキストが小さいケースでは、アンチエイリアスなしでも読みやすいようなフォント、サイズ、スタイルを選ぶことが賢明な方法です。もちろん、このバージョンの Max を使っている大多数の人々はカラーモニタを使っているため、カラーモニタのユーザを念頭に置いてプログラムの外観のデザインを決定し、適切と考えられる範囲で白黒モニタのユーザに適応させるという方法も考えられるでしょう。

アンチエイリアス処理を行なわれたテキストは、グレースケールモニタやカラーモニタでは、白黒モニタより美しく表示されます。

Max オブジェクトとグラフィックの組み合わせ

ユーザに表示するオブジェクトを決定し、必要な場所に配置した後、Max パッチからそれらをコピーし、ドローイング、またはペインティング用のプログラムにペーストして、その周りにMax オブジェクトを取り囲むような画像を作成することができます。使用するグラフィックス用プログラムが、Adobe Photoshop のようにマルチレイヤをサポートしている場合、Max オブジェクトの画像を残りの画像とは別のレイヤに置くことができます。思うような画像が仕上がったら、Max オブジェクトの画像を削除し、残りの部分をコピーして Max パッチにペースとして下さい。最初と同じ位置にコピーすれば、オリジナルの Max オブジェクトとぴったりと合わせることができるはずです。このアプリケーションの Track ウィンドウと Keyboard ウィンドウは、この方法で作成されています。

この画像はいくつかの Max オブジェクトの周囲に描かれ、オブジェクトと全く同じサイズの空所をもっています

ウィンドウのサイズと配置

pcontrol オブジェクトを用いて、サブパッチのウィンドウを自動的に開閉することができ、thispatcher によって、サブパッチウィンドウの開閉、移動、サイズ変更、外観の変更を行なうことができます。thispatcher オブジェクトは、自分自身が置かれているウィンドウに対してメッセージを送信します。このアプリケーションのそれぞれのウィンドウは、ウィンドウのサイズ、位置、特性を正確に設定するために、非表示の thispatcher オブジェクトを持っています。アプリケーションが開かれたとき、loandbang オブジェクトはそれぞれのウィンドウの設定を行なうために、それぞれの thispatcher に対するメッセージをトリガします。

thispatcher を用いてウィンドウの特性、サイズ、位置を設定します

4 つのトラック用のウィンドウは同じサブパッチのインスタンスです。このサブパッチは modtrack というファイル名で別個に保存されています。個々のインスタンスはそれぞれ独自な画像を持ち、独自の場所に配置されていますが、これは、fpic オブジェクトとthispatcher オブジェクトに対する情報が、メインパッチにある modtrack オブジェクトへのアーギュメントとして提供されているためです。

メインパッチ内の modtrack へのアーギュメントは...それぞれの modtrackサブパッチに対して独自の性質を供給します

thispatcher によってウィンドウの変更を行なう場合に注意すべき点がいくつかあります。例えば、ウィンドウサイズの座標値にはスクリーンの境界を完全に超えてしまうような値を設定することも可能で、この場合ウィンドウを見ることはできません（ただし、ウィンドウは開いたままです）。また、タイトルバーを非表示にした場合、ウィンドウを新しい場所にドラッグすることはできなくなり、スクロールバーを非表示にした場合、必要な変更を行なうためにパッチ内の適切な場所に行き着くことができなくなるかもしれません。これらの問題に対するうまい予防手段は、必要な場合に他のパッチャーからメッセージを送ることができるように、receive オブジェクトをthispatcher のインレットに接続しておくことです。

あるパッチのメッセージは・・・他のパッチにあるウィンドウの特徴を変更することができます

メニューバーのカスタマイズ

ユーザに対してアプリケーションへのコマンドを提供する標準的な方法は、メニューバーからのコマンドの選択です。このアプリケーションでは、個々のトラックのオン／オフの切り替えや、キーボードウィンドウの開閉、すべてのチャンネルへのオールノートオフ・メッセージ（シンセサイザでノートがオンのままになってしまった場合に送信します）の送信を行なうメニューコマンドが必要になります。menubar オブジェクトを使うと、独自のメニューやコマンドをメニューバーに追加することができます。menubar のアーギュメントによって、必要なメニューの数を指定することができます（Help、File、Edit、Window という 4 つのメニューは必須です）。その後、menubar に追加のメニューとコマンドを置きたい場所を知らせるスクリプトを入力します（スクリプトの書法に関する詳細は、Max リファレンスマニュアルの menubar を参照して下さい）。このケースでは、Help メニューの最初の項目をAbout Max...から About Note Modifier... に変更し、必要な新しいコマンドを置くModify という新しいメニューを追加しています。（訳注：About Note Modifier は、Windows ではHelp メニューの最初の項目になりますが、MacOS Xでは、MaxMSP というメニューの項目として表示されます。）

このためのスクリプトは、次のようになります。

#X apple Abut Note Modifier...; #X menutitle 5 Modify; #X item 5 1 Track A/1; #X item 5 2 Track B/2; #X item 5 3 Track C/3; #x item 5 4 Track D/4; #X item 5 5 -; #X item 5 6 Keyboard/K; #X item 5 7 -; #X item 5 8 Panic/P; #X end;

“/” は特別な文字で、後に続く文字はメニュー項目と関連づけられたキーボード・ショートカット（Macintosh では [Command] + <キー>、Windows では [Control] + <キー> ）を表わします。 “-“ も特別な文字で、メニューの中のその位置に、実際のメニュー項目の代わりにグレーの線が表示されることを表します。この線はメニューをセクションに分割する場合に役に立ちます。

メニューバーが作成されると、トラックのオンとオフを切り替えるために、ボタン、メニューコマンド、キーコマンドという３つの方法を使うことができるようになります。これは、プログラミングを行なう上ではやや複雑なものになります。なぜなら、３つの方法それぞれについて、ボタンのハイライトと非ハイライト、メニュー項目のチェックと非チェック、Track ウィンドウの開閉、そのTrack ウィンドウ内での MIDI の使用可と使用不可を処理する必要があるからです。

・これらがどのように行なわれているかを見るためには、メインパッチの内容を見るためのトリックを使う必要があります。45.Note Modifier ウィンドウを閉じ、Macintosh では [Command] + [Shift] キー、Windows では [Control] + [Shift] キーを押し下げたままで再びファイルを開きます。すると、すべての loadbang オブジェクトの bang メッセージの送信が停止され、スクロールバーとズームボックスが非表示にならずにウィンドウが開きます。この方法によって、パッチャーをアンロックし、ウィンドウを広げて、menubar オブジェクトが ubutton オブジェクトをトリガしている方法を見ることができるようになります。この ubutton オブジェクトは、トラックがオンまたはオフになった場合に必要となるすべての動作を順番にトリガするものです。

テキストラベルの変更

パッチの中で変更可能なテキストラベルが必要な場合、comment の代わりにumenu オブジェクトがその役割を果たします。

訳注：原文では menu オブジェクトとなっていますが、実際には umenu オブジェクトです。

umenu のインスペクタウィンドウでは、メニューのモード (Mode)を Label に設定することができます。このモードの場合、umenu は枠を持たないテキストラベルとして表示され、マウスクリックに応答しないため、ほとんど comment と同じように見えます。しかし、comment と異なり、メニュー項目として様々なテキストメッセージを書き込むことができ、インレットに項目ナンバーを送信してその項目を呼び出すことができます。この方法を使って記述されているナンバーに合わせてラベルを変化させることができます。

例えば、Trackウィンドウで MIDI ノートのチャンネルが変更されないままの場合、Channelizationの値は 0 です。しかし、Channelizationの値として 1 から 16 までの数値が入力されると、直ちにラベルは Out Channel に変更され、現在はチャンネルのルーティングが行なわれていないということを表します。

ナンバーボックスの値の変更によって、Label が変更されます

テキストの変更に関する umenu のその他の使用法は、About Note Modifier という画面で見ることができます。

・Apple メニュー、または Help メニューから About Note Modifier... を選んで下さい。

訳注：MacOS X では MaxMSP メニューです。

「Click anywhere to continue」というテキストは点滅をしています。これは、実際には 2つのメニュー項目を切り替えている Label モードの umenu です。1つの項目にはテキストが含まれ、もう1つは空になっています。ウィンドウが最前面に移動されると、active オブジェクトが metro をスタートさせ、metro は1 秒ごとに umenu の 2つの項目の間を前後に切り替えます。

テキストの点滅は、Label モードの umenu の項目の切り替えによるものです

入出力ポート

それぞれの Track ウィンドウには、MIDI メッセージの入力と出力のポートを設定するためのポップアップメニューがあります。これらのポップアップメニューは、midiinfo オブジェクトによって取得された現在の MIDI 設定の中のすべてのデバイスを項目として含み、notein、noteout、ctlout オブジェクトのポートを設定し直すために用いられます。

midiinfo は現在の MIDI Setup の中のすべてのデバイスを報告します

パッチがロードされると、loadbang は一方のmidiinfo の右インレットに数値を送信して入力デバイスを報告させ、もう一方の midiinfo の左インレットに bang を送信して出力デバイスを報告させます。midiinfo はこれらの入力のうちの１つを受信すると、最初に clear メッセージを送信してメニューを空にし、その後、一連の append メッセージを送信して適切なデバイス名をそれぞれメニューに追加します。このオブジェクトの組み合わせは、現在の MIDI 設定に関する情報をパッチの中で取得する手段となり、ポップアップメニューから希望するポートを選ぶことができるようになります。

Modify メニューから Panic コマンドを選んだ場合、または、Macintosh では [Command] + P、Windows では [Control] + P のキーが押された場合、それぞれのトラックのuzi 16 オブジェクトにbang が送信され、これによって、そのトラックの出力ポートの 16 のチャンネルすべてにオールノートオフ・メッセージ（コンティニュアス・コントローラ 123 への 0 の値）が送信されます。これは、シンセサイザでオンのままになってしまったノートを止めるための素早いパニックコマンドを実装する最も良い方法です。

まとめ

ユーザインターフェイスのプログラミングと設計に注意を払うことによって、Max パッチを、他の人々に配布するための完成されたアプリケーションにすることができます。メニューバーは、menubar オブジェクトを使って、新しいメニューやコマンドによるカスタマイズを行なうことができます。アプリケーションを構成するすべてのパッチやサブパッチのウィンドウのサイズ、位置、カスタマイズの設定は、thispatcher オブジェクトを使って正確に、自動的に行なうことができます。新しいスクリーン上のボタンは、画像処理プログラムによってデザインし、パッチャーの中に配置し、ubutton オブジェクトを使うことによってマウスクリックに対応させることができます。そして、画像処理プログラムによってデザインされた画像にMax のユーザインターフェイスオブジェクトを組み込み、その画像の一部のように表示させることができます。デザインする画像で使う色やフォントは、その美しさだけでなく、機能性やわかりやすさを考えて選択しなければなりません。

fpic に pict メッセージを送ることによって、パッチャー内の画像を変更することができます。テキストラベルは、Label モードの umenu に項目ナンバーを送信する方法によって変更することができます。現在の MIDI 設定に含まれるデバイス名は、midiinfo オブジェクトを使って取得し、umenu オブジェクトに設定することができます。これによって、このデバイス名を MIDI オブジェクトに送信し、ポートの割り当てを変更することができるようになります。

参照

fpic	画像ファイルからの画像を表示する。
menubar	カスタマイズしたメニューバーを置く。
pcontrol	パッチャ?内のサブウィンドウを開閉する。
thispatcher	パッチャ?にメッセージを送信する。
チュートリアル19	スクリーン上の美学
チュートリアル43	パッチャ?内のグラフィックス
コレクティブ	（Max トピックス）ファイルをグルーピングしてアプリケ?ションを作成する。

チュートリアル45： ユーザインターフェイスの設計