ブログ更新できない言い訳ジェネレータのスクリプトを少し見直して、Ｑ＆Ａメッセージジェネレータ作りました。
設問に対して答えが返ってくるという対話型のメッセージを組み立てたい時に使ったらいいんじゃないかと思いますが、まぁお遊びスクリプトです。
設置方法は、generator.jsとanswer.xml、question.xmlをサーバに置いて呼び出すhtmlにタグを打ってあげるだけです。
＜question.xmlとanswer.xmlについて＞
question.xmlとanswer.xmlに質問と解答を書いてあげます。全体の質問数と、回答数が同じでなければスクリプトエラーが起こると思います。
たとえば、「お金かして欲しいんだけどメールジェネレータ」を作ったとするとquestion.xmlはこのようになります。
<forms>
<form>
<title>誰に宛てますか？</title>
<description>彼女に</description>
<description>妻に</description>
<description>親に</description>
<description>友達に</description>
</form>
・・・・
質問が１つ出来ました。今回は選択数が4つあります。この選択数にあわせてanswer.xmlに回答を書いていきます。
<fields>
<field>
<description>あのさ。ちょっと聞きたいんだけど、彼がサラ金に手を出したら嫌だよね！</description>
<description>今月、家計苦しいのはよくわかってるんだけどね。</description>
<description>今年の正月は帰るよ。で、ちょっとお願いがあるんです</description>
<description>こんなことお前にしか頼めないんだけどさ</description>
</field>
・・・・
これで回答が4つそろいました。このように、質問と回答を紐付けていってメッセージを作ることが出来ます。注意することは質問の数(formタグの数)と回答の数(fieldタグの数)が同じであることと、選択数(descriptionタグ数)がquestion.xmlとanswer.xmlであっているということです。
＜generator.jsについて＞
あとスクリプトの46行目と47行目に2つのxmlのパスを書いてあげてください。
// set file on your server space, modify path
var answerXmlPath = 'http://ご自身のパス/answer.xml';
var questionXmlPath = 'http://ご自身のパス/question.xml';
＜htmlタグについて＞
htmlには、表示させたい場所に以下のタグを打ってください
<div id="curform"><input type="button" value="start" onclick="QAGenerator.init()" /></div>
<div id="setField"></div>
レッツＱ＆Ａジェネレータ！ダウンロードはこちらです。
＜javascript method overload＞
で、スクリプトのほうは勉強がてら作ってみたんですが、今回はjavascriptでメソッドの（見た目）オーバーロードをやってみましたのでちょっとメモしておきます。
ajaxでxmlを取得すると、これをパースするgetElementなんちゃらというメソッドを遣うことになると思うのですが、このメソッドを
function $( param ){
return document.getElementById( param );
}
こんな感じでラップすることがよくあります。タグインスタンス？が返ってきて、使う側は
$( "myid" ).innerHTML = "hoge
";
このように実装します。で、このgetElementなんちゃらというメソッドをラップしたものをオーバーロードして使ったのが147行目あたりで使ってみました。
var formList = Elem.getByNm( xmlData, "form" );
var titleVal = Elem.getByNm( formList[ param ], "title", 0 ).childNodes[ 0 ].nodeValue;
var itemList = Elem.getByNm( formList[ param ], "description" );
ElemというインスタンスのgetByNmをオーバーロードしています。こういう感じのことがしたかったというイメージが以下のスクリプト。
// ※この実装例は飽くまでイメージです。
function getByNm( name ){
return document.getElementByName( name );
}
function getByNm( obj, name ){
return obj.getElementByName( name );
}
function getByNm( obj, name, pos ){
return obj.getElementByName( name )[ pos ];
}
これではもちろんうまく動きませんので、これを実現するコードが1行目から記述してあります。
var Elem = function(){
return {
// add method.
add : function( object, name, fn )
{
var old = object[ name ];
object[ name ] = function(){
if ( fn.length == arguments.length )
return fn.apply( this, arguments );
else if ( typeof old == 'function' )
return old.apply( this, arguments );
};
},
// overload methods.
init : function(){
this.add( this, "getById", function( name ){
return document.getElementById( name );
});
this.add( this, "getById", function( object, name ){
return object.getElementsById( name );
});
this.add( this, "getById", function( object, name, pos ){
return object.getElementsById( name )[ pos ];
});
this.add( this, "getByNm", function( name ){
return document.getElementByTagName( name );
});
this.add( this, "getByNm", function( object, name ){
return object.getElementsByTagName( name );
});
this.add( this, "getByNm", function( object, name, pos ){
return object.getElementsByTagName( name )[ pos ];
});
}
};
}();
このjavascriptのメソッドのoverloadは
JavaScript Method Overloadingにあったものです。もうちょっとうまく使えば、すっきりするのかもしれませんね。
