京都の観光地めぐりの地図について
Google map 奮戦記

京都観光とはあまり関係ないですが、Google mapがIEで表示されないという問題に悩んでいる方のために、記録を残しておきます。こんな深い階層に入れてしまうと、たどり着く人は少ないとは思いますけど。

 京都の観光地めぐりの地図の多くは、Google mapを利用しています。ご覧になるには、比較的新しいバージョンのブラウザが必要です。最も一般的なInternet Explore(以下、IE)の場合、バージョンは6以上。マックの場合、IEはバージョン5で止まっているので、safariなどをお使いください。
 そういうわけで旧式のパソコンでは見られませんが、大多数の方には利用できるでしょう。ホームページを制作する側から見れば、Googleに登録するだけで、高精度な地図を自由にカスタマイズして使用することができるのは大きな利点です。今回は時間的な問題のため、「訪問地」を番号で地図上に示すだけにしましたが、道に沿って線を引いたり、地図上のアイコンをクリックすれば、画像やテキストが出るようにすることもできます。しかも、基本的に利用は無料。私の編集者としての好奇心を強く刺激しました。
 しかし、やってみるとたいへんな難事業です。「これは自分の能力を超えている」と判断し、ジャパンエイドPC救急隊を通じて知り合った桂木由加里さんにレクチャーをお願いしました。桂木さんもGoogle mapは初めてでしたが、パソコンは自分で修理もできるし、インストラクターの資格も持っているという人なので、本やホームページで研究して、基本言語ソースをつくってくれました。

※プログラミング言語の知識がなくて、本格的に利用したい方は、このような有料サービスを探して依頼するほうが手っ取り早いと思います。自分で組めば、何ヶ月かけてもできるかできないか、わからないですね。それをわずか1〜2万円程度で作業して、あとは自分でやっていけるようにレクチャーしてもらえるんですから(ちなみにPC救急隊は東京渋谷にあり、パソコンの設置、修理、ソフトの使い方のレクチャーなどをわりと庶民的な値段で提供しています。代表的なソフトの使い方などの電話レクチャーも行っています。ただし、Google mapのことがわかるのは、桂木さんだけです。桂木さんはPC救急隊の社員ではありません。桂木さんに連絡を取りたい方は、私にメールを頂ければ、転送またはご紹介致します(別に彼女から紹介料などは受け取っていません)。

 ただ、そのあともIEで表示されにくいという問題が残りました。この解決は難しく、桂木さんも頭をなやませました。まず、ページの文字コードは、ちゃんとUTF-8になっています。IEでの表示のための、VML名前空間もちゃんと指定してあります。どう見ても、文字ソースに間違いはありません。
※VML名前空間 xmlns:v="urn:schemas-microsoft-com:vmlと記述すること

 検索して調べると、たとえば「Google Mapsを呼び出すCSSのid名とhtmlのアンカータグ名が同一 名の場合に、IEでは地図が正常に表示されない。aタグのnameをidとは別の名前にするべし」というような記述もありましたが、私のホームページではCSS スタイルシートは使っていません。
 「Java Scriptを<table>タグや<div>タグから出す」というのも公式ヘルプに載ってますが、それでもないし…。
 「インラインフレームにしたら表示されるようになった」という話が何例かあるので、桂木さんがソースを直してくれましたが、効果なし。しかし、不思議なことに、IEで表示されるケースもあるんです。謎でした。


 あるとき桂木さんにヒラメキが降りました。「ホームページをつくっているソフトに問題があるのでは?」というのです。かねがね、どうもおかしいと思っていたそうです。私が使っているのはマック用のGolive。同じソースを桂木さんがDreamweaverにコピー&ペーストしてアップしてみると、ちゃんとIEでも問題なく表示されました。「そうか、ソフトのせいだったのか…」やっと原因が特定できました。

 物事というのは好転し出すと、どんどんうまく行くもので、原因がわかった次の日、仕事の打ち合わせで神楽坂のクラップスというデザイン会社に行ったとき、1年ほど前、Web制作の人にGoliveの使い方でよくわからない点を教わったことを思い出しました。
 というわけで、インタラクティブビジネス部の高橋 晋さんに聞いてみると、なんと「Goliveで文字コードをUTF-8に指定したつもりでも、そのHTMLファイル自体は違う文字コードで保存されているため、ブラウザがJavascriptを実行できない」というのです。高橋さんもマック派のGolive使いで、以前、同じような問題で悩んだということでした。
 で、解決方法はというと、HTMLファイルをテキストエディタで表示して文字コードをUTF-8に変更し、それをコピー&ペーストしてGoliveに持っていくだけ。約3ヶ月間、悩んだ問題は、急転直下、解決しました。この方法はほかのホームページ作成ソフトでも有効かもしれません。

<テキストエディット:マック用>
●ミミカキエディット
http://www.mimikaki.net/
● CotEditor
http://www.aynimac.com/p_blog/files/article.php?id=41

<テキストエディット:ウインドウズ用>
●Terapad
http://www.vector.co.jp/soft/win95/writing/se104390.html



なお、参考までに次の本を挙げておきます。この2冊を読めば、Googlemapについて、だいたいわかると思います。読んで、損はありません。

◎「Googleマップ+Ajaxで自分の地図をつくる本」(米田聡著/ソフトバンククリエイティブ)

<読後感>わりと取っつきやすいので、コンピュータ言語にくわしくない方でも読めます。専門的なことを理解するのは難しいですが、読むと「Google mapって、こう組むのか」と、つかむことができます。

◎「入門Ajax」(高橋登史朗著/ソフトバンククリエイティブ)

<読後感>専門的な説明が多く、一見、取っつきにくいです。しかし、本に収録されている言語ソースを公開している著者のホームページのURLが巻末に記されているので、それをコピー&ペーストして自分のホームページに貼りつけ、本を読みながらカスタマイズすると、素人でもそのまま使うことができます。実は、とても親切設計です。

京都観光街めぐりのトップページへ