mojalog

ブログ更新できない言い訳ジェネレータのスクリプトを少し見直して、Ｑ＆Ａメッセージジェネレータ作りました。
設問に対して答えが返ってくるという対話型のメッセージを組み立てたい時に使ったらいいんじゃないかと思いますが、まぁお遊びスクリプトです。
設置方法は、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 ];
    }

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 ];
            });
        }
    };
}();