2007年6月5日

『前の投稿』で遷移すると写真が表示されない(解決!)

これまで写真の投稿は次のようにしていた。

<div id="photo527593023"></div>
<script type='text/javascript'>
 writePhotoMap("527593023");
</script>

青の数字の部分がflickrのphoto ID。この投稿のHTMLが読み込まれると、<script>内の関数writePhotoMap()が実行されて、 <div id="photoXXXXXXXXX">に写真とかが色々とjavascriptで書き込まれていくというのが、当初のもくろみ。

通常は、これで問題なく写真とかが表示される。ところが、トップ画面の一番下にある『前の投稿』で、過去記事を見ようとすると、見れない!試しに上記のwritePhotoMap()の前にalert("");とか入れても、何もポップアップされない。どうやら<script>内が実行されていないらしい。ならば、と<body>onload="alert('');"を付け加えてみるけど、これも実行されない。

アドレスバーとか『前の投稿』のリンクを見ると、java servletにGET送信して、リダイレクト?かなんかで過去の記事を表示しているみたい。う~ん、このリダイレクトか何かは仕事でも悩まされたことがあった。そのときに探せた情報は概念的なものばかりで。tomcatとbrowserとの間での細かいやりとりの仕組みが分からなかった。ここで嫌な予感が…。

とりあえず、WEBで情報収集しようとしてみたけど、なかなか難しい。検索語はonload javascript? なんか違う。次にbloggerのヘルプであるような気がした。Google Mapsをblogで表示したい時は同じ問題に行き当たるはず。ここで『前の投稿』をprevious postsと訳してしまった。不覚。正解はolder posts。例えば、AdWords API Blogの一番下で確認できる。

まぁ、辿り着いたのがDummies Gide to Google Blogger BetaのAdd a Google Map to your blogというページ。ここのサンプルソースに<onunload="GUnload()">>というのが<body>タグに付けてある。これが対策かと思ったけども、関数GUnload()はどこにも定義されていない。

とりあえず、unload javascriptで検索。そこで引っかかったのがMSDNのonload Eventのページ。APPLET, BODY, EMBED, FRAME, FRAMESET, IFRAME, IMG, LINK, SCRIPT, windowのオブジェクトでこのイベントは取得できるとのこと。MSのJScriptということで一抹の不安はあったけど、とりあえず、適当に<IMG>を入れて使ってみた。そしたら成功。どきどきしながらFirefoxで実行。これも上手く動いた。やったー。

あとは、<IMG>を不自然なく入れればOK。そこでカメラアイコンをチョイス。結果は以下のコード。

<IMG src="http://genisgen.googlepages.com/maps_camera.png" class="camera" onload="writePhotoMap('527593023');"><div id="photo527593023"></div>

写真の投稿の場合は、まずカメラアイコンを表示し、そのアイコンを呼び出す時に写真とかの記事本体の情報をその後ろにある<div>に書き込むと、理解できる。

なんか対処療法的で問題のような気もしたけど、このソースはある意味分かりやすいと思った。ソースに明示的に「いつ」(=カメラアイコンが呼び出された時)写真とかの記事本体を書き込むのかが書かれている。いままでのソースだと、browserがソースをparseしていって<script>のところで、書き込み命令を実行していたと理解しなければいけなかったので、browserのparseという非明示的なところを意識しなければならなかった。

ということで、このソースで良しとすることにした。アイコンのお陰で、写真に関する投稿だと分かりやすくなったし。まぁ、普通にblogをみる人は、まさかこのアイコンがあって初めて記事本体が表示されるとは思わないだろうけど…。(了)

0 件のコメント: