ユーザーガイド
IxEdit へようこそ
![]()
IxEdit を使えば、ウェブページに簡単にインタラクションを加えることができます
IxEdit は、ウェブアプリケーションのためのインタラクションデザインツールです。IxEdit を使えば、デザイナーは JavaScript コードを書かずに、ウェブページ上の要素をダイナミックに変化させる DOM スクリプティングを簡単に行うことができます。特に、ウェブアプリケーションのプロトタイピング段階で様々なインタラクションを試してみるのに役立つでしょう。
IxEdit はそれ自体が JavaScript で作られており、編集対象のウェブページの中に組み込んで使用する全く新しいタイプのツールです。作成したインタラクションはその場でウェブページに適用されるため、ブラウザの中で動作をリアルタイムに確認しながら編集作業を行うことができます。
IxEdit は指定されたパラメーターから自動的に JavaScript を生成します。IxEdit が生成する JavaScript コードは、国際的に広く使われているオープンソースの JavaScript ライブラリーである jQuery および jQuery UI を用いて、様々なインタラクションを実現します。ブラウザ間の違いも気にする必要がありません。
編集中のインタラクションは、ローカル環境のデータベースに保存されます。そのため、ブラウザを一度閉じたりリロードしたりしても編集データは失われません。またオフラインの状態でもインタラクションの編集作業を行うことができます。Firefox または IE で IxEdit を使う場合には、ローカルデータベースを使うために Gears をあらかじめブラウザにインストールしておく必要があります。
IxEdit を使い始める
必要環境
IxEdit を使用するためには、以下の環境が必要です。
- Safari 3.1 以上、Chrome、Firefox 3 以上、Internet Explorer 7 以上、のいずれかのブラウザ。
- Gears(Safari では不要、Chrome ではあらかじめ組み込まれているのでインストール不要)。
- UTF-8 でエンコードされ、標準モードで記述された編集対象の HTML ファイル。
Firefox または Internet Explorer で IxEdit を使う場合は、ブラウザに Gears をインストールしておく必要があります。
IxEdit を正しく動作させるには、編集対象の HTML が UTF-8 でエンコードされている必要があります。また、その HTML の内容は、標準モードで記述されている必要があります。
生成された JavaScript の動作環境
IxEdit が生成する JavaScript は、以下のブラウザで動作します。
- Internet Explorer 6 以上
- Firefox 2 以上
- Safari 3 以上
- Opera 9 以上
- Chrome
Gears の設定
Safari もしくは Chrome で IxEdit を使う場合は、Gears のインストールは不要です。
FireFox あるいは Internet Explorer で IxEdit を使う場合には、ブラウザに Gears がインストールされている必要があります。
Gears は、Google の Gears のサイト(http://gears.google.com/)からすぐにダウンロードおよびインストールすることができます。詳細は Gears のサイトを参照してください。
Gears をインストールして、IxEdit が読み込まれた HTML をブラウザで開くと、Gears の利用許可をたずねるダイアログが表示されます。これは対象のウェブページがローカル環境のデータベースにアクセスすることを許可するかどうかの確認です。これを許可すると、IxEdit が使えるようになります。
必要ファイルの配置と読み込み
IxEdit は、編集対象の HTML に必要な JavaScript ファイルおよび CSS ファイルを読み込むことで動作します。以下のファイルが必要です。これらはすべてダウンロードファイルに含まれています。最新のファイルは http://ixedit.com/download/ からダウンロードできます。
- jquery-plus-jquery-ui.js
必要なコンポーネントをすべて含んだ jQuery ライブラリと jQuery UI ライブラリの統合ファイル。この統合ファイルのかわりに、 ご自分で jQuery サイト(http://jquery.com/ および http://jqueryui.com/)からダウンロードした最新版を使うこともできます。ただしリリース直後のバージョンは IxEdit との互換性に問題がある可能性があります。 - ixedit.js
IxEdit 自体の JavaScript ファイル。 - ixedit.css
IxEdit 自体のスタイルを定義した CSS ファイル。 - ui-sui.css
IxEdit が生成するいくつかのUIパーツのスタイルを定義したサンプル CSS ファイル。このファイルは IxEdit の動作自体には関係しません。自分でこれらUIパーツのための CSS を作成している場合、このファイルは必要ありません。
これらの JavaScript ファイルおよび CSS ファイル、そして CSS ファイルから参照される画像を含んだ images フォルダ(IxEdit のダウンロードファイル群に含まれています)を、適当なディレクトリに配置し、編集対象の HTML から読み込みます。読み込むための記述は、head 要素内に置くことをおすすめします。
ixedit.js の読み込みは、jquery および jquery-ui の読み込みよりも後に行われるように記述してください。
次の図は、必要なファイルを HTML の head 要素内で読み込んでいる記述例です。

IxEdit ダイアログの操作
IxEdit ダイアログ

IxEdit が正常に起動すると、ウェブページ内に IxEdit ダイアログが表示されます。この IxEdit ダイアログを使って、インタラクションを追加/編集していくことになります。編集中の内容は逐次ページ内容に反映されるため、動きを確認しながらインタラクションを作成することができます。
タイトルバーをドラッグして、IxEdit ダイアログをブラウザ内で移動することができます。
タイトルバーをダブルクリックすることで、ダイアログを折り畳むことができます。もう一度ダブルクリックすれば元に戻ります。

右下のつまみをドラッグして、IxEdit の表示サイズを変更することができます。
IxEdit ダイアログには、一覧表示と編集表示があり、これらを切り替えながらインタラクションの追加・編集作業を行います。
基本的な操作の流れ
IxEdit を使ってインタラクションを作成するための基本的な操作の流れは次のようになります。
- 一覧表示で「新規」ボタンをクリックし、新たなインタラクションを作成するための編集表示を開きます。
- アクション編集エリアで、インタラクションのトリガーとなるイベントと対象要素を指定します。
- リアクション編集エリアで、コマンドと必要なパラメーターを指定します。ひとつのアクションに対して複数のリアクションを作成することができます。
- 特定の状態にある時のみリアクション実行させたい場合は、条件編集エリアで条件を指定します。
- 必要に応じて、コメント編集エリアでコメントを記入します。
- 「完了」ボタンをクリックし、作成したインタラクションを保存します。IxEdit ダイアログは一覧表示に戻ります。
- この作業を繰り返し、ウェブページのインタラクションを完成させます。
- インタラクションがすべて完成したら、ルーティングメニューから「デプロイ」を選び、最終的な JavaScript を生成します。
- 生成された JavaScript コードを HTML 内に貼り付けます。
一覧表示の操作

一覧表示には、作成したインタラクションがリストされます。一覧表示では、新規インタラクションの追加、選択したインタラクションの複製と削除、インタラクション全体のエクスポート、デプロイ、そしてインタラクションのインポートなどを行うことができます。
インタラクションの新規追加
新たにインタラクションを追加するには、「新規」ボタンをクリックします。すると IxEdit ダイアログは編集表示に切り替わり、新たなインタラクションのための入力が行えるようになります。
インタラクションの編集
既存のインタラクションを再度編集するには、一覧の中から対象のインタラクションの行を選択して「編集」ボタンをクリックするか、その行をダブルクリックします。すると IxEdit ダイアログは編集表示に切り替わり、インタラクションの内容を編集できるようになります。
インタラクションの複製と削除
既存のインタラクションを複製するには、一覧内で対象のインタラクションを選択し、「複製」ボタンをクリックします。複数のインタラクションを同時に複製することもできます。
既存のインタラクションを削除するには、 一覧内で対象のインタラクションを選択し、「削除」ボタンをクリックします。複数のインタラクションを同時に削除することもできます。
一覧のソート
一覧の列ヘッダーをクリックすることで、一覧をソートすることができます。
インタラクションのオンオフ
一覧の各行の先頭にあるチェックボックスをオンオフすることで、それぞれのインタラクションを有効化/無効化できます。これによって、一度作成したインタラクションを削除することなく、一時的に無効にすることができます。
チェックボックスをオフにして無効化している場合、そのインタラクションは編集できません。複製や削除はできます。編集するためには、一度チェックボックスをオンにします。
編集表示の操作

編集表示では、ひとつのインタラクションについての編集作業を行うことができます。ひとつのインタラクションは、「アクション」「リアクション」「条件」で構成されます。またインタラクションごとに「コメント」を記入することもできます。「アクション」「リアクション」「条件」「コメント」の各編集エリアは、それぞれの見出し部分をクリックすることで開閉できます。
アクションの指定
アクションとは、インタラクションのきっかけを意味します。ひとつのインタラクションにつき、ひとつのアクションを指定します。
イベント
アクションを種類としてドロップダウンメニューからイベントを選択します。各イベントは次のような状況で発生します。
- ロード
HTMLがブラウザに読み込まれ、DOMツリーが構成された時。 - アンロード
ブラウザがリロードあるいは別なURLにジャンプする直前。 - 値変更
対象入力コントロールの内容が変更され、フォーカスがはずれた時。 - クリック
対象要素がクリックされた時。 - ダブルクリック
対象要素がダブルクリックされた時。 - ドロップ
対象のドロップ可能な要素にドロップされた時(「ドロップ可能に」を参照) - フォーカス
対象要素がフォーカスされた時。 - フォーカスアウト
対象要素からフォーカスがはずれた時。 - キーアップ
キーボードのキーが放された時。 - マウスダウン
対象要素でマウスボタンが押された時。 - マウスムーブ
対象要素でマウスが動かされた時。 - マウスオーバー
対象要素上にマウスが入った時。 - マウスアップ
対象要素上でマウスボタンが放された時。 - リサイズ
ドキュメント表示がリサイズされた時。 - スクロール
ドキュメント表示がスクロールされた時。 - セレクト
input や textarea のテキスト欄でユーザーがテキストを選択した時。 - サブミット
対象 form 要素がサブミットされた時。
セレクタ
イベントの対象となる要素を指定します。セレクタ指定の書式については「セレクタの書式」を参照してください。
セレクタ欄の右にある「クイックセレクト」ボタンをクリックして、ページ内からマウスクリックでセレクタを指定することもできます。
その他
- 通常動作をキャンセル:チェックを入れると、指定したイベントに対する通常の動作がキャンセルされます。例えば「a」要素の「クリック」イベントについて通常動作をキャンセルすると、その要素をクリックしても href 属性で指定した URL にジャンプしません。
- バブリングを停止:チェックを入れると、その要素でバブリング(イベントがその発生源からの親ノードへと伝わること)が停止します。
リアクションの指定
リアクションとは、アクションに応じて起きるスクリーンの振る舞いを意味します。ひとつのインタラクションにつき、複数のリアクションを指定することができます。
コマンド
リアクションを指定するには、まずコマンド選択ドロップダウンメニューからコマンドを選びます。IxEdit には30以上のコマンドが用意されています。目的に合ったコマンドを選び、残りの項目に必要なパラメーターを入力します。コマンドによって入力項目は異なります。
コマンド選択ドロップダウンメニューの右にあるコマンドヘルプボタンをクリックして、各コマンドの簡単な説明を見ることができます。
各コマンドについての詳細は、「リアクションコマンド」を参照してください。
セレクタ
多くのコマンドでは、セレクタ欄が用意されています。セレクタ欄で指定した要素が、コマンドの対象となります。 セレクタ指定の書式については「セレクタの書式」を参照してください。
セレクタ欄の右にある「クイックセレクト」ボタンをクリックして、ページ内からマウスクリックでセレクタを指定することもできます。
遅れ
多くのコマンドでは、「遅れ」を指定することができます。遅れとは、アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を意味します。「なし」が指定されている場合、アクションが起こされると即座にリアクションが実行されます。
リアクションの追加と削除
ひとつのインタラクションに対して複数のリアクションを指定することができます。リアクションを追加するには、リアクション編集エリアの右にある「+」ボタンをクリックします。リアクションを削除するには、対象リアクションの右にある「−」ボタンをクリックします。ただしリアクションがひとつしかない状態では、それを削除することはできません。
条件の指定
条件とは、リアクションが実行される条件となる状態を意味します。条件でした状態にある時のみ、リアクションが実行されます。条件が指定されている場合、同一インタラクション内のすべてのリアクションに対して反映されます。ひとつのインタラクションにつき、複数の条件を指定することができます。複数の条件が指定されている場合、それらすべての条件が満たされた場合にのみリアクションが実行されます。
コマンド
条件を指定するには、まずコマンドを選びます。目的に合ったコマンドを選び、残りの項目に必要な値を入力します。
各コマンドについての詳細は、「条件コマンド」を参照してください。
セレクタ
多くの条件では、セレクタ欄が用意されています。セレクタ欄で指定した要素が、条件の対象となります。 セレクタ指定の書式については「セレクタの書式」を参照してください。
セレクタ欄の右にある「クイックセレクト」ボタンをクリックして、ページ内からマウスクリックでセレクタを指定することもできます。
条件の追加と削除
ひとつのインタラクションに対して複数の条件を指定することができます。条件を追加するには、条件編集エリアの右にある「+」ボタンをクリックします。条件を削除するには、対象条件の右にある「−」ボタンをクリックします。
コメントの記入
編集表示の最下部には、コメント欄があります。コメント欄には、編集中のインタラクションに関する説明や、自分なりのキーワードなど、自由な内容を書き込むことができます。 コメント欄に記入した内容は、インタラクションの動作には影響しません。
「完了」と「完了してリロード」
編集作業が済んだら、「完了」ボタンをクリックします。するとそのインタラクションがローカル環境のデータベースに保存され、IxEdit ダイアログは一覧表示に戻ります。
「完了してリロード」ボタンをクリックすると、インタラクションが保存されると同時に、ブラウザがリロードします。ページを初期状態に戻して動作を確認したい場合に、「完了してリロード」を使います。
編集内容の復帰
一度編集を完了したインタラクションに対して再度編集を行っている場合、「復帰」ボタンをクリックすることで、前回編集を完了した状態に戻すことができます。
セレクタの書式
多くのアクションコマンド、リアクションコマンド、条件コマンドには、セレクタ欄があります。セレクタ欄には、対象とする要素を特定する値を入力します。
セレクタ欄に入力する値の書式は CSS のセレクタの書式と非常に似ています。セレクタ指定の書式は以下のとおりです。
基本
- #idName
そのIDに合致する要素。(例 #myElement) - elementName
その要素名に合致する要素。(例 div) - .className
そのクラス名に合致する要素。(例 .myClass) - .className1.className2
指定の複数のクラス名に合致する要素。(例 . myClass.myNavigation) - *
すべての要素。 - selector1, selector2, selectorN
指定の複数のセレクタのいずれかに合致する要素。(例 div, p, .myClass) - selector1 selector2
selector1 の子孫要素である selector2 に合致する要素。(例 .myClass div) - selector1 > selector2
selector1 の子要素である selector2 に合致する要素。(例 .myClass > div) - selector1 + selector2
selector1 に続いて隣接する selector2 に合致する要素。(例 .myClass + div) - selector1 ~ selector2
selector1 の後にある姉妹要素のうち selector2 に合致する要素。(例 #myElement ~ .myClass)
フィルタ
- :first
最初の要素。(例 div:first) - :last
最後の要素。(例 div:last) - :not(selector)
selector に合致するものを除いた要素。(例 div:not(#myElement)) - :even
ゼロベースで偶数番目の要素。(例 div:even) - :odd
ゼロベースで奇数番目の要素。(例 div:odd) - :eq(index)
ゼロベースで index 番目の要素。(例 div:eq(2)) - :gt(index)
ゼロベースで index 番目よりも大きい要素 。(例 div:gt(2)) - :lt(index)
ゼロベースで index 番目よりも小さい要素。(例 div:lt(2)) - :header
h1, h2, h3 といったヘッダー要素。(例 .myClass:header) - :animated
現在アニメートされている要素。(例 div:animated) - :contains(“text”)
指定の文字列を有する要素。(例 div:contains(“Hello”)) - :empty
テキストノードや子要素を持たない要素。(例 div:empty) - :has(selector)
指定のセレクタを含有する要素。 - :parent
子要素(テキストを含む)を持つ要素。 - :hidden
表示されていない要素。(例 div:hidden) - :visible
表示されている要素 。(例 div:visible) - :nth-child(index/even/odd/equation)
親要素から見て1ベースで index 番目/ゼロベースで奇数番目/ゼロベースで偶数番目の子要素。(例 li:nth-child(2)) - :first-child
親要素から見て最初の子要素。(例 li:first-child) - :last-child
親要素から見て最後の子要素 。(例 li:last-child) - :only-child
親要素から見て唯一の子要素。(例 button:only-child) - :input
input, textaera, select, button 要素。(例 .myClass:input) - :text
type 属性が text の input 要素 。(例 .myClass:text) - :password
type 属性が password の input 要素。(例 .myClass:password) - :radio
type 属性が radio の input 要素。(例 .myClass:radio) - :checkbox
type 属性が checkbox の input 要素。(例 .myClass:checkbox) - :submit
type 属性が submit の input 要素。(例 .myClass:submit) - :image
type 属性が image の input 要素。(例 .myClass:image) - :reset
type 属性が reset の input 要素。(例 .myClass:reset) - :button
button 要素および type 属性が button の input 要素。(例 .myClass:button) - :file
type 属性が file の input 要素。(例 .myClass:file) - :enabled
enabled 状態の要素。(例 input:enabled) - :disabled
disabled 状態の要素。(例 input:disabled) - :checked
checked 状態の要素。(例 input:checked) - :selected
selected 状態の要素。(例 option:selected)
属性フィルタ
- [attribute]
指定の属性を持つ要素。(例 input[id]) - [attribute=”value”]
指定の属性および値も持つ要素。(例 input[name=”myOption1”]) - [attribute!=”value”]
指定の属性を持たないか持っていても指定の値を持たない要素。(例 input[name!=”myOption1”]) - [attribute^=”value”]
指定の属性が指定の値ではじまっている要素。(例 input[name^=”my”]) - [attribute$=”value”]
指定の属性が指定の値でおわっている要素。(例 input[name$=”1”]) - [attribute*=”value”]
指定の属性に指定の値が含まれる要素。(例 input[name$=”Option”]) - [attributeFilter1][attributeFilter2][attributeFilterN]
指定の属性フィルタすべてを適用したもの。(例 input[id][name$=”1”])
特殊な指定
- this
アクションの対象となった要素。 - drop
ドロップ可能な要素に対してドロップされた要素。アクションのイベントで「ドロップ」が選択されている場合に使う。
上級者への注意
通常の jQuery 構文ではセレクタの値に文字列変数を用いることができますが、IxEdit では変数は使えません。
リアクションコマンド
IxEdit には様々なリアクションコマンドが用意されています。ここでは、各リアクションコマンドの用途と入力項目について説明します。
DOM
クラス追加
セレクトした要素に指定のクラス名を追加します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- クラス名: 対象要素の追加するクラス名を指定します。複数を同時に指定するにはスペース区切りで入力します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
クラス削除
セレクトした要素から指定のクラス名を削除します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- クラス名 対象要素から削除するクラス名を指定します。 複数を同時に指定するにはスペース区切りで入力します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
クラス追加/削除
セレクトした要素に指定のクラス名がなければ追加し、あれば削除します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- クラス名: 対象要素から追加/削除するクラス名を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
スタイル変更
セレクトした要素のスタイルを追加または変更します。CSS プロパティとその値を指定します。CSS を編集するのと同様の方法です。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- プロパティ: ドロップダウンメニューで CSS プロパティを選択し、右のテキストボックスに値を入力します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
属性変更
セレクトした要素の value 属性の値を変更します。対象となる要素は、button, input, li, option です。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- Value: value 属性の値を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
状態変更
セレクトした要素の状態を変更します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 状態: 状態の値を指定します。
- Checked と Unchecked は input[type="checkbox"] と input[type="radio"] に使用可。
- Selected と Unselected は option に使用可。
- Disabled と Enabled は button, input, optgroup, option, select, textarea に使用可。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
属性削除
セレクトした要素から指定の属性を削除します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 属性: 削除する属性を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
HTML 挿入
セレクトした要素に指定の HTML 文字列を挿入します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- HTML: 挿入する HTML 文字列(例
こんにちは
)を指定します。 - 挿入ポイント: セレクトした要素に対してどのように HTML 文字列を挿入するかを指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
リモート HTML 挿入
セレクトした要素に外部ファイルから HTML を挿入します。セレクトした要素内の既存のコンテンツは上書きされます。リクエストするリモートファイルは、このページと同じドメイン上にある必要があります。異なるドメインからは HTML を読み込めませんが、このページがローカルコンピュータにある場合は可能です。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- URL: 挿入する HTML が書かれたリモートファイルの URL を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
要素内を空に
セレクトした要素のすべての子ノードを削除します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
エレメント削除
セレクトした要素を DOM から取り除きます。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
イフェクト
表示
セレクトした要素が非表示状態であれば表示します。インライン要素に対して継続時間を指定した場合、その要素はブロック要素に変更されます。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: 表示が完了するまでの時間を指定します。「通常」を選択した場合は、即座に表示されます。「通常」以外を選択した場合は、徐々に表示されます。
- 効果: 継続時間が「通常」以外に指定されていた場合の、表示の視覚効果を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
非表示
セレクトした要素が表示状態であれば非表示にします。インライン要素に対して継続時間を指定さいた場合、その要素はブロック要素に変更されます。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: 非表示が完了するまでの時間を指定します。「通常」を選択した場合は、即座に非表示にされます。「通常」以外を選択した場合は、徐々に非表示にされます。
- 効果: 継続時間が「通常」以外に指定されていた場合の、非表示の視覚効果を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
表示/非表示
セレクトした要素が非表示状態であれば表示し、表示状態であれば非表示にします。インライン要素に対して継続時間を指定さいた場合、その要素はブロック要素に変更されます。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: 表示/非表示が完了するまでの時間を指定します。「通常」を選択した場合は、即座に表示/非表示されます。「通常」以外を選択した場合は、徐々に表示/非表示されます。
- 効果: 継続時間が「通常」以外に指定されていた場合の、表示/非表示の視覚効果を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
スライドダウン
セレクトした要素をスライドダウン効果とともに表示します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: スライドが完了するまでの時間を指定します。「通常」を選択した場合は、スライド効果は起こりません。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
スライドアップ
セレクトした要素をスライドアップ効果とともに非表示にします。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: スライドが完了するまでの時間を指定します。「通常」を選択した場合は、スライド効果は起こりません。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
スライドダウン/アップ
セレクトした要素が非表示状態であればスライドダウン効果とともに表示し、表示状態であればスライドアップ効果とともに非表示にします。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: スライドが完了するまでの時間を指定します。「通常」を選択した場合は、スライド効果は起こりません。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
フェードイン
セレクトした要素をフェードイン効果とともに表示します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: フェードが完了するまでの時間を指定します。「通常」を選択した場合は、フェード効果は起こりません。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
フェードアウト
セレクトした要素をフェードアウト効果とともに非表示にします。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: フェードが完了するまでの時間を指定します。「通常」を選択した場合は、フェード効果は起こりません。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
指定値へフェード
セレクトした要素を指定の不透明度までフェードします。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 不透明度: フェード結果の不透明度を指定します。0% で完全な透明、100% で完全な不透明となります。
- 継続時間: フェードが完了するまでの時間を指定します。「通常」を選択した場合は、フェード効果は起こりません。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
アニメート
セレクトした要素をアニメートします。アニメートさせるプロパティと、終了値を指定します。サイズだけでなく、色、不透明度、スクロール地点などもアニメートできます。ひとつの要素について複数のプロパティを同時にアニメートさせることができます。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 継続時間: アニメートが完了するまでの時間を指定します。「通常」を選択した場合は、中間段階はありません。
- プロパティ: CSS プロパティとしてアニメートさせる属性を指定します。右のテキストボックスにはアニメート結果としての値を指定します。「To, +, -」のドロップダウンメニューは、アニメート結果の値が絶対指定か(To)、それともアニメート前の値に対する相対指定か(+, -)を選択するものです。ただし色に関するプロパティでは、「To」以外は選べません。テキストボックスの右にある「+」「-」ボタンをクリックすると、プロパティの追加と削除ができます。複数のプロパティが指定されていると、それらは同時にアニメートされます。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
生成
ドラッグ可能に
セレクトした要素をマウスでドラッグ可能にします
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 軸: ドラッグ可能な方向を指定します。
- なし: 自由な方向にドラッグできます。
- X: 水平方向にのみドラッグできます。
- Y: 垂直方向にのみドラッグできます。
- 移動カーソル: 対象要素にマウスオーバーした時に、カーソルを移動カーソルに変化させます。
- ドラッグ中に半透明にする: ドラッグされている時に対象要素を半透明にします。
- ドロップ不可の要素にドロップされたら戻す: ドロップ不可の要素にドロップされた場合、もとの場所に戻します。ドロップ可能な要素を作るには、「ドロップ可能に」を参照してください。
- 親要素内に拘束する: 親要素内でのみドラッグ可能にします。
このコマンドを実行すると、対象要素に動的にいくつかのクラスが追加されます。クラス名を使ってスタイルを変更することができます。
- ui-draggable: ドラッグ可能にした要素に追加されます。
- ui-draggable-dragging: ドラッグ中に追加されます。
ドロップ可能に
セレクトされた要素をドロップ可能にします(ドラッグ可能にした要素のドロップを受け付けます)。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- ui-droppable: ドロップ可能にした要素に追加されます。
- drophover: ドラッグ可能にした要素がホーバーしている間に追加されます。
アクション編集エリアのイベントメニューから「ドロップ」を選んで、「ドロップ」イベントによって実行されるリアクションを指定することができます。ドロップイベントとは、ドラッグ可能にした要素がドロップ可能にした要素にドロップされた時に発生するイベントです。
ドロップされた要素をリアクションのセレクタに指定したい場合は(例えばドロップされた瞬間にその要素のスタイルを変更するなど)、アクションのセレクタでドロップ対象の要素を指定し(あらかじめそれがドロップ可能になっている必要があります)、イベントとして「ドロップ」を指定し、リアクションのセレクタとして「drop」と入力します。
リサイズ可能に
セレクトされた要素をリサイズ可能にします(ドラッグ可能なリサイズハンドルを追加します)。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 縦横比を保つ: 縦横比を保ったままリサイズします。
- つまみ: ドラッグするためのつまみを対象要素のどこにつけるかを指定します。
- 親要素に拘束: 親要素内でのみリサイズ可能にします。
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- ui-resizable: リサイズ可能にした要素に追加されます。
- ui-resizable-handle: セレクトした要素の周りに「つまみ」として動的に生成される要素に追加されます。
- ui-resizable-n: 上のつまみに追加されます。
- ui-resizable-s: 下のつまみに追加されます。
- ui-resizable-e: 右のつまみに追加されます。
- ui-resizable-w: 左のつまみに追加されます。
- ui-resizable-se: 右下のつまみに追加されます。
- ui-resizable-sw: 左下のつまみに追加されます。
- ui-resizable-nw: 左上のつまみに追加されます。
- ui-resizable-ne: 右下のつまみに追加されます。
並べ替え可能に
セレクトされた要素の子ブロック要素をマウスドラッグで並べ替え可能にします。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 軸: ドラッグ可能な方向を指定します。
- なし: 自由な方向にドラッグできます。
- X: 水平方向にのみドラッグできます。
- Y: 垂直方向にのみドラッグできます。
- 移動カーソル: 対象要素にマウスオーバーした時に、カーソルを移動カーソルに変化させます。
- ドラッグ中に半透明にする: ドラッグされている時に対象要素を半透明にします。
- 挿入のアニメート: ドラッグしてマウスボタンを放した時に対象要素が挿入箇所にアニメートしながら移動する効果をつけます。
このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります(対象要素:#reorderable1)
<block id="reorderable1">
<block>Content1</block>
<block>Content2</block>
<block>Content3</block>
</block>
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- ui-sortable: 並べ替え可能にした要素(ドラッグ可能になったアイテムの親要素)に追加されます。
選択可能に
セレクトされた要素の子ブロック要素をクリック、ctrl+クリック、マウスドラッグで選択可能にします。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#selectable1)
<block id="selectable1">
<block>Content1</block>
<block>Content2</block>
<block>Content3</block>
</block>
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- "ui-selectable": 選択可能にした要素(個別に選択できるアイテムの親要素)に追加されます。
- "ui-selecting": 各アイテムをマウスダウンまたはドラッグ中に追加されます。
- "ui-selected": 選択した各アイテムに追加されます。
日付ピッカー作成
セレクトしたテキストボックスに日付選択用のカレンダーを生成します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- Format: 日付ピッカーで選択した日付をどのような書式でテキストボックスに入力するかを指定します。
- Has Picker Btton: 対象要素のテキストボックスの隣に日付ピッカーを開くためのボタンを表示します。ピッカーボタンを表示しない場合は、テキストボックスへのフォーカスで日付ピッカーが開きます。
このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#datepicker1)
<input type="text" id="datepicker1" />
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- "ui-datepicker": 生成されるカレンダーブロックに追加されます。
- "ui-datepicker-header": カレンダーのヘッダーに追加されます。
- "ui-datepicker-prev" と "ui-datepicker-next": ヘッダー内のナビゲーションリンクに追加されます。
- "ui-datepicker-prev-hover" と "ui-datepicker-next-hover": ヘッダー内のナビゲーションリンクにマウスをホーバーした時に追加されます。
- "ui-datepicker-title": ヘッダー内のタイトルに追加されます。
- "ui-datepicker-calendar": カレンダーテーブルに追加されます。
- "ui-state-active": 選択された日リンクに追加されます。
- "ui-state-highlight": 現在の日リンクに追加されます。
- "ui-state-hover": マウスホーバー時に各日リンクに追加されます。
- "ui-datepicker-buttonpane": ボタンペインに追加されます。
- "ui-datepicker-trigger": ピッカーボタンに追加されます。
アコーディオン作成
アコーディオンコンテナーを生成します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- イベント名: パネルを切り替えるためのイベントを指定します。
- 高さ固定: アコーディオン全体の高さを一番大きなパネルに合わせて固定します。
- すべてを閉じることを許可: パネルがひとつも開いていない状態を許可します。許可しない場合、現在開いているパネルは閉じることができません。
このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#accordion1)
<block id="accordion1">
<block><a href="#">Header1</a></block>
<block>Content1</block>
<block><a href="#">Header2</a></block>
<block>Content2</block>
<block><a href="#">Header3</a></block>
<block>Content3</block>
</block>
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- "ui-accordion": すべてのヘッダーとコンテンツを含む親要素に追加されます。
- "ui-accordion-header": ヘッダーブロックに追加されます。
- "ui-accordion-content": コンテンツブロックに追加されます。
- "ui-state-active": 選択されたヘッダーブロックに追加されます。
- "ui-state-hover": 各ヘッダーブロックへのマウスホーバー時に追加されます。
タブ作成
タブコンテナーを生成します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- イベント名: タブを切り替えるためのイベントを指定します。
- 初期タブ番号: 初期状態で開くタブを1ベースの番号で指定します。0で選択なしになります。
- すべてを閉じることを許可: タブがひとつも開いていない状態を許可します。許可しない場合、現在開いているタブは閉じることができません。
- 効果: タブを切り替えた時の視覚効果を指定します。
- フェード: 現在のタブ内容がフェードアウトして次のタブ内容がフェードインします。
- スライド: 現在のタブ内容がスライドアップして次のタブ内容がスライドダウンします。
このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#tabs1)
<block id="tabs1">
<ul>
<li><a href="#content1">Tab1</a></li>
<li><a href="#content2">Tab2</a></li>
<li><a href="#content3">Tab3</a></li>
</ul>
<block id="content1">Content1</block>
<block id="content2">Content2</block>
<block id="content3">Content3</block>
</block>
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- "ui-tabs": すべてのタブとコンテンツブロックを含む親要素に追加されます。
- "ui-tabs-nav": タブとなる項目を含む UL 要素に追加されます。
- "ui-tabs-selected" と "ui-state-active": 選択されたタブ(LI 要素)に追加されます。
- "ui-state-hover": 各タブ(LI 要素)へのマウスホーバー時に追加されます。
- "ui-tabs-panel": 各コンテンツブロックに追加されます。
ダイアログ作成
モーダルダイアログを生成します。ラッパーブロック、タイトルバー、そしてボタンペインといった要素が元のブロックの周りに自動生成されます。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- Width: ダイアログの幅を指定します。
- Height: ダイアログの高さを指定します。
- Left: ダイアログの左ポジションを指定します。 空欄でウィンドウ中央、- で右寄せになります。
- Top: ダイアログの上ポジションを指定します。 空欄でウィンドウ中央、- で下寄せになります。
- ドラッグ可能に: ダイアログをドラッグ可能にします。
- ボタン: ダイアログにボタンを追加します。ボタンをクリックするとダイアログは閉じます。ボタンは複数作ることができます。
- ラベル: ボタンに表示するラベル文字列を指定します。
- ID: ボタンのIDを指定します。このIDを使って、ボタンを押した時のインタラクションを別途作成することができます。
このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#dialog1)
<div id="dialog1" title="My Dialog1">Content</div>
このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。
- "ui-dialog": 動的に生成されるラッパーブロックに追加されます。セレクトした要素、タイトルバー、ボタンペインは、このラッパーブロックの中に入ります。
- "ui-dialog-titlebar": 動的に生成されるタイトルバーに追加されます。
- "ui-dialog-title-dialog": タイトルバー上に動的に生成されるタイトルに追加されます。タイトル文字列はセレクトした要素のタイトル属性から作られます。
- "ui-dialog-titlebar-close": タイトルバー上に動的に生成されるクローズリンクに追加されます。
- "ui-dialog-content": セレクトされた要素に追加されます。
- "ui-dialog-buttonpane": 動的に生成されるボタンペインに追加されます。
- "ui-widget-overlay": 動的に生成される背景オーバーレイに追加されます。
その他
アラート
JavaScript の "window.alert" を使って、指定のメッセージ文字列とともに通常のアラートボックスを表示します。
- メッセージ: アラートボックスに表示するメッセージ文字列を指定します。\n を改行に、\t をタブスペースに使えますが、シングルクォーテーションは無効です。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
ジャンプ
JavaScript の "window.location" を使って、指定の URL にジャンプします。
- URL: ジャンプ先の URL を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
イベント発行
指定のイベントをセレクトした要素に送ります。例えば「#button1」という要素に「Click」イベントを送ると、「#button1」をクリックしたのと同じことが起こります。
- セレクタ: イベントを送る対象要素を指定します。書式は「セレクタの書式」を参照してください。
- イベント名: 発行するイベント名を指定します。
- 遅れ: アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を指定します。
条件コマンド
IxEdit には様々ないくつかの条件コマンドが用意されています。ここでは、各条件コマンドの用途と入力項目について説明します。
クラス
セレクトした要素に特定のクラスがつけられているかどうかを判定します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- クラス名: 対象要素につけられているかどうかを判定するクラス名を指定します。
Value
セレクトした要素の value 属性が特定の値であるかを判定します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 値: 判定する値を指定します。
状態
セレクトした要素が特定の状態であるかを判定します。
- セレクタ: セレクトした要素に指定のクラス名を追加します。
- 状態: 判定する状態を指定します。
- Visible: 表示されている
- Hidden: 表示されていない
- Checked: (チェックボックスが)チェックされている
- Selected: (option 要素が)セレクトされている(The option is) Selected
- Disabled: ディスエーブルになっている
インポートとエクスポート
IxEdit では、ページごとにインタラクションを作成するようになっています。あるページで作成したインタラクションを別なページでも使いたい場合、あるいは他の IxEdit ユーザーと共有したい場合には、インポートとエクスポートを使います。

エクスポート
インタラクションのソースをエクスポートするには
- ルーティングメニューから「エクスポート」を選びます。
- エクスポートダイアログが開くので、表示されたソースをコピーします。
インポート
インタラクションのソースをインポートするには
- ルーティングメニューから「インポート」を選んでインポートダイアログを開きます。
- コピーペーストでインポート:エクスポートダイアログでコピーしたソースをテキストエリアにペーストします。
- 既存データから選択してインポート:リストから既存のインタラクションデータを選択します。
- 「インポート」ボタンをクリックすると、ソースが取り込まれて、既存のインタラクションに追加されます。
デプロイ
IxEdit で作成したインタラクションは、IxEdit が起動している状態ではそのままページに反映されます。これは IxEdit が、ローカル環境のデータベースに保存されたデータをリアルタイムに JavaScript に変換してブラウザに読み込んでいるためです。
しかしインタラクションが完成したら、それを IxEdit を持っていない第三者(クライアントなど)に見せたり、ページをインターネットに公開する必要があるでしょう。
そのような場合には、デプロイを使って IxEdit に依存しない JavaScript コードを生成し、HTML に埋め込みます。
デプロイで生成される JavaScript は、IxEdit には依存しませんが、jQuery ライブラリおよび jQuery UI ライブラリは引き続き必要です。
デプロイするには
- ルーティングメニューから「デプロイ」を選びます。
- デプロイダイアログが開くので、表示された JavaScript コードをコピーし、デプロイダイアログを閉じます。
- テキストエディタで HTML を開き、head 要素の一番下(</head> タグの直前)にコードをペーストします。(jquery + jquery-ui および ixedit を読み込んでいる箇所よりも後にペーストする必要があります。)
- ixedit.js および ixedit.css を読み込んでいる行を削除します。デプロイした状態では、IxEdit はもう必要ないからです。
- HTML を保存します。ブラウザをリロードして動作を確認してください。
次の図は、HTML 内に IxEdit が生成した JavaScript のコードをペーストした例です。

一度デプロイしたページで再度インタラクションの編集を行いたい場合は、ペーストしたコードを削除し、ixedit.js および ixedit.css を再度読み込む記述を加えます。
バックアップ
IxEdit では、作成したインタラクションはローカル環境のデータベースに保存されます。これはブラウザごとに用意されたストレージで、一般的に、ユーザーがデスクトップから直接アクセスすることは想定されていません。そのため、作成したインタラクションは手動でバックアップをとっておくことをおすすめします。
バックアップをとるには、エクスポートをつかってソースをコピーし、テキストファイルとして任意の場所に保管します。エクスポートされたソースは、インポートを使って簡単に再読み込みすることができます。
設定スクリプト
IxEdit には、いくつかの設定スクリプトが用意されています。設定スクリプトを HTML 内に直接記述することで、IxEdit の動きを一時的に変更することができます。設定スクリプトは、HTML 内の ixedit.js を読み込んでいる行よりも後ろに記述します。
次の図は、 HTML 内に設定スクリプトを記述している例です。

デプロイ時には、設定スクリプトを削除する必要があります。
スクリーンIDの指定
IxEdit は、ページごとにインタラクションをデータベースに保存します。その際、そのページの URL を ID としてデータベース内にレコードを作成します。そのため、HTML のファイル名や保存場所を変更した場合、データベースとのリンクが切れてしまいます。また、複数のページで共通のインタラクションを使いたい場合もあるでしょう。そのような場合には、スクリーンIDを以下のように手動で設定します。
- ixedit.screenID = 'myScreen1';
同じスクリーンIDが指定されたページは、データベース内の同じレコードにリンクされます。また HTML のファイル名や保存場所を変更してもリンクが切れません。
すべてのインタラクションをインアクティベート
インタラクションを編集する過程で、ブラウザがエラーを出したり、操作不能な状態になることがあります。例えばページがロードされると同時にすぐにリロードするようなインタラクションを作ってしまうと、ユーザーは IxEdit ダイアログを操作できなくなってしまいます。そのように不具合のあるインタラクションを IxEdit から修正できないような状況になった場合には、次の設定スクリプトを使います。
- ixedit.inactivatingAll = true;
これにより、そのページで作成したすべてのインタラクションがオフになり、IxEdit にアクセスできるようになります。次にリロードする前にこの設定スクリプトを削除してください。そうしないと、再びすべてのインタラクションがオフになってしまいます。
アドバンスドモードに切り替え
アドバンスドモードにすることで、上級者向けの追加機能を使うことができるようになります。アドバンスドモードにするには、次の設定スクリプトを使います。
- ixedit.advancedMode = true;
アドバンスドモードで追加される機能については、「アドバンスドモード」を参照してください。
アドバンスドモード
アドバンスドモードでは、次の機能が使えます。アドバンスドモードへの切り替え方法については、「設定スクリプト」を参照してください。
DB レコードを表示
一覧表示の左上にあるルーティングメニューに、「DB レコードを表示」が追加されます。これを選ぶと、ローカル環境のデータベースに保存されているすべての IxEdit データが表示され、データベースの内容を確認することができます。不要になったレコード削除することもできます。
DB テーブルを消去
一覧表示の左上にあるルーティングメニューに、「DB テーブルを消去」が追加されます。これを選ぶと、ローカル環境のデータベースに保存されているすべての IxEdit データ(IxEdit 用のテーブル)が消去されます。消去した後、ixedit.js が読み込まれた状態でブラウザをリロードすると、自動的に再度テーブルが作成されます。
jQuery 実行
リアクションのコマンドとして、「jQuery 実行」が追加されます。このコマンドを使うと、自分で jQuery スクリプトを書いて、IxEdit のコマンドだけではできないような処理を行うことができます。
ファンクション 実行
リアクションのコマンドとして、「ファンクション 実行」が追加されます。このコマンドを使うと、 既存の関数とその引数を指定して、IxEdit のコマンドだけではできないような処理を行うことができます。