Google マップの貼り付け用 HTML を valid にする

Google マップの貼り付け用 HTML を valid にする

Posted at August 23,2007 1:23 AM
Tag:[Google, JavaScript]

Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。

1.埋め込み HTML の利用方法

埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします(スクリーンショット右上)。

リンクをクリックすると、HTMLコードがすぐ下に表示されます(下)ので、

「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、

<iframe width="425" height="350" ~

のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。

2.問題点

埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHTML1.1 では廃止されていることと、以下に示す問題のため、この HTML をブログに埋め込むと not Valid になる可能性があります。

  • & が実体参照(&amp;)されていない
  • br 要素の"/"の前に空白がない

3.変換スクリプト

ということで、埋め込み用 HTML を valid にするスクリプトを作成してみました。

上のテキストエリアに Google マップ埋め込み用 HTML を貼り付けて、 object または iframe + object のボタンをクリックすると下のテキストエリアに valid な HTML が表示されますので、それをブログ等に貼り付けてください。

object 要素だけではどうもクロスブラウザにならないようです(IE で正常に表示されない等)ので、現状では iframe + object(条件付きコメント利用)を推奨します。


Windows XP + IE6/IE7/FireFox2/Opera9/Safari3で動作確認し、Markup Validation Service で valid になることを確認していますが、不具合等ございましたらご連絡ください。

参考までに、このスクリプトでは下記の変換を行っています。

  • iframe 要素を object 要素に変更
  • src 属性を data 属性に変更
  • object 要素で不要な属性(frameborder/scrolling/marginheight/marginwidth)を削除
  • object 要素に type="text/html" を追加
  • object 要素の「要素の内容」に「non data」を挿入
  • & を &amp; に置換(object要素内のみ)
  • br 要素に半角空白を付与

4.関連・参考

2008.09.29 Google の出力コードが変更されていたので、ツールを修正しました(frameborder/scrolling/marginheight/marginwidthが削除されない不具合の対処、&の変換削除など)。 2009.02.07 IEでGoogle マップ以降が表示されなくなる不具合を修正しました。
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Googleマップの埋め込みHTML提供開始 from OKANO WEB Cstomize
「Windows Live Writer」などでMSの地図の貼り付けもできました... [続きを読む]

Tracked on August 23, 2007 9:15 AM

Google mapが簡単に貼り付けられるようになりました。 from 4GALAXYのメモ
HTMLのタグをコピーペーストするだけでGoogleマップを使用出来るようになりました。 サンプル 拡大地図を表示 貼り付け方法 Google マップへア... [続きを読む]

Tracked on August 23, 2007 10:08 AM

Google Mapをブログに貼る その2 from いっとくの戯言書庫
 昨日エントリーした、Google Mapをブログに貼る件。なにやらhtmlの内... [続きを読む]

Tracked on August 23, 2007 2:10 PM

GoogleMap埋め込みをvalidに行いたいの巻 from エクステリア明日香:スタッフルーム
昨日ご紹介した、GoogleMapの埋め込み。やはりあちこちで話題になっているよ [続きを読む]

Tracked on August 23, 2007 3:55 PM

from ウェブのあれこれ格納庫
Google マップが HTML を貼り付けるだけで自サイト内に表示できるよう... [続きを読む]

Tracked on August 24, 2007 12:35 PM

Googleマップの貼り付け方 from 美術看板 有限会社すみよし工芸社
Googleマップの地図自体をブログに貼付けるのは、私の知識では問題が有り全然無理で、しかたなく諦めていました。しかし最近になって、Google マップの... [続きを読む]

Tracked on August 24, 2007 6:11 PM

Googleマップの貼り付け方 from 美術看板 有限会社すみよし工芸社
Googleマップがブログやホームページに簡単に貼付けが出来るようになりました... [続きを読む]

Tracked on August 24, 2007 6:20 PM

Google Map貼り付け用タグ生成ツール from blog@ongmap.com
大げさなタイトルですが、ちょっと便利なツールを追加してみました。 POP*POPの 遂にGoogle MapsがYouTubeぐらい簡単に貼り付け可能に!... [続きを読む]

Tracked on August 27, 2007 5:30 PM

Google Mapに新機能が追加 from 栃木事務機 栃木県 ホームページ制作 WEBコンサルティング 福島県
Google マップがHTMLタグの記述で、ブログに張り付けが可能になりました... [続きを読む]

Tracked on August 29, 2007 10:38 AM

Google マップの貼り付け用 HTML を valid にする from 技術ブログ
Google マップが簡単に貼り付けできるようになりました。 大きな地図で見る... [続きを読む]

Tracked on February 7, 2009 6:46 PM

YouTubeテスト from centelude.com blog
ただでさえ天使のミクがうんたらかんたら YouTubeとGoogle MapsのタグをValidにするスクリプトのまとめとか欲しいです。 追記 : 小粋空... [続きを読む]

Tracked on November 23, 2010 2:47 AM
コメント

IEで、Google マップ 以降がレンダリングされない場合があります。わたしの場合サイドバーがあるのに表示されていません。

4.23のデフォルトテンプレートです。

[1] Posted by しきだ博紀 : February 3, 2009 12:59 PM

>しきだ博紀さん
こんにちは。
ご質問の件ですが、スクリプトを修正しましたので、再度お試し頂けますでしょうか。
ご指摘ありがとうございました!

[2] Posted by yujiro logo : February 7, 2009 5:09 PM

IE6、IE7で確認したところ、レンダリングされていました。早速の対応ありがとうございました。

[3] Posted by しきだ博紀 : February 7, 2009 6:44 PM

>しきだ博紀さん
こんにちは。
ご連絡ありがとうございました。
ではでは!

[4] Posted by yujiro logo : February 9, 2009 1:33 PM

すみません、修正していただいたコードではIE以外で表示できませんでした。



IE以外向けの記述

と修正し表示させています。

[5] Posted by しきだ博紀 : February 15, 2009 10:39 PM

すみません、修正していただいたコードではIE以外で表示できませんでした。

<!--[if IE]>
IE向けの記述
<![endif]-->
<!--[if !IE]> <-->
IE以外向けの記述
<!--> <![endif]-->

と修正し表示させています。

[6] Posted by しきだ博紀 : February 15, 2009 10:44 PM

>しきだ博紀さん
こんばんは。
ご指摘ありがとうございました。
また、修正誤り、申し訳ありません。
スクリプトは別途修正したいと思います。
ではでは。

[7] Posted by yujiro logo : February 16, 2009 1:30 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)