ホームページにIE5.5でもPS3でも動く地図窓を組み込もう！
ホームページにInternet Explorer 5.5でも、PlayStation 3でも動作してしまう地図窓を組み込む(埋め込む)方法を紹介します！
ひととおり読んでからの利用を推奨しますが、手っ取り早く組み込みコードが欲しい人は呪文じぇねれーたーへどうぞ。
他の呪文じぇねれーたーを探す
地図窓とは
地図窓とは、ホームページやブログなどに地図を埋め込み表示できる便利なツールです。
場所によってインラインマップ、埋め込みマップ、組み込み地図ほか様々な名称で呼ばれていますが、ここでは俗称の「地図窓」で統一します。
これはサンプル画像ですので動作しませんが、こういう形式のフレームで、地図窓を埋め込めます。
検索バー、座標表示バー、表示範囲の中心を示す十字は非表示にもできます。
主要な地図窓の問題点
大手商用サービスも地図窓を提供していますが、どれも無料で利用するには参照(呼び出し)回数に制限があったり(特にGoogle Maps)、古いブラウザーや特殊なブラウザーで動作しない問題を抱えています。
有料のプランに申し込めば参照制限をそれなりに緩和できたりしますが、それでも無制限ではありません。
IE5.5やPlayStation 3で閲覧しようとしても表示されず、地図の表示に対応しているブラウザーで閲覧しても、地図の閲覧者が多いと表示されないのです。
おまけに多くのマップサービスは印刷しての利用を許可していません。
つまり必然的に、印刷物とホームページで雰囲気を統一したくても、それぞれ異なるマップを用いなければならなくなってしまいます。
それでは何のために埋め込んだ地図なのか全くわかりません。
そこで、本ホームページでは、この問題を鮮やかに解決するための代案を紹介しています。
代案
ここで説明する地図窓の組み込みには、例によって総合情報通信技術研究機関 ADS(通称ソフトハウス ADS、ADS)と呼ばれるNGO、民間の工学研究機関がサービスしているシステムを流用します。
ツイ窓の一件で反省しまして、今回は最初に了承を頂きました。
利用した結果について自己責任であることを条件に、黙認して頂けるそうです。
ADS式地図窓の長所
無料
登録不要
広告が無い(少ない)
目立つ広告どころか、広告そのものが無いようにも見受けられます。
コピーライト表記も小さく、目立たない位置にあり、ホームページを見た訪問者が「完全にオリジナルのコンテンツ」だと勘違いしてしまうかもしれないほどスッキリしています。
軽量
メモリの少ない端末でも余裕で表示してくれますし、ページ自体も恐ろしいほど軽いです。
外部のCSSファイルやライブラリを一切用いず、非同期通信も行わずに、1ページで全て完結させているからだと思われます。
そのため、ページのロード時間にも大きな影響を及ぼしません。
多くのブラウザーに対応
Internet Explorer 5.5だろうと、旧式のタブレットだろうと、PlayStation 3だろうと問題なく表示される、恐らく唯一の地図窓です。
Windows 98 Second Editionや、Me、XPの全盛期にもオンライン・マップ自体は存在しましたが、当時でも、Internet Explorer 6等で利用するには、ブラウザーに特別なプラグインをインストールしなければならないサービスばかりでした。
さらに今となっては、ほぼ全てのオンライン・マップ・システムがHTML5を利用した仕組みに置き換わり、旧ブラウザーは切り捨てられている状況ですので、Internet Explorer 5.5でも、プラグインにも頼らずに動作するマップ・システムは本当に貴重です。
HTTPでサービスされているので、SSLやTLSに未対応の端末でも正常に表示されます。
ネット民が利用する端末は千差万別です。
誰もが最新のブラウザーを使ってくれているとは限りません。
できるだけ多くの人に見てもらいたい、多くの顧客を獲得したいと考える店舗や会社のホームページ製作者にとっては、最も嬉しい要素だろうと思います。
表示制限無し
訪問者の多いホームページに地図窓を貼りたい場合は特に頼もしいです。
IE5.5でもシームレス
印刷可
商利用可
不可とは明言されていないので、この場合は自己責任を理解して使う限り商利用もできるものと思われます。
ADS式地図窓の短所
HTTPのみ
一般的なHTTPで提供されているコンテンツを<iframe>(インラインフレーム)タグ等を利用してHTTPS(暗号通信)ベースのホームページに組み込むと、混在したコンテンツとして表示をブロックするブラウザーがあります。
これは、HTTPS(暗号通信)で公開されているページの内部から、一般的なHTTPで公開されているコンテンツを参照する際のみに生じる問題です。
当然ながら、この問題は、暗号通信を必要としないHTTPで公開されている一般的なページの内部から、同じHTTPで公開されているコンテンツを参照する場合には生じません。
一般的なHTTPで公開されているページであれば、HTTPS(暗号通信)で公開されているコンテンツを読み込み、混在したコンテンツとなっていても、表示にトラブルは生じません。
HTTPS(暗号通信)で公開されているページであれ、読み込むコンテンツが同じHTTPS(暗号通信)で公開されているページであれば、ホームページの表示そのものにトラブルは生じませんが、この場合、本ホームページで解説する地図窓は組み込めません。
ようするに、ホームページ全体を最初から一般的なHTTPで公開しておけば、ユーザーのブラウザーが暗号通信に対応しているか否かを問わず、いかなるブラウザーでも閲覧してもらえます。
しかし、HTTPS(暗号通信)で公開したページが存在すると、そのページは暗号通信に対応していないブラウザーで一切見られなくなってしまいます。
たとえブラウザーが対応していたとしても、OSが対応していない場合は同様です。
Google Chromeの例では、以下のようなエラーが表示されます。
Windows 98やXPユーザーの数は、最新OSのユーザー数に比べて相対的、絶対的に少ないのかもしれませんが、それでもゼロではなく、確実に存在するのです。
旧世代のOSやブラウザーに限らず、テレビに接続して使う汎用のネット端末ほか、HTTPS(暗号通信)が利用できないネット環境は無数にあります。
地方の旅館やホテル、観光案内コーナー等に設置されている専用端末にも、一般的なHTTPでの通信しか受け付けない仕様の製品が多いです。
ホームページ全体をHTTPS化(全ページを暗号通信ページに強制リダイレクトさせるなど)してしまうのは細心の注意が必要で、閲覧者を間違いなく減らすでしょう。
HTTPS(暗号通信)に対応しないか、対応が不完全なブラウザーは山ほどありますが、一般的なHTTPに対応しないブラウザーは存在しません。
そもそも、暗号通信に頼らなければならないほど、ホームページの管理者が、ユーザーに対してプライベートな情報の送信を求めるケースは滅多にないはずです。
訪問者にクレジットカード情報の入力を促す必要があるなど、特別に大きな事情がない限り、一般的なHTTPで公開しておけば問題ありません。
日本地図のみ
無保証・無サポート
トラブルが生じても、使えなくなっても全て自己責任です。
組み込み方法
ADSのマップ・システムのURL(http://ads.selfip.com/map/)に対し、組み込みたい地図窓の仕様をクエリに記述して投げると、仕様に沿った地図が出力されます。
サーバーへクエリを渡す手段には様々な方法がありますが、ここで解説するクエリとは、URLの末尾に付与する文字列のことです。
URLの末尾に?を加え、その後に名=値の形式(いずれも半角)でデータを渡します。
各データは半角の&で区切り、例をあげると次のようになります。
| http://ads.selfip.com/map/ |
? |
x=137.0175&y=35.0573&mk=1 |
|
|
クエリ |
この場合、x=137.0175&y=35.0573&mk=1がクエリ文字列です。
つまり、この例では、要素xの設定が137.0175、要素yの設定が35.0573、要素mkの設定が1ということになります。
データを受け取ったADSのマップ・システムが、クエリで指定した地図を、クエリで指定した仕様に沿い、PlayStation 3でも正常に表示できる形式で出力してくれます。
ホームページ製作者は、それをホームページ内の地図窓を表示したい位置に <iframe> で組み込んでやればいいだけです。
たったそれだけで、PlayStation 3だろうがIE5.5だろうが、正常に表示される地図窓をホームページに組み込むことができます。
複雑なプログラミング言語を習得する必要は一切ありません。
各要素名と意味は次のとおりです。
| x | 緯度(X座標) | z | 縮尺(初期値) |
| y | 経度(Y座標) | vm | 航空写真 |
| xm | マーカー緯度(X座標) | vl | 地図形式 |
| ym | マーカー経度(Y座標) | c | 座標等の表示 |
| mk | マーカー表示 | sc | 検索機能 |
| zn | 縮尺(最小値) | q | 検索文字列 |
| zx | 縮尺(最大値) | n | 検索の実行 |
nはシステム・クエリのようです。
色々と試した結果、q要素にキーワードが設定されていても、n要素の値が1に設定されていないと検索が実行されませんでした。
仮にn要素の値が0で地図形式を切り替えても、q要素を含む他要素の値は全て引き継がれるので、切替後の検索窓には元のキーワードが代入されます。
地図窓を読み込む際、n要素の値に1を設定してしまうと、地図窓を表示するたびに検索が実行され、表示が遅くなってしまいます。
そのため、恐らく、地図形式を切り替える際にいちいち検索を実施しないようにして高速化し、サーバー負荷も軽減させる仕組みになっているのでしょう。
検索窓へ地名を入力し、送信するとn要素の値が自動的に1となりますので、ユーザーがn要素を意識する必要はなく、むしろサーバー負荷を高めたり、誤動作を防ぐためにも、n要素の初期値は0にしておくのが良さそうです。
ほかにも以下の特殊な要素がありました。
| ns | 非JavaScriptモード | ts | 窓サイズ |
| tx | タイルナンバーX | ty | タイルナンバーY |
上記はIE5.5よりも古いブラウザーや、JavaScriptが実行できないブラウザーで閲覧した際に機能する「非JavaScriptモード」で有効に働く要素です。
「非JavaScriptモード」は、解説にあたって私が勝手に付けた名称ですので、ご容赦ください。
正式名称が何なのか、あるいは無いのか全くわかりませんが、ここでは便宜上「非JavaScriptモード」と表記します。
ADSのマップ・システムはIE3.0などで開いても弾かずに、なんとJavaScriptに頼らない「非JavaScriptモード」で地図を簡易的に表示してくれます。
ns要素に1を設定すると、非JavaScriptモードでの描画を強制することも可能なようです。
ただし、非JavaScriptモードでは描画サイズが固定され、縮尺の幅が狭まり、シームレスなスクロールや地図形式の変更、最大化など、あらゆる機能が利用できません。
表示は縦横3x3の9タイルのみで構成され、上下左右の方向ボタンによる1タイルずつの移動と、四隅の拡大・縮小ボタンによる縮尺の変更のみが行えるようです。
PNG画像を表示できないブラウザーのために、タイルを1枚ずつJPEG形式へ変換するプロセスが差し込まれるので、描画に遅延も生じます。
IE3.0とか、本来ならウェブ地図など絶対に利用不可能な環境なのですから、見捨てられないだけでも奇跡です。
tx、ty要素はタイルナンバーで、緯度や経度ではありません(システム・クエリですので気にする必要もありません)。
初期表示の際には、サーバーが初期値の緯度・経度からタイルナンバーを算出してくれますが、移動や拡大・縮小時には中央に表示されたタイルのナンバーが基準となるようです。
ts要素に1を入れると小窓サイズ(315x330px固定)、何も指定しないと480x495px固定で表示されます。
数値を変更して検証しましたが、非JavaScriptモードの画面サイズ(ts要素)の設定は、どうやら0=480x495px、または1以上=315x330pxの2種類です。
横320pxに収まるサイズも用意されているのは、スマホ対応を考えるホームページ製作者にとっても嬉しい配慮ですね。
IE5.5より古いブラウザーにも対応させたい場合には、とりあえず <iframe> のサイズを315x330px固定にしておけば問題なさそうです。
一応、以下の呪文じぇねれーたーでは、表示サイズのデフォルト値を315x330pxにしてある(非JavaScriptモード以外ではts要素が無視される)ので、表示サイズを変更しなければ、あらゆる環境で閲覧者に美味しく食べてもらえる地図窓が完成します。
トラブル対策
糞ブラウザーとして名高いiPhoneやiPadのSafari等は <iframe> のサイズをうまく調整しないので、その問題を解決するために <div> で囲ってゴニョゴニョしておく必要があります。
具体的には以下のようにします。
<style>
.outer_frame {
width: 315px;
height: 330px;
overflow: auto;
}
.inner_frame {
width: 100%;
height: 100%;
}
</style>
<div class="outer_frame">
<iframe scrolling="no" src="hogehoge" class="inner_frame"></iframe>
</div>
内側にある <iframe> のサイズをwidth、height共に100%とした上で、外側の <div> に狙ったサイズを指定する形です。
このコーディングなら、多くのブラウザーでトラブルなく表示されると思われます。
これとは別の問題として、ADSのマップ・システムがメンテナンスやトラブル等で正常に動作しないとページの読込が完了せず、貼り付けるホームページの仕様によっては、そのタイミングでホームページが表示されない事態が考えられます。
※メンテナンスは毎日、主に早朝に行われているようで、その時間帯は地図窓の読み込みが終わりません。
トラブルやメンテナンス中などでページ全体の表示が遅れる事態を回避するため、以下のように、ひととおりページの表示を終えてから地図窓の中身を読み込むようにしたほうが良さそうです。
window.onload = function() {
document.getElementById("map").src
= "http://ads.selfip.com/map/?hogehoge";
}
つまり <iframe src="" id="map"> のように最初は <iframe> 側のsrcを空にしておき、ページを読み込み終えたタイミングで map のsrcを設定すれば問題は解決します。
この方法なら、地図の読み込みに時間がかかるか、何らかの事情で地図窓が読み込めない場合でも、ページ自体は表示を完了できます。
自分で工夫したように偉そうに書いていますが、どちらもADSの実装を丁重にパクらせて頂きました。
ただ、これはJavaScriptの実行を前提とした手法なので、JavaScriptを利用しないで動くようにしたい場合には上記の手法が使えません。
その場合には呪文を直接srcに記述しましょう。
呪文じぇねれーたー
いずれかの項目を変更するたび、下段のテキストボックスへ、呪文を含む、組み込みに必要なソースコード(窓サイズも反映)全体がジェネレートされます。
プレビューを押すと実際の地図窓が表示(窓サイズは固定)されますので、完成品の雰囲気を確認できます。
「呪文をコピー」ボタンを押すと、ジェネレートされたコードがクリップボードにコピーされるので、ホームページの地図窓を組み込みたい位置にペーストすれば(貼り付ければ)、簡単に検索窓が組み込めます。
※ソフトハウス ADS公式地図窓の値(ADSの本部、名古屋電算技術室の位置)がデフォルトになっていますので、カスタマイズしたい部分を変更してください。
特定位置の緯度や経度を調べるには「座標」の設定を「表示」にしてプレビューを押しましょう。
地図の中心点に十字が現れ、地図の上部に、十字の地点の緯度・経度と、表示中の縮尺値がx,y,zの形式で表示されます。
縮尺の最小値は2、最大値は18で、最小値が最大値を上回っているなど、矛盾がある場合は、最小2、最大18を指定したのと同義になります。
非JavaScriptモードでの縮尺の最小値は5、最大値は17で、最小値が最大値を上回っているなど、矛盾がある場合は、最小5、最大17を指定したのと同義になります。
縮尺の初期値が最小値を下回っていたり、最大値を上回っている場合は、最大値に指定されている値の範囲で、表示できる最大の縮尺に設定されます。
ここで1点、申しわけありませんが「IE5.5でも動くぞヤッホぅ！」と散々語っておきながら、呪文じぇねれーたーをIE5.5に完全対応させられませんでした(うぉい)。
一応IE5.5でも動作するようには作っていますが、何かの拍子にスクリプト・エラーが生じるかもしれません。
入力エラーのチェックは一切行っていません。
正直IE8対応も完璧にはできなかったので、IE5.5とかマジ無理、マジ勘弁で、このへんが私の技術の限界のようです。
旧ブラウザー対応に足を突っ込んでみると、いかにADSの技術力が ”ありぇんてぃ” なのか、「謎」と形容されている理由を痛感されられます。
恐らくADSでは、数十人の優秀なエンジニアが、総掛かりで研究開発しているものと思われます。
動かなければ最新のブラウザーで試して頂くか、呪文を直接編集してください(ホントごめん)。
ジェネレートされる完成品は安心のADS製となりますので、IE5.5でもちゃんと動作します。
ソフトハウス ADSに感謝して使いましょう。
《 十文字 じゅもんじぇねれーたー 》
