« PCと携帯端末の判別 | トップページ | テキスト作成 »

2012年4月18日 (水)

タイトルの入力(修正)

FlatTable のタイトルの入力ルーチンに問題が見つかったので修正しました。それにしても、その解決までには幾つもの試行錯誤を繰り返すことになりました。

まず、修正前のコードは次のようになっていました。

// タイトルの SVG コード
    <g id="titleBar"
        onclick="setText(evt)">
        <rect x="252" y="12" width="216" height="24"
            style="fill:#ddd;stroke:#999;stroke-width:1" />
        <text id="title" x="360" y="30"
            style="text-anchor:middle">test title</text>
    </g>
// JavaScript コード
function setText(evt){
    var el = evt ? evt.target : event.srcElement;
    var txt = el.parentNode.childNodes[3].firstChild;
    txt.data = prompt("Text:", txt.data);
}
この時は、タイトル表示の具合を確認するためにダミーとして「test title」を SVG コードに埋め込んでいました。しかし、完成品ではこの部分がもちろん削除されます。

上記 JavaScript コードの firstChild すなわち txt がテキストオブジェクト「test title」を指しており、このダミー部分が無くなると txtnull になります。その時 txt.data がエラーになるのです。

このエラーを回避するために、 txtnull の時は、テキストオブジェクト(の積りの) ""appendChild() してみました。しかし、それでは上手く行かないので、次に String("")appendChild() してみました。しかし、これもダメでした。

テキストオブジェクトは何者で、どうやって指定すれば良いのでしょうか?

ブラウザ内臓のデバッガでダミー部分を見てみると、「Text」となっています。そこで、ダミー部分に createChild("Text") を実行してみたのですが、結果は <Text></Text> となって、これもダメ。

インターネットで「テキストオブジェクト SVG」で検索したのですが、それでも解決しません。

innerHTML が使えるかと試したのですが、ダメでした。

もう最後の手段で、ダミー部分にスペースを入れて誤魔化すしか無いのでしょうか?

夜も遅くなり、もう寝なければならない頃になって、買っておいた本「HTML5 + JavaScript」(古旗一浩)を調べて、やっと答えが見つかりました。 firstChild ではなく textContent を使えば良いということです。

結局、タイトル入力ルーチンは、こうなりました。

// タイトルの入力
function setTitle(){
    var title = document.getElementById("title");
    var s = prompt("Title:", title.textContent);
    if (s != null){
        title.textContent = s;
    }
}
textContentnull だとしてもエラーには成りません。なお、ルーチンをタイトル入力に限定したので、関数名を変え、要素の取得を getElementById() に変えました。

ところで、textContent が分かったので、これを「SVG 1.1 仕様 (第2版) 日本語訳」で調べたのですが、満足できる記述を見付けることは出来ませんでした。本当に役に立たない仕様書です。(追記: textContent は SVG ではなく DOM で規定されているのかも知れません)

--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

« PCと携帯端末の判別 | トップページ | テキスト作成 »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/54498309

この記事へのトラックバック一覧です: タイトルの入力(修正):

« PCと携帯端末の判別 | トップページ | テキスト作成 »