友人や私が旅行に行ったところなどをプロットする地図を、Google Maps API を使って作成しブログに埋め込んでいる。
　作成する自分用の地図はいろいろとあるが、プロットする地点が少しずつ増えていく旅行地図--例えば、Studio YAMAKO の【国内旅行：2009】などでは、本体の Javascript はいじらずに、行った地点の経度・緯度などのデータを XML ファイルに追加して呼び込んでいる。

　ところがいつも使っているエディタの【秀丸】できちんと XML の文法に則ってファイルを作成しているはずなのに、Google Maps API が読み込んでくれない。原因を乏しい知識のなかでググって見たが、なかなか解決策が見当たらないまま1週間くらいが過ぎてしまった。ひょんなことから、完全な解決ではないが、原因がわかったので、この間に学習したことを備忘録として記録しておきたい。

　XML fileにエラーがある場合、Internet Explorer でこのファイルを開く(フォルダー⇒該当ファイルを右クリック⇒プログラムから開くで出るセレクトボックスから、Internet Explorer を指定する）と、次のようなメッセージがでて開けない。　 Google Chromeでは、次のようなメッセージが出る。
ここで出てくるライン( line) とは、開始タグと終了タグで囲まれたテキストが行を表していると思われる。 それで推定すると、どうやら最後の行の外に、余計な何かが附加されているようである。

いつも使っているエディタの【秀丸】でXML fileを眺めつすがめつしてみたが、よくわからない。この表示の最後にある [EOF] は、End Of File のことであり、【秀丸】特有のものである。後で分かったことだが、この[EOF] が問題であった。

XML の文法が正しいかどうかは、W3CSchool のXML のセクションにある　validator で確認できる。 この validator で【秀丸】で表示されるコードを確認すると　no error と表示される。

XML file の中身は、Notepad でも確認できる。IE でエラーとなった XML file をNotepad で開いてみると、下のように【秀丸】の [EOF]部分が黒い四角形の文字となっている。Notepad で、この黒い四角形の文字を削除して保存して、IE で実行してみるとエラーは起こらない。

　再度、"秀丸　EOF"でググってみると、【秀丸】への理解が十分でなかったことが判明した。【秀丸】の設定で、 [EOF] を保存しない、読み込むときに　EOF制御文字を無視するとすると（【秀丸】で「その他」⇒「ファイルタイプ別の設定」⇒「保存の対象」「その他」「保存読み込み」で設定できる）、IE での展開でエラーは起こらなくなった。

　これらを調査するなかで、XML エディタとして【XML Notepad 2007】というユティリティがあることが分かった。今まで、XML file のエディタとしては便宜的に【秀丸】を使ってきたが、これが問題であった。まだ十分に理解出来ているとはいえないが、XML に特化した【XML Notepad 2007】を使うと下のスクリーンショットで分かるように非常に簡便となる。
　今後は、Google Maps API で使うXML file の作成は、このユティリティを使っていくつもりである。

　IE7 では、ネットで開いた頁の HTML ソースコードを開くのは、秀丸エディタに指定しており、それで開いていた。
　指定の方法は、IE でツール→インターネット・オプション→プログラム→HTML エディタで秀丸エディタをインストールすると表示される「HIDEMARU」 を選択する。

　ところが、IE8 に変えてから同じような指定をしているのに、Miscrosoft のエディタとなる。秀丸エディタに比べれば、慣れていないせいもあるだろうが使いにくい。
それでネットをググッテみると、YOU LOOK TOO COOL というブログに解決方法を提示してくれていた。それで解決したので、備忘録として記録しておきたい。ネットでは、ほとんどのことが解決される。

1. 事前に、Hidemaru.exe を収納したフォルダーを確認しておく。
2. IE8 の「ツール」→「開発者ツール」をクリックして、開発者ツールを立ち上げる。ウィンドウ上部の表示は、現在開いている Window のページ表示が出るようである。
3. ここで、メニューバーの「ファイル」→「Internet Explorer ソースの表示カスタマイズ」→「その他」を選択すると「ファイルを開く」ポップアップ画面がでるので、ここで Hidemaru.exe を収納したフォルダーを指定して、 Hidemaru.exe を指定し、開発者ツールを閉じればよい。

　このような設定にしておくと、開いたウィンドウのソースは、IE8 の「表示」→「ソース」で秀丸エディタで表示される。また、二つめのウィンドウのソースは、秀丸エディタでは、新しいタブ・ウィンドウで表示されるので、作業がやりやすい。

　エントリーで、HTML や Javascript , XML のソースコードを記録するときには、<pre><code>～</code></pre>という形で記述している。
　私のMovable Type でのブログは、「小粋空間」さんのテンプレートを使わせてもらっている。もちろん付属しているCSS(Cascading Style Sheets)も使っている。そのCSSでの　<pre>　は次のように設定されている。backgroundの色は、いじっていているが。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #ffffe0;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}

　このまま、100行、200行あるソースコードを記載すると、縦に非常に間延びしたエントリーになってしまう。
　これを避ける方法をネットでサーチしてみると余りにも普通の知識なのか適切な記述が見つからなかった。もう一度 CSS の基本に立ち返って学習してみると、CSS の pre の部分に、

pre {
  ,,,,
  height: 150px;
  ,,,,
 }
 

といれればよいことが分かった。　
　が、これでは１行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで

<pre style="height: 150px"> 

とスタイルを指定すればいいことが分かった。この方法を使えば、ボックスの縦の大きさを表示するコードの行数に合わせて変えることができる。スタイルを指定しなければ、縦スクロールがなく、全てのソースコードが表示される。余りにも基本的なことなので、ブログに載せるのは恥ずかしいが、自分自身の備忘録として残しておきたい。

　なお、、<pre><code>　～　</code></pre>　の　～　部分（ソースコード）にある　<　>　は、特殊文字と判定されるので、&lt; &gt;  とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が 、&nbsp; に、" が &quot;に、& が &amp;にエンコードされるが、エンコードされたものをそのまま　Copy&Paste して使っても問題はない。
　また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。