IxEdit はウェブのインタラクションデザイン・ツール（その2）
IxEdit はウェブのインタラクションデザイン・ツール（その1）の続きです。
IxEdit の特徴
今回は、IxEdit の特徴について解説します。
IxEdit は、マウスによるメニュー選択を中心とした操作で DOM スクリプティングを実践し、ウェブページに簡単にインタラクションを加えることができるツールです。
これまでも、ウェブページ上のアクションをメニューベースで作成できるプロトタイピングツールもしくはオーサリングツールがいくつかありましたが、それらのほとんどは、次のような課題を抱えていました。
- 出来合の JavaScript コンポーネントを適用するだけで、オリジナルの動きを作ることができない。
- 編集中のアクションをプレビューするには、ツール内のプレビュー機能を使わなければならず、実際のブラウザにおける動きをその場で見ることができない。
- 完成したコードが独自のフォーマットであるため、本番実装に流用できない。
- 完成したコードを実行するには、ブラウザプラグインやランタイムが必要。
ページのレイアウトやラベリングについて検討する上では、紙にラフスケッチを描いたり、ドロー系のグラフィックソフトを使えば簡単にプロトタイピングができます。しかしインタラクションのデザインを検討するためには、実際に動くものを作らなければなりません。ウェブページ上のインタラクションを作るには、JavaScript を書く必要があります。そのため JavaScript に詳しくないデザイナーなどは、事実上、インタラクションのデザインを自ら試行錯誤して行うことができなかったのです。
Flash や Silverlight といったツールを使えば比較的容易に動きのあるプロトタイプを作ることができますが、本番実装が HTML + CSS + JavaScript である場合、そのコードを流用することができませんし、実現可能性の検証も難しくなります。できるだけ本番実装に近い環境でインタラクションデザインを行うには、JavaScript を動的に生成するようなツール、そして JavaScript に詳しくないデザイナーなどでも自由に DOM スクリプティングができるツールが必要だと考えました。
そこで思いついたのが、インタラクションデザインツール自体を JavaScript で実装してページに埋め込んでしまい、ブラウザの中で直接そのページのインタラクションを作成できるようにすることでした。これにより、上記の課題はすべて解決します。
- クラスの追加/削除、値の変更、DOM 要素の挿入/削除など、DOM スクリプティングの基本となる処理を組み合わせて自由にインタラクションをデザインできる。
- 編集中のアクションはブラウザ内で直接見ることができる。
- 生成されるコードは JavaScript なので、本番実装に流用できる。
- 生成されるコードは JavaScript なので、ブラウザのみで実行可能（jQuery および jQuery UI ライブラリは必要）。
IxEdit を使えば、デザイナーやエンジニアは、オーサリングツール上での動きと実際のブラウザ上での動きのギャップに惑わされることがなくなりますし、特殊なプラグインやランタイムをインストールする必要もなくなります。
では以下に、IxEdit の特徴をもう少し細かく見ていきましょう。
作成したインタラクションをその場で反映
ブラウザの中に表示されるエディタ
IxEdit は、編集対象のウェブページに埋め込んでブラウザの中で操作するツールです。IxEdit のUIは DOM スクリプティングによって動的に生成されており、ブラウザから見るとそのページコンテンツの一部となっています。そのため、IxEdit で作成したインタラクションは、そのページ自身の DOM 要素を動的に変更することができます。
IxEdit で作成したインタラクションはその場でページに反映されるので、動きをリアルタイムに確認しながら編集作業を行うことができます。例えば、スライド効果のスピードを 100ms にするか 250ms するかといった試行錯誤を、アプリケーションの切り替えやブラウザのリロードなしに、実際の動きを見ながらその場で好きなだけ行うことができます（ただし DOM を初期状態に戻すにはブラウザをリロードする必要があります）。
jQuery によるパワフルなインタラクション
jQuery によるパワフルなインタラクション
IxEdit は、指定したコマンドやパラメーターから自動的に JavaScript コードを生成します。生成されたコードは、世界的に人気のある JavaScript ライブラリの jQuery および jQuery UI とともに動作し、パワフルなインタラクションを実現します。ブラウザ毎の違いも jQuery が吸収するので心配ありません。
jQuery の用法をすでに知っている方は、IxEdit を使うことによって、手で書くよりもずっと早く jQuery 構文のスクリプトを作成できることに気がつくでしょう。また jQuery や DOM スクリプティングについてよく知らない方でも、IxEdit 上で用意されたコマンドメニューやパラメータ欄を埋めるだけで、IxEdit が自動的に jQuery 構文のスクリプトを生成してくれるので、簡単に DOM スクリプティングを試すことができます。
IxEdit 自体を実現している JavaScript コード（ixedit.js）は、ライブラリである jQuery および jQuery UI のコードとは分離しているので、すでに jQuery や jQuery UI を利用しているページであってもライブラリを重複して読み込む必要がありません。またインタラクションの編集が終わったら、（生成された JavaScript コードを HTML に貼付けて）IxEdit 自体は削除してかまいません。IxEdit が生成する JavaScript コードは、IxEdit に依存しない、純粋な jQuery 構文のスクリプトになります。
ローカルDBを使ったデータ保存
ローカルDBの活用
編集中のインタラクションは、HTML5 で標準化されるローカル環境のDB（クライアントサイド・データベース・ストレージ）の技術を使って逐次保存されます。そのため、ブラウザを閉じたりリロードしたりしても、データは失われません。またオフラインでの使用も可能です。
IxEdit は編集対象のページの一部として動作しますが、JavaScript では、自分自身が埋め込まれた HTML ファイルをローカル環境に保存することができません。しかし IxEdit では、作成したインタラクションのデータをローカルDBを使って保存するので、テキストエディタで JavaScript を何度も書き換えるような手間無しに、ブラウザだけで作業を進めることができます。
IxEdit では、このローカルDB機能を実現するために、Google が無償で提供する Gears を用いています。Firefox または Internet Explorer で IxEdit を利用する場合には、あらかじめ Gears をインストールしておく必要があります。一方、Safari または Chrome で IxEdit を利用する場合には、ブラウザにすでにローカルDB環境が組み込まれているので、Gears のインストールは不要です。
次回は、IxEdit の設計に込められたコンセプトについて解説します。
