質問、更問、更更問、、、というように、単なる質問の羅列ではなく、相手の答えによって、更に質問していくというインターラクティブな質問を行うための、その質問を編集するシステムを作りました。
マトリョーシカ人形のように質問を階層化することができます。
回答者の答えに応じて質問が追加されますから、専門家による診断システムに近いものが作れます。
これからの時代にふさわしいプログラムではないでいでしょうか。
全ての詳しい説明はできませんが、ご興味のある方は、デモでソースコードを取って研究してみてください。
今回は、このシステム作成に当たって、次のポイントとなる点のみ、簡単にご説明したいと思います。
マンネリ化したプログラムの新しい境地を切り開いてください。
まずは、デモを適当にいじってみただくと、ここの文章の理解も早くなるかもしれません。
目次
DOMの操作をしてこそJavaScriptの醍醐味
DOMってなに?
JQueryでHTMLを操作しようとするとき、よく「DOM」という言葉を目にします。
Document Object Model（DOM、日: ドキュメントオブジェクトモデル）は、マークアップがなされたリソース（Document）をリソース要素（Object）の木構造（Model）で表現し操作可能にする仕組み、またそのモデルである。
Wikipedia
DOMを操作することでどんなことができるか?
私は、それは何でもできると言ってしまって良いのではないかと思います。
HTMLを自由に書き換えられるわけですから、なんだってできるわけです。
挿入、削除、並べ替え、全取っ替え、入れ替え、、、何でもできます。
JQueryでの基本的、代表的なコードを書いておきますので、ご参考にしてください。
挿入
メソッドとして、append、prepend、before、after、など色々あります。
基本的な形は、$(‘#hoge’).append(‘<p>Hello</p>’);のようにして使います。
この場合では、idがhogeの要素に、子要素として最後に<p>タグの文字「Hello」が付け加わります。
要素をどこに入れるかということで、色んなメソッドを使い分けられたら、実に便利に色んなことができるようになります。
削除
削除は、removeですね。
$(‘#hoge’).remove(); とすれば、その要素自体を綺麗さっぱり跡形もなく消すことができます。
もう一つよく似たものに、emptyがあります。これは、要素の中身を空っぽにしてくれます。
$(‘#hoge’).empty(); これは(‘#hoge’).html(‘ ‘);と同じと思います。
並べ替え
私は、並べ替えを多用しますが、世の中ではそんなに普及していないかもしれません。
ドラッグ& ドロップによる並べ替えです。
「テーブルと写真のドラッグ&ドロップによる並べ替え」で少し詳しく扱いましたので、ご覧ください。
sortableというのを親要素に指定すると、子要素が並べ替えできるようになりますから、実に簡単ですね。
その他
もし全取っ替えしたければ、body全体を削除して、新しいDOMを挿入すればできるはずです。入れ替えも同様です。
お客さんの名簿リストを出す時など、Ajax通信と併用して、ページ遷移なしで表示できたりします。
あらかじめ名簿リストが用意されているのなら、Ajax通信が不要になることは言うまでもありませんので、試してみてください。
IDにより親子関係を紐付ける
コンピュータは、自由に素早く必要なデータを引っ張り出せるところが素晴らしいところです。
IDをうまく駆使すると、かなりややこしいこともできてしまいます。
IDというと、リストの順番程度に思っている人が多いかもしれませんが、使いようによっては、階層構造のある場合も使えます。
例えば、親、子、孫、、、等の関係です。
子供にとって親は一人しかいない(すみません、ここでは父親を想定してください。)という性質に着目して、子供に親のID情報を保存しておきます。
もちろん、子供には独自のIDがあり、その子供の孫と紐付けされます。
今回の質問についても、最初の質問に対して、更問が子供に相当します。そして、その更問の回答によっては、更更問へと紐付けされています。
このID番号は、別に今回のデモのように表示する必要はありませんが、開発者が開発しやすいように画面に表示しました。
また、IDというと、よくデータベースで自動的に付与されるIDを思い浮かべることが多いと思いますが、今回のデモは問を追加する時のみ、一つずつ増えていくIDをつけることとしました。
メソッドチェーンを駆使
JQueryはメソッドを数珠繋ぎにできるので、とても便利です。
例えば、次のようなコードがあるとします。
$(‘#hoge’).clone().attr(‘id’,’hoge1′).css(‘color’,’red’).appendTo($(‘.wrap’).next());
メソッドが「.」で繋がれています。
この場合だと、「hogeというidのついた要素をclone(コピー)して、そのコピー後の要素のidをhoge1に書き換えて、文字色を赤色にして、それを、wrapというクラス名の次にある要素に、最後の要素として入れ込む。」
というような意味になります。
どうですか?
こんな風に、一気に色んな仕事をしてくれます。
クラス名有無の長短
DOM操作ではidを指定して、何かを書き込んだり、スタイルを変えたりするというのがよく行われますが、クラス名でも問題なくできますし、クラス名の方が良い場合もあります。
私見ですが、クラス名のメリットとして次のようなことがあるでしょう。
- 複数の同じクラス名の要素を一気に扱える。
- クラス名の中の特定の要素を指定したい時は、インデックス番号で指定できなくはない。
- id名のようにいちいち異なる名称をつける必要がない。
- スタイルもクラス名を使って変更できる。
- クラス名は、一つの要素に複数付けることも可能なので、臨機応変な対応が可能。
これはクラス名をつけることのメリットですが、今回のデモでは、そのクラス名も時に邪魔になることがあるのだということを痛感しました。
今回の、問、更問、更更問、、、というように一種のマトリョーシカ人形のようにしたい場合、クラス名を付けると、親の質問の中の要素か、更問の中の要素か識別できなくという事態に遭遇しました。
そこで、いくつかクラス名を外してしまい、要素の相対的な位置関係を示すparent()、children()、next()、prev()などを多用しました。
これであれば、例えばn番目に入っているマトリョーシカ人形は、自分の収まっている枠の中の作業ができます。
下手にクラス名を指定すると、全ての大きさのマトリョーシカ人形を相手してしまったりするわけです(そうしたい時は、クラス名をつけましょう)。
インターラクティブな質問・回答によるエキスパートシステム
今回のデモは、ホームページを作って欲しいという人に尋ねる質問で、更に機能アップして、自動見積もりができることを目標に開発しました。
まだ開発途上で、このあと、金額データを付け加え、データベースからの入出力を可能として、実際の質問の出力も可能とする予定です(まだ、先は長いです。（笑）)
これは今回の私の目的ですが、このシステムは、他にも色々な使い方ができるのではないかと思います。
同じページで、ユーザーと専門家が問診の対話をしていくイメージです。
あらかじめ、更問を用意しておけば、あらゆる相談に応じることが可能になります。
もちろん、従来のコンピュータシステムでも、選択してページ遷移していくということはありましたが、この質問システムはページ遷移しないので、いかにも対話しているという感じになりますし、前後の質問も表示されたままです。
ちなみに、デモを見ていただくとわかるとおり、質問は、次の3種類を用意しました。
- ラジオボタン
- チェックボックス
- インプットボックス
この3種類です。
初期設定を、ラジオボタンは3種類、チェックボックスは5種類、インプットボックスは1種類としました。
これらの数は、追加、削除で増減が可能です。
また、「更問」のボタンをクリックすると、その質問の枠内に、少し小さめの枠として、「更問」が表示されます。
それは画面表示でレイアウトが崩れない限りは、階層化できるようになっています。
また、親の選択肢を消せば、その配下の更問も消えます。
更に、親質問については、ドラッグ&ドロップによる並べ替えが可能です。
どういう問いから質問し始めるのが良いかなど迷って検討している時に、即座に対応可能です。
並べ替えても、同じボックスの中の更問たちも、一緒に移動してくれるので便利です。
まとめ
ホームページ作成であれば、「商品販売をしますか」で「はい」の答えの場合は、「商品数はいくつぐらいですか」というような更問が想定されます。
更問が、選択肢を選んだ時に初めて登場するので、無駄のないコンパクトな質問となります。
そして、ここに見積もりサービス機能を追加すると、自動的に見積総額が出てくるという算段です。
まだ、開発途上で難しい問題に遭遇するかもしれませんが、とりあえず質問編集システムができた段階でプログ記事としてアップしました。
これは、診断システムのようなものに応用できるだけではないでしょう。
ワードプレスにあるグーテンベルクのようなブロックエディタに発展させることも可能かと思います。
今回は、ラジオボタンやチェックボタンなどだけですが、ここを画像にしたり、テーブルにしたりできるようにすれば、まさしく、ホームページ用のエディタが出来上がります。
階層化の考え方も示したので、ボックスの中に更にボックスを複数入れるなどということも可能になりますし、テーブルの中に画像を入れたりなどもできるでしょう。
DOM操作は、まさに新しいWEBサイト作りを切り開いていく鍵になると思います。