こっぱみぢんこ

XMLの1

ちょっと古いwebシステムの保守をしていると、馬鹿でかいXMLファイルを扱わなければならない場面がよくある。ファイルサイズなら二桁メガバイト、行数なら二桁万行とか、もう本当にどうしようもない大きさ。しかもただ大きいだけじゃなく過去の変更が一々コメントアウトで残してあって、これが調査箇所の当たりをつけるのに激しく邪魔。大量のコメントアウトの途中でインデントがずれてしまっていることもよくあって、そのせいで階層を誤認させられることもしばしば。

そんな時こそXML専用のエディターを使うべきなのだが、サイズが大きすぎるせいで上手くいかない。 eclipseのXMLエディターだと、OutOfMemoryが発生して何もかも終了する。ならばとeclipseへのメモリ割当を増やすと、今度はOSがメモリ不足を訴えてくる。

しょうがないのでテキストエディターでコメントアウト部分を削除した調査用のファイルを作るのだが、何故かそういうのを作った直後に改修が発生して、行数もコメントアウトもさらに増えたファイルを「今日からこっちです」と渡されるのだ。

そんなこんなで、しばらく前にXMLファイルからコメントアウト部分を削除してインデントを整形した結果を別のファイルに出力するツールを作った。これが、作るきっかけはどうしようもないのに、作っている間は結構楽しかったんだよな。

それでまたXMLを扱う何かを作りたくなってきたのだが、最近は仕事が忙しくて職場ではちょっと時間が取れそうにない。なので、欲望は家で満たすことにした。

で、何を作るかだが、まずはシンプルに選択と表示と検索と保存ができることを目標とする。

選択: XMLファイルを選択できるようにする。ファイル選択のダイアログが使えれば尚良し。
表示: 選択したXMLファイルの内容を表示する。適当に色を変えて見やすくしたい。
検索: 簡単な正規表現で検索できるようにする。検索結果は、文字列ではなく該当する要素を表示したい。
保存: 表示している内容をファイル出力できるようにする。検索結果を表示している場合はそれを保存。

これは仕様ですか？というレベルの記述しかないが気にしない。

そして何で作るか。まあHTAでいいだろう。何か問題が起きた時のデバッグは面倒だけど、小さな試行錯誤を重ねて作るならコンパイルなんかで邪魔されないことの方が大きい。 HTAならF5キーで再実行だし。

欠点は実行環境がWindowsに限定されることだけど、これはこれで良し。 Macでもやりたくなったら、また何か作ればいいのだ。

と、大きな方針だけ決めて、とりあえず上っ面だけ作ってみる。

xml.hta


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>XML</title>
    <style>
        * {
            pargin        : 0;
            padding       : 0;
            box-sizing    : border-box;
            line-height   : 1;
            font-size     : inherit;
            font-family   : inherit;
        }
        body {
            font-size     : 10pt;
            font-family   : sans-serif;
        }
        form {
            background    : #f0f0f0;
            width         : 100%;
            height        : auto;
            padding       : 0.3em 0.6em;
            margin-bottom : 2px;
        }
        form * {
            display       : inline-block;
        }
        input[type="file"] {
            width         : 50%;
        }
        input[type="text"] {
            width         : 50%;
            font-family   : monospace;
        }
        input[type="button"] {
            width         : 6em;
            border        : 1px solid #808080;
            background    : #e0e0e0;
            padding       : 0.16em 0;
        }
        input[type="button"]:disabled {
            color         : #a0a0a0;
            border-color  : #c0c0c0;
        }
        input[type="button"]:enabled:hover {
            background    : #f8f8f8;
        }
        #base div {
            margin-left   : 1em;
            font-family   : monospace;
        }
        .cdata {
            white-space   : pre;
            color         : #0000f0;
        }
        .attributeName {
            color         : #f08080;
        }
        .attributeValue {
            color         : #0000f0;
        }
    </style>
    <script>
        function soLoad() {
        }
        function doSearch() {
        }
        function doReset() {
        }
        function doSave() {
        }
    </script>
</head>
<body>
    <form>
        <input type="file" maxlength="256" id="txtFile" value="" accept=".xml" />
        <input type="button" value="load" id="btnLoad" onclick="doLoad()" />
        <input type="button" value="save" id="btnSave" onclick="doSave()" />
    </form>
    <form>
        <input type="text" maxlength="256" id="txtQuery" value="" placeholder="検索文字列の正規表現" />
        <input type="button" value="search" id="btnSearch" onclick="doSearch()" />
        <input type="button" value="reset"  id="btnReset"  onclick="doReset()"  />
    </form>
    <div id="base"></div>
</body>
</html>

見た目について、現時点で考えているのは、以下の通り。

XMLの各要素をdivに対応させる。要素の入れ子はdivの入れ子で。
属性名と属性値には色をつける。
CDATA内のデータは改行含めそのまま表示する。

IEでXMLを表示させると要素名にも色が付いているけど、要素名の前後ってタグの開始終了ぐらいだし、色を変えても変えなくても視認性にあんまり違いが無いような気がするので、とりあえず変えないで作ってみる。見難いようだったら変えてみる。

ファイル選択はHTMLのinputを使う。


<input type="file" accept=".xml" ".../>

これでファイル選択できるのがHTAの便利なところ。 accept属性を指定することで拡張子で限定できるのも地味に便利。

あと、デフォルトだとIE9相当（？）で最新の便利な機能が使えなかったりするので、IE最新バージョン相当となるように


<meta http-equiv="X-UA-Compatible" content="IE=edge">

と宣言しておく。手元の環境はWindows10なのでedgeを指定しているが、11でもたぶん問題無い。

続きは明日。

2016 02 02

XMLの1