この地図はおなじみのダイヤモンド富士とパール富士の計算のサイトで使われている電子国土ポータルの地図です。 私のホームページでは電子国土ポータルとCANVASタグを使っていますが、サイトを起動する際にグラフィックさせようとすると意外と面倒なことが起こるのですね。 KHTML系のブラウザとIEとfirefoxで微妙に仕様が異なるためどのブラウザでも同じように表示させるのにかなり苦労しました。 CANVASでグラフィックさせる際IEだけGoogleの発行するexcanvas.jsをはじめとしたCANVAS要素を実装するスクリプトを読み込む以下のようなハックが必要なのは有名な話ですね。

<!--[if IE]><script type="text/javascript" src="./../js/excanvas.js"></script><![endif]-->

./は現在のフォルダ、../は一つ上のフォルダをあらわす相対指定のコードですがexcanvas.jsの場所は実際とは異なります。 どうも、excanvas.jsを読み込むのに時間がかかるようなのです。 firefoxやGoogleCromeとかは地図の表示に使われているapp_mainという関数からグラフィックの関数を呼び出せばグラフィックができますが、IEだとそれではできずにonloadイベントでグラフィックを起動しないといけないようです。 その際、電子国土ポータルとの相性が悪いとなかなかグラフィックが表示できない問題もありますが、それが一番確実だと思います。 逆にKHTML系のブラウザではonloadでグラフィックさせるのはやや難しくなります。 そこで、IEとそれ以外のブラウザを判別してIEの仕様の違いを吸収するという方法が考えられます。 グラフィックの関数がstartgraphicのとき、app_main内で以下のようにします。

if (document.uniqueID) {
window.onload = startgraphic;
} else {
startgraphic();
}

以前はdocument.allで判別できたそうですが、現在ではdocument.allを実装したブラウザが他にも出てきているそうなので、こちらの方がいいそうです。 ブラウザごとに固有の識別関数が約束されていたらいいのですが、なかなか難しいですね。 このサンプルは皆様が時々使っているダイヤモンド富士とパール富士の計算で使われています。

このサンプルではapp_mainで関数を呼んでから実際にCANVASにアクセスするまで座標計算の処理を挟んでいて多少のタイムラグがあるため私の1MBのADSLでは主要ブラウザでの検証の結果全て問題なしでした。 あなたの環境ではどうでしょうか。 openspaceの記事では異なる結論となっており、どうやらサーバーとの交信状況、回線速度、クライアントとサーバーの処理速度などの動的な要素がからんだ複雑な問題のようです。

私もさらに試してみたところfirefoxではページを再読み込みしたりすると時々app_mainの出現とonloadの出現の順番が逆転することがあり、どうも地図の表示と本文の表示は独立したタスクとして処理されているようです。 CANVASグラフィックを起動した時点でCANVASが用意できていたらグラフィックが成功して、そうでなければ失敗したり、さらにはエラーが出てページの読み込みが止まったりします。 どのイベントでグラフィックを起動すればよいか知るためには様々な環境でテストしていくしかないようです。 そこで、皆様に簡単なアンケートに協力していただけたら幸いです。 こちらのアンケートの結果は電子国土ポータルを用いたAPIの改善のために用いさせていただきます。 日本のウェブマップの技術の発展のためにぜひ協力してください。 このアンケートは結果の統計的解析に必要な最低限のデータを取得するもので個人情報を収集されることはありません。