[JS] htmlのformの各要素（input/select/textarea）のidやnameをExcelに写したい

2014/09/13

こんにちは。きんくまです。

今回は表題の通り、htmlのformの各要素（input/select/textarea）のidやnameをExcelに写したいです。

こういうのの需要がはたしてあるのかどうか全くわかんないのですが、記事をアップ。

クライアント側とサーバー側でformを一緒に作るときに、どんなものがあるのか一覧で出力して、そいつを資料として残したいです。
クライアント側で動的にformの要素が見え隠れしたりすると、サーバー側のひとからすると、なんかわかりづらい。htmlのソースを追ってもいいのだけど、見づらい。そんなときに一覧で取得する要素が見えたらいいよね。という感じです。

サンプルのページでこんなのがあったとします。

>> こんなページ

最終的にはこんな感じにしたいです。

やりかた

直接Excelに書き出せればいいのですが、難しいので、半自動ということにして

1.ブラウザのConsoleに、カラムをタブ区切り、行を\n 区切りで出力
2.空のEecelにコピペ
3.タイトルなんかを手動であとづけ
4.完成

という流れにしました。

で、出力スクリプトです。
オリジナルはTypeScriptなんだけど、コンパイルしたものです。

githubにアップしてみた
> KinkumaDesign/FormToExcelLogger

form_to_excel_logger.js

var kk;
(function (kk) {
    var FormToExcelLogger = (function () {
        function FormToExcelLogger(rootID) {
            this.csvRowDellimiter = '\n';
            this.csvColumnDellimiter = '\t';
            this.$rootNode = $('#' + rootID);
        }
        FormToExcelLogger.prototype.getText = function () {
            this.outputTexts = [];
            this.addNodeInfoText(this.$rootNode);
            this.traverseNode(this.$rootNode.children());
            return this.outputTexts.join(this.csvRowDellimiter);
        };

        FormToExcelLogger.prototype.traverseNode = function (childrenObj) {
            var _this = this;
            childrenObj.each(function (index, ele) {
                var $ele = $(ele);
                _this.addNodeInfoText($ele);
                if ($ele.children().length > 0) {
                    _this.traverseNode($ele.children());
                }
            });
        };

        FormToExcelLogger.prototype.addNodeInfoText = function (eleObj) {
            var tagName = eleObj.prop('tagName').toLowerCase();
            if (tagName != "input" && tagName != "select" && tagName != "textarea") {
                return;
            }
            var texts = [];
            texts.push(tagName);
            var eleType = "";
            if (tagName != "select") {
                eleType = eleObj.prop('type').toLowerCase();
            }
            texts.push(eleType);
            texts.push(eleObj.prop('name'));
            texts.push(eleObj.prop('id'));
            texts.push(eleObj.val());
            var note = "";
            if (tagName == "input") {
                if (eleType == "radio" || eleType == "checkbox") {
                    if (eleObj.prop('checked')) {
                        note = "checked";
                    }
                }
            }
            texts.push(note);
            this.outputTexts.push(texts.join(this.csvColumnDellimiter));
        };
        return FormToExcelLogger;
    })();
    kk.FormToExcelLogger = FormToExcelLogger;
})(kk || (kk = {}));

使い方

$(function(){

	console.log('form全体を出力したい場合 ---');
	//全体のidを指定
	var logger1 = new kk.FormToExcelLogger('ask_your_favorite');
	var formText = logger1.getText();
	console.log(formText);



	console.log('部分だけ出力したい場合 ---');

	//部分のidを指定
	var logger2 = new kk.FormToExcelLogger('fav_fruit_container');
	var fruitText = logger2.getText();
	console.log(fruitText);
});

コンストラクタに出力したい要素のコンテナになる要素のidを指定して、getText()とやると、子要素たちを順番に走査していって、最後にブラウザのConsoleに整形されたテキストが出てきます。

こんな感じ

form全体 ---
input	radio	fruit	fruit1	みかん	
input	radio	fruit	fruit2	りんご	
input	radio	fruit	fruit3	バナナ	
select		fav_color	fav_color	赤	
textarea	textarea	comment	comment		
部分 ---
input	radio	fruit	fruit1	みかん	
input	radio	fruit	fruit2	りんご	
input	radio	fruit	fruit3	バナナ

タイトルとかは入っていません。なので、これをExcelにコピペしたあと、ブラウザからタイトルなんかを拾ってきて整形したら完成！

上の例では大した量でもないから手動でやってもいいんだけど、すごい量のフォームになってくると結構大変でした。ひとつずつ要素をhtmlからコピペしてexcelにいれていくのとか。

製品情報をform上でカスタマイズするやつ（Appleさんでmacをカスタムオーダーするやつみたいな）をつくっていて時間がかかるので作ったしだいです。
ああいうの作ってみてわかったのだけど、このオプションを選ぶとあのオプションは非活性にするとか、オプションは合計n台までとかいろいろと制限があったりして面白かったです。