ブログにフラッシュの地図を表示する

世界のあちこちの記事を書いていると、地名から検索できるだけでは物足りなくなって、世界地図から見つけられるようにしたい。たとえば、トップページには世界全体の地図があって、ヨーロッパのところにマウスを持っていくと、ヨーロッパの部分が色が変わって、そこでクリックすると、ヨーロッパ地域がズームアップする。そこからさらに、イギリスにマウスを持っていくと、色が変わって、そこをクリックすると、イギリスに関連した記事のタイトルが表示されるというようなイメージだ。

そこで、今回、flashで地図が描けるフリーソフト「ammap」を入れてみた。

インストールは、それほど難しくなく(実際にはいろいろ試行錯誤があったが)、サイトからファイルをダウンロードし、ホームページのディレクトリ配下の適当なところに置く、ここでは、複数のwordpressのブログから使うことを考えて、wordpressと並列な場所にmapというディレクトリ名で設置した。

手始めに、mapディレクトリの下にあるammap.htmlをブラウザでアクセスしてみると、

drill down world map

な感じの地図が表示される。

じゃ、これをwordpressのpageで表示させてみよう。

ammap.htmlの<!– ammap script–>から<!– end of ammap script –>の部分をそのままページの本文に貼り付ける。ページテンプレートはデフォルトのままでよい。

貼り付けたスクリプトの中でjsやswfを呼ぶところが数カ所あるが、そのディレクトリのパスを変更する必要がある。

元のammap.htmlでは、src=”ammap/swfobject.js”となっているところを、たとえば、src=”../map/ammap/swfobject.js”と修正する。数カ所とも同様に、ディレクトリのパスを修正し、ページを保存すると完了。

wordpressのページの中に、ammap.htmlと同じ地図が表示される。

2010/5/24追記

ディレクトリのパスの設定変更は、実はなかなか一筋縄ではいかない。いや、ちゃんとwebのことがわかっている人には明快なのだろうが、私のように生半可にwebをいじくっている者にとってはなかなか難しい。

今回やろうとしていることは、wordpress上のある「記事」や「ページ」に地図を表示させて、適当な国を選んで、そこから、その国に関連する記事に飛んでいけることである。さらに、環境が同じようなwordpressでも簡単に移設できるようにしたいから、できれば、相対アドレスで作りたい。そうすると、その「記事」や「ページ」が表示されている正しい場所、地図のフラッシュファイルが置かれている場所、リンク先の記事の場所、それぞれの関係を把握しなければならない。

まず、地図を表示する「記事」や「ページ」の場所だが、これは、設置されているwordpressの場所と、そのwordpressでのパーマリンク設定にしたがう「記事」「ページ」の場所による。今回の例では、上にひとつ「親ページ」を持つ「ページ」に地図を表示した。つまりこの場所(map-page)は、

localhost/mf/wordpress/oya-page/map-page/

となる。地図(ammap)のある場所は、

localhost/mf/map/

この時の、map-pageの記述は以下のとおりである。

<script type=”text/javascript” src=”../../map/ammap/swfobject.js”></script>

<div id=”flashcontent”>

<strong>You need to upgrade your Flash Player</strong>

</div>

<script type=”text/javascript”>

// <![CDATA[ var so = new SWFObject(“http://localhost/mf/map/ammap/ammap.swf&#8221;, “ammap”, “540”, “360”, “8”, “#aaaaaa”);

so.addVariable(“path”, “../../map/ammap/”);

so.addVariable(“settings_file”, escape(“../../map/examples/world_capitals/ammap_settings.xml”));

so.addVariable(“data_file”, escape(“../../map/examples/world_capitals/ammap_data.xml”));

so.write(“flashcontent”);

// ]]>

</script>

最初のswfobject.jpは相対アドレス。次のammap.swfは絶対アドレス。その先の3つの変数はいずれも相対アドレスで記述してみた。この記述はあくまでも参考までに書いてみたもので、実際には、相対アドレスか絶対アドレスかの都合のよいほうで統一して記述する。

もうひとつ、このパスの書き方で難しかったのは、drill_downの地図のようにflashの地図から、別のflashの地図に遷移するときの書き方である。

ammapでは、地図上のデータ(サンプルではたいていammap_data.xml)の中で、リンクさせたい<area>や<label>や<movie>のパラメータにurl=””と記述する。どこか外部のサイトへリンクさせる場合には、普通にurl=”http://…”と書けばよい。ところが、別のflashへ遷移するときは、url=&#8221;!…”となるらしい。この…のところに、相対アドレスまたは絶対アドレスで次に表示させたいflashのファイルを指定する。

確かに、wordpress上で動かすわけだから、単に静的のhtmlやxmlを表示するわけではない。動的に今の場所の位置、階層が変化する。よくよく考えながらパラメータを設定しなければうまくいかない。

なお、試行錯誤を繰り返しつつweb上で確認しながら作業するのにブラウザはsafariが役に立った、safariならではの構成ファイル一覧やwebインスペクタにより、htmlやxmlが読んでいるファイル名やディレクトリがどう正しくないか、すぐに見え、そこからhtml、xmlを修正できる。実に、強力な助っ人であった。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。