ユーザーガイド

IxEdit へようこそ

IxEdit を使えば、ウェブページに簡単にインタラクションを加えることができます

IxEdit は、ウェブアプリケーションのためのインタラクションデザインツールです。IxEdit を使えば、デザイナーは JavaScript コードを書かずに、ウェブページ上の要素をダイナミックに変化させる DOM スクリプティングを簡単に行うことができます。特に、ウェブアプリケーションのプロトタイピング段階で様々なインタラクションを試してみるのに役立つでしょう。

IxEdit はそれ自体が JavaScript で作られており、編集対象のウェブページの中に組み込んで使用する全く新しいタイプのツールです。作成したインタラクションはその場でウェブページに適用されるため、ブラウザの中で動作をリアルタイムに確認しながら編集作業を行うことができます。

IxEdit は指定されたパラメーターから自動的に JavaScript を生成します。IxEdit が生成する JavaScript コードは、国際的に広く使われているオープンソースの JavaScript ライブラリーである jQuery および jQuery UI を用いて、様々なインタラクションを実現します。ブラウザ間の違いも気にする必要がありません。

編集中のインタラクションは、ローカル環境のデータベースに保存されます。そのため、ブラウザを一度閉じたりリロードしたりしても編集データは失われません。またオフラインの状態でもインタラクションの編集作業を行うことができます。Firefox または IE で IxEdit を使う場合には、ローカルデータベースを使うために Gears をあらかじめブラウザにインストールしておく必要があります。

  1. IxEdit を使い始める
  2. IxEdit ダイアログの操作
  3. セレクタの書式
  4. リアクションコマンド
  5. 条件コマンド
  6. インポートとエクスポート
  7. デプロイ
  8. バックアップ
  9. 設定スクリプト
  10. アドバンスドモード

IxEdit を使い始める

必要環境

IxEdit を使用するためには、以下の環境が必要です。

Firefox または Internet Explorer で IxEdit を使う場合は、ブラウザに Gears をインストールしておく必要があります。

IxEdit を正しく動作させるには、編集対象の HTML が UTF-8 でエンコードされている必要があります。また、その HTML の内容は、標準モードで記述されている必要があります。

生成された JavaScript の動作環境

IxEdit が生成する JavaScript は、以下のブラウザで動作します。

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/ からダウンロードできます。

これらの JavaScript ファイルおよび CSS ファイル、そして CSS ファイルから参照される画像を含んだ images フォルダ(IxEdit のダウンロードファイル群に含まれています)を、適当なディレクトリに配置し、編集対象の HTML から読み込みます。読み込むための記述は、head 要素内に置くことをおすすめします。

ixedit.js の読み込みは、jquery および jquery-ui の読み込みよりも後に行われるように記述してください。

次の図は、必要なファイルを HTML の head 要素内で読み込んでいる記述例です。

IxEdit ダイアログの操作

IxEdit ダイアログ

IxEdit が正常に起動すると、ウェブページ内に IxEdit ダイアログが表示されます。この IxEdit ダイアログを使って、インタラクションを追加/編集していくことになります。編集中の内容は逐次ページ内容に反映されるため、動きを確認しながらインタラクションを作成することができます。

タイトルバーをドラッグして、IxEdit ダイアログをブラウザ内で移動することができます。

タイトルバーをダブルクリックすることで、ダイアログを折り畳むことができます。もう一度ダブルクリックすれば元に戻ります。

右下のつまみをドラッグして、IxEdit の表示サイズを変更することができます。

IxEdit ダイアログには、一覧表示と編集表示があり、これらを切り替えながらインタラクションの追加・編集作業を行います。

基本的な操作の流れ

IxEdit を使ってインタラクションを作成するための基本的な操作の流れは次のようになります。

  1. 一覧表示で「新規」ボタンをクリックし、新たなインタラクションを作成するための編集表示を開きます。
  2. アクション編集エリアで、インタラクションのトリガーとなるイベントと対象要素を指定します。
  3. リアクション編集エリアで、コマンドと必要なパラメーターを指定します。ひとつのアクションに対して複数のリアクションを作成することができます。
  4. 特定の状態にある時のみリアクション実行させたい場合は、条件編集エリアで条件を指定します。
  5. 必要に応じて、コメント編集エリアでコメントを記入します。
  6. 「完了」ボタンをクリックし、作成したインタラクションを保存します。IxEdit ダイアログは一覧表示に戻ります。
  7. この作業を繰り返し、ウェブページのインタラクションを完成させます。
  8. インタラクションがすべて完成したら、ルーティングメニューから「デプロイ」を選び、最終的な JavaScript を生成します。
  9. 生成された JavaScript コードを HTML 内に貼り付けます。

一覧表示の操作

一覧表示には、作成したインタラクションがリストされます。一覧表示では、新規インタラクションの追加、選択したインタラクションの複製と削除、インタラクション全体のエクスポート、デプロイ、そしてインタラクションのインポートなどを行うことができます。

インタラクションの新規追加

新たにインタラクションを追加するには、「新規」ボタンをクリックします。すると IxEdit ダイアログは編集表示に切り替わり、新たなインタラクションのための入力が行えるようになります。

インタラクションの編集

既存のインタラクションを再度編集するには、一覧の中から対象のインタラクションの行を選択して「編集」ボタンをクリックするか、その行をダブルクリックします。すると IxEdit ダイアログは編集表示に切り替わり、インタラクションの内容を編集できるようになります。

インタラクションの複製と削除

既存のインタラクションを複製するには、一覧内で対象のインタラクションを選択し、「複製」ボタンをクリックします。複数のインタラクションを同時に複製することもできます。

既存のインタラクションを削除するには、 一覧内で対象のインタラクションを選択し、「削除」ボタンをクリックします。複数のインタラクションを同時に削除することもできます。

一覧のソート

一覧の列ヘッダーをクリックすることで、一覧をソートすることができます。

インタラクションのオンオフ

一覧の各行の先頭にあるチェックボックスをオンオフすることで、それぞれのインタラクションを有効化/無効化できます。これによって、一度作成したインタラクションを削除することなく、一時的に無効にすることができます。

チェックボックスをオフにして無効化している場合、そのインタラクションは編集できません。複製や削除はできます。編集するためには、一度チェックボックスをオンにします。

編集表示の操作

編集表示では、ひとつのインタラクションについての編集作業を行うことができます。ひとつのインタラクションは、「アクション」「リアクション」「条件」で構成されます。またインタラクションごとに「コメント」を記入することもできます。「アクション」「リアクション」「条件」「コメント」の各編集エリアは、それぞれの見出し部分をクリックすることで開閉できます。

アクションの指定

アクションとは、インタラクションのきっかけを意味します。ひとつのインタラクションにつき、ひとつのアクションを指定します。

イベント

アクションを種類としてドロップダウンメニューからイベントを選択します。各イベントは次のような状況で発生します。

セレクタ

イベントの対象となる要素を指定します。セレクタ指定の書式については「セレクタの書式」を参照してください。

セレクタ欄の右にある「クイックセレクト」ボタンをクリックして、ページ内からマウスクリックでセレクタを指定することもできます。

その他

リアクションの指定

リアクションとは、アクションに応じて起きるスクリーンの振る舞いを意味します。ひとつのインタラクションにつき、複数のリアクションを指定することができます。

コマンド

リアクションを指定するには、まずコマンド選択ドロップダウンメニューからコマンドを選びます。IxEdit には30以上のコマンドが用意されています。目的に合ったコマンドを選び、残りの項目に必要なパラメーターを入力します。コマンドによって入力項目は異なります。

コマンド選択ドロップダウンメニューの右にあるコマンドヘルプボタンをクリックして、各コマンドの簡単な説明を見ることができます。

各コマンドについての詳細は、「リアクションコマンド」を参照してください。

セレクタ

多くのコマンドでは、セレクタ欄が用意されています。セレクタ欄で指定した要素が、コマンドの対象となります。 セレクタ指定の書式については「セレクタの書式」を参照してください。

セレクタ欄の右にある「クイックセレクト」ボタンをクリックして、ページ内からマウスクリックでセレクタを指定することもできます。

遅れ

多くのコマンドでは、「遅れ」を指定することができます。遅れとは、アクションで指定したイベントが発生してからリアクションが実行されるまでの時間を意味します。「なし」が指定されている場合、アクションが起こされると即座にリアクションが実行されます。

リアクションの追加と削除

ひとつのインタラクションに対して複数のリアクションを指定することができます。リアクションを追加するには、リアクション編集エリアの右にある「+」ボタンをクリックします。リアクションを削除するには、対象リアクションの右にある「−」ボタンをクリックします。ただしリアクションがひとつしかない状態では、それを削除することはできません。

条件の指定

条件とは、リアクションが実行される条件となる状態を意味します。条件でした状態にある時のみ、リアクションが実行されます。条件が指定されている場合、同一インタラクション内のすべてのリアクションに対して反映されます。ひとつのインタラクションにつき、複数の条件を指定することができます。複数の条件が指定されている場合、それらすべての条件が満たされた場合にのみリアクションが実行されます。

コマンド

条件を指定するには、まずコマンドを選びます。目的に合ったコマンドを選び、残りの項目に必要な値を入力します。

各コマンドについての詳細は、「条件コマンド」を参照してください。

セレクタ

多くの条件では、セレクタ欄が用意されています。セレクタ欄で指定した要素が、条件の対象となります。 セレクタ指定の書式については「セレクタの書式」を参照してください。

セレクタ欄の右にある「クイックセレクト」ボタンをクリックして、ページ内からマウスクリックでセレクタを指定することもできます。

条件の追加と削除

ひとつのインタラクションに対して複数の条件を指定することができます。条件を追加するには、条件編集エリアの右にある「+」ボタンをクリックします。条件を削除するには、対象条件の右にある「−」ボタンをクリックします。

コメントの記入

編集表示の最下部には、コメント欄があります。コメント欄には、編集中のインタラクションに関する説明や、自分なりのキーワードなど、自由な内容を書き込むことができます。 コメント欄に記入した内容は、インタラクションの動作には影響しません。

「完了」と「完了してリロード」

編集作業が済んだら、「完了」ボタンをクリックします。するとそのインタラクションがローカル環境のデータベースに保存され、IxEdit ダイアログは一覧表示に戻ります。

「完了してリロード」ボタンをクリックすると、インタラクションが保存されると同時に、ブラウザがリロードします。ページを初期状態に戻して動作を確認したい場合に、「完了してリロード」を使います。

編集内容の復帰

一度編集を完了したインタラクションに対して再度編集を行っている場合、「復帰」ボタンをクリックすることで、前回編集を完了した状態に戻すことができます。

セレクタの書式

多くのアクションコマンド、リアクションコマンド、条件コマンドには、セレクタ欄があります。セレクタ欄には、対象とする要素を特定する値を入力します。

セレクタ欄に入力する値の書式は CSS のセレクタの書式と非常に似ています。セレクタ指定の書式は以下のとおりです。

基本

フィルタ

属性フィルタ

特殊な指定

上級者への注意

通常の jQuery 構文ではセレクタの値に文字列変数を用いることができますが、IxEdit では変数は使えません。

リアクションコマンド

IxEdit には様々なリアクションコマンドが用意されています。ここでは、各リアクションコマンドの用途と入力項目について説明します。

DOM

クラス追加

セレクトした要素に指定のクラス名を追加します。

クラス削除

セレクトした要素から指定のクラス名を削除します。

クラス追加/削除

セレクトした要素に指定のクラス名がなければ追加し、あれば削除します。

スタイル変更

セレクトした要素のスタイルを追加または変更します。CSS プロパティとその値を指定します。CSS を編集するのと同様の方法です。

属性変更

セレクトした要素の value 属性の値を変更します。対象となる要素は、button, input, li, option です。

状態変更

セレクトした要素の状態を変更します。

属性削除

セレクトした要素から指定の属性を削除します。

HTML 挿入

セレクトした要素に指定の HTML 文字列を挿入します。

リモート HTML 挿入

セレクトした要素に外部ファイルから HTML を挿入します。セレクトした要素内の既存のコンテンツは上書きされます。リクエストするリモートファイルは、このページと同じドメイン上にある必要があります。異なるドメインからは HTML を読み込めませんが、このページがローカルコンピュータにある場合は可能です。

要素内を空に

セレクトした要素のすべての子ノードを削除します。

エレメント削除

セレクトした要素を DOM から取り除きます。

イフェクト

表示

セレクトした要素が非表示状態であれば表示します。インライン要素に対して継続時間を指定した場合、その要素はブロック要素に変更されます。

非表示

セレクトした要素が表示状態であれば非表示にします。インライン要素に対して継続時間を指定さいた場合、その要素はブロック要素に変更されます。

表示/非表示

セレクトした要素が非表示状態であれば表示し、表示状態であれば非表示にします。インライン要素に対して継続時間を指定さいた場合、その要素はブロック要素に変更されます。

スライドダウン

セレクトした要素をスライドダウン効果とともに表示します。

スライドアップ

セレクトした要素をスライドアップ効果とともに非表示にします。

スライドダウン/アップ

セレクトした要素が非表示状態であればスライドダウン効果とともに表示し、表示状態であればスライドアップ効果とともに非表示にします。

フェードイン

セレクトした要素をフェードイン効果とともに表示します。

フェードアウト

セレクトした要素をフェードアウト効果とともに非表示にします。

指定値へフェード

セレクトした要素を指定の不透明度までフェードします。

アニメート

セレクトした要素をアニメートします。アニメートさせるプロパティと、終了値を指定します。サイズだけでなく、色、不透明度、スクロール地点などもアニメートできます。ひとつの要素について複数のプロパティを同時にアニメートさせることができます。

生成

ドラッグ可能に

セレクトした要素をマウスでドラッグ可能にします

このコマンドを実行すると、対象要素に動的にいくつかのクラスが追加されます。クラス名を使ってスタイルを変更することができます。

ドロップ可能に

セレクトされた要素をドロップ可能にします(ドラッグ可能にした要素のドロップを受け付けます)。

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

アクション編集エリアのイベントメニューから「ドロップ」を選んで、「ドロップ」イベントによって実行されるリアクションを指定することができます。ドロップイベントとは、ドラッグ可能にした要素がドロップ可能にした要素にドロップされた時に発生するイベントです。

ドロップされた要素をリアクションのセレクタに指定したい場合は(例えばドロップされた瞬間にその要素のスタイルを変更するなど)、アクションのセレクタでドロップ対象の要素を指定し(あらかじめそれがドロップ可能になっている必要があります)、イベントとして「ドロップ」を指定し、リアクションのセレクタとして「drop」と入力します。

リサイズ可能に

セレクトされた要素をリサイズ可能にします(ドラッグ可能なリサイズハンドルを追加します)。

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

並べ替え可能に

セレクトされた要素の子ブロック要素をマウスドラッグで並べ替え可能にします。

このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります(対象要素:#reorderable1)

<block id="reorderable1">
    <block>Content1</block>
    <block>Content2</block>
    <block>Content3</block>
</block>

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

選択可能に

セレクトされた要素の子ブロック要素をクリック、ctrl+クリック、マウスドラッグで選択可能にします。

このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#selectable1)

<block id="selectable1">
    <block>Content1</block>
    <block>Content2</block>
    <block>Content3</block>
</block>

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

日付ピッカー作成

セレクトしたテキストボックスに日付選択用のカレンダーを生成します。

このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#datepicker1)

<input type="text" id="datepicker1" />

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

アコーディオン作成

アコーディオンコンテナーを生成します。

このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#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>

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

タブ作成

タブコンテナーを生成します。

このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#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>

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

ダイアログ作成

モーダルダイアログを生成します。ラッパーブロック、タイトルバー、そしてボタンペインといった要素が元のブロックの周りに自動生成されます。

このコマンドでは、あらかじめ以下のフォーマットで対象要素およびその下位要素がマークアップされている必要があります。(対象要素:#dialog1)

<div id="dialog1" title="My Dialog1">Content</div>

このコマンドを実行すると、対象要素に動的に以下のクラスが追加されます。これらを使って、対象要素のスタイルを動的に変更することができます。

その他

アラート

JavaScript の "window.alert" を使って、指定のメッセージ文字列とともに通常のアラートボックスを表示します。

ジャンプ

JavaScript の "window.location" を使って、指定の URL にジャンプします。

イベント発行

指定のイベントをセレクトした要素に送ります。例えば「#button1」という要素に「Click」イベントを送ると、「#button1」をクリックしたのと同じことが起こります。

条件コマンド

IxEdit には様々ないくつかの条件コマンドが用意されています。ここでは、各条件コマンドの用途と入力項目について説明します。

クラス

セレクトした要素に特定のクラスがつけられているかどうかを判定します。

Value

セレクトした要素の value 属性が特定の値であるかを判定します。

状態

セレクトした要素が特定の状態であるかを判定します。

インポートとエクスポート

IxEdit では、ページごとにインタラクションを作成するようになっています。あるページで作成したインタラクションを別なページでも使いたい場合、あるいは他の IxEdit ユーザーと共有したい場合には、インポートとエクスポートを使います。

エクスポート

インタラクションのソースをエクスポートするには

  1. ルーティングメニューから「エクスポート」を選びます。
  2. エクスポートダイアログが開くので、表示されたソースをコピーします。

インポート

インタラクションのソースをインポートするには

  1. ルーティングメニューから「インポート」を選んでインポートダイアログを開きます。
  2. コピーペーストでインポート:エクスポートダイアログでコピーしたソースをテキストエリアにペーストします。
  3. 既存データから選択してインポート:リストから既存のインタラクションデータを選択します。
  4. 「インポート」ボタンをクリックすると、ソースが取り込まれて、既存のインタラクションに追加されます。

デプロイ

IxEdit で作成したインタラクションは、IxEdit が起動している状態ではそのままページに反映されます。これは IxEdit が、ローカル環境のデータベースに保存されたデータをリアルタイムに JavaScript に変換してブラウザに読み込んでいるためです。

しかしインタラクションが完成したら、それを IxEdit を持っていない第三者(クライアントなど)に見せたり、ページをインターネットに公開する必要があるでしょう。

そのような場合には、デプロイを使って IxEdit に依存しない JavaScript コードを生成し、HTML に埋め込みます。

デプロイで生成される JavaScript は、IxEdit には依存しませんが、jQuery ライブラリおよび jQuery UI ライブラリは引き続き必要です。

デプロイするには

  1. ルーティングメニューから「デプロイ」を選びます。
  2. デプロイダイアログが開くので、表示された JavaScript コードをコピーし、デプロイダイアログを閉じます。
  3. テキストエディタで HTML を開き、head 要素の一番下(</head> タグの直前)にコードをペーストします。(jquery + jquery-ui および ixedit を読み込んでいる箇所よりも後にペーストする必要があります。)
  4. ixedit.js および ixedit.css を読み込んでいる行を削除します。デプロイした状態では、IxEdit はもう必要ないからです。
  5. HTML を保存します。ブラウザをリロードして動作を確認してください。

次の図は、HTML 内に IxEdit が生成した JavaScript のコードをペーストした例です。

一度デプロイしたページで再度インタラクションの編集を行いたい場合は、ペーストしたコードを削除し、ixedit.js および ixedit.css を再度読み込む記述を加えます。

バックアップ

IxEdit では、作成したインタラクションはローカル環境のデータベースに保存されます。これはブラウザごとに用意されたストレージで、一般的に、ユーザーがデスクトップから直接アクセスすることは想定されていません。そのため、作成したインタラクションは手動でバックアップをとっておくことをおすすめします。

バックアップをとるには、エクスポートをつかってソースをコピーし、テキストファイルとして任意の場所に保管します。エクスポートされたソースは、インポートを使って簡単に再読み込みすることができます。

設定スクリプト

IxEdit には、いくつかの設定スクリプトが用意されています。設定スクリプトを HTML 内に直接記述することで、IxEdit の動きを一時的に変更することができます。設定スクリプトは、HTML 内の ixedit.js を読み込んでいる行よりも後ろに記述します。

次の図は、 HTML 内に設定スクリプトを記述している例です。

デプロイ時には、設定スクリプトを削除する必要があります。

スクリーンIDの指定

IxEdit は、ページごとにインタラクションをデータベースに保存します。その際、そのページの URL を ID としてデータベース内にレコードを作成します。そのため、HTML のファイル名や保存場所を変更した場合、データベースとのリンクが切れてしまいます。また、複数のページで共通のインタラクションを使いたい場合もあるでしょう。そのような場合には、スクリーンIDを以下のように手動で設定します。

同じスクリーンIDが指定されたページは、データベース内の同じレコードにリンクされます。また HTML のファイル名や保存場所を変更してもリンクが切れません。

すべてのインタラクションをインアクティベート

インタラクションを編集する過程で、ブラウザがエラーを出したり、操作不能な状態になることがあります。例えばページがロードされると同時にすぐにリロードするようなインタラクションを作ってしまうと、ユーザーは IxEdit ダイアログを操作できなくなってしまいます。そのように不具合のあるインタラクションを IxEdit から修正できないような状況になった場合には、次の設定スクリプトを使います。

これにより、そのページで作成したすべてのインタラクションがオフになり、IxEdit にアクセスできるようになります。次にリロードする前にこの設定スクリプトを削除してください。そうしないと、再びすべてのインタラクションがオフになってしまいます。

アドバンスドモードに切り替え

アドバンスドモードにすることで、上級者向けの追加機能を使うことができるようになります。アドバンスドモードにするには、次の設定スクリプトを使います。

アドバンスドモードで追加される機能については、「アドバンスドモード」を参照してください。

アドバンスドモード

アドバンスドモードでは、次の機能が使えます。アドバンスドモードへの切り替え方法については、「設定スクリプト」を参照してください。

DB レコードを表示

一覧表示の左上にあるルーティングメニューに、「DB レコードを表示」が追加されます。これを選ぶと、ローカル環境のデータベースに保存されているすべての IxEdit データが表示され、データベースの内容を確認することができます。不要になったレコード削除することもできます。

DB テーブルを消去

一覧表示の左上にあるルーティングメニューに、「DB テーブルを消去」が追加されます。これを選ぶと、ローカル環境のデータベースに保存されているすべての IxEdit データ(IxEdit 用のテーブル)が消去されます。消去した後、ixedit.js が読み込まれた状態でブラウザをリロードすると、自動的に再度テーブルが作成されます。

jQuery 実行

リアクションのコマンドとして、「jQuery 実行」が追加されます。このコマンドを使うと、自分で jQuery スクリプトを書いて、IxEdit のコマンドだけではできないような処理を行うことができます。

ファンクション 実行

リアクションのコマンドとして、「ファンクション 実行」が追加されます。このコマンドを使うと、 既存の関数とその引数を指定して、IxEdit のコマンドだけではできないような処理を行うことができます。