要素を画面に表示するには、何らかのスタイル指定が必要です。一般的には、この指定はスタイルシートに記述されます。タグの中で各要素のスタイル属性を直接記述することもできます。スタイルが指定されていない要素については、ブラウザに内蔵されたデフォルトスタイルシートが適用されます。ビヘイビアブラウザがデフォルトで提供するビヘイビアは非常に限られています。リンクをクリックした時にページが遷移することや、フォームコントロールから入力を受け付けることぐらいしかありません。よるビヘイビアの指定が必要になります。これら三つの要素は、それぞれ分離していることが望ましいと言われています。タグの中で直接スタイル属性やスクリプトを書くこともできますが、プログラムとして効率が悪くなります。対して同じスタイルやビヘイビアを適用するといったことも容易になります。別々に記述されていることが重要です。(これは三つが別のファイルになっていなければならないという意味ではありません。ファイルの中にこれら三つの要素を含ませることもできますが、三つが互いに影響を与えずに変更できるようになっていなければなりません。)インタラクションを構成する要素インタラクションをデザインするためには、インタラクションというものがどのような要素で構成されているかを把握する必要があります。インタラクションとは、簡単に言えば、ユーザーのアクションに対するシステムの振る舞いです。「ユーザーがボタンAをクリックした時、もしテキストボックスBが空なら、テキストボックスBの背景が黄色になる」といったものです。テキストボックスBが空なら」という三つの要素になります。ひとつのインタラクションは次の三つの要素で構成されることになります。要素に対して何らかの操作が加えられること、それがアクションです。アクションは、イベント(クリック)と対象要素(ボタンA)によって定義されます。イベントの種類は、クリック、ダブルクリック、マウスオーバー、フォーカスなど、あらかじめ決められています。リアクションアクションに対して何が起こるか、というのがリアクションです。要素を変更することで実現されます。リアクションをデザインするには、対象要素(テキストボックスB)と、その変化の内容(背景が黄色になる)を定義する必要があるでしょう。要素であり、変化の内容はプログラムの関数として様々な処理が考えられます。ひとつのアクションに対して複数のリアクションが必要になるかもしれません。ボタンAをクリックすると、テキストボックスBの背景が黄色になると同時に、パラグラフCにエラーメッセージを表示する、といった動きが考えられます。アクションとリアクションは「1対他」の関係になります。条件は必須の要素ではありませんが、インタラクションを柔軟なものにするために必要になることがあります。これは、対象要素(テキストボックスB)と状態(空なら)によって定義されます。リアクションと同様に、ひとつのアクションに対して複数の条件が必要になるかもしれませんので、アクションと条件は「1対他」の関係になります。通常は、ひとつのウェブページにはいくつものインタラクションが必要になるでしょう。インタラクションをデザインするとは、つまり、「アクション」「リアクション」「条件」のセットを複数作成するということなのです。インタラクションをデザインするツールとして、「アクション」「リアクション」「条件」を指定するエディタを備えています。大きくふたつのビューがあります。そのページに加えた全インタラクションを俯瞰するためのものです。その中から特定のインタラクションを選び、複製したり、削除したり、編集ビューに切り替えたりする役割を持ちます。「一覧表示」で選んだひとつのインタラクションについて、その内容を編集することができます。「編集表示」は入力フォームになっており、「アクション」「リアクション」「条件」の三つのパートに分かれています。上記の「インタラクションを構成する要素」ごとに各種値を指定するようになっているのです。(この三つの他に、コメントを入力するためのパートもあります。)ひとつの「アクション」に対して、「リアクション」と「条件」は複数作れるようになっています。これも上記の考え方を反映したものです。要素を指定する欄があります。要素を指定する方法として、スタイルシートで使うセレクタと同じ書式を用いるようになっています。ID属性が「button1」である要素を指定したい場合は、「#button1」と記入します。属性が「my-button」である要素を指定したい場合は、「.my-button」と記入します。書き方に慣れたデザイナーは、ページ内の各要素を思いどおりにインタラクションの対象要素として指定することができるでしょう。ライブラリーの恩恵です。背景にある設計コンセプトと、それがどのようにユーザーインターフェースに反映されているかを説明しました。このように、インタラクションを構造化して編集可能にし、また複数のインタラクションをまとめて管理できるようにしたツールは、他にほとんどないと思います。コードに全く影響を与えないことにも注目してください。エディタと連携して利用できることを意味しています。活用して、「ウェブのインタラクションを自由にデザインする」という新しい領域に是非チャレンジしてみてください。