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